Jump to content

Menu items dissapear when resize


Bozo

Recommended Posts

Hi,The problem that I discovered is here (CSS tutorial) :) :http://www.w3schools.com/css/tryit.asp?fil...e=trycss_float5The menu items dont stay horizontally when resizing the window (I saw that it can be fixed by changing li with ul in "li {display: inline}".After changing ul with li another problem comes up (damn life!) :If the width is small enough Link 2 and 3 disappear (scroll in the right hand frame).My question is : how you make the menu items stay visible when resizing ?(or is it because of the "ul {display : inline}" ?)

Link to comment
Share on other sites

Try putting the menu within a div with set width (which should be just wide enough to incorporate all the menu elements), that means when the users resizes the window to smaller than the width the body of the page stays wide enough to keep all the elements inline (i.e. they'll get a scroll bar at the bottom instead of the page resizing to fit the new window width)

Link to comment
Share on other sites

Unfortunately life is still... a hctib.The next problem is that with this code(in the tutorial text areas - could it be the reason ?) :

<html><head><style type="text/css">ul{float:left;width:100%;padding:0;margin:0;list-style-type:none;}a{float:left;width:6em;text-decoration:none;color:white;background-color:purple;padding:0.2em 0.6em;border-right:1px solid white;}a:hover {background-color:#ff3300}ul {display:inline}.bingo{  min-width : 460px;}</style></head><body><div class="bingo"><ul><li><a href="#">Link one</a></li><li><a href="#">Link two</a></li><li><a href="#">Link three</a></li><li><a href="#">Link four</a></li></ul></div><p>In the example above, we let the ul element and the a element float to the left.The li elements will be displayed as inline elements (no line break before or after the element). This forces the list to be on one line.The ul element has a width of 100% and each hyperlink in the list has a width of 6em (6 times the size of the current font).We add some colors and borders to make it more fancy.</p></body></html>

I have a positive result with Firefox 1.5 but Avant Browser 10 (based on IE) is showing nice purple stairs.Is it because the browser doesn't work well with div tags ?Do we have to dump the div tags and find other solution ?

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
×
×
  • Create New...