what causes the page destroy when the browser resize

**jemz** · Nov 27, 2012 17:39

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.

**ralph.m** · Nov 27, 2012 18:42

Originally Posted by jemz

is this because we use a float?

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>.

**jemz** · Nov 28, 2012 07:39

Originally Posted by ralph.m

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>.

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?

**ralph.m** · Nov 28, 2012 07:40

Possibly. Do you have an example?

**jemz** · Nov 28, 2012 07:56

Originally Posted by ralph.m

Possibly. Do you have an example?

Code:

<!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>

Code:


.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;
}

**Paul O'B** · Nov 28, 2012 15:27

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

**jemz** · Nov 29, 2012 09:14

Originally Posted by Paul O'B

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

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.

**jemz** · Nov 29, 2012 09:18

Originally Posted by Paul O'B

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

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

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

**Paul O'B** · Nov 29, 2012 09:50

Originally Posted by jemz

I set to this

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

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.

**jemz** · Nov 29, 2012 10:10

Originally Posted by Paul O'B

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.

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.

Thank you so much i learned a lot with you.

User Tag List

Thread: what causes the page destroy when the browser resize

Thread Tools

Display

what causes the page destroy when the browser resize

Bookmarks

Bookmarks

Posting Permissions