Placering af div tags
Jeg har tidligere opbygget min hjemmeside ved hjælp af tabeller, men prøver nu at bruge div tags.Jeg har opbygget siden med en container der er 1024px bred og centeret. Her i er der 3 div tags: header, page og footer, der står under hinanden.
Mit problem opstår når jeg indsætter 4 div tags, der skal stå efter hinanden, i min header. Hvordan får jeg det til at stå efter hinanden, og ikke under hinanden?
I min kode hedder de 4 div'er fane1-4
<!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>Untitled Document</title>
<style type="text/css">
#container {
background-color: rgba(204,204,204,1);
width: 1024px;
margin-right: auto;
margin-left: auto;
height: 500px;
}
#header {
background-color: rgba(102,102,102,1);
width: 100%;
height: 100px;
}
#page {
background-color: rgba(255,255,255,1);
width: 100%;
height: 500px;
}
#footer {
background-color: rgba(0,0,0,1);
width: auto;
height: 100px;
}
#fane1 {
background-color: rgba(255,0,0,1);
width: 100px;
height: 100px;
left: 100px;
position: relative;
}
#fane2 {
background-color: rgba(0,255,0,1);
width: 100px;
height: 100px;
position: relative;
left: 200px;
}
#fane3 {
background-color: rgba(0,0,255,1);
width: 100px;
height: 100px;
right: 100px;
position: relative;
left: 300px;
}
#fane4 {
background-color: rgba(255,255,0,1);
width: 100px;
height: 100px;
position: relative;
left: 400px;
}
#logo {
background-color: rgba(255,0,255,1);
width: 300px;
height: 100px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<div id="fane1"></div>
<div id="fane2"></div>
<div id="fane3"></div>
<div id="fane4"></div>
</div>
<div id="page">
<div id="logo">
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
