Mehrere Boxen bei html zentrieren! Wie vorgehen?

[*Sunny*]

Guten Morgen,

ich mache eine schulische Ausbildung zur Gestaltungs-Technischen-Assistentin (GTA). :)

Wir hatten am Donnerstag das erste mal HTML und sollten ein paar Boxen (4 Stück) erstellen und die mittig zentrieren auf dem Bildschirm.

Allerdings wenn ich die zentrieren möchte mit "margin-top & margin-left".

Hier ist ein Screen wie es hinterher aussehen soll. (Haben wir als Aufgabenstellung bekommen).

Mein Quellcode sieht bisher so aus:

style1.css

#box0{height:560px;
width:800px;
top:50%;
left:50%;
position: absolute;
margin-left: -150px;
margin-top: -100px;}



#box1{background: blue;
height:80px;
width:800px;}


#box2{background: red;
height:300px;
width:200px;
float: left;}



#box3{background: grey;
height:300px;
width:600px;}


#box4{background: blue;
height:180px;
width:800px;
float:bottom;}

Wenn ich die "margin-Befehle" einsetze werden immer fast alle Boxen unter eine andere Box verschoben.

Wie progammier ich das, dass es so aussieht wie oben auf dem Bild? Gruß *Sunny*

 

[Tronjer]

In dem du ein div um alle vier Boxen legst und #box0 mit margin: auto formatierst. Das position: absolute würde ich rausnehmen.

 

[Space Vampire]

In dem du ein div um alle vier Boxen legst und #box0 mit margin: auto formatierst. Das position: absolute würde ich rausnehmen.

#box0 ist bereits ein Wrapper ;)

@Sunny: float:bottom gibt's nicht!

html, body{
	height:100%;
}
#halb{
	height:50%;
}

#box0{
	height:560px;
	width:800px;
	margin: -280px auto 0 auto;
}

#box1{
	background: blue;
	height:80px;
}

#box2{
	background: red;
	height:300px;
	width:200px;
	float: left;
}

#box3{
	background: grey;
	height:300px;
	margin-left:200px;
}

#box4{
	background: blue;
	height:180px;
}

Zur Erklärung:
html und body sind Elternelemente. Sag Ihnen, dass ihre höhe 100% ist. Erstelle eine Box ohne sichtbare Eigenschaften (#halb) und gib ihr die Höhe 50%.
Deinem Wrapper (#box0) gibst du automatische Seitenabstände und als Top-Margin die Hälfte der Höhe von #box0 als Negativwert.
Das wars.

Anmerkungen:
- Elemente, die nicht umflossen werden sollen, brauchst du auch nicht floaten!
- Box-Elemente die nicht gefloatet sind nehmen automatisch 100% ein und brauchen kein width.

 

[Tronjer]

Ich hatte die Frage wohl auch falsch interpretiert. Bei einer horizontalen und vertikalen Positionierung benötigt man natürlich position: absolute.

#box0 {
    position: absolute;
    height: 560px;
    width: 800px;
    left: 50%;
    top: 50%;
    margin-top: -280px;
    margin-left: -400px;
}

Erklärung: Top und left auf 50% setzen, margin-left und margin-top auf die Hälfte der Breite u. Höhe in Pixeln und mit negativem Vorzeichen (minus).

 

[*Sunny*]

Hi,

erstmal vielen Dank für die schnellen Antworten. :)

Der Code sieht jetzt so aus, nur sind die Boxen zwar zum Teil mittag aber immer noch überlagert.

Hier der Code:

#box0 {
    position: absolute;
    height: 560px;
    width: 800px;
    left: 50%;
    top: 50%;
    margin-top: -280px;
    margin-left: -400px;
}

#box1{background: blue;
      position: absolute;
      height:80px;
      width:800px;
      top: 50%;
      left:50%;
      margin-top: -40px;
      margin-left: -400px;}

#box2{background: red;
      position: absolute;
      height:300px;
      width:200px;
      float: left;
      top:50%;
      left:50%;
      margin-top: -150px;
      margin-left: -100px;}


#box3{background: grey;
      position: absolute;
      height:300px;
      width:600px;
      top:50%;
      left:50%;
      margin-top: -150px;
      margin-left: -300px;}


#box4{background: blue;
      position: absolute;
      height:180px;
      width:800px;
      float:bottom;
      top:50%;
      left:50%;
      margin-top: -90px;
      margin-left: -400;}

