Div Boxen positionieren Problem

[Bischop]

Guten Tag liebe HTML Profis,
meine Frage bezieht sich auf diesen Code, ich war mal so frei und hab diesen bei Tinkerbin zur besseren Ansicht reingetan. ( Wenn dies nicht gewünscht ist bitte Bescheid geben :) )
Tinkerbin

Nun zu meinen zwei Fragen:
1. Würde ich gerne den Hintergrund der 4 Boxen verändern, aber irgendwie habe ich den durchblick bei diesem ( ja Chaos ;) ) verloren.
2. Würde ich gerne diese 4 Boxen so aufgeteilt haben das zwei nebeneinander und die anderen zwei darunter kommen und dies am besten noch mit Abstand zueinander, wobei diese am Linken Rand gebunden sind. ( Ich hoffe ich versteht was ich meine).

Den meisten unter euch wird bestimmt auffallen, dass ich absolut kein Profi bin. Ich habe mich mehr durch testen durchgeschlagen, nun ist aber selbst das testen nicht mehr zielführend.

Ich hoffe ihr könnt mir helfen.
Mit besten Grüßen
Bischop

 

[Tronjer]

Etwas in dieser Form?

<div id="upper_boxes">
    <div id="box1"></div>
    <div id="box2"></div>
</div>
<div id="lower_boxes">
    <div id="box3"></div>
    <div id="box4"></div>
</div>

#upper_boxes, #lower_boxes {
    width: // irgendwas
}
#lower_boxes {
    margin-top: 20px;
}
#box1, #box2, #box3, #box4 {
    float: left;
}
#box2, #box4 {
   margin-left: 20px;
}
#box1 {
  background: red;
}
#box2 {
  background: blue;
}
#box3 {
   background: yellow;
}
#box4 {
  background: black;
}

 

[Bischop]

Hallo Tronjer,
ich werde es mal ausprobieren in mein Beispiel umzusetzten. :) Danke dir.
Meine Frage bleibt mir da aber doch, warum habe ich so eine super komplexes Beispiel bekommen wenn das doch so einfach ( zumindest aussieht ) was ist da nun der Unterschied.

Grüße
Bischop

 

[Tronjer]

Es gibt keinen Unterschied. Ich habe nur weggelassen, was für das Grundgerüst nicht nötig ist. Je mehr Code, desto unübersichtlicher wird es.

Übrigens lässt sich mein Beispiel noch weiter verkürzen. Du musst dann allerdings die width so einstellen, dass keine 3 Boxen nebeneinander in #boxes passen.

<div id="boxes">    
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
    <div id="box4"></div>
 </div>

#boxes {    
    width: // so groß wie #box1 + #box2
 }[COLOR=#000080]
[/COLOR]
#box1, #box2, #box3, #box4 {     
    float: left;
 }[COLOR=#000080]

[/COLOR]#box1, #box2 {
     margin-bottom: 20px;
 }[COLOR=#000080]

[/COLOR]#box2, #box4 {
     margin-left: 20px;
 }[COLOR=#000080]
[/COLOR]

 

[Bischop]

Hallo Tronjer,
vielen vielen dank, habe es nun umgesetzt bekommen. Super. :)
Was mich aber noch etwas wurmt ist die Tatsache das ich bei meinem alten System den Fehler nicht gefunden habe, hast du mir da vll. auch ein kleinen Tipp? Sowas lässt mich dann doch nicht in Ruhe.

Grüße und Dank
Bischop

 

[Tronjer]

Du hast abwechselnd float:left und float:right verwendet. Außerdem sind da Syntax-Fehler bei den Hex-Codes für die Farbwerte. Hex steht für sechs, eine Verkürzung des Codes ist nur zulässig, sofern alle Zeichen gleich sind. Statt #999999 kann man auch #999 schreiben, aber so etwas wie #933 funktioniert nicht. Als Tipp noch: position:static ist default und muss nicht extra angeben werden. Die Abstände zwischen den Boxen in em zu definieren, ist keine glückliche Lösung. Nimm lieber px oder %.

 

[Bischop]

Oh wei,
würdest du mir ein gefallen machen und dir das mal anschauen?
Tinkerbin
Wie bekomme ich es hin das Box 3 und Box 4 unter Box 1 und Box 3 sind?
Habe ich da schon wieder was falsch gemacht? Das war eigentlich auch mein Gedankengang mit float:left und float:right, naja eher ein Bauchgefühl.

Grüße
Bischop

 

[Tronjer]

Schau dir mal die HTML-Struktur an, die ich gepostet habe und vergleiche das mit deiner.