1 reply [Last post]
Unmei
Unmei's picture
Offline
newbie
Last seen: 9 years 31 weeks ago
Timezone: GMT+1
Joined: 2012-11-24
Posts: 1
Points: 2

Hi everyone,
I want to make a layout for a site but there are some things that's won't go well.
I actually never used css before but i hope you can help me with the code i've written.

CSS:

#header{
    width:100%;
    height:26%;
	background-color:#A80000;
	}
#linksekolom{
	left: 0%;
	top: 31%;
    width:20%;
    height:80%;
	background-color:#FFCCFF;
	position: fixed;
	}
#inhoud{
	left: 20%;
	top: 31%;
    width:60%;
    height:80%;
	background-color:#FFFFCC;
	position: fixed;
	}
.size{
    width:500px;
    height:26%;
    margin: 0 auto;
}
.size img{
    width:100%;
}
.menu{
	top: 26%;
    background-color:#EDC849;
	height:4%;
	width:100%;
	}
.centered{
  margin-left:auto; 
  margin-right:auto;
  text-align:center; 
}

HTML:

<html>
<head>
<link rel="StyleSheet" href="style.css" type="text/css">
<body>
 
<div id="header">
    <div class="size">
	<div class="centered">
        <img src="Header.png"/>
    </div>
	</div>
</div>
 
<div class="menu">
    <div class="centered">this should be centered</div>
</div>
 
<div id="linksekolom">
    Kolom Links
</div>
 
<div id="inhoud">
    Inhoud
</div>
 
</body>
</html>

The header is meant to begin left and the menu under it, then 3 (ive only gotten 2 yet) div's for text, content and other menu.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 19 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Assuming you've shown all

Assuming you've shown all your html, you are missing a document type declaration, so browsers will be in "quirks" mode where they pretend to be IE5. Get yourself a proper standards triggering document type declaration.

Also the code suffers from "divitis". You should only use "div" where you are aggregating several sub elements. Use tags that describe the content - this is called "semantic" markup.

Have you checked your html for validity? If not, do that too.

Posting guidelines are linked to in my footer, please read them.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.