Gast
2007-10-06, 10:49:24
Hallo :)
Also ich habe da ein paar Anfänger fragen zu CSS. Ich hab mich nämlich mal etwas damit beschäftigt und ganz simpel angefangen:
<html>
<head>
<style type="text/css">
div#container
{
width:500px;
height:250px;
margin-left: auto;
margin-right: auto;
background-color: #0099CC;
border: 1px solid #000000;
}
</style>
</head>
<body>
<div id="container">
hallo
</div>
</body>
</html>
1.) Soweit so gut, es wird also eine zentrierte blaue Box mit den Textinhalt "hallo" erzeugt. Jetzt würde ich gerne zwischen "hallo" und Boxenrand einen kleinen Abstand einfügen.
Also dachte ich, ein "padding: 20px;" in die Containerdefinition müsste reichen. Das Ergebnis: der Abstand von 20px existiert zwar, aber nicht weil der Text weiter nach innen Richtung Boxenmitte geschoben wurde, sondern weil die Box außenrum größer wurde, obwohl ihre Höhe und Breite doch eindeutig vorgegeben ist...
Wenn ich den Text in ein <span>-Tag packe und span dann mit margin: 20px; definiere, funktioniert alles (also praktisch genau der umgekehrte Weg, "von innen heraus"). Warum verhält sich das so?
2.) Wir erweitern das ganze etwas:
<html>
<head>
<style type="text/css">
div#container
{
width:360px;
margin-left: auto;
margin-right: auto;
background-color: #0099CC;
border: 1px solid #000000;
}
div#links
{
float: left;
width:150px;
height:200px;
margin: 20px 0px 20px 20px;
background-color: #000000;
}
div#rechts
{
float: right;
width:150px;
height:200px;
background-color: #000000;
margin:20px;
}
</style>
</head>
<body>
<div id="container">
<div id="links">
bla
</div>
<div id="rechts">
blub
</div>
</div>
</body>
</html>
Was gezeichnet werden soll: 2 schwarze Rechtecke, die von einem großen Rechteck umschlossen werden und jeweils den Abstand 20px haben (untereinander und zum großen).
Die 2 schwarzen Rechtecke werden auch gezeichnet, mit dem Abstand 20px...
Nur das große Rechteck hat die Höhe von ca. 2 Pixel und umschließt somit garnichts, nur die Ränder sind eben sichtbar.
Klar, ich habe für das Große Rechteck auch keine Höhe angegeben, aber dann müsste es doch normalerweise mindestens so hoch sein wie sein Inhalt verlangt? Wenn ich eine Box ohne Höhenangabe mache und etwas Text hineinschreibe ist die Box ja auch automatisch so hoch, dass der Text darin Platz hat...
Vielen Dank schonmal
Also ich habe da ein paar Anfänger fragen zu CSS. Ich hab mich nämlich mal etwas damit beschäftigt und ganz simpel angefangen:
<html>
<head>
<style type="text/css">
div#container
{
width:500px;
height:250px;
margin-left: auto;
margin-right: auto;
background-color: #0099CC;
border: 1px solid #000000;
}
</style>
</head>
<body>
<div id="container">
hallo
</div>
</body>
</html>
1.) Soweit so gut, es wird also eine zentrierte blaue Box mit den Textinhalt "hallo" erzeugt. Jetzt würde ich gerne zwischen "hallo" und Boxenrand einen kleinen Abstand einfügen.
Also dachte ich, ein "padding: 20px;" in die Containerdefinition müsste reichen. Das Ergebnis: der Abstand von 20px existiert zwar, aber nicht weil der Text weiter nach innen Richtung Boxenmitte geschoben wurde, sondern weil die Box außenrum größer wurde, obwohl ihre Höhe und Breite doch eindeutig vorgegeben ist...
Wenn ich den Text in ein <span>-Tag packe und span dann mit margin: 20px; definiere, funktioniert alles (also praktisch genau der umgekehrte Weg, "von innen heraus"). Warum verhält sich das so?
2.) Wir erweitern das ganze etwas:
<html>
<head>
<style type="text/css">
div#container
{
width:360px;
margin-left: auto;
margin-right: auto;
background-color: #0099CC;
border: 1px solid #000000;
}
div#links
{
float: left;
width:150px;
height:200px;
margin: 20px 0px 20px 20px;
background-color: #000000;
}
div#rechts
{
float: right;
width:150px;
height:200px;
background-color: #000000;
margin:20px;
}
</style>
</head>
<body>
<div id="container">
<div id="links">
bla
</div>
<div id="rechts">
blub
</div>
</div>
</body>
</html>
Was gezeichnet werden soll: 2 schwarze Rechtecke, die von einem großen Rechteck umschlossen werden und jeweils den Abstand 20px haben (untereinander und zum großen).
Die 2 schwarzen Rechtecke werden auch gezeichnet, mit dem Abstand 20px...
Nur das große Rechteck hat die Höhe von ca. 2 Pixel und umschließt somit garnichts, nur die Ränder sind eben sichtbar.
Klar, ich habe für das Große Rechteck auch keine Höhe angegeben, aber dann müsste es doch normalerweise mindestens so hoch sein wie sein Inhalt verlangt? Wenn ich eine Box ohne Höhenangabe mache und etwas Text hineinschreibe ist die Box ja auch automatisch so hoch, dass der Text darin Platz hat...
Vielen Dank schonmal