SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Position an icon under navigation bar link

    Hi all,

    I a CSS newbie and I am currently can't a good solution for my coding problem.

    I am trying to position and icon under the selected link in the navigation bar. The icon needs to be pushed out of the link box, so it covers the drop-shadow of the navigation bar. Here is the mockup:

    navbar.JPG

    Thanks in advance for your help.

    The HTML is as follows:
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    
    </head>
    
    <body id="leggi">
    <div id="wrapper">
    	<div id="header">
    		<div id="main_nav">
    		<div id="main_nav_content"
    		<ul>
    		<li><a id="leggi_link"class="link_primario" href="#">Leggi</a></li>
    		<li><a id="pubblica_link" class="link_primario padding_maggiore" href="#">Pubblica</a></li>
    		</ul>
    		</div>
    		</div>
    	</div>
    The CSS is

    Code CSS:
    #main_nav {
    	border: 0;
    	margin: 4px 2px;
    	padding: 0 0;
    		/*Rounded corners per Chrome,Safari, Mozilla e IE9*/
    	-moz-border-radius: 6px;
    	-webkit-border-radius: 6px;
    	border-radius: 6px;
    	/*Sfondo gradiente per Chrome, Safari, Mozilla e IE9*/
    	background-image: -moz-linear-gradient(bottom,  #e2e2e2,  #f6f6f6); /*Gradiente per Mozilla*/
    	background-image: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#e2e2e2)); /*Gradiente per Chrome e Chrome*/
    	-webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,.47); /*Ombre per Chrome e Chrome*/
    	-moz-box-shadow: 0 2px 4px 0 rgba(0,0,0,.47);/*Ombre per Mozilla*/
    	box-shadow: 0 2px 4px 0 rgba(0,0,0,.47);
    	height: 58px;
    }
     
    #main_nav #leggi_link, #main_nav #pubblica_link {
    	display: block;
    	font-size: 1.59375em; /* 25.5px/16px */
    	padding:0 0;
    	margin-left: 50px;	
    	text-align: center;
    	line-height: 58px;
    }
     
     
     
    #pubblica_link:hover { color: #cf1d3c; text-decoration: none; }
    #leggi_link:hover { 
    	color: #cf1d3c; 
    	text-decoration: none; 
     
    }
     
    #leggi #leggi_link  { color: #cf1d3c;
     
    }
     
    #main_nav #pubblica_link.padding_maggiore{
    	margin-left: 56px;}

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Hi elektray. Welcome to SitePoint.

    Given the complexity of that layout, I'd say use images—one for the normal state and one for the current state—that includes the shadow and all.

  3. #3
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    thanks for the quick response. I wanted really to refrain for using images as my layout is liquid. Is there really no other alternative?

    Thank you.
    Daniela

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    The best alternative is to stop trying to be so fancy on the web, but most people don't want to hear that.

  5. #5
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    you could prob do a css triangle there. But not with the shadow too. At least not look perfect. Your best using images. A sprite menu.

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

    If you are using an image for the small arrow then you could do it like ths:

    Code:
    #main_nav_content li{float:left}
    #main_nav_content li a{position:relative;}
    main_nav_content li a:hover{visibility:visible}
    #main_nav_content li a:hover span{
    position:absolute;
    background:red;/* add your image icon here */
    width:16px;
    height:16px;
    bottom:-10px;
    left:50%;
    margin-left:-8px;	
    }
    Code:
    <li><a id="leggi_link"class="link_primario" href="#">Leggi<span></span></a></li>


Tags for this Thread

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
  •