Du befindest Dich im Archiv vom ABAKUS Online Marketing Forum. Hier kannst Du Dich für das Forum mit den aktuellen Beiträgen registrieren.

Margin-Bottom funktioniert nicht

Ajax, Hijax, Microformats, RDF, Markup, HTML, PHP, CSS, MySQL, htaccess, robots.txt, CGI, Java, Javascript usw.
ab
PostRank 3
PostRank 3
Beiträge: 81
Registriert: 05.05.2006, 22:20

Beitrag von ab » 17.05.2006, 18:50

Hallo,

ich habe mein CSS-Design jetzt soweit fertig, jedoch noch ein letzten Problem.

Das Design besteht aus 4 Boxen, ich möchte jetzt, dass diese Boxen nicht unten direkt am Ende des Bildschirms kleben, sondern z.B. einen Abstand vom unteren Rand von 50px haben.

Ich weiss jedoch leider nicht wie/wo ich das hinschreiben muss, vielleicht könnt ihr mir helfen. :(

Hier mal mein Stylesheet:

Code: Alles auswählen

<!--

html &#123;
margin&#58;0px;
padding&#58;0px;
&#125;

body &#123;
background-color&#58;#FFFFFF;
color&#58;#000000;
font-size&#58;10px;
margin&#58;0px;
padding&#58;0px;
&#125;

a &#123;
background-color&#58;transparent;
color&#58;#0000FF;
font-size&#58;10px;
text-decoration&#58;none;
&#125;
 
a, p, h3, h4, pre &#123;
margin&#58;3px;
padding&#58;5px 11px;
&#125;

h2 &#123;
font-size&#58;15px;
color&#58;#000000;
background-color&#58;transparent;
&#125;

h3 &#123;
background-color&#58;transparent;
color&#58;#000000;
font-size&#58;14px;
&#125;

h4 &#123;
background-color&#58;transparent;
color&#58;#000000;
font-size&#58;11px;
text-transform&#58;uppercase;
&#125;

#kopf &#123;
position&#58;absolute;
text-align&#58;center;
top&#58;18px;
width&#58;100%;
&#125;

#box1 &#123;
background-color&#58;#FFFF00;
left&#58;2%;
position&#58;absolute;
top&#58;80px;
width&#58;23%; 
&#125;

#box2 &#123;
background-color&#58;#FFFF00;
left&#58;26%;
position&#58;absolute; 
top&#58;80px;
width&#58;24%;
&#125;

#box3 &#123;
background-color&#58;#FFFF00;
left&#58;51%;
position&#58;absolute;
top&#58;80px;
width&#58;24%;
&#125;

#box4 &#123;
background-color&#58;#FFFF00;
left&#58;76%;
position&#58;absolute;
top&#58;80px;
width&#58;22%;
&#125;

#box1, #box2, #box3, #box4 &#123;
border&#58;1px dashed #000000;
margin&#58;0px;
padding&#58;0px;
&#125;

-->

Hier noch die eigentliche HTML-Datei:

Code: Alles auswählen

<body>

<div id="kopf">
<h2>Titel</titel></h2>


<div id="box1">
<h4>Titel</h4><p>
Text<p>
</div>


<div id="box2">
<h4>Titel</h4><p>
Text<p>
</div>


<div id="box3">
<h4>Titel</h4><p>
Text<p>
</div>

<div id=box4">
<h4>Titel</h4><p>
Text<p>
</div>

</body>
</html> 
Hoffe ihr versteht was ich meine.

Gruß
ab