Lücken im Layout

[DenisCGN]

Hallo zusammen,

wie bekomme ich die Lücken weg, die im FF angezeigt werden?

http://www.localhero.de/Boxes.php

.box566Top {
	background-image: url(Slices/images/LH_Box566_Top.png);
	background-repeat: no-repeat;
	width: 566px;
	height: 30px;
}
.box566Content {
	background-image: url(Slices/images/LH_Box566_Content.png);
	background-repeat: repeat-y;
	width: 546px;
	padding: 0px 10px 0px 10px;
}
.box566Bottom {
	background-image: url(Slices/images/LH_Box566_Bottom.png);
	background-repeat: no-repeat;
	width: 566px;
	height: 16px;
}
.box306Top {
	background-image: url(Slices/images/LH_Box306_Top.png);
	background-repeat: no-repeat;
	width: 306px;
	height: 30px;
}
.box306Content {
	background-image: url(Slices/images/LH_Box306_Content.png);
	background-repeat: repeat-y;
	width: 286px;
	padding: 0 10px 0 10px;
}
.box306Bottom {
	background-image: url(Slices/images/LH_Box306_Bottom.png);
	background-repeat: no-repeat;
	width: 306px;
	height: 16px;
}
.box886Top {
	background-image: url(Slices/images/LH_Box886_Top.png);
	background-repeat: no-repeat;
	width: 886px;
	height: 30px;
}
.box886Content {
	background-image: url(Slices/images/LH_Box886_Content.png);
	background-repeat: repeat-y;
	width: 866px;
	padding: 0 10px 0 10px;
}
.box886Bottom {
	background-image: url(Slices/images/LH_Box886_Bottom.png);
	background-repeat: no-repeat;
	width: 886px;
	height: 16px;
}
.box286Top {
	background-image: url(Slices/images/LH_Box286_Top.png);
	background-repeat: no-repeat;
	width: 286px;
	height: 30px;
}
.box286Content {
	background-image: url(Slices/images/LH_Box286_Content.png);
	background-repeat: repeat-y;
	width: 266px;
	padding: 0 10px 0 10px;
}
.box286Bottom {
	background-image: url(Slices/images/LH_Box286_Bottom.png);
	background-repeat: no-repeat;
	width: 286px;
	height: 16px;
}

Grüße,
der Denis

[epiK]

Indem du das an den Anfang setzt:
*{margin:0; padding:0;}

Das setzt erst mal für alle Elemente das padding und margin auf 0.
Danach kannst du ja "p" noch ein padding zuweisen.

[DenisCGN]

Hi epiK,

das hat prima geklappt, danke.

Nun stellt sich mir die Frage, warum sollte ich P überhaupt noch verwenden? <br /> macht nicht soviel Ärger und sieht in allen Browsern gut aus.

Ich habe jetzt 2 Ps erstellt.

p {margin: 0px 0px 14px 0px;}
p.last {margin: 0px;}

Jetzt sieht es auch gut aus. Problem ist, wie bekomme ich heraus, welches der letzte P-Abschnitt ist, damit ich dort die Klasse "last" anbrigen kann.

Grüße
der Denis

[epiK]

Warum "p"?
Na, weil es semantisch das Richtige wäre. Ein Paragraph ist eben genau ein Textabschnitt mit Absatz.

Musste du es verwenden?
Nein. Du kannst auch deine Texte mit breaks durchsetzen. Das bläht im Verhältnis deinen Quellcode etwas auf, aber auch nicht so viel im Vergleich.

Wie du p.last herausfindest?
Keine Ahnung. Das ist halt dann immer der letzte Absatz.

Zum einen ist die Testseite ist nicht mehr on und zum anderen weiß ich ja nicht, wie du deine Seite, bzw. die Texte einpflegst.

[DenisCGN]

Ja ich habe meinen Server etwas aufgeräumt :-)

Ich kann es machen wie ich es mag, mit P oder mit <BR />.

Mich stört es halt, wennich mit P arbeite, dass ich immer 2 styles brauche, weil es sonst total doof aussieht, wenn der letzte Absatz nochmal soviel platz unten hat. Daher mein Gedanke mit dem Letzten Absatz. Nützt aber nix, wenn ich nicht rausfinden kann, welcher der letzte Absatz ist.

Es geht halt mehr um die Optik :-)

[wildmieze]

hmm .. du könntest versuchen, der content-box unten ein negatives padding zu geben .. oder der nachfolgenden ein negatives margin .. o.ä. .. halt irgendwie so, daß das margin des <p> unten optisch "aufgehoben" wird .. musste mal rumtesten ..
.. alternativ könntest du das box-bottom-hintergrundbild höher machen und als content-hintergrundbild verwenden - dann brauchste unten wieder das margin vom <p>

[koslowski]

Moin,

hmm .. du könntest versuchen, der content-box unten ein negatives padding zu geben ..

es gibt keine negativen paddings.

[wildmieze]

hehe ... glaub ich dir aufs wort, ist ja im prinzip auch völlig unlogisch^^ .. tja, so ist das halt, wenn man sein css per trial & error aufbaut - da testet man auch unsinnige negative paddings *g*