Hi All,

I am trying to revamp my home page but am having some problems with aligning my logo and nav bar.

On my bigger screen, my logo is way too far to the left. Ideally, I would like to align my logo and nav bar in the centre of the page so that when the page is resized, the logo will not end up too far to the left. Here is the code I have:


#my_header {
height: 125px;
margin: 0 0px 15px; /* top right/left bottom*/
padding: 0 0 0 20px;
}

#my_banner {
width: 600px;
height: 125px;
margin: -20px 0 0 -40px;
background: url(http://www.lisasolonynko.com/photos/...69_PkkyV-L.jpg) no-repeat;
_background: none;
_filter:progidXImageTransform.Microsoft.AlphaIma geLoader (enabled=true,
sizingmethod=image, src='http://www.lisasolonynko.com/photos/824412069_PkkyV-L.jpg');
}


Any help would be awesome.

Lisa

lisasolonynko.com

First, you need to fix your menu HTML. The reason I dislike these drop-down CSS hack menu is most people make mistakes in their HTML and it goofs things up. You had a couple things wrong, include a </ul> tag in the completely wrong place. Replace your custom header with this:

<div id="my_header">
<div class="menu">
<ul>
   <li><a href="/">Home</a></li>
   <li><span style="font-size: 13pt;">&nbsp;|&nbsp;</span></li>
   <li><a class="drop" href="/Portfolio">Portfolio
        <!--[if gte IE 7]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul>
            <li><a href="/Portfolio/People/7517811_DC7Ja#811031088_YCZis">People</a></li>
            <li><a href="/Portfolio/Travel-And-Places/7517840_Ya2NJ#811013317_9i7yP">Travel</a></li>
            <li><a href="/Portfolio/Animals/7517807_gFuYU#810806460_EjXti">Animals</a></li>
            <li><a href="/Portfolio/Abstracts-And-Objects/7517821_4cNZs#687519128_36QR3">Abstracts/Objects</a></li>
            <li><a href="/Portfolio/Nature/7517832_hWa4H#772588688_PpBxP">Nature</a></li>
            <li><a href="/Portfolio/Digital-Artwork/6649016_mKxLX#424322307_2jWJh">Digital Design</a></li>
 </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
   <li><span style="font-size: 13pt;">&nbsp;|&nbsp;</span></li>
   <li><a href="/Portfolio/Clients">Proofs
  <!--[if gte IE 7]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul>
            <li><a href="/Portfolio/Clients">Client Galleries</a></li>
        </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
   </li>
   <li><span style="font-size: 13pt;">&nbsp;|&nbsp;</span></li>
   <li><a class="drop" href="/gallery/6656887_L3ho6">Tear Sheets</a></li>
   
   <li><span style="font-size: 13pt;">&nbsp;|&nbsp;</span></li>
   <li><a class="drop" href="gallery/6649059_cLRPK">About
        <!--[if gte IE 7]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]-->
</li>
   <li><span style="font-size: 13pt;">&nbsp;|&nbsp;</span></li>
   <li><a class="drop" href="http://lmsolonynko.wordpress.com/">Blog
        <!--[if gte IE 7]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]-->
</li>
        </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</div>  


<!-- closes menu -->
<div id="my_banner">
<a href="/">
<img src="/img/spacer.gif" alt="" border="0" height="125" width="600">
</a>
</div>  <!-- closes my_banner -->
</div>  <!-- closes my_header -->

Then, to contain the width of the custom header, add this CSS to set the width and center it:

#my_header {width: 900px; margin: 0 auto;}

Then, I'd suggest you change the width specified for .menu to something that is just enough to hold the menu (like 500px).

Thank you so much for lending me a hand.

One problem. I put #my_header {width: 900px; margin: 0 auto;} in and now I can't see my logo. It looks like it is shifted down below the nav.

Thanks again for taking the time to help me out.

Lisa

Originally Posted by lisasolonynko Thank you so much for lending me a hand. One problem. I put #my_header {width: 900px; margin: 0 auto;} in and now I can't see my logo. It looks like it is shifted down below the nav. Thanks again for taking the time to help me out. Lisa

That's because you messed up the first part of your CSS when you pasted that in. Change the whole #my_header and #my_banner section at the start of your CSS to this:

#my_header {
   height: 140px;
   margin: 0 auto; /* top right/left bottom*/
   width: 900px; 
}

#my_banner {
   width: 281px;
   height: 140px;
   background: url(http://www.lisasolonynko.com/photos/824412069_PkkyV-L.jpg) no-repeat;
  _background: none;
  _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true,
   sizingmethod=image, src='http://www.lisasolonynko.com/photos/824412069_PkkyV-L.jpg');
}

And the whole thing will look a lot more centered if you fix the width of the .menu object in your CSS like I mentioned in my previous post too.

Thank you so much John. Worked like a charm.

Lisa