Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need help with a css sidebar/navbar

    I was having a little trouble with css in making my sidebar.png function with links. I need help coding the links to each individual word (Home Products About Design). I do have an understanding of coding but am not a pro so any help would be nice. Just tell me if you need me to explain something. Download nextcom.zip and see what i did wrong. Thank You.

    EDIT: left out the center picture because it was too large.
    Attached Files Attached Files

  • #2
    Regular Coder
    Join Date
    Apr 2012
    Posts
    165
    Thanks
    1
    Thanked 39 Times in 39 Posts
    You've got some quirky things going on with some of your code, but I'm just addressing the image map issue for now.

    Here's the CSS (which should be called externally):
    Code:
    #nav_links {
    	
    	position: absolute;
    	top:0;
    	right:0;
    	width: 578px;
    	height: 74px;
    	
    	background: url('images/sidebar.png')no-repeat;	
    }
    
    #nav_links ul {   
    	margin: 0;   
    	padding: 0;   
    	list-style: none;
     } 
    
    #nav_links a {   
    	position: absolute;       
    	width: 120px;       
    	height: 74px;      
    
    } 
    
    #nav_links .home a {  
    	top: 0px;   
    	left: 0px; 
    }
    
    #nav_links .products a {  
    	top: 0px;   
    	left: 150px; 
    }
    #nav_links .about a {  
    	top: 0px;   
    	left: 300px; 
    }
    #nav_links .design a {  
    	top: 0px;   
    	left: 450px; 
    }
    And here's the updated HTML:
    Code:
    </head>
    
    <body>
    <div id="wrapper">
    <header>
    <a href="index.html"><img src="images/logo.png" id="logo"/></a>
    
    <div id="nav_links"><ul>
    <li class="home"><a href="HOME"> </a></li> 
    <li class="products"><a href="PRODUCTS" ></a></li> 
    <li class="about"><a href="ABOUT"> </a></li> 
    <li class="design"><a href="DESIGN"> </a></li> 
    </ul> 
    </div> 
    
    </header>
    <center>
     <img src="images/nextgen.png">
     </center>
    </div><!-- END wrapper --> 
     </body>
     </html>
    The new code is in red and you'll need to actually point the links to go to the right pages. I rearranged some of your other stuff because you had things in the <head> which should have been in the body and vice-versa. Hope this helps.


  •  

    Posting Permissions

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