I first want to thank the collective wisdom on these boards. Without you, my coding skills would not be growing. I will be giving back as soon as I am as good.
The boards are littered with this request: centering an image in the header. I have read, reread, ripped code into my css until I am blurry. Admired has a #header section like this:
/* =Header
----------------------------------------------- */
#head-wrapper{
-moz-box-shadow: 0 -5px 5px rgba(0, 0, 0, 0.1) inset;
-webkit-box-shadow: 0 -5px 5px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 -5px 5px rgba(0, 0, 0, 0.1) inset;
background-image: url('images/woven-header.png');
margin: 0px auto;
position: relative;
width: 100%;
}
#branding {
padding-bottom: 10px;
z-index: 2;
}
#header-link {
float: center;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
#site-title {
margin: 0 230px 0 5px;
padding: 1.65625em 0 0;
}
#site-title a {
color: #F7F7F7;
font-size: 36px;
font-weight: bold;
line-height: 38px;
text-decoration: none;
}
#site-title a:hover,
#site-title a:focus,
#site-title a:active {
color: #1982d1;
}
#site-description {
color: #c4c4c4;
font-size: 20px;
font-style:italic;
font-weight: 600;
margin: 0 230px 1.1em 5px;
}
#header-logo{
position: relative;
width: 1010px;
height: 105px;
margin: 0 auto 0 auto;
}
#site-title,
#site-description {
font-family: Garamond, serif;
text-shadow: 0 -1px 0 #555;
}
Now under the #header-logo (as this is what I inserted) I thought a simple margin: 0 auto 0; but no. I have inserted it in every place then thought I ask before tearing this up.
Please provide your insight and solution for me.
Thank you.
