PHP rocks! wünscht allen Mitgliedern einen guten Rutsch ins neue Jahr 2017 !!!
Hinweis: Das Forum zieht um! Um keine Datenverluste zu haben, schalten wir zwecks Übernahme der Daten das Forum am Sonntag, den 24.04.2016 um ca. 21:00 Uhr offline und passen anschliessend die DNS-Einträge an.
www.php-rocks.de wird euch dann nach den Aktualisierungen der DNS-Server wieder wie gewohnt uneingeschränkt zur Verfügung stehen.
Danke für euer Verständnis!

Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
DIV zentrieren
#1
Hallo zusammen,

nun ist es soweit, ich hänge fest  Confused  .

Ich soll mir 3 "Layouts" ausdenken in denen ich DIVs verschachteln soll.
Nun habe ich mir wohl etwas zu schweres ausgedacht  Big Grin  .

Ich wollte eine umgedrehte Pyramide mit DIVs bauen in denen jeweils 2 weitere DIVs ineinander verschachtelt sind.
Das habe ich sogar hinbekommen  Cool  .

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

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>
Antworten
#2
Hi,

Kannst Du ein Beispiel zeigen, wie es aussehen soll?
Ich habe das leider nicht sooo ganz verstanden Rolleyes

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
Antworten
#3
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  Huh .


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  Tongue ).
Hab gestern die Aufgabe ohne die schwarzen DIVs abgegeben aber es interessiert mich nun doch warum ich meine eigentliche Idee nicht umsetzen konnte.
Antworten
#4
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>
Ich finde die Lösung zwar nicht besonders schön, aber es kommt glaube ich das raus, was Du haben willst.

Gruß Arne
Antworten
#5
Ach herje, Du hast Dir viel zu viel Arbeit meinetwegen gemacht Blush , Danke auf jeden Fall für die Mühe.
Ich wollte eigentlich nur wissen wo mein Denkfehler liegt bzw. was ich falsch gemacht habe.
Antworten
#6
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.
Antworten


Gehe zu: