CSS Boxen verschachteln (Einsteiger)

tutto · 22.10.2011

ich versuche mich in CSS-Layout einzuarbeiten.

Ich habe 2 Boxen, ich hoffe standardkonform, positioniert. Wenn der Viewport verkleinert wird verändert sich die Position der der Boxen.
Ich möchte nun die beiden Boxen in eine umgebende Box stellen. Wer kann mir erklären wie. Vielleicht auch mit einem Beispiel.

Hier mein Code:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>	
	Zweispaltiges Layout mit fester Breite
</title>

<style type="text/css">
  body {
    	background-color: #0080c0;
	margin: 200px; /*Abstand auf allen Seiten*/
  	}
#box1 {
  	float: left;
	width: 200px;
	margin-right: 3px;
 	padding-top: 200px;
  	background-color: #ffffc6;
	}
#box2 {
	float: left;
	width: 300px;
	padding-top: 300px;
	background-color: black;
</style>
</head>

<body>
	<div id="box1">
	</div>
	<div id="box2">
	</div>
</body>
</html>

Herr_D · 22.10.2011

AW: CSS Boxen verschachteln (Einsteiger)

HTML:

<div id="outro">
        <div id="box1">Inhalt</div>
        <div id="box2">Inhalt2</div>
</div>

Die Frage ist doch, was willst du erreichen?

Warum ordnest du dem Body eine margin von 200px zu? Ist eher unüblich... wenn dann dem div outro

tutto · 22.10.2011

AW: CSS Boxen verschachteln (Einsteiger)

Ich will dass bei kleinem Viewport die zweite Box nicht nach unten wandert. Sondern Scrollbalken erscheinen.

Vielleicht ist meine Frage blöd, aber wenn ich den Code anschaue dann frage ich mich, woher weiß der Browser beim schließen des div's das es sich um box 1 handelt und nicht um outro.

Herr_D · 22.10.2011

AW: CSS Boxen verschachteln (Einsteiger)

Der Browser weiß das, weil... keine Ahnung..

Du mußt outro dann eine feste Breite zuordnen... könntest du theoretisch auch mit dem body lösen... ist aber eher unüblich...

tutto · 22.10.2011

ich hab's probiert, danke es funzt genau so! trotzdem noch die Frage: Woher weiß der Browser welcher div geschlossen wird.

ich habe mit padding die Höhe der Boxen bestimmt weil ich mit height keinen erfolg hatte.
Gibt's dafür eine Erklärung?

Herr_D · 22.10.2011

Keine Ahnung warum der Browser das nächsteglegene als Starttag interpretiert... Browser parsen html als logische Auszeichnungssprache...

Warum ist doch wumpe... man sollte nur beim Schreiben aufpassen, dass man alles, was man geöffnet hat auch wieder schließt...

(Einrücken hilft für die Übersicht... und auch sollte man nicht endlos verschachteln)

tutto schrieb:
ich habe mit padding die Höhe der Boxen bestimmt weil ich mit height keinen erfolg hatte.
Gibt's dafür eine Erklärung?

Ja kein Inhalt drin oder verschrieben... normalerweise funzt das...

sokie · 22.10.2011

AW: CSS Boxen verschachteln (Einsteiger)

ser browser schliesst die boxen von innen nach aussen, bzw. können äussere container (gleichen Typs, hier: div) erst geschloessen werden, wenn die inneren geschloassen sind, zB

Code:

<div>
  <div>

  <div><!--schliesen des inneren divs, der äussere bleibt offen-->
  <div> <!--ein weiteres div wird geöffnet (aussen und innen offen) -->
  </div> <!-- dir, und mir, und dem Browser dürfte hier klar sein: ein äusseres div ist noch zu schliessen-->
</div><!--jetzt ist auch das äussere div geschlossen-->

tutto · 22.10.2011

AW: CSS Boxen verschachteln (Einsteiger)

Ich habe nun nur den body background gegen eine »Streifentapete« mit repeat-x getauscht. Jetzt bekomme ich die Zentrierung des outro nicht mehr hin weil sich die Breite jetzt wohl am Hintergrundstreifen orientiert.

tr4ze · 23.10.2011

AW: CSS Boxen verschachteln (Einsteiger)

tutto schrieb:
ich habe mit padding die Höhe der Boxen bestimmt weil ich mit height keinen erfolg hatte.
Gibt's dafür eine Erklärung?

Ja, gibt es:
Du hast mit dem Float die Elemente aus dem Fluss genommen.
Outro ist demnach leer! Um das zu korrigieren musst du einem Element ein clear zuweisen und damit denn Elementfluss wieder herstellen.

HTML:

<style type="text/css">
.clearfix {
    clear: both;
    }
</style>

<div id="outro">
        <div id="box1">Inhalt</div>
        <div id="box2">Inhalt2</div>
        <div class="clearfix"</div>
</div>

tutto schrieb:
Ich habe nun nur den body background gegen eine »Streifentapete« mit repeat-x getauscht. Jetzt bekomme ich die Zentrierung des outro nicht mehr hin weil sich die Breite jetzt wohl am Hintergrundstreifen orientiert.

Der CSS-Style Background hat eigentlich keinen Einfluß auf die Dimensionen des zugewiesenen Elements.Da wie oben beschrieben outro leer ist, ist auch das Elternelement leer, in diesem Fall Body.
Du wirst also eine Höhe angegeben haben was dann wieder mit deinen margins kollidiert.
Lies dich mal hier ein:
http://little-boxes.de/lb1/IV-css-positionierung.html

HTML:

margin: 200px; /*Abstand auf allen Seiten*/

Ist nicht wirklich geeignet um Elemente zu zentrieren.
Wenn du denn Link oben gelesen und verstanden hast, schau dir das an:

tutto · 23.10.2011

AW: CSS Boxen verschachteln (Einsteiger)

der Stand der Dinge ist. Mit dem div um die divs funktioniert es genau so wie ich es möchte. Die beiden Boxen floaten in der Mitte des Fensters solange der Viewport größer als die umgebende Box ist.
Das Rätsel ist:
Ich habe den background im body verändert und die Zentrierung funktioniert nicht mehr.

Vorher:
<html>
<head>
<title>
Zweispaltiges Layout mit fester Breite
</title>

<style type="text/css">
body {
background: red;
margin-top: 100px;
}
#wrap {
width: 410px;
margin: auto;
}
#box1 {
float: left;
width: 200px;
margin-right: 10px;
padding-top: 200px;
background-color: #ffffc6;
}
#box2 {
float: left;
width: 200px;
padding-top: 200px;
background-color: black;
</style>
</head>

<body>
<div id="wrap">
<div id="box1">
</div>
<div id="box2">
</div>
</div>
</body>
</html>

nachher:

body {
background: url(tapete.jpg);
width: 43px;
height: 900px;
background-repeat: repeat-x;
margin-top: 100px;
}