@Space Vampire: Hab eben deinen Code mal benutzt und dort wurden mit nur Box 2, 3 & 4 angezeigt, allerdings nur halb. Mittig war es aber. :)

Wie gesagt war die erste html-Stunde die wir am Donnerstag hatten von daher muss ich erstmal etwas einarbeiten. :)

 

[Tronjer]

Hi,

erstmal vielen Dank für die schnellen Antworten. :)

Der Code sieht jetzt so aus, nur sind die Boxen zwar zum Teil mittag aber immer noch überlagert.

Es soll ja auch nur der äußere Wrapper auf Seitenmitte gestellt werden. Alle anderen Boxen liegen darin und bewegen sich mit ihm. Du musst dort also die Angaben für top, left, margin und position: absolute löschen und außerdem das float mit einem clear wieder aufheben.

 

[*Sunny*]

Cool, danke habs geschafft nur musste ich float garnicht mit einem clear löschen. Wie würde das denn aussehen?

Hier ein Screen wie es jetzt bei mir aussieht.

So sieht der Code jetzt aus, was auch funktioniert (siehe Screen)

#box0 {
    position: absolute;
    height: 560px;
    width: 800px;
    left: 50%;
    top: 50%;
    margin-top: -280px;
    margin-left: -400px;
}

#box1 {
      background: blue;
      height:80px;
      width:800px;
      top: 50%;
      left:50%;
}

#box2 {
      background: red;
      height:300px;
      width:200px;
      float: left;
      top:50%;
      left:50%;
}


#box3 {
      background: grey;
      height:300px;
      width:600px;
      top:50%;
      left:50%;
}


#box4 {
      background: blue;
      height:180px;
      width:800px;
      float:bottom;
      top:50%;
      left:50%;
}

 

[Space Vampire]

...Bei einer horizontalen und vertikalen Positionierung benötigt man natürlich position: absolute...

Unsinn! Aber macht ihr mal ;)

 

[Tronjer]

Cool, danke habs geschafft nur musste ich float garnicht mit einem clear löschen. Wie würde das denn aussehen?

Mal angenommen, dein HTML sieht so aus:

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

Dann wäre das der dazugehörige CSS-Code.

<style type="text/css">
#box0 {
    position: absolute;
    height: 560px;
    width: 800px;
    left: 50%;
    top: 50%;
    margin-top: -280px;
    margin-left: -400px;
}

#box1 {
    background: black;
    height: 80px;
    width: 800px;
 }

#box2 {
    background: red;
    height: 300px;
    width: 200px;
    float: left;
}


#box3 {
    background: gray;
    height: 300px;
    width: 600px;
    float: left;
}


#box4 {
    clear: left;
    background: blue;
    height: 180px;
    width: 800px;
}
</style>

 

[*Sunny*]

So sieht mein HTML aus.

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

 

[Elroy]

Hallo.

Die Methode von Tronjer hat natürlich den Nachteil das bei zu kleinem Bildschirm ein Teil der Seite nicht zu erreichen ist.

Die sichere Methode funktioniert so: Horizontale und vertikale Zentrierung mit CSS
Und Space Vampire hat natürlich Recht, man braucht wirklich kein position: absolute.

Gruss
Elroy

 

[Tronjer]

Zugegeben, die Fricca-Methode war mir unbekannt. Damit bin ich bisher nicht konfrontiert worden. Anderseits erinnert dieses width: 1px doch arg an die transparenten Gifs, welche man in früheren Zeiten als Abstandshalter zwischen Tabellen platzierte. Sofern die Höhe des zu zentrierenden Elements 600 Pixel (Auflösung von Netbooks) nicht überschreitet, würde ich doch eher auf position: absolute zurückgreifen, und für Smartphones schreibt man ja ohnehin ein eigenständiges CSS.

 

[Elroy]

Anderseits erinnert dieses width: 1px doch arg an die transparenten Gifs, welche man in früheren Zeiten als Abstandshalter zwischen Tabellen platzierte

Abstände werden nun mal mit CSS angegeben, ob das 1px oder 100px sind ist unerheblich.
Und ich muss dir recht geben, CSS ersetzt die transparenten Gifs. So soll es auch sein, oder etwa nicht.

Gruss
Elroy