SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,146
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    what causes the page destroy when the browser resize

    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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by jemz View Post
    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>.

  3. #3
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,146
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Possibly. Do you have an example?

  5. #5
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,146
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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;
    }

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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

  7. #7
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,146
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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.

  8. #8
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,146
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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

    <div class="class1 class2">
    but how can i put multiple id's in one div?...

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by jemz View Post
    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.

  10. #10
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,146
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •