View Full Version : New at css, converting my portfolio template (IE and others)

07-20-2008, 03:03 PM
Hi, I am having a bit of trouble with my css, attached is what the design is supposed to look like (Had to make it smaller because of the file size limit)

The design is totally mucked up in IE, but I am not too worried about that because I can create a different stylesheet if the fix is not a simple one.

The white border on the left and right of the center content does not go all the way to the bottom, thie is because it is inside another div with a height of 768px, I want it to be able to go all the way to the bottom.

Also the menu, I was never a fan of using li tags to display the menu, so I used a tags instead, just how to I make them display next to each other instead of them on top of each other.

The background colour doesnt seem to appear on the center content.

My final problem is that the copyright needs to stick at the bottom of the page.


<!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">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ludatha Creative</title>

<style type="text/css">
* {padding:0; margin:0;}

/* Layout */
body {background:#818181 url(images/grad.jpg) repeat-x; text-align:center; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px;}
.container {background:url(images/bg.jpg) no-repeat; height:768px; position:relative; left:50%; margin-left:-500px; width:950px; }
.center {border:#ccc 1px solid; border-top:none; border-bottom:none; position:relative; width:540px; left:205px; height:100%; background-color:191919;}
.lang {background:url(images/lang-bg.png) repeat-x; height:22px; color:#fff; line-height:22px; padding:0 5px 0 5px;}
.imag {background:url(images/imag-bg.png) no-repeat; height:111px; padding:0 5px 0 5px;}
.link {background:url(images/link-bg.png) repeat-x; height:33px; color:#fff; line-height:22px; padding:0 5px 0 5px; text-transform:uppercase; line-height:30px;}
.con {width:505px; position:absolute; margin:17px 0 0 17px;}

/* Content */
#lang-welcome {float:left;}
#lang-select {float:right; font-size:10px;}
#imag-image {}
#imag-status {float:right; font-size:14px; margin:88px 0 0 0;}
.link a {background:url(images/link-gen.png) no-repeat; height:26px; width:75px; color:#fff; text-decoration:none; text-align:center; display:block; line-height:24px;}
.link a:hover {background:url(images/link-hov.png) no-repeat;}
.status-txt {color: #CCCCCC;}
.status2-txt {color: #669966;}
.con #con-head {background:url(images/cont-head.png) no-repeat; position:relative; height:31px;}
.con #con-head #con-head-page {color:#ccc; text-transform:uppercase; float:left; margin:5px 0 0 45px; font-size:14px;}
.con #con-head #con-head-sub {color:#fff; font-size:10px; float:left; margin:8px 0 0 47px;}
.con #con-content {color:#000; font-size:10px; background-color:#999; border:#ccc 1px solid; border-top:none; padding:10px; text-align:left;}
.foot {font-size:10px; background:url(images/foot-bg.png) repeat-x; height:24px; line-height:24px;}
.foot #foot-links {float:left;}
.foot #foot-links a {color:#999;}
.foot #foot-copy {color:#fff; float:right;}


<div class="container">
<div class="center">

<div class="lang">

<div id="lang-welcome">Welcome</div>
<div id="lang-select">Select your language:</div>

<div class="imag">
<div id="imag-image"></div>
<div id="imag-status"><span class="status-txt">Status:</span><span class="status2-txt">Designing Templates</span></div>

<div class="link">
<a href="index.php">Home</a>
<a href="about.php">About</a>
<a href="html.php">HTML</a>
<a href="php.php">Scripts</a>
<a href="ludatha.php">Ludatha</a>

<a href="stats.php">Stats</a>

<div class="con">
<div id="con-head">
<div id="con-head-page">home</div>
<div id="con-head-sub">This is the homepage</div>

<div id="con-content">This is some uber content for the old homepage!</div>

<div class="foot">
<div id="foot-links">
<a href="index.php">Home</a>
<a href="http://ludatha.com">Ludatha</a>
<a href="http://www.miramedia.co.uk">MiraMedia</a>

<div id="foot-copy">Copyright 2008 Adam Tester 2008</div>



07-20-2008, 06:49 PM
Well the first problem is that you have almost every element positioned relative. You should probably use floats and margins/paddings. That way it will look the way you want it to cross browser. Look into floats and see if you understand it or have problems and let us know.

07-20-2008, 09:59 PM

fix the css errors first:


remove from .container:
margin-left: -500px;
position: relative;

in a.link, remove display: block; to put items on a single line.


07-20-2008, 11:18 PM
As said, you are using to many relative positionings.

Look into fluid layouts, which use %s instead of pixel values. As screen resolutions change, the pixels become smaller, and the positioning can be off, sometimes greatly.