On Mon, Jul 6, 2009 at 2:22 PM, Greg Wilker<[email protected]> wrote:
> Hello Everyone,
>
> I would like to improve the current top navigation with the following:
>
> 1. center text/links in middle of bar
>
> 2. narrow bar height
>
>
> However, I currently have been unable to do the first and when attempting
> the 2nd, it breaks the background image(s).
>
> any thoughts/help?
>
> http://www.achildsdream.com/htn/
>
With the current HTML and CSS, I made these modifications to the CSS
and got what you wanted (I think) in Firefox, Mac. That's all I've
tested it in, but it might be a start:
#navMid {
background: url(/htn/graphics/nav_mid.gif) repeat-y;
padding: 0px 0px 0px 9px;
vertical-align: text-bottom;
}
#navMid ul {width:98%; margin:0 auto;}
Along with the above, I added a <br style="clear:left;" /> just after
the closing </ul> for the #navMid ul
Having said that, I think you could get around having to add that
clearing element if you let the <div id="navTop"> ENCLOSE the ul
rather than be a separate element. I haven't tested that, but I
believe it would work. Then, just set the background image on #navTop
to be at the top with no-repeat. I believe that should work.
The centering method is to specify a width less than 100% for the UL,
then to use the margin:0 auto; as in the modified CSS above.
Hope this helps some.
Chris
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
