ToonMariner Posted January 18, 2007 Share Posted January 18, 2007 Hi guys,I need a little help.Here is my html for a horizontal navigation bar.[code] <div id="topnav"> <ul> <li class="live" id="topnavfirst"><a href="/home" title="Home" accesskey="h">Home</a></li> </ul> </div>[/code]OK that is easy enough.....This is going through a cms so the client will be able to add/remove elements of the navigation.What I need is the list elements to fill the width avialable regardless of the number of elements.so just 1 li will be full width, 2 half the width, 3 third and so on.I hope I explained that ok. What I need is some css that will accomplish this - many thanks in advanced. Link to comment https://forums.phpfreaks.com/topic/34714-ul-for-naviagtion-and-100-width/ Share on other sites More sharing options...
jcombs_31 Posted January 18, 2007 Share Posted January 18, 2007 As far as I know, you can't do it with CSS alone, you need a little javascript. You can do it like this:[code]<script type="text/javascript">function set_size(list) { var nodes = document.getElementById(list).getElementsByTagName("LI"); var percent = 100 / nodes.length; for(var i = 0; i < nodes.length; i++) { nodes[i].style.width = percent + "%"; }}</script><style type="text/css">ul { width: 100%; margin: 0; padding: 0; background-color: #ccc;}li { width: 100%; list-style: none; margin: 0; padding: 0; display: block; float: left; background-color: #eee;}</style>[/code]in your html[code] <body onload="set_size('list');">[/code]the actual list[code]<ul id="list"> <li>Testing 1</li> <li>Testing 2</li> <li>Testing 3</li> <li>Testing 4</li></ul>[/code]Not sure if there is a better way to do it, but I did test it and it works fine. Link to comment https://forums.phpfreaks.com/topic/34714-ul-for-naviagtion-and-100-width/#findComment-163711 Share on other sites More sharing options...
ToonMariner Posted January 18, 2007 Author Share Posted January 18, 2007 hmmmmmmmI don't like the idea of using js just to get the layout - think I will just let them be as wide as they want and run into the next line when neccessary.Thank you for your response though - I will keep this for a later date as the client doesn't want any js on this site. I will use it on a different site where it can sit happily safe in teh knowledge that no-body cares if its there or not.Cheers. Link to comment https://forums.phpfreaks.com/topic/34714-ul-for-naviagtion-and-100-width/#findComment-163775 Share on other sites More sharing options...
nogray Posted January 18, 2007 Share Posted January 18, 2007 I know most people hate to use tables right now (CSS only approach) but tables can come in handy a lot of times.You're issue can be solved if you put the navigation in a table with 100% width. You're client won't even know the difference if you use tables or lists, as long as it look like what he wants.Otherwise, I assume you're use PHP to generate the menu. Just get the number of links that you have, and divide it by 100% using PHP. Finally, assign the output to the list items. Link to comment https://forums.phpfreaks.com/topic/34714-ul-for-naviagtion-and-100-width/#findComment-163840 Share on other sites More sharing options...
jcombs_31 Posted January 18, 2007 Share Posted January 18, 2007 The worst thing that happens if JS is disabled is that the list iteself will still be 100% but each item will not span the full width. I don't understand the concept of wanting each link to be so big in the first place. I will just make the UL span 100% and let each list item be fixed or padded around the text...I'm sure you can do something with PHP to get the desired effect, but seems like a lot of extra work for something so trivial. Link to comment https://forums.phpfreaks.com/topic/34714-ul-for-naviagtion-and-100-width/#findComment-163854 Share on other sites More sharing options...
ToonMariner Posted January 18, 2007 Author Share Posted January 18, 2007 the triviality is the issue - I aint gonna do too much work for not too much benefit. Link to comment https://forums.phpfreaks.com/topic/34714-ul-for-naviagtion-and-100-width/#findComment-164029 Share on other sites More sharing options...
jcombs_31 Posted January 19, 2007 Share Posted January 19, 2007 I don't think 4-5 lines of javascript is very much work to get the desired effect that you want. Link to comment https://forums.phpfreaks.com/topic/34714-ul-for-naviagtion-and-100-width/#findComment-164164 Share on other sites More sharing options...
ToonMariner Posted January 19, 2007 Author Share Posted January 19, 2007 ANY javascript to get the layout effect is too much ;) Link to comment https://forums.phpfreaks.com/topic/34714-ul-for-naviagtion-and-100-width/#findComment-164384 Share on other sites More sharing options...
jcombs_31 Posted January 19, 2007 Share Posted January 19, 2007 I guess, I'm not a big fan of using javascript, but sometimes it is acceptable, especially when it degrades to something still very usable. Link to comment https://forums.phpfreaks.com/topic/34714-ul-for-naviagtion-and-100-width/#findComment-164402 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.