Jump to content

Tab Menu


garyblackpool
 Share

Recommended Posts

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

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

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

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

For a fluid tab menu buttons, (sorry about height, images used in another posting).tabbuttonR.pngtabbuttonR_H.png<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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...