HTML& CSS Problem mit Boxen!

Jucy

Anfänger

Registrierungsdatum: 22. November 2009

Beiträge: 32

Dienstag, 9. März 2010, 19:04

Problem mit Boxen!

Hallo leute,
Ich habe hier eine Box:

Box Layout:

	Quellcode
1 2 3	<div id="boxtop"><br>{TITLE}</div> <div id="boxmid">{BODY}</div> <div id="boxbot"></div>

Und der zugehörige CSS Teiel dazu:

Quellcode

#boxtop {
background-image: url(img_tem/box_klein_top.PNG);
width: 219px;
height: 38px;
text-align: center;
}
#boxmid {
background-image: url(img_tem/box_klein_mid.PNG);
width: 219px;
padding-left: 2px;
padding-right: 2px;
}
#boxbot {
background-image: url(img_tem/box_klein_bot.PNG);
width: 219px;
height: 18px;
}

Mein Problem ist das der Text nicht in den Boxen bleibt sondern drüber geht.
Screenshot:
http://www.bilder-space.de/bilder/561d94-1268161528.png

Kann mir wer den Code richtig schreiben?
Ich blicke da nicht durch °_°

Danke,
Jucy

Zum Seitenanfang

Rapid

Schüler

Registrierungsdatum: 26. September 2009

Beiträge: 164

Dienstag, 9. März 2010, 19:10

Versuch es mal mit diesem:

	Quellcode
1 2 3	<div id="boxtop"><br><p class="text">{TITLE}</p></div> <div id="boxmid"><p class="text">{BODY}</p></div> <div id="boxbot"></div>

Quellcode

#boxtop {
background-image: url(img_tem/box_klein_top.PNG);
width: 219px;
height: 38px;
text-align: center;
}
p.text {
margin-left:5px;
}
#boxmid {
background-image: url(img_tem/box_klein_mid.PNG);
width: 219px;
padding-left: 2px;
padding-right: 2px;
}
#boxbot {
background-image: url(img_tem/box_klein_bot.PNG);
width: 219px;
height: 18px;
}

Zum Seitenanfang

Jucy

Anfänger

Registrierungsdatum: 22. November 2009

Beiträge: 32

Dienstag, 9. März 2010, 19:16

Der Text ist jetzt in der Box,
Aber jetzt ist nach dem Head-Bild eine(weiße Balckenförmige) Trennung dann der Content dann wieder eine Trennung(ebenso) und dann das Bot-Bild...

Zum Seitenanfang

Rapid

Schüler

Registrierungsdatum: 26. September 2009

Beiträge: 164

Dienstag, 9. März 2010, 19:22

	Quellcode
1 2 3 4	p.text { margin-left:5px; margin-top:-1px; }

Und jetzt?

Zum Seitenanfang

Jucy

Anfänger

Registrierungsdatum: 22. November 2009

Beiträge: 32

Dienstag, 9. März 2010, 19:25

Jetzt ist der weiße Balken unter dem Top-Bild weg.
Der über dem Bot-Bild noch da...

Zum Seitenanfang

Rapid

Schüler

Registrierungsdatum: 26. September 2009

Beiträge: 164

Dienstag, 9. März 2010, 19:41

Kannst mal Screen machen? Bitte..

Zum Seitenanfang

Jucy

Anfänger

Registrierungsdatum: 22. November 2009

Beiträge: 32

Dienstag, 9. März 2010, 19:43

Naklar..
Bitteschön http://www.bilder-space.de/bilder/dcd993-1268163892.png

//Edit: Grad gesehen das ist kein Balken, sondern der letzte teil des Contents anscheind...why hat der sich verschoben?

Zum Seitenanfang

Rapid

Schüler

Registrierungsdatum: 26. September 2009

Beiträge: 164

Dienstag, 9. März 2010, 19:46

Ersetze:

	Quellcode
1 2 3 4 5	#boxbot { background-image: url(img_tem/box_klein_bot.PNG); width: 219px; height: 18px; }

Mit:

	Quellcode
1 2 3 4 5 6	#boxbot { margin-top:-1px; background-image: url(img_tem/box_klein_bot.PNG); width: 219px; height: 18px; }

//Edit Wegen den margin-top:-1px; von p.text ..

Zum Seitenanfang

Jucy

Anfänger

Registrierungsdatum: 22. November 2009

Beiträge: 32

Dienstag, 9. März 2010, 19:56

Rapid Danke!
Ich hab mal an den margin werten rumversucht.
ich musste -11 angeben damit dies Verschwindet.
Sieht gut aus, klappt alles, ende gut alles gut