SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2011
    Location
    India
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Horizontal Navigation with right side bulltet - Having Problem in Hover li

    Dear All,

    I am facing problem in this navigation when my cursor goes to right side navigation my text of the <a> tag is not coming, please help me out..


    HTML:

    <div id="Header_nav">
    <div class="nav_container">
    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#" >Products</a></li>
    <li><a href="#">Apps</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Explore</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contacts</a></li>
    </ul>
    </div>
    </div>

    css:

    #Header_nav {
    height:50px;
    margin:0;
    background-size:100% 100%;
    border-bottom:1px solid #e2e2e2;
    background-color:#f7f7f7;
    }


    .nav_container{width:1200px;
    margin:0 auto;
    padding:0;
    }

    .nav_container ul {list-style-type:none; margin:0 0 0 97px; padding:0; overflow:hidden;}
    .nav_container li
    {float:left; margin:0 0px 0 0px; background:transparent url(header_nav_bullet.png) no-repeat; background-position:right; margin:0 12px 0 0px;}

    .nav_container li:hover
    {background:transparent url(header_nav_bullet_selected.png) no-repeat;background-position:right; background-color:#333;}

    .nav_container ul li a
    {display:block; text-decoration:none; padding:17px 16px 0px 10px; height:33px; font-family:Arial; font-size:15px; font-weight:bold; color:#333; text-transform:capitalize; border-right:0px solid #000; margin-right:5px;}

    .nav_container ul li a:hover{color:#fff;}


    Horiz_Nav.png

    header_nav_bullet_selected.png

    header_nav_bullet.png

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    HI,

    You have a 5px margin-right on the anchor so there will be 5px of dead space to the right of the anchor where you will lose focus on the anchor. Remove the margin from the anchor and apply it to the parent list element instead.

    However, you would be better off applying the image and hover effect to the anchor instead and thus support all older browers also.

    Code:
    #Header_nav {
    	height:50px;
    	margin:0;
    	background-size:100% 100%;
    	border-bottom:1px solid #e2e2e2;
    	background-color:#f7f7f7;
    }
    .nav_container {
    	width:1200px;
    	margin:0 auto;
    	padding:0;
    }
    .nav_container ul {
    	list-style-type:none;
    	margin:0 0 0 97px;
    	padding:0;
    	overflow:hidden;
    }
    .nav_container li {
    	float:left;
    	margin:0 0px 0 0px;
    	margin:0 12px 0 0px;
    }
    .nav_container ul li a {
    	background:url(header_nav_bullet.png) no-repeat 100% 0;
    	display:block;
    	text-decoration:none;
    	padding:17px 16px 0px 10px;
    	height:33px;
    	font-family:Arial;
    	font-size:15px;
    	font-weight:bold;
    	color:#333;
    	text-transform:capitalize;
    	border-right:0px solid #000;
    	margin-right:5px;
    }
    .nav_container ul li a:hover {
    	color:#fff;
    	background:#333 url(header_nav_bullet_selected.png) no-repeat 100% 0;
    }

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2011
    Location
    India
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,

    I want 5px margin in between my <a> tag and arrow, if i am removing 5px margin-right then it's coming together..

    plz. help.

    thanx.

    Quote Originally Posted by Paul O'B View Post
    HI,

    You have a 5px margin-right on the anchor so there will be 5px of dead space to the right of the anchor where you will lose focus on the anchor. Remove the margin from the anchor and apply it to the parent list element instead.

    However, you would be better off applying the image and hover effect to the anchor instead and thus support all older browers also.

    Code:
    #Header_nav {
    	height:50px;
    	margin:0;
    	background-size:100% 100%;
    	border-bottom:1px solid #e2e2e2;
    	background-color:#f7f7f7;
    }
    .nav_container {
    	width:1200px;
    	margin:0 auto;
    	padding:0;
    }
    .nav_container ul {
    	list-style-type:none;
    	margin:0 0 0 97px;
    	padding:0;
    	overflow:hidden;
    }
    .nav_container li {
    	float:left;
    	margin:0 0px 0 0px;
    	margin:0 12px 0 0px;
    }
    .nav_container ul li a {
    	background:url(header_nav_bullet.png) no-repeat 100% 0;
    	display:block;
    	text-decoration:none;
    	padding:17px 16px 0px 10px;
    	height:33px;
    	font-family:Arial;
    	font-size:15px;
    	font-weight:bold;
    	color:#333;
    	text-transform:capitalize;
    	border-right:0px solid #000;
    	margin-right:5px;
    }
    .nav_container ul li a:hover {
    	color:#fff;
    	background:#333 url(header_nav_bullet_selected.png) no-repeat 100% 0;
    }

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by shahzadsiddiqui8 View Post
    Dear Paul,

    I want 5px margin in between my <a> tag and arrow, if i am removing 5px margin-right then it's coming together..

    plz. help.

    thanx.
    Just increase the right padding of the anchor by 5px more instead. The bullet image is in the background anyway so margins don't really come into play here unless you are trying to do something less obvious than I expected.

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2011
    Location
    India
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you 2 good man..
    Thanx a lot..


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
  •