What causes the page destroy when the browser resize

HTML & CSS
1

Hi, I am just curious about resizing the browser why is that when i am going to resize the browser my page will be destroy.like for example i have Menu,when i am going to resize the browser the Menu will be destroy.
the li elements will go down.is this because we use a float?..

Thank you in advance.

2

I can be the reason. It’s not hard to stop this sort of thing, though. For example, you can set a min-width on the <ul>.

3

Hi ralph, thank you for the reply,you mean that if we put min-width to ul this will not be destroy or fallen down?

4

Possibly. Do you have an example?

5 


<!Doctype html>

<html lang="en">
 <html>	
 <head>
   <meta charset="utf-8" />
   <link rel="stylesheet" href="menu3.css" style="text/css" />
   
 </head>
	


  <body>
    <ul class="nav">
       <li><a href="#">home</a></li>
	   <li><a href="#">about</a>
	       <ul>
		       <li><a href="#">how</a></li>
			   <li><a href="#">where</a></li>
			   <li><a href="#">when</a></li>
	       </ul>
	   </li>
	   <li><a href="#">services</a>
	      <ul>
			  <li><a href="#">Web Design</a></li>
			  <li><a href="#">Internet Marketing</a></li>
			  <li><a href="#">Hosting</a></li>
			  <li><a href="#">Domain Names</a></li>
			  <li><a href="#">Broadband</a></li>
		  </ul>
	   </li>

    </ul>	

 </body>



</html>






.nav{
	list-style: none;	
	padding: 0;
	margin: 0;
	
}



.nav li a:first-letter{
	text-transform: uppercase;
}

.nav > li{
	float: left;
	margin-right: 0.1em #959597;
    min-width: 8em;
	border: solid 1px #959597;
}


.nav li a:link,
.nav li a:visited{
	text-decoration: none;	
	display: block;
	color: #606061;
}



.nav li ul {
  list-style: none;
  margin: 0;
  padding: 0;
   
}

.nav ul li{
	display: none;
}

.nav li:hover  li{
  display: block; 
  text-align: justify;
  color: #606061;
}
	 
.nav li:hover li a:hover, .nav li:hover a
{
  color: #FFFFFF;
  background-color: #E56500;
}


.nav li:hover li a{
	color:#606061;	
	background-color: #d2cb08;
}
6

Hi,

The list items are floated so that means when the page is smaller they will wrap to the next line and the menu will break. You need to set a min-width on the main ul (.nav) that is wide enough to contain your top level menu items and then they won’t drop.

That menu is no use though for the reasons outlined in this thread and when the dropdown drops down it will push the content below it down and up the page like a yo yo :slight_smile:

7

I set to this

ul.nav{
min-width: 400px;
}

please correct me if i am wrong…It’s working i tried in FF and chrome.

8

Hi paul,…i have some question…as i have understand when we make a wrapper we should put min-width? in order of the the some floated elements will not be destroy inside in this wrapper?

by the way i forgot to ask when we put multiple classes in the element we use like this

<div class=“class1 class2”>

but how can i put multiple id’s in one div?..

9

Yes min-width 400px will work as long as that is wider than the minmum width of that nav. You have set the lists to min-width: 8em so you should have set your min-width in em to match the total number of list elements.

In a dropdown its much easier to work with fixed widths and you can avoid issues like the menu dropping.

but how can i put multiple id’s in one div?..

You can’t do that as ids are unique and there can only be one id per element and unique to that page. An id is a unique reference to that specific element and so cannot have any other ids on it. It would be like putting the number 21 and 72 on your front door - no one would know what’s right.

10

Thank you so much i learned a lot with you. :slight_smile: