CSS Boxen Problem

Agratos

Lt. Commander
Registriert
Mai 2010
Beiträge
1.442
Hi Leute, ich war heute dabei eine Box zu erstellen:

Oben
Mitte
Unten

Mitte soll sich jeweils der Länge des Textes anpassen und der Text soll einen Abstand von jeweils 5 px in alle Richtungen haben - so weit so gut. Habe dann auch 2 Varianten probiert - ein mal mit einem zweiten Div in dem "Mitte" div drin, dem ich margin: 5px gegeben habe. Fazit: Das Hintergrundbild von "Mitte" wird nur in dem Bereich des Div's angezeigt, der in "Mitte" drin ist und das margin bestitzt.

Zweitens habe ich das ganze noch mit padding probiert, indem ich wieder einen weiteren Div in "Mitte" gesetzt habe und diesem padding: 5px; gegeben habe. Fazit: Oben, links, unten wunderbar, nur rechts leider 0px Abstand.

Naja, damits nicht zu trocken wird, hier mal mein Code (ist nur ein Beispiel, habs grob vereinfacht und auch nicht auf Doctype, etc. geachtet, ist nur zur Demo gedacht).

test.html
Code:
<html>
<head>
	<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="top"></div>
<div class="mitte">
	<div class="mitte_i">Hallohoooooooooooo</div>
</div>
<div class="bottom"></div>
</body>
</html>

style.css (Variante 1 mit margin)
Code:
.top {
	width: 100px;
	height: 20px;
	border: 1px solid green;
}

.mitte {
	width: 100px;
	background-image: url('bg.PNG');
}

.mitte_i {
	margin: 5px;
	border: 1px solid green;
}

.bottom {
	width: 100px;
	height: 10px;
	border: 1px solid black;
}

style.css (Variante 2 mit padding)
Code:
.top {
	width: 100px;
	height: 20px;
	border: 1px solid green;
}

.mitte {
	width: 100px;
	background-image: url('bg.PNG');
}

.mitte_i {
	padding: 5px;
	overflow: hidden;
	border: 1px solid green;
}

.bottom {
	width: 100px;
	height: 10px;
	border: 1px solid black;
}

Die Borders dienen nur zur Darstellung, damit die Div's ohne Hintergrundbild auch sieht.

Bin für jede Lösung dankbar. ;)
 
Als erstes würde ich ein sogenannten "wrapper" erstellen, also ein "Haupt"-Container der durch margin:auto zentriert wird und in dem alle anderen Container enthalten sind. Desweiteren brauchst du in dem simplen Fall kein "mitte_innen" Container. Die 5px abstand in alle Richtungen würde ich einfach über padding lösen.

Index.html
<body>
<div id="wrapper">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>

css.css
#wrapper {
margin: auto;
width: 100px;
height: auto;
}
#header {
height: 20px;
width: 100px;
}
#content {
height: auto;
width: 90px; /* 5px links und 5px rechts werden durch das padding in Anspruch genommen daher die 90px in der Breite*/
padding:5px;
}
#footer {
height: 10px;
width: 100px;
}

So müsste das ganze funktionieren. Ist on-the-fly geschrieben.

Gruß Gajel.
 
Hi, den Wrapper hab ich ja auch, war ja nur als Beispiel geschrieben. :)

Ich möchte das Padding eigentlich nicht gerne direkt verwenden, weil ich glaube, dass der Internet Explorer das falsch interpretiert oder? Ich meine der zieht die x px margin nicht von der Breite ab oder? Ich probiers trotzdem mal und meld mich dann nochmal, danke auf jeden Fall.

E: Ok, habs probiert und dabei kommt leider das gleiche raus, rechts 0px Abstand. :(
Bin für weitere Anregungen dankbar.

Ach, nochwas. Ich habs vorher mal immer mit float: left in jedem Teil jeweils geregelt, aber das ist ja wohl nicht die feine Art. ;)
 
Zuletzt bearbeitet:
Also ich weiß nicht ob ich verstanden habe, was du willst, aber probiere es mal damit:

Code:
<html>
<head>
<style type="text/css">
div
{
	border:2px solid black;
	text-align:center;
}
#oben
{
	width:100px;
}
#mitte
{
	margin:0px 5px 0px 5px;
}
#mMitte
{
	margin:0px;
}
#unten
{
	width:100px;
}

</style>
</head>
<body>
<div id="oben">OBEN</div>
<div id="mMitte"><div id="mitte">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div></div>
<div id="unten">UNTEN</div>
</body>
</html>

Gruß

HD
 
Agratos schrieb:
Ich möchte das Padding eigentlich nicht gerne direkt verwenden, weil ich glaube, dass der Internet Explorer das falsch interpretiert oder? Ich meine der zieht die x px margin nicht von der Breite ab oder?

