• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Mehrere Boxen bei html zentrieren! Wie vorgehen?

S

*Sunny*

Neues Mitglied
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).

html_boxenr83n.jpg


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;}
Zum Vergrößern anklicken....

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*
 
In dem du ein div um alle vier Boxen legst und #box0 mit margin: auto formatierst. Das position: absolute würde ich rausnehmen.
 
Tronjer schrieb:
In dem du ein div um alle vier Boxen legst und #box0 mit margin: auto formatierst. Das position: absolute würde ich rausnehmen.
Zum Vergrößern anklicken....
#box0 ist bereits ein Wrapper ;)

@Sunny: float:bottom gibt's nicht!

Code: 
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.
 
Ich hatte die Frage wohl auch falsch interpretiert. Bei einer horizontalen und vertikalen Positionierung benötigt man natürlich position: absolute.

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

HTML: 
#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. :)
 
Zuletzt bearbeitet:
*Sunny* schrieb:
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.
Zum Vergrößern anklicken....

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

boxen_zentriert7uc4.jpg



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

HTML: 
#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%;
}
 
*Sunny* schrieb:
Cool, danke habs geschafft nur musste ich float garnicht mit einem clear löschen. Wie würde das denn aussehen?
Zum Vergrößern anklicken....

Mal angenommen, dein HTML sieht so aus:
HTML: 
<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.
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>
 
So sieht mein HTML aus.

HTML: 
<div id="box0">
<div id="box1">box1</div>
<div id="box2">box2</div>
<div id="box3">box3</div>
<div id="box4">box4</div>
</div>
 
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.
 
Tronjer schrieb:
Anderseits erinnert dieses width: 1px doch arg an die transparenten Gifs, welche man in früheren Zeiten als Abstandshalter zwischen Tabellen platzierte
Zum Vergrößern anklicken....

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
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben