Margin(-Bottom) funktioniert nicht

anfaenger · #1 (**permalink**) 17.05.2006, 04:51

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:

<!--

html { 
margin:0px;
padding:0px;
}

body {
background-color:#FFFFFF;
color:#000000; 
font-size:10px;
margin:0px;
padding:0px;
}

a { 
background-color:transparent;
color:#0000FF;
font-size:10px;
text-decoration:none; 
}
 
a, p, h3, h4, pre {
margin:3px;
padding:5px 11px;
}

h2 {
font-size:15px;
color:#000000;
background-color:transparent;
}

h3 {
background-color:transparent;
color:#000000;
font-size:14px;
}

h4 {
background-color:transparent;
color:#000000;
font-size:11px;
text-transform:uppercase;
}

#kopf { 
position:absolute;
text-align:center;
top:18px;
width:100%; 
}

#box1 { 
background-color:#FFFF00; 
left:2%; 
position:absolute; 
top:80px; 
width:23%;  
}

#box2 { 
background-color:#FFFF00;
left:26%; 
position:absolute;  
top:80px; 
width:24%;
}

#box3 { 
background-color:#FFFF00;
left:51%; 
position:absolute; 
top:80px; 
width:24%; 
}

#box4 { 
background-color:#FFFF00;
left:76%; 
position:absolute; 
top:80px; 
width:22%; 
}

#box1, #box2, #box3, #box4 { 
border:1px dashed #000000;
margin:0px;
padding:0px;
} 

-->

Ich hoffe ihr versteht was ich meine...

Gruß
Stefan

Pumpkin · #2 (**permalink**) 17.05.2006, 05:13

Hast Du eine URL wo man sich das Design mal anschauen kann?

anfaenger · #3 (**permalink**) 17.05.2006, 05:21

Zitat:

Zitat von Pumpkin

Hast Du eine URL wo man sich das Design mal anschauen kann?

Ich habe leider noch kein Webspace etc., tut mir leid.

Pumpkin · #4 (**permalink**) 17.05.2006, 05:53

Dann stell bitte dein HTML auch hier rein.

anfaenger · #5 (**permalink**) 17.05.2006, 06:15

OK:

Code:

<body>

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


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

 
Text


</div>


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


Text


</div>


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


Text


</div>

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


Text


</div>

</body>
</html>

Das wars schon...

dottore:skin · #6 (**permalink**) 17.05.2006, 09:02

Code:

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

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

Text</p>
</div>


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

Text</p>
</div>


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

Text</p>
</div>

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

Text</p>
</div>

</body>
</html>

sind ja erstmal 5 boxen

Code:

div {
  padding-bottom:50px;
}

xm22 · #7 (**permalink**) 17.05.2006, 09:19

ich würde auch keine absolute Positionierung benutzen. Wenn jemand die Schriftgröße vergrößert, dann können sich im schlimmsten Fall die Divs überlappen..

anfaenger · #8 (**permalink**) 17.05.2006, 13:27

Code:

div {
  padding-bottom:50px;
}

Das habe ich auch schon probiert, verändert sich aber leider nichts...!?

Zitat:

ich würde auch keine absolute Positionierung benutzen. Wenn jemand die Schriftgröße vergrößert, dann können sich im schlimmsten Fall die Divs überlappen..

Was denn dann?

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Anfänger: Positionierung.	xam	CSS	3	19.05.2012 14:18
joomla template	wrock	CSS	2	06.04.2012 19:24
Schriftfarbe in den Eintragungsfeldern von jforms	Steveislucky	CSS	2	16.03.2010 10:59
Problem mit CSS Style	flo007	CSS	3	25.01.2009 17:08
DIV immer ganze Breite - normal?!?!?	csski	CSS	3	02.07.2008 12:20