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 5 of 5
  1. #1
    New Coder
    Join Date
    Feb 2012
    Posts
    85
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Couple CSS Issues

    Evening guys, couple of questions regarding the CSS im using for this mockup site. Please see the screenshot to see what I mean:

    1) everything is in the center...i've put a clear red border around the columns to show this in more detail. however the blue on the left appears to be more than the right? Am I correct here or are my eyes playing tricks on me, maybe my pixel calculation is wrong.

    2) Why is the navigation bar indented slightly to the left? Driving me mad!

    HTML CODE :

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<title>Blue White Army</title>
    	<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">
    	<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
    </head>
    <body>
    	<div class="container">
    		<header id="header">
    			<h1>Blue White Army</h1>
    		</header>
    		<div id="nav">
    			<ul>
    				<li><a href="#">Home</a></li>
    				<li><a href="#">Tickets</a></li>
    				<li><a href="#">News</a></li>
    				<li><a href="#">Fixtures</a></li>
    				<li><a href="#">Results</a></li>
    			</ul>
    		</div>
    		
    		<div id="mainSection">
    			<img src="img/leeds_away.jpg">
    			<h3>Blue Army Takes Over Leeds</3>
    			<p>Over 4000 Oldham fans made the venture over the Pennines to see Paul Dickov's men stun promotion favourites 
    			Leeds 3-1 in which Latics where 3-0 up at the half time interval. Jose Baxter was named man of the match as his 2 
    			assists and 1 goal helped Oldham move back into the play off places at the expense of Leeds United.</p>
    			
    			<img id="oldLiv" src="img/oldliv.jpg">
    			<h3>Oldham Stun Liverpool Away</h3>
    			<p>orem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tristique velit in turpis consectetur sit amet
    			ullamcorper magna commodo. Fusce dignissim odio sed nisi lacinia tempor commodo erat egestas. Sed justo lacus, iaculis 
    			non semper sit amet, aliquet a lorem. Nam et leo non erat mollis varius. Proin non dolor nec eros interdum 
    			consectetur a a arcu. Sed sed tellus et neque egestas euismod. Phasellus facilisis dui eget nisi facilisis ac aliquet
    			enim aliquam. Cras eget mi vel tellus interdum sagittis. Morbi sed dui non risus pulvinar rhoncus. Praesent eleifend
    			sollicitudin interdum. Cras pharetra vestibulum tellus, at vulputate eros pulvinar ac. Mauris vestibulum iaculis tortor, 
    			sit amet sollicitudin metus luctus ut. Donec in nunc neque. Integer porta neque lobortis felis lobortis consequat.
    
    			Donec venenatis molestie dignissim. Donec sed nunc ac sapien vestibulum pretium. Fusce a vulputate eros. Morbi eget diam eu lectus
    			tempus elementum nec vitae sem. Cras adipiscing hendrerit ipsum, sed porta ipsum facilisis consequat. Sed nec pulvinar nibh. 
    			Sed sem ligula, fermentum hendrerit faucibus vitae, placerat a velit. Mauris at erat turpis, eget mollis dui. Mauris luctus,
    			metus ac laoreet luctus, ante justo porta diam, et volutpat elit velit non orci. Nulla vulputate tincidunt orci ut ultrices. 
    			Aenean gravida eros in mauris accumsan suscipit. Vestibulum ornare, quam aliquet sodales cursus, lorem sem vulputate mi, lacinia
    			commodo leo neque ac erat.</p>
    		</div>
    
    		<div id="rightArticle">
    			<img src="img/jose_baxter.jpg">
    			<h3>Jose Baxter To Stay With Latics?</h3>
    			<p>Jose baxter recently spoke with Oh when The Blues and confirmed he wishes to stay with Oldham and hopes to sign a deal before the January transfer window. We understand that there have been a host of clubs trying to contact Jose about a possible move away from boundary park however he claimed he's "not interested".</p>
    		</div>
    
    	</div>
    </body>
    </html>
    CSS CODE:

    Code:
    * {
    	margin: 0px;
    	padding: 0px;
    }
    
    body {
    	text-align:center;
    	font-size:12px;
    	font-family: Arial;
    	background:#1b67da;
    	color:white;
    }
    
    #header {
    	border-style:solid;
    	border-color:red;
    }
    
    .container {
    	width:1000px;
    	margin:auto;
    	text-align:left;
    }
    
    /* nav styling */
    #nav {
    	padding:7px 0px 0px 10px; /* top,right,bottom,left */
    }
    
    #nav li {
       display:inline-block;
       list-style:none;
       padding-right:20px; /*space between links*/
     }
     
     #nav li a {
    	text-decoration:none;
    	padding:auto;
    	color:white;
     }
     
     #nav li a:hover {
    	color:yellow;
     }
    /* End of Nav Styling */
     
     /* Start of main section styling */
     #mainSection {
    	float: left;
    	width: 700px;
    	margin: 25px 0px 0px 0px;
    	border-style:solid;
    	border-color:red;
     }
     
     #oldLiv {
    	height:180px;
    	width:450px;
    	padding:25px 0px 0px 0px;
     }
    
     #rightArticle {
    	float: right;
    	width: 250px;
    	margin: 25px 0px 0px 0px;
    	border-style: solid;
    	border-color: red;
     }
    Any additional advice welcome! Cheers guys

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by aaronoafc View Post
    Evening guys, couple of questions regarding the CSS im using for this mockup site. Please see the screenshot to see what I mean:

    1) everything is in the center...i've put a clear red border around the columns to show this in more detail. however the blue on the left appears to be more than the right? Am I correct here or are my eyes playing tricks on me, maybe my pixel calculation is wrong.
    Looks centered fine in FF19

    2) Why is the navigation bar indented slightly to the left? Driving me mad!
    Code:
    #nav {
        padding: 7px 0 0 10px;
    }

    See the links below about validating. They'll both help a lot.
    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

  • #3
    New Coder
    Join Date
    Feb 2012
    Posts
    85
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Looks centered fine in FF19


    Code:
    #nav {
        padding: 7px 0 0 10px;
    }

    See the links below about validating. They'll both help a lot.
    I thought it could be the 10px but i've put that at 0 and it's still the same!
    Don't Click Here!

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by aaronoafc View Post
    I thought it could be the 10px but i've put that at 0 and it's still the same!
    Refresh the page, you're probably seeing a cached version of your code.
    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

  • #5
    Regular Coder Nerevarine's Avatar
    Join Date
    Jan 2013
    Location
    Phendrana Drifts, Tallon IV, W-Class
    Posts
    285
    Thanks
    0
    Thanked 17 Times in 17 Posts
    Why do you have two external stylesheets?
    Possibly something from one is overwriting the other. Check to see if you have two of the same value on separate pages.


  •  

    Posting Permissions

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