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

Thread: Help me plz

  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help me plz

    Can someone help me fix my problem. as you see on my image a edge is sticking out.


    Image



    HTML

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Epic</title>
    
    <link rel="stylesheet" href="style.css" type="text/css" />
    
    </head>
    
    <body>
    
    
    <div id="Header"></div>
    
    
    
    <div id="wrapper">
    
    <ul id="awesome-menu">
     <li><a href="#home" class="home">Home</a></li>
        <li><a href="#download" class="download">Download</a></li>
        <li><a href="#store" class="store">Store</a></li>
        <li><a href="#forum" class="forum">Forum</a></li>
        <li><a href="#contact" class="contact">Contact</a></li>
    </ul>
       
    			<div id="content">
        	</div>
    
    </div>
    
    
    </body>
    </html>
    CSS

    Code:
    @charset "utf-8";
    /* CSS Document */
    
    #Header {
    	background-image:url(images/header%20top.png);
    	background-position:center top;
    	margin-top: 100px;
    	height: 280px;
    	width: 900px;
    	margin-left: auto;
    	margin-right:auto;
    }
    
    body {
    }
    
    ul#awesome-menu {
    	width: 900px; 
    margin: 0 auto;
    padding: 0;
    	list-style: none;
    	background-position:center;
    }
    
    ul#awesome-menu li { display: inline; }
    	
    ul#awesome-menu li a {
    	display: block; float: left; height: 50px;
    	background-image:url(images/menu-sprite.png); text-indent: -9999px;
    }
    
    	ul#awesome-menu li a.home {
    		width: 180px; background-position: 0 0;	
    	}
    	
    	ul#awesome-menu li a.download {
    		width: 180px; background-position: -180px 0;	
    	}
    	
    	ul#awesome-menu li a.store {
    		width: 180px; background-position: -360px 0;	
    	}
    	
    	ul#awesome-menu li a.forum {
    		width: 180px; background-position: -540px 0;	
    	}
    	
    	ul#awesome-menu li a.contact {
    		width: 180px; background-position: -720px 0;	
    	}
    	
    	
    	ul#awesome-menu li a.home:hover, ul#awesome-menu li a.home:focus {
    		background-position: 0 -50px;	
    	}
    	
    	ul#awesome-menu li a.download:hover, ul#awesome-menu li a.download:focus {
    		background-position: -180px -50px;	
    	}
    	
    	ul#awesome-menu li a.store:hover, ul#awesome-menu li a.store:focus {
    		background-position: -360px -50px;	
    	}
    	
    	ul#awesome-menu li a.forum:hover, ul#awesome-menu li a.forum:focus {
    		background-position: -540px -50px;	
    	}
    	
    	ul#awesome-menu li a.contact:hover, ul#awesome-menu li a.contact:focus {
    		background-position: -720px -50px;	
    	}
    	
    
    a { outline: none; }
    
    #wrapper {
    	width: 900px;
    	margin-right: auto;
    	margin-left: auto;
    position: relative;			
    }
    #content {
    	background-color:#666666;
    	width:900px;
    	height:1000px;
    	border: 1px solid #333;
    	background-position:center;
    	
    }

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello Theteva,
    You just have that border on the wrong thing.
    Your #wrapper is 900px wide. Inside that you have #content that becomes 902px wide when you add that border.

    See the box model here. The box model says that whatever you put inside an element cannot be larger than that element. margin/padding/border all count when figuring width/height.

    Then try making these changes to your CSS -
    Code:
    #Header {
    	height: 280px;
    	width: 900px;
    margin: 100px auto 0;
    	background: url(images/header%20top.png);
    border: 1px solid #333;
    border-bottom: none;
    }
    #wrapper {
    	width: 900px;
    margin: 0 auto;
    border: 1px solid #333;
    	position: relative;
    }
    #content {
    	height: 1000px;
    	width: 900px;
    /*border: 1px solid #333;*/
    	background: #666666;
    }
    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
    •