CSS Positioning

CliffyBiro

CliffyBiro

CliffyBiro

Caporegime
Joined
1 Mar 2008
Posts
26,303
Hey guys. As some of you already know, I've been working on a new site and the same problem has been holding me back. I've read numerous tutorials and yet still can't figure out what I'm doing wrong.

Here is how it's supposed to look:



And here's how it actually looks:

(Not centred, logo moving behing the 'coffee stain'. Seems to me like the logo is the only thing being centred inside the container.)



You can see for yourself here.




CSS Code
Code: 
@charset "utf-8";


body {
	background: url(images/background.gif);
	background-repeat:repeat-x;
	background-color:#646567;
	height:1200px;
}


.container {
	text-align: center;
	margin: 0 auto;
	margin-top:0;
	width: 1024px;
	height: 1200px;
	z-index:1;
} 



.logo {
	z-index:2;
	position: absolute;
	float: left;
	width:588px;
	height:253px;
	top: 15px;
}

.stain {
	z-index:20;
	position:absolute;
	float: right;
	width:362px;
	height:205px;
	left: 738px;
}

.whatido {
	z-index:21;
	position:absolute;
	float: right;
	width:293px;
	height:395px;
	left: 803px;
	top: 387px;
}

.navigation {
	position:absolute;
	float: right;
	top:50px;
	left:297px;
	width:616px;
	height:35px;
	z-index:3;
	padding:5px;
	top: 232px;
}

.navigationlinks {
	position:absolute;
	float: right;
	text-align:left;
	top:50px;
	left:350px;
	width:616px;
	height:35px;
	z-index:24;
	padding:5px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 28px;
	font-weight: bolder;
	color: #FFF;
	word-spacing:15px;
	top: 291px;
}


.featureddesctitle {
	position:absolute;
	float: left;
	top:717px;
	left:106px;
	width:112px;
	height:22px;
	z-index:4;
	padding:5px;
	font-family: Impact, Arial, Helvetica, sans-serif;
	font-size: 28px;
	font-weight: bolder;
	color: #1a8fcf;
	word-spacing:5px;
}

.featureddesc {
	position:absolute;
	float: left;
	top:751px;
	left:111px;
	width:461px;
	height:26px;
	z-index:5;
	padding:5px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: #000;
}

.copyright {
	position:absolute;
	float: left;
	top:1167px;
	left:98px;
	width:216px;
	height:26px;
	z-index:5;
	padding:5px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFF;
}

.header1 {
	position:absolute;
	float: left;
	top:855px;
	left:100px;
	width:301px;
	height:41px;
	z-index:6;
	padding:5px;
	font-family: Impact, Arial, Helvetica, sans-serif;
	font-size: 36px;
	font-weight: bolder;
	color: #d6dc29;
	;
}

.header2 {
	position:absolute;
	float: right;
	top:855px;
	left:431px;
	width:301px;
	height:41px;
	z-index:7;
	padding:5px;
	font-family: Impact, Arial, Helvetica, sans-serif;
	font-size: 36px;
	font-weight: bolder;
	color: #d6dc29;
	;
}

.header3 {
	position:absolute;
	float: right;
	top:855px;
	left:764px;
	width:301px;
	height:41px;
	z-index:8;
	padding:5px;
	font-family: Impact, Arial, Helvetica, sans-serif;
	font-size: 36px;
	font-weight: bolder;
	color: #d6dc29;
	;
}

.featured {
	position:absolute;
	float: left;
	top:412px;
	left:110px;
	width:189px;
	height:31px;
	z-index:9;
	padding:5px;
	font-family: Impact, Arial, Helvetica, sans-serif;
	font-size: 36px;
	font-weight:700;
	color: #d6dc29;
	;
}


.twitter {
	position:absolute;
	float: right;
	top:238px;
	left:841px;
	width:115px;
	height:124px;
	z-index:10;
	padding:5px;
}

.tag {
	position:absolute;
	float: right;
	top:1163px;
	left:943px;
	width:115px;
	height:36px;
	z-index:11;
}



.featuredimage {
	position:absolute;
	float: left;
	top:453px;
	left:115px;
	width:115px;
	height:124px;
	z-index:12;
	padding:5px;
}

.subfeaturedimage1 {
	position:absolute;
	float: left;
	top:906px;
	left:128px;
	width:249px;
	height:159px;
	z-index:12;
	padding:5px;
}

.subfeaturedimage2 {
	position:absolute;
	float: left;
	top:906px;
	left:460px;
	width:249px;
	height:159px;
	z-index:12;
	padding:5px;
}

.subfeaturedimage3 {
	position:absolute;
	float: left;
	top:904px;
	left:800px;
	width:249px;
	height:159px;
	z-index:12;
	padding:5px;
}

.dude {
	position:absolute;
	float: left;
	top:355px;
	left:503px;
	width:170px;
	height:123px;
	z-index:2;
	padding:5px;
}


