Antworten auf deine Fragen:
Neues Thema erstellen

CSS Boxen verschachteln (Einsteiger)

tutto

Nicht mehr ganz neu hier

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>
 
Zuletzt bearbeitet von einem Moderator:

Herr_D

offline

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
 
Zuletzt bearbeitet:

tutto

Nicht mehr ganz neu hier

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

offline

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

Nicht mehr ganz neu hier

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?
 
Zuletzt bearbeitet von einem Moderator:

Herr_D

offline

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)

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...
 
Zuletzt bearbeitet:

sokie

Mod | Web

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

Nicht mehr ganz neu hier

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

Mod | Forum

Teammitglied
PSD Beta Team
AW: CSS Boxen verschachteln (Einsteiger)

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>
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

Nicht mehr ganz neu hier

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;
}
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
118.621
Beiträge
1.538.378
Mitglieder
67.545
Neuestes Mitglied
helenkitina
Oben