-1

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>
Votes + Comments
this is for runing away with the solution never marking thread as solved!
3
Contributors
3
Replies
5
Views
8 Years
Discussion Span
Last Post by Troy III
1

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

0

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

0

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

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.