SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question I need help making a horizontal nav list expand left and right

    I have exhausted trial & error, google, and the sitepoint search function. I feel that I am missing a page that explains the technique. Or is it even possible to make a unordered list horizontal navigation span an entire width, no matter the content? I don't know if code will be helpful but here it goes:

    CSS
    Code CSS:
    .navtop2	{
    	position:relative ;
    	display:block;
    	width:870px ;
    	height:24px ;
    	font-size:11px ;
    	font-weight:bold ;
    	background:transparent url('nav_bg1.gif') repeat-x top left ;
    	font-family:Verdana,Arial,Helvitica,sans-serif ;
    	overflow:hidden ;
    	}
    .navtop2 ul	{
    	margin:0 ;
    	padding:0 ;
    	list-style-type:none ;
    	width:auto ;
    	}
    .navtop2 ul li	{
    	display:block ;
    	float:left ; 
    	margin:0 1px 0 0 ;
    	}
    .navtop2 ul li a	{
    	display:block ;
    	float:left ;
    	color:#000000 ;
    	text-decoration:none ;
    	padding:6px 20px 0 20px ;
    	height:24px ;
    	}
    .navtop2 ul li a:hover,
    .navtop2 ul li a.current	{
    	color:#ffffff ;
    	background:transparent url('images/nav_bg1_hover.gif.gif') repeat-x top left ;
    	}
    .navtop2 img	{
    	float:left ;
    	}

    Code HTML4Strict:
    <div class="navtop2">
    	<a href="#"><img src="images/top_www.gif" /></a>
    	<ul style="float:left">
    		<li><a href="" title="">Link 1</a></li>
    		<li><a href="" title="">Link 2</a></li>
    		<li><a href="" title="">Link 3</a></li>
    		<li><a href="" title="">Link 4</a></li>
    		<li><a href="" title="">Link 5</a></li>
    	</ul>
    </div>

    If any of you could point me in the right direction that would be very helpful. Thank you in advance.

  2. #2
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you say the css must handle the html number of items changing without css change, I think it isn't possible.

    If the css can change according to number of items in the html, it is possible to fluidly strech the list to parent width.
    Happy ADD/ADHD with Asperger's

  3. #3
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by erik.j View Post
    Do you say the css must handle the html changing without css change, I think it isn't possible.

    If the css can change according to the html, it is possible to fluidly strech the list to parent width.
    I am willing to try anything that'll work. How do you make the CSS change according to the html? Or I think I misunderstand what you're saying.

  4. #4
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I mean, if the css for the list is manually (or automaticly by server-side script in a CMS) changed when the number of list-item is?

    You said; no matter the content.
    Happy ADD/ADHD with Asperger's

  5. #5
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by erik.j View Post
    I mean, if the css for the list is manually (or automaticly by server-side script in a CMS) changed when the number of list-item is?

    You said; no matter the content.
    Yeah, like if list items were added, the navigation would adjust to fit them in -- evenly spaced list links to fit nicely within the parent width.

    So it doesn't sound like there's a pretty way to do this. I know how to do this with html, but that's not really the same thing and is pretty ugly.

    If there's a concrete solution to this....

  6. #6
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Still not sure about the specification, if you have access to adjust the css when the number of items change.

    Like if you are building the site - there can be a solution. Look at this examples: equal item widths, different item widths.
    Happy ADD/ADHD with Asperger's

  7. #7
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by erik.j View Post
    Still not sure about the specification, if you have access to adjust the css when the number of items change.

    Like if you are building the site - there can be a solution. Look at this examples: equal item widths, different item widths.
    Yes I'm building the site. I'm taking a look at those.

    *Edit: That entire thread... this is what I was looking for. This should work, I'll read through the thing. Thanks a lot, I don't know how it slipped by me. I'll let you know if it doesn't work out

    **Edit: Thanks again. This really worked [to annoying lengths].
    Last edited by tljryan; Feb 8, 2008 at 08:10.


Bookmarks

Posting Permissions

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