+- PHP Rocks (https://www.php-rocks.de)
+-- Forum: HTML, CSS, Usability und Barrierefreiheit (https://www.php-rocks.de/https://www.php-rocks.de/forum/11-html-css-usability-und-barrierefreiheit.html)
+--- Forum: HTML & CSS (https://www.php-rocks.de/https://www.php-rocks.de/forum/12-html-css.html)
+--- Thema: DIV zentrieren (/https://www.php-rocks.de/thema/128-div-zentrieren.html)
DIV zentrieren - elysium - 28.02.2017
Hallo zusammen,
nun ist es soweit, ich hänge fest
.Ich soll mir 3 "Layouts" ausdenken in denen ich DIVs verschachteln soll.
Nun habe ich mir wohl etwas zu schweres ausgedacht
.Ich wollte eine umgedrehte Pyramide mit DIVs bauen in denen jeweils 2 weitere DIVs ineinander verschachtelt sind.
Das habe ich sogar hinbekommen
.Der innerste DIV (im Code .container8) reagiert aber leider auf keine vertikalen Margin-Befehle.
Ich möchte den schön mittig haben, wie der DIV in dem er steckt (.container7).
Hab alle möglichen Schreibweisen versucht, sogar mit padding bei Container7 habe ich es versucht (da sprengt es das Layout).
Ich weiß nicht mehr weiter
.Anbei der Code:
Code:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Aufgabe 01</title>
<style type="text/css">
#wrapper{
width: 700px;
height: 400px;
margin: 0 auto;
}
/* Oben - Links - Blau */
#container1{
background: blue;
width: 200px;
height: 100px;
margin-right: 50px;
float: left;
}
/* Oben - Mitte - Grün */
#container2{
background: green;
width: 200px;
height: 100px;
float: left;
}
/* Oben - Rechts - Gelb */
#container3{
background: yellow;
width: 200px;
height: 100px;
margin-left: 50px;
float: left;
}
/* Mitte - Links - Grau */
#container4{
background: gray;
width: 200px;
height: 100px;
margin: 50px 25px 50px 125px;
float: left;
}
/* Mitte - Rechts - Gold */
#container5{
background: gold;
width: 200px;
height: 100px;
margin: 50px 125px 50px 25px;
float: left;
}
/* Unten - Links - Violet */
#container6{
background: blueviolet;
width: 200px;
height: 100px;
margin: 0 250px;
float: left;
}
/* Überall - Innen - Dunkelrot */
.container7{
background: darkred;
width: 100px;
height: 50px;
margin: 25px auto;
}
/* Überall - Innen - Schwarz */
.container8{
background: black;
width: 50px;
height: 30px;
margin-top: 10px;
margin-left: 25px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="container1">
<div class="container7">
<div class="container8"></div>
</div><!-- Ende container7 -->
</div><!-- Ende container1 -->
<div id="container2">
<div class="container7">
<div class="container8"></div>
</div><!-- Ende container7 -->
</div><!-- Ende container2 -->
<div id="container3">
<div class="container7">
<div class="container8"></div>
</div><!-- Ende container7 -->
</div><!-- Ende container3 -->
<div id="container4">
<div class="container7">
<div class="container8"></div>
</div><!-- Ende container7 -->
</div><!-- Ende container4 -->
<div id="container5">
<div class="container7">
<div class="container8"></div>
</div><!-- Ende container7 -->
</div><!-- Ende container5 -->
<div id="container6">
<div class="container7">
<div class="container8"></div>
</div><!-- Ende container7 -->
</div><!-- Ende container6 -->
</div><!-- Ende wrapper -->
</body>
</html>RE: DIV zentrieren - Arne Drews - 01.03.2017
Hi,
Kannst Du ein Beispiel zeigen, wie es aussehen soll?
Ich habe das leider nicht sooo ganz verstanden
Zum Thema vertical-align, das funktioniert meines Wissen nach nur mit inline-Typen, wie bspw. table-cell, o.ä.
Dazu muss auch die Höhe klar definiert sein, ansonsten berechnet er das nicht.
Grundsätzlich kann man da evtl. auch was mit dem Flex-Modell machen, aber das kann ich nucht genau sagen, weil ich wie gesagt noch nicht 100%ig weiß, was genau Du am Ende haben willst.
Gruß Arne
RE: DIV zentrieren - elysium - 01.03.2017
Moin,
ich habe das gerade mal auf mein Server geschoben (hab gestern keine Zugangsdaten auf dem Laptop gehabt).
DIVs verschachteln Aufgabe
Ich wollte nun das der kleine schwarze DIV im mittleren roten DIV vertikal und horizontal zentriert ist.
Er zentriert sich aber nur horizontal.
Die mittleren roten DIVs zentrieren sich in den bunten DIVs genau wie gewünscht.
Weiß nicht warum der schwarze DIV (.container8) nicht will.
Wollte dann dem mittleren roten DIV (.container7) ein padding Wert geben damit es ihn nach unten drückt aber dann zerballert es alles
.Das ganze wollte ich eigentlich nur mit margin und eventuell padding lösen, so Sachen wie Flexbox etc. hatten wir noch nicht dran (1. Monat
).Hab gestern die Aufgabe ohne die schwarzen DIVs abgegeben aber es interessiert mich nun doch warum ich meine eigentliche Idee nicht umsetzen konnte.
RE: DIV zentrieren - Arne Drews - 04.03.2017
Hi,
Sorry für die späte Rückmeldung.
Ohne Flex ist das natürlich ein wenig umständlicher, aber eine mögliche Variante wäre sowas hier ( Deins nur modifiziert ):
Code:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Aufgabe 01</title>
<style type="text/css">
#wrapper{ width: 700px; height: 400px; margin: 0 auto; }
.row { display:block; width:100%; margin:25px auto; text-align:center; }
.clear { clear:both; }
.container-outer { float:left; width:200px; padding:25px 0; margin:0 15px; }
.container-inner { background: darkred; width: 100px; padding:10px 0; margin:0 auto; }
.container-eye { background: black; width: 50px; margin:15px auto; padding:15px 0; }
#container1{ background: blue; }
#container2{ background: green; }
#container3{ background: yellow; }
#container4{ background: gray; margin-left:120px; }
#container5{ background: gold; }
#container6{ background: blueviolet; margin-left:235px; }
</style>
</head>
<body>
<div id="wrapper">
<div class="row">
<div id="container1" class="container-outer">
<div class="container-inner">
<div class="container-eye"></div>
</div><!-- Ende container7 -->
</div><!-- Ende container1 -->
<div id="container2" class="container-outer">
<div class="container-inner">
<div class="container-eye"></div>
</div><!-- Ende container7 -->
</div><!-- Ende container2 -->
<div id="container3" class="container-outer">
<div class="container-inner">
<div class="container-eye"></div>
</div><!-- Ende container7 -->
</div><!-- Ende container3 -->
<div class="clear"></div>
</div>
<div class="row">
<div id="container4" class="container-outer">
<div class="container-inner">
<div class="container-eye"></div>
</div><!-- Ende container7 -->
</div><!-- Ende container4 -->
<div id="container5" class="container-outer">
<div class="container-inner">
<div class="container-eye"></div>
</div><!-- Ende container7 -->
</div><!-- Ende container5 -->
<div class="clear"></div>
</div>
<div class="row">
<div id="container6" class="container-outer">
<div class="container-inner">
<div class="container-eye"></div>
</div><!-- Ende container7 -->
</div><!-- Ende container6 -->
<div class="clear"></div>
</div>
</div><!-- Ende wrapper -->
</body>
</html>Gruß Arne
RE: DIV zentrieren - elysium - 04.03.2017
Ach herje, Du hast Dir viel zu viel Arbeit meinetwegen gemacht
, Danke auf jeden Fall für die Mühe.Ich wollte eigentlich nur wissen wo mein Denkfehler liegt bzw. was ich falsch gemacht habe.
RE: DIV zentrieren - Arne Drews - 05.03.2017
Dein "Fehler" war aus meiner Sicht, dass Du zu viel mit Höhen gearbeitet hast. Im Prinzip benötigt nur der schwarze Container innen eine Höhe, die restlichen ergeben sich aus dem padding.