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 6 of 6
  1. #1
    New Coder
    Join Date
    Oct 2011
    Posts
    13
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Unhappy unordered list sprite placement & effecting links

    This sprite was created using an unordered list, because doing it another way just wasn't working out. But now it's off center, and despite playing with different div widths, margins and padding, it still sits too far to the right.



    When I adjust the width of the div that contains this sprite image, or change the padding, it just brings part of it down to the next line, but still sits too far to the right.



    Here's the html and css for the header div.
    Code:
    <div id="header">
    	
    				<div id="navigation">
                           
    					  <ul> 
                          <li class="about"><a href="about.html">About</a></li>
                          <li class="menu"><a href="menu.html">Menu</a>
                          <li class="home" style="width:248px;"><a style="width:248px;" href="index.html">Home</a> 
                          <li class="contact"><a href="contact.html">Contact</a>
                          <li class="cateringOn"><a href="catering.html">Catering</a>
                          </ul>
                          
    			</div>		
    		
    		</div>
    
    #header{
    	width:850px;
    	height:200px;
    	margin:10x auto;
    }
    
    #navigation {
    	margin-right: 30px;
    	position:relative
    }
    
    #navigation li{
    	list-style:none;
    	float: left;
    }
    
    #navigation li, #navigation a{
    	display:block;
    	height:120px;
    	width:120px;
    	text-indent:-9999px;
    }
    
    .about{
    	left:0px; 
    	background: url(images/bamboo_grove_sprite.png) -0px 0px; 
    	opacity: 0.9;
    	margin-right: 10px;
    }
    
    .about a:hover{
    	background: url(images/bamboo_grove_sprite.png) 0 -125px; 
    	opacity: 0.9;
    	margin-right: 10px;
    }
    
    .aboutOn{
    	left:0px; 
    	background: url(images/about_sprite.png) -0px 0px; 
    	opacity: 0.9;
    	margin-right: 10px;
    }
    
    .aboutOn a:hover{
    	background: url(images/about_sprite.png) 0 -125px; 
    	opacity: 0.9;
    	margin-right: 10px;
    }
    
    .menu{
    	left:120px;
    	background: url(images/bamboo_grove_sprite.png) -120px 0px;
    	opacity: 0.9;
    	margin-right: 10px;
    }
    
    .menu a:hover{
    	background: url(images/bamboo_grove_sprite.png) -120px -125px;
    	opacity: 0.9;
    	margin-right: 10px;
    }
    
    .menuOn{
    	left:120px;
    	background: url(images/menu_sprite.png) -120px 0px;
    	opacity: 0.9;
    	margin-right: 10px;
    }
    
    .menuOn a:hover{
    	background: url(images/menu_sprite.png) -120px -125px;
    	opacity: 0.9;
    	margin-right: 10px;
    }
    
    .home{
    	left:244px;
    	background: url(images/bamboo_grove_sprite.png) -241px 0px;
    	opacity: 0.9;
    	margin-right: 10px;
    }
    
    .home a:hover{
    	background: url(images/bamboo_grove_sprite.png) -241px -119px;
    	opacity: 0.9;
    	margin-right: 10px;	
    }
    
    .contact{
    	left:490px;
    	background: url(images/bamboo_grove_sprite.png) -490px 0px;
    	opacity: 0.9;
    	margin-right: 10px;
    }
    
    .contact a:hover{
    	background: url(images/bamboo_grove_sprite.png) -490px -125px;
    	opacity: 0.9;
    	margin-right: 10px;	
    }
    
    .contactOn{
    	left:490px;
    	background: url(images/contact_sprite.png) -490px 0px;
    	opacity: 0.9;
    	margin-right: 10px;
    }
    
    .contactOn a:hover{
    	background: url(images/contact_sprite.png) -490px -125px;
    	opacity: 0.9;
    	margin-right: 10px;	
    }
    
    .catering{
    	left:608px;
    	background: url(images/bamboo_grove_sprite.png) -612px 0px;
    	opacity: 0.9;
    	margin-right: 10px;
    }
    
    .catering a:hover{
    	background: url(images/bamboo_grove_sprite.png) -613px -125px;
    	opacity: 0.9;
    	margin-right: 10px;
    }
    
    .cateringOn{
    	left:608px;
    	background: url(images/catering_sprite.png) -610px 0px;
    	opacity: 0.9;
    	margin-right: 10px;
    }
    
    .cateringOn a:hover{
    	background: url(images/catering_sprite.png) -613px -125px;
    	opacity: 0.9;
    	margin-right: 10px;
    }
    Also, as soon as I coded the sprite, it changed my footer links as well (added the white background box to them,) despite those footer links having their own rules.



    Code:
    <div id="footer">
    
    			<a class="home" href="index.html">Home</a>
    			<a class="about" href="about.html">About</a>
    			<a class="menu" href="menu.html">Menu</a>
    			<a class="contact" href="contact.html">Contact</a>
    			<a class="catering" href="catering.html">Catering</a>
    			All Rights Reserved &copy; Bamboo Grove Hawaiian Grille
    			
    		
    		</div>
    
    #footer{
    	width: 730px;
    	height: 25px;
    	margin: 100px 50px 25px 35px;
    	color: #FAD63B;
    	font-size: 12px;
    	text-align: center;
    }
    
    #footer a{
    	text-decoration: none;
    	font-size: 12px;
    	margin-right: 50px;
    	background-color: #97806D;
    	font-family: Trebuchet MS, Arial, sans-serif;
    }
    
    #footer a:link { color: #A2CAE2; }
    #footer a:visited { color: #A2CAE2; }
    #footer a:hover { color: #FAD63B; }
    #footer a:active { color: #FAD63B; }
    Last edited by smaashthemac; 11-14-2011 at 07:48 AM.

  • #2
    New Coder
    Join Date
    Oct 2011
    Posts
    13
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Sorry, I just realized putting my code in a scroll box makes things a lot easier:

    Here's the first section:
    Code:
    <div id="header">
    
    <div id="navigation">
    
    <ul>
    <li class="about"><a href="about.html">About</a></li>
    <li class="menu"><a href="menu.html">Menu</a>
    <li class="home" style="width:248px;"><a style="width:248px;" href="index.html">Home</a>
    <li class="contact"><a href="contact.html">Contact</a>
    <li class="cateringOn"><a href="catering.html">Catering</a>
    </ul>
    
    </div>
    
    </div>
    
    #header{
    width:850px;
    height:200px;
    margin:10x auto;
    }
    
    #navigation {
    margin-right: 30px;
    position:relative
    }
    
    #navigation li{
    list-style:none;
    float: left;
    }
    
    #navigation li, #navigation a{
    display:block;
    height:120px;
    width:120px;
    text-indent:-9999px;
    }
    
    .about{
    left:0px;
    background: url(images/bamboo_grove_sprite.png) -0px 0px;
    opacity: 0.9;
    margin-right: 10px;
    }
    
    .about a:hover{
    background: url(images/bamboo_grove_sprite.png) 0 -125px;
    opacity: 0.9;
    margin-right: 10px;
    }
    
    .aboutOn{
    left:0px;
    background: url(images/about_sprite.png) -0px 0px;
    opacity: 0.9;
    margin-right: 10px;
    }
    
    .aboutOn a:hover{
    background: url(images/about_sprite.png) 0 -125px;
    opacity: 0.9;
    margin-right: 10px;
    }
    
    .menu{
    left:120px;
    background: url(images/bamboo_grove_sprite.png) -120px 0px;
    opacity: 0.9;
    margin-right: 10px;
    }
    
    .menu a:hover{
    background: url(images/bamboo_grove_sprite.png) -120px -125px;
    opacity: 0.9;
    margin-right: 10px;
    }
    
    .menuOn{
    left:120px;
    background: url(images/menu_sprite.png) -120px 0px;
    opacity: 0.9;
    margin-right: 10px;
    }
    
    .menuOn a:hover{
    background: url(images/menu_sprite.png) -120px -125px;
    opacity: 0.9;
    margin-right: 10px;
    }
    
    .home{
    left:244px;
    background: url(images/bamboo_grove_sprite.png) -241px 0px;
    opacity: 0.9;
    margin-right: 10px;
    }
    
    .home a:hover{
    background: url(images/bamboo_grove_sprite.png) -241px -119px;
    opacity: 0.9;
    margin-right: 10px;
    }
    
    .contact{
    left:490px;
    background: url(images/bamboo_grove_sprite.png) -490px 0px;
    opacity: 0.9;
    margin-right: 10px;
    }
    
    .contact a:hover{
    background: url(images/bamboo_grove_sprite.png) -490px -125px;
    opacity: 0.9;
    margin-right: 10px;
    }
    
    .contactOn{
    left:490px;
    background: url(images/contact_sprite.png) -490px 0px;
    opacity: 0.9;
    margin-right: 10px;
    }
    
    .contactOn a:hover{
    background: url(images/contact_sprite.png) -490px -125px;
    opacity: 0.9;
    margin-right: 10px;
    }
    
    .catering{
    left:608px;
    background: url(images/bamboo_grove_sprite.png) -612px 0px;
    opacity: 0.9;
    margin-right: 10px;
    }
    
    .catering a:hover{
    background: url(images/bamboo_grove_sprite.png) -613px -125px;
    opacity: 0.9;
    margin-right: 10px;
    }
    
    .cateringOn{
    left:608px;
    background: url(images/catering_sprite.png) -610px 0px;
    opacity: 0.9;
    margin-right: 10px;
    }
    
    .cateringOn a:hover{
    background: url(images/catering_sprite.png) -613px -125px;
    opacity: 0.9;
    margin-right: 10px;
    }
    And the second:

    Code:
    <div id="footer">
    
    <a class="home" href="index.html">Home</a>
    <a class="about" href="about.html">About</a>
    <a class="menu" href="menu.html">Menu</a>
    <a class="contact" href="contact.html">Contact</a>
    <a class="catering" href="catering.html">Catering</a>
    All Rights Reserved &copy; Bamboo Grove Hawaiian Grille
    
    
    </div>
    
    #footer{
    width: 730px;
    height: 25px;
    margin: 100px 50px 25px 35px;
    color: #FAD63B;
    font-size: 12px;
    text-align: center;
    }
    
    #footer a{
    text-decoration: none;
    font-size: 12px;
    margin-right: 50px;
    background-color: #97806D;
    font-family: Trebuchet MS, Arial, sans-serif;
    }
    
    #footer a:link { color: #A2CAE2; }
    #footer a:visited { color: #A2CAE2; }
    #footer a:hover { color: #FAD63B; }
    #footer a:active { color: #FAD63B; }

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,692
    Thanks
    22
    Thanked 1,830 Times in 1,814 Posts
    This sprite was created using an unordered list, because doing it another way just wasn't working out. But now it's off center, and despite playing with different div widths, margins and padding, it still sits too far to the right.
    Your probably seeing the ul's default 40px left padding.

    Try fixing that by adding this bit to your CSS #navigation ul {padding: 0;}

    You really need to start using the code tags, &#91;code&#93;&#91;/code&#93;
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    smaashthemac (11-14-2011)

  • #4
    New Coder
    Join Date
    Oct 2011
    Posts
    13
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Yeah, I just realized I was wrapping my code wrong; sorry about that. Thank you, it worked!

  • #5
    New Coder
    Join Date
    Oct 2011
    Posts
    13
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Any idea as to why it would be effecting the footer links as well, and how to correct for that?

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,692
    Thanks
    22
    Thanked 1,830 Times in 1,814 Posts
    Quote Originally Posted by smaashthemac View Post
    Any idea as to why it would be effecting the footer links as well, and how to correct for that?
    You give your #footer anchors the same class as your #navigation li.

    For example,
    Code:
    .about{
    left:0px;
    background: url(images/bamboo_grove_sprite.png) -0px 0px;
    opacity: 0.9;
    margin-right: 10px;
    }
    Would style both <li class="about"><a href="about.html">About</a></li> and <a class="about" href="about.html">About</a>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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