Hallo, ich suche Rat
-------------------------------------------------------------------------------------------------------------------------------------------
Rahmenbedingungen
zusätzliche Techniken: keine
Einschränkungen: keine
Browser & Betriebssystem: W7, Firefox
Editor: DW
Danke für jeden guten Rat
Peter
Problembeschreibung
Fehlermeldung/-beschreibung:
Aufgabenstellung
Der "container" soll alle Elemente außer dem
"fuss" umfassen und sich auf Bildschirmmitte zentrieren.
Der "fuss"soll sich bei Ausdehnung des "container"
immer am unteren Ende des "container" befinden.
Auftretende Fehler
Der "container" erweitert sich nur in Abhängikeit
von der Logohöhe nach unten.
Die übrigen Elemente verhalten sich als ob sie auf einer
anderen Ebene liegen würden.
Die Schaltflächen "li" lassen sich nicht auf den
linken Rand von "#ul" setzen.
bisherige Lösungsversuche: lesen von Artikeln und probieren
Code:
<body>
<div id="container">container
<div id="logo">"logo"
</div>
<!--#logo-->
<div id="inhalt">"inhalt1"</div>
<!--inhalt1-->
<div id="inhalt2">id "inhalt2"</div>
<div id="navigation">id navigation
<div id="ul">
<ul>
<li>Artikel1</li>
<li>Artikel2</li>
<li>Artikel3</li>
<li>Artikel4</li>
<li>Artikel5</li>
<li>Artikel6</li>
<li>Artikel7</li>
<li>Artikel8</li>
</ul>
</div>
</div>
<!--#navigation-->
</div>
<!--#container-->
<div id="fuss">id "fuss"</div>
</body>
</html>
Alles anzeigen
@charset "utf-8";
body {
background-color: hsl(60,100%,75%);
height: 100%;
width: 100%;
margin-right: auto;
margin-left: auto;
}
#container {
background-color: hsl(180,100%,50%);
height: 100%;
width: 1100px;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
position: relative;
margin-bottom: 0px;
}
#logo {
background-color: hsl(60,33%,38%);
height: 150px;
width: 150px;
position: relative;
left: 0px;
top: 0px;
}
#fuss {
background-color: hsl(120,100%,25%);
width: 1100px;
margin-right: auto;
margin-left: auto;
height: 80px;
margin-bottom: -80px;
}
#navigation {
background-color: hsl(300,100%,25%);
height: 408px;
width: 180px;
position: absolute;
left: 0px;
top: 200px;
padding-left: 0px;
}
#ul {
height: 363px;
width: 132px;
position: absolute;
left: 0px;
top: 29px;
background-color: hsl(330,100%,50%);
padding-left: 0px;
}
li {
background-color: hsl(0,0%,64%);
height: 30px;
width: 100px;
list-style-type: none;
position: relative;
padding-top: 5px;
padding-left: 10px;
float: left;
left: 0px;
margin-top: 3px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#inhalt {
background-color: hsl(0,0%,0%);
height: 500px;
width: 400px;
position: absolute;
left: 210px;
top: 10px;
color: hsl(0,0%,100%);
}
#inhalt2 {
background-color: hsl(0,0%,24%);
height: 500px;
width: 400px;
position: absolute;
left: 650px;
top: 10px;
color: hsl(0,0%,100%);
}
Alles anzeigen