...

View Full Version : scalable horizontal nav bar



po3
07-23-2007, 08:01 PM
I need some advise on the css for this horizontal nav bar.

I want the bar to be scalable if the user chooses to make the font bigger. What changes would you suggest to my css to allow this bar to scale better? Currently the background image gets messed up when you the user scales the text.

Sample Nav Bar (http://www.projecto3.com/clients/test/testing.html)

CSS:
body {
margin: 0;
padding: 0;
text-align: center;
background-color: gray;
}

ul#mainNav {
padding:0px;
list-style-type:none;
background: url(images/common/navTile.gif) repeat;
width: 100%;
float: left;
}

ul#mainNav li {
float: left;
}

ul#mainNav a {
float: left;
display: block;
padding: 0 1.2em;
line-height: 2.2em;
font: small-caps 1.3em Georgia, "Times New Roman", Times, serif;
color: #dee8ed;
text-decoration: none;
}

ul#mainNav a:hover {
background: url(images/common/navOn.gif) no-repeat 0 0;
color: white;

}

#wrapper {
width: 85%;
margin: 0 auto;
text-align: left;
}

koyama
07-24-2007, 03:00 AM
What changes would you suggest to my css to allow this bar to scale better? Currently the background image gets messed up when you the user scales the text.
I'm afraid that there may be no good solution to this problem. CSS has its limitations. One cannot create any design that one wants. You may have to alter the design.

rmedek
07-24-2007, 03:16 AM
You could make the blue gradient image three times as tall, and use it as a bottom-aligned background image to a div surrounding the ul, rather than the ul itself. Then, as the ul expands it would give the impression that the background image is growing to contain it.

Just an idea…I don't know I would go that route, but it should work.

po3
07-24-2007, 03:25 AM
rmedek, wouldn't that cause the horizontal line to no run through the type? Could I make the image 3xs as tall like you suggested but get it to align vertically on center so as the height of the bar changes the horzontal would alway be in the cennter of the text? Would a new background image start if the row breaks and drops to the next line or would the image then just now center on the two rows vs the one and therefore not acomplish what I'm looking for.

rmedek
07-24-2007, 03:47 AM
Hm, I'm not sure…lemme do all the work for you and see if it helps:

http://littlethinky.com/examples/bigger_links.php

You should play with the image and the positioning to make it suit your needs. Hopefully this will get you started.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum