Forum Moderators: not2easy
I have another question I hope you can help with.
I am trying to build a little menu that runs across the page as detailed in the code below. It is basically an inline UL, which I got the code from some tutorial website. Quite basic I think.
BUT, always a but... it seems to work fine in IE but in FF, LI items 2, 3 and 4 seems to move down so they are no longer all inline with LI 1.
So question is why and what do I need to do to fix this?
Hope the code below is correct.
Many thanks in advance.
Jon.
code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
ul.pagemenu
{
padding: 0;
margin: 0;
list-style-type: none;
float: left;
width: 100%;
color: #fff;
background-color: #ffffff;
}
ul.pagemenu li
{
display: inline;
}
ul.pagemenu li a
{
float: left;
width: 150px;
color: #ffffff;
background-color: #666666;
padding: 0.2em 1em;
text-decoration: none;
border-right: 1px solid #fff;
}
ul.pagemenu li a:hover
{
background-color: #cccccc;
color: #000000;
}
</style>
</head>
<body>
<ul class="pagemenu">
<li><a href="link1.html">Page 1</a>
<li><a href="link2.html">Page 2</a>
<li><a href="link3.html">Page 3</a>
<li><a href="link4.html">Page 4</a>
</ul>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
ul.pagemenu
{
padding: 0;
margin: 0;
list-style-type: none;
float: left;
width: 100%;
color: #000;
background-color: #fff;
}ul.pagemenu li
{
display: inline;
}ul.pagemenu li a
{
float: left;
width: 150px;
color: #fff;
background-color: #666;
padding: 0.2em 1em;
text-decoration: none;
border-right: 1px solid #fff;
}ul.pagemenu li a:hover
{
background-color: #ccc;
color: #000;
}
</style>
</head>
<body>
<ul class="pagemenu">
<li><a href="link1.html">Page 1</a>
<li><a href="link2.html">Page 2</a>
<li><a href="link3.html">Page 3</a>
<li><a href="link4.html">Page 4</a>
</ul>
<!--
it seems to work fine in IE but in FF, LI items 2, 3 and 4 seems to move down so they are no longer all inline with LI 1.
-->
</body>
</html>
Thanks for looking.
If you reduce the width of the window until you are making it smaller than the width of the navbar UL, they start wrapping under each other.
Is it possible to stop them wrapping so that when the window is smaller than the width of the menu, the window starts to horizontal scroll?
Cheers,
Jon
white-space: nowrap;
Marshall
I simply added:
<div style="white-space:nowrap;">
<ul class="pagemenu">
<li><a href="link1.html">Page 1</a>
<li><a href="link2.html">Page 2</a>
<li><a href="link3.html">Page 3</a>
<li><a href="link4.html">Page 4</a>
</ul>
</div>
Any ideas?
Cheers,
Jon
What happens in IE is very close to what I want. Ideally the pagemenu would be dynamic and fill as the page is resized but I accept I may need to fix the width. What I want to stop happening though, is if the page is wide to stop the paragraph text creeping up into the gap to the right of the pagemenu. Somehow keep that clear to the side. But if I put a clear:both on the <p> then it stays beneath the navbar too!
Also this code for me in FF does not work as well. The pagemenu does not seem to abide to the same rules and the widths don't seem to work. Plus, as mentioned before, they are not inline! they are staggered. I'll try demonstrate:
-_ _ _
the last 3 are like stepped half their height down alongside the first, even when the page is nice and wide, so no funny wrapping going on.
Thats another thing...if the page becomes too narrow, the pagemenu wraps under the navbar...how do I stop this?
Many thanks for your time!
Jon
Sample code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<title>just to validate</title>
<style type="text/css">*
{
margin:0;
padding:0;
}body
{
font-family: Verdana, Arial, Sans-Serif;
color: #000000;
background-color: #666666;
font-size:80%;
text-align: center;
}p,h1,h2,h3
{
padding: 0.5em;
}div.container
{
margin: 1em 5%;
height: 100%;
}div.contents
{
width: 100%;
min-height:400px;
text-align: left;
border: 1px solid black;
background-color:#ffffff;
margin:0 0 10px 0;
padding-bottom: 10px;
}div.navbar
{
float: left;
width:188px;
text-align: left;
margin: 10px 5px;
padding: 10px 0 10px 10px;
background-color: #dcdcdc;
border: 1px solid black;
}div.navbar ul
{
list-style-type: none;
margin-left:0.3em;
}ul.pagemenu
{
position: relative;
padding: 0;
margin-top: 10px;
list-style-type: none;
float: left;
width: 60%;
color: #fff;
background-color: #ffffff;
}ul.pagemenu li
{
display: inline;
white-space:nowrap;
}ul.pagemenu li a
{
float: left;
width: 22%;
color: #ffffff;
background-color: #666666;
padding: 5px ;
text-decoration: none;
border-right: 1px solid #fff;
white-space: nowrap;
}ul.pagemenu li a:hover
{
background-color: #cccccc;
color: #000000;
}
</style></head>
<body>
<div class="container">
<div class="contents">
<div class="navbar">
<ul>
<li>Menu 1</li>
<li> - Sub-menu 1</li>
<li> - Sub-menu 2</li>
<li> - Sub-menu 3</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
</div>
<ul class="pagemenu">
<li><a href="#joursiz">Journal Sizing</a></li>
<li><a href="#stress">Stress Analysis</a></li>
<li><a href="#balc">Balancing</a></li>
<li><a href="#whoknows">who knows</a></li>
</ul>
<p>This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text.</p>
<p>This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text.</p>
<p>This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text.</p>
<p>This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text.</p>
<p>This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text.</p>
<p>This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text.</p>
<p>This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text.</p>
<p>This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text. This is a load of text.</p>
</div>
</div></body>
</html>
