- Offizieller Beitrag
Hi,
ich kämpfe gerade mit der Gestaltung einer Website.
Eigentlich ein recht triviales Outfit: Wie mit Frames einen Container für Titel, einen für Naviagation und einen für Inhalt.
Struktur
Code
______________________________________________________________________________________________________________________________
| __________________________________________________________________________________________________________________________ |
| | | |<-- body
| | <div id="titel"> <p> ... </p> </div> | |
| | | |
| |__________________________________________________________________________________________________________________________| |
| ________________________________ _______________________________________________________________________________________ |
| | | | | |
| | <div id="navigation"> | | <div id="content"> ... </div> | |
| | | | | |
| | <ul> | | | |
| | <li><strong> .. </strong></li> | | | |
| | <li><a href=".."> .. </a></li> | | | |
| | <li><a href=".."> .. </a></li> | | | |
| | <li><a href=".."> .. </a></li> | | | |
| | <li><a href=".."> .. </a></li> | | | |
| | </ul> | | | |
| | | | | |
| | </div> | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| |________________________________| |_______________________________________________________________________________________| |
|______________________________________________________________________________________________________________________________|
Hier die zugehörige CSS-Datei:
CSS
Code
body{
overflow:scroll;
margin: 0;
background-image: url("../images/bild_3_800x600.gif");
}
#titel{
background-color: #BE4A4A;
position: absolute;
width: 400%;
height: 70px;
font-size: 3em;
font-family: Comic;
color: #FFFFFF;
}
#titel p {
margin-top: 10px;
margin-left: 4%;
}
#navigation{
background-color: #BE4A4A;
position: absolute;
left: 0px;
top: 60px;
width: 160px;
height: 500%;
}
#navigation ul {
margin-left: 10px;
margin-top: 100px;
font-size: x-large;
}
#navigation a {
color: #ffff00;
text-decoration: none;
display: block;
padding: 0.3em 0.3em 0.3em .5em;
border-left: solid 10px #E49898;
}
#navigation a:hover {
color: #FFC000;
text-decoration: underline;
border-left: solid 10px #FFC000;
}
#navigation strong {
color: #620062;
border-left: solid 10px #620062;
padding: 0.3em 0.3em 0.3em .5em;
}
#navigation li {
list-style-type: none;
}
#content {
position: absolute;
top: 70px;
left: 160px;
margin-left: 10px;
margin-top: 10px;
width: 85%;
height: 85%;
}Nun würde ich eigentlich erwarten, dass folgendes im Navigationsbereich zu sehen ist:
Stattdessen erhalte ich aber:
Woher kommt der linke Rand, in der Liste? Wie bekomme ich das richtig hin?
