Seit einigen Tagen beschäftige ich mich mit CSS, gleich am Anfang wurde mir hier im Forum schonmal geholfen.
Das meiste kann ich ja selbst herausfinden, aber jetzt hab ich seit zwei Tagen ein Problem, das ich einfach nicht behoben kriege:
Folgender Aufbau:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<style type="text/css">
body {
background-color: #FFFFCC;
}
#container {
position: absolute;
top: 0%;
left: 50%;
width:700px;
margin-top: 0px;
margin-left: -300px;
background-color: lightblue;
}
#header {
width: 600px;
height: 240px;
background-color: red;
}
#content {
background-color: yellow;
width: 600px;
}
#footer {
width: 600px;
background-color: blue;
}
#randlinks {
width: 50px;
heigth: 100%;
float: left;
background-image: url(http://a1.twimg.com/profile_images/73601319/southpark_normal.gif);
background-color: black;
}
#randrechts {
width: 50px;
heigth: 100%;
float: right;
background-image: url(http://a1.twimg.com/profile_images/73601319/southpark_normal.gif);
background-color: black;
}
</style>
</head>
<body>
<div id="container">
<div id="randlinks">
das ist der linke Rand mit Southpark Hintergrund (das wird später ein anderer)<br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
Ende Rand
</div>
<div id="randrechts">
das ist der rechte Rand mit Southpark Hintergrund (das wird später ein anderer)<br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
Ende Rand
</div>
<div id="header">
<img src="http://www.naanoo.com/live/wp-content/plugins/wp-o-matic/cache/e929f_dts_image_861_asosgjdrge_140_600_240.85714285714.jpg" alt="--" style="position: relative; top:0px; left:0px;"></img>
das ist der HEADER Div mit Fußball-Bild -----------------
das ist der HEADER Div mit Fußball-Bild
</div>
<div id="content" >
Das ist der Content DIV -----------------------------------------------------------------------------------------------------------------------
Das ist der Content DIV -----------------------------------------------------------------------------------------------------------------------
Das ist der Content DIV -----------------------------------------------------------------------------------------------------------------------
Das ist der Content DIV -----------------------------------------------------------------------------------------------------------------------
Das ist der Content DIV -----------------------------------------------------------------------------------------------------------------------
Das ist der Content DIV -----------------------------------------------------------------------------------------------------------------------
Das ist der Content DIV -----------------------------------------------------------------------------------------------------------------------
Das ist der Content DIV -----------------------------------------------------------------------------------------------------------------------
Das ist der Content DIV -----------------------------------------------------------------------------------------------------------------------
Das ist der Content DIV -----------------------------------------------------------------------------------------------------------------------
<br />
<br />
</div><!--Ende content!-->
<div id="footer">
<br />
DAS IST DER FOOTER DIV --------- DAS IST DER FOOTER DIV --------- DAS IST DER FOOTER DIV --------- DAS IST DER FOOTER DIV ---------
<br />
</div><!--footer!-->
</div><!--container!-->
</body>
</html>
meine Fragen sind:
1. Wieso erscheint das Bild nicht ganz oben?
2. wieso sind die Ränder rechts und links nicht so groß wie der Container DIV?
3. wieso umschließt der Container-DIV nicht alles?
Hat jemand Rat? Ist bestimmt ein Anfängerfehler...
Tausend Dank!
Viele Grüße,
Daniel