Margin-Bottom funktioniert nicht

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

von **Anzeige von ABAKUS** »

Beitrag von **Caesar** » 17.05.2006, 18:58

verstehe ich das richtig.... dein margin-bottom funktioniert nicht? Aber ich finde auch keins in deinem Code..
Für eine feste Positionierung kannst du auch folgendes benutzen:
style="position:absolute;left:0px;bottom:50px;"

Beitrag von ab » 17.05.2006, 19:02

Hi,

ich weiss nicht wo ich das (margin-)bottom einbauen soll deshalb stehts nicht im Code, Habe es überall ausprobiert aber irgendwie hat nichts funktioniert.

Wo soll ich es denn genau hinschreiben?

Beitrag von **derHund** » 17.05.2006, 19:12

gibt dem body ein unteres padding von 50px ...

Beitrag von ab » 17.05.2006, 19:17

derHund hat geschrieben:gibt dem body ein unteres padding von 50px ...

Verändert sich leider überhaupt nichts...

Beitrag von **MonikaTS** » 17.05.2006, 22:29

ab hat geschrieben: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.

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

wenn das so drin steht ist es falsch
<div id="kopf">
<h2>Titel</h2>
</div>

sonst kann gar nichts richtig funktionieren,

den Rest seh ich mir noch an

lg

Beitrag von ab » 17.05.2006, 22:37

einfach hat geschrieben:
ab hat geschrieben: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.

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

wenn das so drin steht ist es falsch
<div id="kopf">
<h2>Titel</h2>
</div>

sonst kann gar nichts richtig funktionieren,

den Rest seh ich mir noch an

lg

Ja, also genau so stehts drin, wieso ist das falsch? Ich blicke da gar nicht mehr durch...

Edit: Habe gerade gelesen, dass man DIVs nicht mit Title bennen darf. OK das habe ich jetzt geändert, aber das eigentliche Problem ist immer noch vorhanden...

Edit2: Ich kapiere es einfach nicht. Bei einer anderen Seite habe ich einfach bei dem längsten Div (also dem mit dem meisten Text) "margin-bottom:10px" gemacht und da funktioniert es wunderbar. Ich kanns mir nicht mehr erklären, das macht mich verrückt...

Beitrag von **MonikaTS** » 18.05.2006, 00:00

aalso...
sorry das es länger dauerte...

ein div, ein p ein h1-h6 ist eine Box, ein a ....

jede Box, die man aufmacht, soll man wieder zumachen,

<p>=p ist aufgemacht
</p> ist zugemacht,

Du machst diese Boxen nicht zu,als ich sie zumachte, funktionierte auch das padding-bottom;

Code: Alles auswählen

<body>

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

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


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


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

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



</body>

</html>

das css

Code: Alles auswählen


html &#123;
margin&#58;0px;
padding&#58;0px 0px 0px 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%;
background-color&#58;#FF0000;
&#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;
padding-bottom&#58;50px;
&#125;

wieso Du dies allerdings nicht mit ganz normalen 'floats' fließenden Boxen löst, das wesentlich einfacher geht, versteh ich nicht ganz...

https://blog.html.it/layoutgala/

lg

Beitrag von ab » 18.05.2006, 00:36

Danke erstmal für deine Hilfe!

Leider klappt es imemr noch nicht, folgendes Problem:

Habe alles so gemacht wie du gesagt hast, es verändert sich der Abstand IN der Box. D.h., dass dann 50px Abstand vom letzten Textabschnitt bis zum Rahmen der Box im INNEREN sind..

Achso nochwas, an den ungeschlossenen <p>s kanns eigentlich nicht liegen, die habe ich bei meiner anderen Seite auch nicht geschlossen, ich habs zwar trotzdem mal geändert so wie du gesagt hast aber ich denke nicht dass es daran liegt.

Und zu den Floats etc., habe von CSS leider nicht wirklich Ahnung...

Beitrag von **MonikaTS** » 18.05.2006, 00:54

schick mir doch den Link wo es funktioniert, per PN,
weil ich vermag dies nicht ganz so zu glauben, dass es anders funktioniert,

lg

Beitrag von ab » 18.05.2006, 01:02

Ich habe leider kein Webspace, mache das nur hobbymäßig und bin noch ganz am Anfang. Sorry!

Kannst du das nocht lokal bei dir machen...?

Sorry nochmal für die Umstände...

Beitrag von **MonikaTS** » 18.05.2006, 09:26

ab hat geschrieben:

...Edit2: Ich kapiere es einfach nicht. Bei einer anderen Seite habe ich einfach bei dem längsten Div (also dem mit dem meisten Text) "margin-bottom:10px"...

ich meinte ja diese Seite kann ich die wo online sehen?

wenn Du sowieso ganz am Anfang bist,
dann lern es Dir doch gleich ganz richtig,

der Link mit der layoutgala oben in einem beitrag

nimm Dir so ein fertiges Layout und sieh mal nach wie das gemacht wurde,

so lernste es gleich für die Zukunft,
das html was Du verwendest ist urururualt

lg

Beitrag von ab » 18.05.2006, 15:47

Ne, die habe ich auch nur lokal...

Ich werde mir dir Seite auch angucken die du mir gezeigt hast, aber das Design von meiner jetzigen Seite ist komplett fertig, es fehlt nur noch das margin-bottom, sonst funktioniert alles deshalb würde ichs gerne fertig kriegen...

Beitrag von **MonikaTS** » 18.05.2006, 18:34

sodela

ob dies in vielen Browsern auch funktioniert habe ich jetzt nicht getestet,

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

}

das ist des Rätsels Lösung,
(ja manchmal steh ich auf dem Schlau.....

)

lg

Beitrag von ab » 18.05.2006, 19:38

Ich gebs auf, habe das so in die Stylesheet-Datei eingefügrt aber es verändert sich gar nichts...

Trotzdem Danke für deine Hilfe.