garyblackpool Posted October 10, 2009 Share Posted October 10, 2009 hi i have a tabbed navigation but it keeps on running into a new line. when it gets too long. How can i stop this?Thanks Gary. #nav{ clear:both; font-weight:bold; color:black; margin-left:4px; float:left; list-style-type:none; background:url(navshadow.gif) no-repeat 8px 100% #fff; padding-bottom:21px; position:absolute; left:15%;}html>body #nav{ margin-left:8px; background:url(navshadow.gif) no-repeat <strong>4px</strong> 100% #fff;}#nav li{ list-style-type:none; float:left; margin:0 0 0 4px; padding:0 0 0 10px ; border-bottom:1px solid #999; background:url(tabgrey.png) #c0c0c0 top left no-repeat; }#nav li a{ color:black; background:url(tabgrey.png) transparent top right no-repeat; display:block; padding:0 10px 0 0; float:left; }#nav li.cur,#nav li.over,#nav li:hover{ background:url(tabblue.gif) top left no-repeat; border-bottom:1px solid #2c6b2c;}#nav li strong,ul#nav li.cur a,ul#nav li.over a,ul#nav li:hover a{ display:block; color:#fff; padding:0 10px 0 0; text-decoration:none; background:url(tabblue.png) transparent top right no-repeat;} <ul id="nav"> <li class="cur"><strong>About jjjjjjjjjjjjjjjjjUs</strong></li> <li><a href="index.html">Garden</a></li> <li><a href="step2.html">Kitchen</a></li> <li><a href="step3.html">Tent</a></li> <li><a href="step4.html"></a>Pets Corner</li> <li><a href="step4.html"></a>The Shed</li></ul> Link to comment Share on other sites More sharing options...
jlhaslip Posted October 10, 2009 Share Posted October 10, 2009 Can you post a link to the page, please.It would appear that there is another element controlling the page width. When the Navbar gets wider than the element, the navbar is forced onto another line. Might be several ways to solve this. It may require a re-think of the layout criteria. Link to comment Share on other sites More sharing options...
garyblackpool Posted October 10, 2009 Author Share Posted October 10, 2009 Sorry but i dont have a domain available. It has only got a image above the code and nothing else. Here is all the page code.Thank you. <style type="text/css"> body{height:100%;width: 150%;margin:0;} #nav{ clear:both; font-weight:bold; color:black; margin-left:4px; float:left; list-style-type:none; background:url(navshadow.gif) no-repeat 8px 100% #fff; width:100; padding-bottom:21px; position:absolute; left:15%;}html>body #nav{ margin-left:8px; background:url(navshadow.gif) no-repeat <strong>4px</strong> 100% #fff;}#nav li{ list-style-type:none; float:left; margin:0 0 0 4px; padding:0 0 0 10px ; border-bottom:1px solid #999; background:url(tabgrey.png) #c0c0c0 top left no-repeat; }#nav li a{ color:black; background:url(tabgrey.png) transparent top right no-repeat; display:block; padding:0 10px 0 0; float:left; }#nav li.cur,#nav li.over,#nav li:hover{ background:url(tabblue.gif) #3c785c top left no-repeat; border-bottom:1px solid #2c6b2c;}#nav li strong,ul#nav li.cur a,ul#nav li.over a,ul#nav li:hover a{ display:block; color:#fff; padding:0 10px 0 0; text-decoration:none; background:url(tabblue.png) transparent top right no-repeat;} </style> <script type="text/javascript">/*<![CDATA[*//*---->*/function rollover(){ if(!document.getElementById || !document.createTextNode){return;} var n=document.getElementById('nav'); if(!n){return;} var lis=n.getElementsByTagName('li'); for (var i=0;i<lis.length;i++) { lis[i].onmouseover=function() { this.className=this.className?'cur':'over'; } lis[i].onmouseout=function() { this.className=this.className=='cur'?'cur':''; } }}window.onload=rollover;/*--*//*]]>*/</script> </head> <body> <img src="logo.jpg" width="40%" /> <ul id="nav"> <li class="cur"><strong>About Us</strong></li> <li><a href="index.html">Garden Centre</a></li> <li><a href="step2.html">Dahlias Kitchen</a></li> <li><a href="step3.html">Kool Kamping</a></li> <li><a href="step4.html"></a>Pets Corner</li> <li><a href="step4.html"></a>Suttons Buildings</li></ul> </body></html> Link to comment Share on other sites More sharing options...
jlhaslip Posted October 10, 2009 Share Posted October 10, 2009 cssplay.co.uk has a centering ul/li menu that uses various widths of li's.Your use of position-absolute is a factor in this issue, and the code you post above is missing the images, so it is difficult to replicate on my machine.Check out cssplay to see their code. Link to comment Share on other sites More sharing options...
Heartless Posted October 11, 2009 Share Posted October 11, 2009 You haven't defined the width or height of the div. Try adding a width: xxxpx; also it might help if you add overflow: hidden; to your code. Link to comment Share on other sites More sharing options...
dsonesuk Posted October 11, 2009 Share Posted October 11, 2009 For a fluid tab menu buttons, (sorry about height, images used in another posting).<style type="text/css">ul, li a, li a span{height: 24px; margin:0; padding:0; float:left; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color:#555;}li{list-style:none;float:left; margin-right:4px;} /*margin used to separate buttons*/li a, li a span{display:block; text-decoration:none; line-height: 24px; cursor:pointer;}li a{padding-left: 10px; background: url(tabbuttonR.png) no-repeat top left;}li a span{padding-right: 10px; background: url(tabbuttonR.png) no-repeat right top; background-color:#FFF;} /*use matching background colour to match body if using images with transparent corners*/li a:hover{background: url(tabbuttonR_H.png) left top;}li a:hover span{background: url(tabbuttonR_H.png) right top; color:#00F;}</style><div style="display:inline-block; width: 100%;"><ul><li><a href="#"><span>Home</span></a></li><li><a href="#"><span>Profile Profile Profile</span></a></li><li><a href="#"><span>Other Other Other Other Other</span></a></li></ul></div> Link to comment Share on other sites More sharing options...
garyblackpool Posted October 13, 2009 Author Share Posted October 13, 2009 Oh cool thank you for all your help. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.