...

View Full Version : Couple CSS Issues



aaronoafc
01-15-2013, 08:24 PM
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 :


<!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:


* {
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

Excavator
01-15-2013, 08:39 PM
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!


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


See the links below about validating. They'll both help a lot.

aaronoafc
01-15-2013, 08:53 PM
Looks centered fine in FF19



#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!

Excavator
01-15-2013, 10:53 PM
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.

Nerevarine
01-16-2013, 01:47 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum