SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Enthusiast thehung1724's Avatar
    Join Date
    Sep 2013
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    2 navigations in header

    Here is my HTML code:

    HTML Code:
    <header>
    	<div class="container clearfix" id="header_wrap">		
    		<a href="#"><img src="images/logo.png" alt="logo" id="logo"></a>
    
    		<div id="tel">
    			<p>Contact us by the telephone number below</p>
    			<p class="tel_no">01657 049 865</p>
    		</div>
    
    		<nav id="pages" class="clearfix">
    			<ul>
    				<li><a href="#">Home</a></li>
    				<li><a href="#">About</a></li>
    				<li><a href="#">Donate</a></li>
    				<li><a href="#">Video</a></li>
    				<li class="last"><a href="#" class="last">Contact</a></li>
    			</ul>
    		</nav>	<!-- end pages -->
    
    		<nav id="menu" class="clearfix">
    			<ul>
    				<li><a href="#">Home</a></li>
    				<li><a href="#">Donate</a></li>
    				<li><a href="#">About</a></li>
    				<li><a href="#">Tour</a></li>
    				<li><a href="#">Nature</a></li>
    				<li><a href="#">Tips</a></li>
    				<li><a href="#">Contact</a></li>
    			</ul>
    		</nav>	<!-- end menu -->
    	</div>
    </header> <!-- end header -->
    CSS code
    Code:
    #header_wrap{
    	position: relative;
    
    	#tel{
    		position: absolute;
    		right: 0;
    		top: 10px;
    
    		p{
    
    		}
    	}
    }
    
    #logo{
    	float: left;
    	display: block;
    }
    
    /* Navigation */
    
    #pages{
    	float: right;
    
    	ul{
    		margin-top: 70px;
    
    		li{
    			float: left;
    			margin-right: 5px;
    
    			a{
    				color: @link-color;
    				display: block;
    				padding: 0 10px;
    				font-weight: bold;
    				.transition();
    
    				&:hover{
    					background: @border ;
    					color: @light-color;
    					.round();
    				}			
    			}
    		}
    	}
    }
    
    #menu{
    	ul{
    		margin-top: 107px;
    		.round();
    		background: white;
    		border: 1px solid #0c932f;
    
    		li{
    			float: left;
    		}
    	}
    }
    Why pages and logo work with float very well but if i setting float for menu, it will like this:
    Untitled.jpg

    Otherwise:
    1.jpg

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Can you post the pure CSS as I don't understand Less (or whatever that code above is).

    From your drawing it looks like you are giving 100% width to the floated list items somewhere.

  3. #3
    SitePoint Enthusiast thehung1724's Avatar
    Join Date
    Sep 2013
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    here is my pure css

    Code:
    #header_wrap {
      position: relative;
    }
    #header_wrap #tel {
      position: absolute;
      right: 0;
      top: 10px;
    }
    #header_wrap #tel a {
      float: right;
      font-size: 20px;
      font-weight: 600;
      cursor: pointer;
      -webkit-transition: color 0.2s ease-out;
      -moz-transition: color 0.2s ease-out;
      -ms-transition: color 0.2s ease-out;
      -o-transition: color 0.2s ease-out;
      transition: color 0.2s ease-out;
    }
    #header_wrap #tel a:hover {
      text-decoration: underline;
      color: #209a28;
    }
    #main-content {
      margin-top: 33px;
    }
    /* Navigation */
    #pages {
      float: right;
    }
    #pages ul {
      margin-top: 70px; 
    }
    #pages ul li {
      float: left;
      margin-right: 5px;
    }
    #pages ul li a {
      color: #209a28;
      display: block;
      padding: 0 10px;
      font-weight: bold;
      -webkit-transition: color 0.2s ease-out;
      -moz-transition: color 0.2s ease-out;
      -ms-transition: color 0.2s ease-out;
      -o-transition: color 0.2s ease-out;
      transition: color 0.2s ease-out;
    }
    #pages ul li a:hover {
      background: #cacaca;
      color: #ffffff;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
    }
    #menu ul li{
    float: left;
    }
    #menu ul li a {
      display: block;
      padding: 0 20px;
      color: #ffffff;
      font-weight: bold;
      text-transform: uppercase;
      font-size: 15px;
      height: 41px;
      line-height: 41px;
      -webkit-transition: color 0.2s ease-out;
      -moz-transition: color 0.2s ease-out;
      -ms-transition: color 0.2s ease-out;
      -o-transition: color 0.2s ease-out;
      transition: color 0.2s ease-out;
    }
    #menu ul li a:hover {
      color: #00c0ff;
    }

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    It's not clear from your code what you are asking. This is how to post a proper code sample:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <style>
    
    #header_wrap {
      position: relative;
    }
    #header_wrap #tel {
      position: absolute;
      right: 0;
      top: 10px;
    }
    #header_wrap #tel a {
      float: right;
      font-size: 20px;
      font-weight: 600;
      cursor: pointer;
      -webkit-transition: color 0.2s ease-out;
      -moz-transition: color 0.2s ease-out;
      -ms-transition: color 0.2s ease-out;
      -o-transition: color 0.2s ease-out;
      transition: color 0.2s ease-out;
    }
    #header_wrap #tel a:hover {
      text-decoration: underline;
      color: #209a28;
    }
    #main-content {
      margin-top: 33px;
    }
    /* Navigation */
    #pages {
      float: right;
    }
    #pages ul {
      margin-top: 70px; 
    }
    #pages ul li {
      float: left;
      margin-right: 5px;
    }
    #pages ul li a {
      color: #209a28;
      display: block;
      padding: 0 10px;
      font-weight: bold;
      -webkit-transition: color 0.2s ease-out;
      -moz-transition: color 0.2s ease-out;
      -ms-transition: color 0.2s ease-out;
      -o-transition: color 0.2s ease-out;
      transition: color 0.2s ease-out;
    }
    #pages ul li a:hover {
      background: #cacaca;
      color: #ffffff;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
    }
    #menu ul li{
    float: left;
    }
    #menu ul li a {
      display: block;
      padding: 0 20px;
      color: #ffffff;
      font-weight: bold;
      text-transform: uppercase;
      font-size: 15px;
      height: 41px;
      line-height: 41px;
      -webkit-transition: color 0.2s ease-out;
      -moz-transition: color 0.2s ease-out;
      -ms-transition: color 0.2s ease-out;
      -o-transition: color 0.2s ease-out;
      transition: color 0.2s ease-out;
    }
    #menu ul li a:hover {
      color: #00c0ff;
    }
    
    </style>
    </head>
    <body>
    
    <header>
    	<div class="container clearfix" id="header_wrap">		
    		<a href="#"><img src="images/logo.png" alt="logo" id="logo"></a>
    
    		<div id="tel">
    			<p>Contact us by the telephone number below</p>
    			<p class="tel_no">01657 049 865</p>
    		</div>
    
    		<nav id="pages" class="clearfix">
    			<ul>
    				<li><a href="#">Home</a></li>
    				<li><a href="#">About</a></li>
    				<li><a href="#">Donate</a></li>
    				<li><a href="#">Video</a></li>
    				<li class="last"><a href="#" class="last">Contact</a></li>
    			</ul>
    		</nav>	<!-- end pages -->
    
    		<nav id="menu" class="clearfix">
    			<ul>
    				<li><a href="#">Home</a></li>
    				<li><a href="#">Donate</a></li>
    				<li><a href="#">About</a></li>
    				<li><a href="#">Tour</a></li>
    				<li><a href="#">Nature</a></li>
    				<li><a href="#">Tips</a></li>
    				<li><a href="#">Contact</a></li>
    			</ul>
    		</nav>	<!-- end menu -->
    	</div>
    </header> <!-- end header -->
    			
    </body>
    </html>
    That way, it's easy for us to test your code. Perhaps set up your code so it demonstrates the problem, and post a code example like I just have, or post an example at at site like CodePen.

    Here's a thread that lists your options: http://www.sitepoint.com/forums/show...Posting-Basics

  5. #5
    SitePoint Enthusiast thehung1724's Avatar
    Join Date
    Sep 2013
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you for information. Hope you help me to solve my problem

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by thehung1724 View Post
    Hope you help me to solve my problem
    As I said, I don't think the code you posted demonstrates the problem. Your code doesn't do what you posted in the screen shot.

  7. #7
    SitePoint Enthusiast thehung1724's Avatar
    Join Date
    Sep 2013
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    here please check my code at codepen, thank you

    Code:
    http://codepen.io/anon/pen/yteKE

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by thehung1724 View Post
    here please check my code at codepen, thank you

    Code:
    http://codepen.io/anon/pen/yteKE
    OK, so what do you want help with? What's not working for you in that layout?

  9. #9
    SitePoint Enthusiast thehung1724's Avatar
    Join Date
    Sep 2013
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it must be like this but i don't know i can't do it. They use position but i'm using float instead.

    Code:
    http://www.izwebz.com/wp-content/uploads/tommy/demo-nature-layout/css/header.html

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    O, I see. Add this to your styles:

    Code:
    #menu {
      overflow: hidden;
    }
    That will force the UL to wrap around the floated LIs. Then you will see the background.

  11. #11
    SitePoint Enthusiast thehung1724's Avatar
    Join Date
    Sep 2013
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i tried by adding class clearfix to #menu, it work well


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
  •