.desc1 {
	position:absolute;
	float: left;
	top:1075px;
	left:785px;
	width:282px;
	height:44px;
	z-index:13;
	padding:5px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: #FFF;
}

.desc2 {
	position:absolute;
	float: right;
	top:1075px;
	left:437px;
	width:300px;
	height:45px;
	z-index:14;
	padding:5px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: #FFF;
}

.desc3 {
	position:absolute;
	float: right;
	top:1075px;
	left:105px;
	width:290px;
	height:43px;
	z-index:15;
	padding:5px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: #FFF;
}

a:hover {
	text-decoration: none; 
	color: #dbe127;
}

a:link {
	color:#FFF;
	text-decoration: none
}

a:visited {
	color: #FFF;
	text-decoration: none
}

a:active {
	color: #dbe125;
	text-decoration: none;
}



#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }


HTML Code
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>CreativeNerd</title>
<link href="style1.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

</head>


<body>

<div class="container" style="text-align:center">

<div class="logo"><img src="images/logo.jpg" width="588" height="253"/></div>
<div class="stain"><img src="images/stain.gif" width="362" height="205"/></div>
<div class="navigation"><img src="images/navbar.gif" width="792" height="124"/></div>
<div class="whatido"><img src="images/whatido.jpg" width="293" height="395"/></div>
<div class="featured">Latest Work</div>
<div class="dude"><img src="images/nosey.jpg" width="170" height="123"/></div>
<div class="featuredimage"><a href="images/ironfist.jpg" rel="lightbox"><img src="images/featured.jpg" width="567" height="257" border="0"/></a></div>
<div class="featureddesctitle">IronFist</div>
<div class="featureddesc">Front-End and logo design for a personal portfolio project</div>
<div class="tag"><img src="images/tag.jpg" width="116" height="33"/></div>
<div class="copyright">© CreativeNerd - All Rights Reserved</div>
<div class="header1">Retail Training</div>
<div class="header2">Mayobridge Golf</div>
<div class="header3">I'm Steve</div>
<div class="desc1">Logo for a personal portfolio</div>
<div class="desc2">Logo/Print for local golf club</div>
<div class="desc3">Logo design for a local college store</div>
<div class="navigationlinks"><a href="testing.html">Home</a> <a href="testing.html">Portfolio</a> <a href="testing.html">About</a> <a href="testing.html">Contact</a></div>
<div class="subfeaturedimage1"><a href="images/retaillogos.jpg" rel="lightbox"><img src="images/retail.jpg" width="249" height="159" border="0"/></a></div>
<div class="subfeaturedimage2"><a href="images/mayobridgegolf.jpg" rel="lightbox"><img src="images/mayobridge.jpg" width="249" height="159" border="0"/></a></div>
<div class="subfeaturedimage3"><a href="images/imstevelogo.jpg" rel="lightbox"><img src="images/imsteve.jpg" width="249" height="159" border="0"/></a></div>
<div class="twitter"><a href="http://www.twitter.com/smcgahan"><img src="images/twitterbutton.gif" width="103" height="96" border="0"/></a></div>


</div>

</body>
</html>



So, yeah, what am I doing wrong? :(
 
Last edited:
You are using absolute positioning without an enclosing position:relative div.

In other words, all your positioning is in relation to the size of the browser window. For example, at 1280x800px your website looks fine, but when I fullscreen to 1680x1050 the logo goes out of place.

You can try putting positio:relative; in the .container class.

Then reposition everything else accordingly.

Hopefully that can fix something although I suspect there will be more to fix after that!
 
For this kind of thing I tend to use the web developer toolbar and go to 'Outline -> Outline Block Level Elements' - it puts handy borders around things so you can see what's going on a little easier, or alternatively start adding borders around various elements in the CSS to see their true sizes:

 
Yeah there are some issues in IE6/7 with the logo, it goes all the way to the right.

You dont need to use floats with position:absolute as far as I know.

The .stain class you can change left:655px; to right:0; or however many pixels you want it from the right. And then if you put a left:0; on the logo I think this will sort the ie6/7 logo problems.
 
Pho said:
For this kind of thing I tend to use the web developer toolbar and go to 'Outline -> Outline Block Level Elements' - it puts handy borders around things so you can see what's going on a little easier, or alternatively start adding borders around various elements in the CSS to see their true sizes:

Click to expand...

Ooh. Handy :) Cheers man. :)

xiphrex said:
Yeah there are some issues in IE6/7 with the logo, it goes all the way to the right.

You dont need to use floats with position:absolute as far as I know.

The .stain class you can change left:655px; to right:0; or however many pixels you want it from the right. And then if you put a left:0; on the logo I think this will sort the ie6/7 logo problems.
Click to expand...

Done. Thanks again. :)




EDIT: Ooh! Just found this: https://browserlab.adobe.com/

Very handy for testing in different browsers.
 
Last edited:
You must log in or register to reply here.
Back
Top Bottom