Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    po3
    po3 is offline
    New Coder
    Join Date
    Apr 2007
    Posts
    75
    Thanks
    16
    Thanked 0 Times in 0 Posts

    scalable horizontal nav bar

    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

    CSS:
    Code:
    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; 
    }

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by po3 View Post
    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.

  • #3
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    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.

  • #4
    po3
    po3 is offline
    New Coder
    Join Date
    Apr 2007
    Posts
    75
    Thanks
    16
    Thanked 0 Times in 0 Posts
    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.

  • #5
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •