Welcome to WebmasterWorld Guest from 54.198.164.83

Forum Moderators: not2easy

Message Too Old, No Replies

CSS driven Inline UL Menu

Inline UL not staying Inline

     
8:23 am on Apr 23, 2008 (gmt 0)

New User

10+ Year Member

joined:Apr 17, 2008
posts:22
votes: 0


Hello again (second topic),

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>

10:49 pm on Apr 23, 2008 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 29, 2003
posts: 1676
votes: 0


Looks fine to me in FF, Opera, and IE. Maybe something else is having an impact on this 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: #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>

6:45 am on Apr 24, 2008 (gmt 0)

New User

10+ Year Member

joined:Apr 17, 2008
posts:22
votes: 0


Oh thats strange...well I shall recheck it out when I get home on FF (only got IE here at the mo) but it didn't work last time. Maybe there is something else in the original page that upset it, as this bit of code was generated to just isolate the UL.

Thanks for looking.

7:18 am on Apr 24, 2008 (gmt 0)

New User

10+ Year Member

joined:Apr 17, 2008
posts:22
votes: 0


OK another question based on the same code...

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

11:40 am on Apr 24, 2008 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Sept 4, 2001
posts: 2246
votes: 49


In the div that contains the navigation, you can add

white-space: nowrap;

Marshall

1:11 pm on Apr 24, 2008 (gmt 0)

New User

10+ Year Member

joined:Apr 17, 2008
posts:22
votes: 0


I did try this, but it does not work for me in IE6.

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

1:32 pm on Apr 24, 2008 (gmt 0)

New User

10+ Year Member

joined:Apr 17, 2008
posts:22
votes: 0


OK the only way I can get it to work is to specify a fixed width for the UL instead of 100%, but this is not really what I wanted as I wanted a fluid menu that would expand to fill the page(or div) and shrink down to a minimum width and then start the page horizontal scrolling...NOT start wrapping each LI under each other.
7:11 am on Apr 25, 2008 (gmt 0)

New User

10+ Year Member

joined:Apr 17, 2008
posts:22
votes: 0


OK for now I am leaving this out of my site as I cannot get it to work in FF. In the whole context I am trying to put this menu div across the top of a div, but filling the gap between an already left floating div (navbar). See code below.

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>&nbsp;&nbsp;- Sub-menu 1</li>
<li>&nbsp;&nbsp;- Sub-menu 2</li>
<li>&nbsp;&nbsp;- 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>