nicht angemeldet
CSS Positionierung
Hallo,
bin gerade beim Planen einer neuen Webseite und habe mal wieder
ein Problem mit der Positionierung mittels CSS.
Erstmal das Grundsätzliche: Ich wollte einen dunklen Webseiten-
Hintergrund, in der Mitte des Browserfensters sollte ein 750px
breiter DIV-Container mit weißem Hintergrund sein (für die
eigentliche Webseite). Der Container soll auch bei wenig Text so
hoch wie das Browserfenster sein.
Dazu der entsprechende Quelltext:
HTML Datei:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<div class="rahmen">
test
</div>
</body>
</html>
CSS Datei:
html {
height: 100%;
margin: 0px;
}
body {
color: #000000;
background-color: #404040;
margin: 0px;
height: 100%;
text-align: center;
font: normal 80% Verdana,Helvetica,Arial,sans-serif;
}
div.rahmen {
color: #000000;
background-color: #FFFFFF;
width: 750px;
min-height: 100%;
margin: 0px auto;
text-align: left;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
}
Das hat auch wunderbar geklappt: Screenshot 1
Nun wollte ich den Abstand vom Text zum Rahmen vergrößern. Dazu habe
ich im Quelltext einen weiteren DIV-Container für den Inhalt
erzeugt:
<div class="rahmen">
<div class="inhalt">
test
</div>
</div>
Im CSS habe ich dem neuen DIV "inhalt" einen entsprechenden Abstand
gegeben:
div.inhalt {
margin: 15px;
}
Das Ergebnis sieht leider nicht gut aus: Screenshot 2
Wie man sieht, ist einfach nur der Rahmen um 15px nach unten
gerutscht.
Ich bin eigentlich davon ausgegangen, "margin" definiert den
Abstand zum vorherigen Element.
Gibt es eine andere Möglichkeit, in meinem Rahmen einen Abstand
von 15px zu bekommen?
Vielen Dank schon mal für eure Hilfe,
Sebastian
-
hi,
Nun wollte ich den Abstand vom Text zum Rahmen vergrößern. Dazu habe
ich im Quelltext einen weiteren DIV-Container für den Inhalt
erzeugt: [...]
Im CSS habe ich dem neuen DIV "inhalt" einen entsprechenden Abstand
gegeben:
div.inhalt {
margin: 15px;Das ist Unfug.
Verzichte ganz auf den Div-Container "inhalt", und verpasse "rahmen" einen Innenabstand.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Das ist Unfug.
Verzichte ganz auf den Div-Container "inhalt", und verpasse "rahmen" einen Innenabstand.
gruß,
wahsagaHallo,
vielen Dank für den Tipp. Den Innenabstand hatte ich schon wieder ganz vergessen.
Gruß,
Sebastian
-