Du kannst padding schon verwenden, IE7 und IE8 stellen das richtig dar wenn sie nicht im Quirks Mode (kompatibilität zu IE6) laufen.

Das wichtige ist ein korrekter header, da die IE sonst sofort in den QuirksMode schalten. (wäre bei deinem Code Beispiel der Fall).
Zum Testen nimmst du dann am besten IE8 da kannst du auch von hand zwischen Auto, IE8, IE7 und QuirksMode Engine wechseln.

zb:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
Zuletzt bearbeitet:
Hi, das mit dem Quirksmode ist mir bewusst. Ich probier das ganze im Firefox aus und hab auch schon andere Doctypes probiert (HTML 4 mit dtd, etc.), bringt aber leider auch nichts.

Das von Hans klappt leider überhaupt nicht.

E: Mir kommt da grad so eine Idee. Links und rechts nehme ich margin und oben und unten padding. Dann müsste das einwandfrei klappen. Danke euch trotzdem für eure Hilfe. :)

// Kann geschlossen werden.
 
Zuletzt bearbeitet:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
<style type="text/css">
*{
margin:0;
padding:0;
}

div, p {
border:1px solid black;
}

#wrapper{
margin:0 auto;
width:600px;
}

#oben{
height:50px;
}

#mitte{
background-color:#cccccc;
padding:10px;
}

#unten{
height:25px;
}
</style>
</head>

<body>
<div id="wrapper">
	<div id="oben">oben</div>
	<div id="mitte"><p>Inhalt Mitte</p></div>
	<div id="unten">mitte</div>
</div>
</body>
</html>



Das funktioniert doch einwandfrei, ganz gleich ob IE8 oder Firefox.
 
Allg. und kurioserweise wird zu gern mit DIVs um sich geworfen.
Bei IDs ist das nicht besser.

Alles was ein HTML-Element ist kann auch angesprochen werden,
es muss nicht überall ein DIV drumgepackt werden.
IDs braucht man meistens nur für JS, nicht für CSS; da sind eher Klassen günstiger
da mehrfach verwendbar.

Das <div id="wrapper"> </div> kann raus, dafür im CSS body statt #wrapper ansprechen.
 
Naja, das ist Ansichtssache. Ich bringe gerne Struktur in meinen HTML-Code und verwende deshalb gerne sowohl id als auch class. Und unter bestimmten Umständen kann es nützlich sein beide zu verwenden, unter dem Gesichtspunkt der höheren Wertigkeit von id.

So passt's dann.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
<style type="text/css">
div, p {
border:1px solid black;
}

body{
background-color:#123456;
margin:0 auto;
width:500px;
}

#oben{
height:50px;
}

#mitte{
background-color:#cccccc;
padding:10px;
}

#unten{
height:25px;
}
</style>
</head>

<body>
	<div id="oben">oben</div>
	<div id="mitte"><p>Inhalt Mitte</p></div>
	<div id="unten">mitte</div>
</body>
</html>


P.S. Der wrapper ist in diesem Beispiel überflüssig, da geb ich dir Recht. Allerdings kann er, je nach Design, notwendig werden bzw. ist es sinnvoll, einen solchen einzusetzen.
 
Zuletzt bearbeitet:
Na du kannst ja auch noch html per CSS gestalten,
da spart man sich eventuell ein div, welches nur für "Design" zuständig ist.

Es wird halt allg. recht viel mit div gearbeitet, weil irgendwie doch noch
das Tabellenlayout in den Köpfen rumschwirrt. Auch werden die Boxen
zu gern völlig autark gestaltet ohne auf Vererbung und ähnliches
zu achten.
Der html-Quellcode ist dann zwar teilweise leer, aber das CSS läuft
über vor Doppeldefinitionen.
Anstatt der IDs bin ich eher auf Doppelklassen oder sogar Dreifachklassen
übergegangen. Tut dasselbe mit meistens weniger Zeilen Quellcode/CSS.

Will sagen: Es geht häufig auch anders und einfacher. :)
 
Zuletzt bearbeitet:
Wenn ich Boxen, die nur einmal vorkommen, eine id verpasse, sehe ich keinen Nachteil gegenüber class. In dem Fall hat class einfach drei Buchstaben zu viel :)

Dein Anliegen mit den Boxen kann ich verstehen. Als ich von Tabellenlayout und Boxlayout umgestiegen bin, habe ich anfangs leere Boxen geschrieben und denen per CSS ein Hintergrundbild verpasst (bspw. beim header). Man kann's kompliziert machen ... das img-Element per CSS zu positionieren ist wohl eleganter. :lol:
 
Zurück
Oben