tabbed menu breaks onto new line

Question

gaz 0 Newbie Poster

14 Years Ago

hi my navigaion keeps on moving onto a new line and i cant seem to stop it. i have tried all that i can think of.

thanks

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 jjjjjjjjjjjjjjjjjUs</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>

web-design

3 Contributors
3 Replies
109 Views
14 Hours Discussion Span
Latest Post 14 Years Ago Latest Post by Troy III

Troy III commented: this is for runing away with the solution never marking thread as solved! +0

All 3 Replies

Troy III 272 Posting Pro

14 Years Ago

hi my navigaion keeps on moving onto a new line and i cant seem to stop it. i have tried all that i can think of.

thanks

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 jjjjjjjjjjjjjjjjjUs</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>

Delete everything marked RED

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

almostbob 866 Retired: passive income ROCKS · Answer 1 · 2009-10-11T04:50:36+00:00

Troy's prior answer, absolutely correct

short expl.
width:100 would work as width:100% defaults as pixels if no unit is set
and without it, makes no difference the body is already set to 100% and attributes are inherited
float:left; is non-functional for a div that occupies the full width
<strong> is a html enhancement that does nothing in css

Troy III 272 Posting Pro · Answer 2 · 2009-10-11T07:47:44+00:00

Troy's prior answer, absolutely correct
short expl.
width:100 would work as width:100% defaults as pixels if no unit is set

Yes , and this is the main factor causing his menu items to drop as new lines since it defaults to 100px width. And the width of 100px is not even enough to accomodate them individualy.

float:left; is non-functional for a div that occupies the full width

Moreover he has positioned the menu wrapper element absolutely. Therefore it is ancored, so the float property will have no effect at all.

<strong> is a html enhancement that does nothing in css

Also causes the drop of css background statements involved erronuosly. And may rise some other unpredictable effects iin the document structure and layout rendering as a whole.

Regards

tabbed menu breaks onto new line

Recommended Answers Collapse Answers

All 3 Replies

Recommended Answers