Hallo,
gleichmal vorweg, das mein erster Post in diesem Forum. Zudem bin ich Anfänger in Sachen HTML und CSS, verwende Dreamweaver.
Ich bin gerade dabei einen "simplen" Seitenaufbau zu gestalten, allerdings bekomme ich die verschiedenen Div Container nicht an den Ort an dem ich sie gerne hätte.
gleichmal vorweg, das mein erster Post in diesem Forum. Zudem bin ich Anfänger in Sachen HTML und CSS, verwende Dreamweaver.
Ich bin gerade dabei einen "simplen" Seitenaufbau zu gestalten, allerdings bekomme ich die verschiedenen Div Container nicht an den Ort an dem ich sie gerne hätte.
HTML:
<!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>Layout</title>
<link href="layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<h1> </h1>
</div>
<div id="navigation">
<ul>
<li><a href="1">Link One</a></li>
<li><a href="2">Link Two</a></li>
<li><a href="3">Link Three</a></li>
</ul>
</div>
<div id="thumbnails">
<p>Raum für den Inhalt von id "thumbnails</p></div>
<div id="viewer">Raum für den Inhalt von id "viewer"</div>
</div>
</body>
</html>
HTML:
@charset "UTF-8";
body {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
background-color: #FFF;
}
#wrapper {
padding: 0px;
width: 100%;
background-color: #FFF;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#wrapper #header {
background-image: url(images/Header.jpg);
background-repeat: repeat;
height: 80px;
margin: 0px;
padding: 0px;
}
#wrapper #header h1 {
background-repeat: no-repeat;
height: 100%;
width: 100%;
padding: 0px;
}
#wrapper #navigation {
width: 20%;
padding: 0px;
float: left;
background-color: #CCC;
}
#wrapper #thumbnails {
background-color: #0FF;
padding: 0px;
margin-left: 20px;
height: auto;
width: 30%;
}
#wrapper #viewer {
background-color: #CCC;
padding: 0px;
margin-left: 50%;
height: auto;
width: 50%;
}
