1. Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!
    Information ausblenden

Frage 3 div responsive div untereinander mit 100% Bildschirmhöhe

Dieses Thema im Forum "CSS" wurde erstellt von wmc, 20 April 2017.

  1. wmc

    wmc Neues Mitglied

    Registriert seit:
    20 April 2017
    Beiträge:
    4
    Punkte für Erfolge:
    1
    Hallo miteinander

    Ich bin neu hier und habe mich angemeldet weil ich nun schon den ganzen Tag dran war für eine Lösung meines Problems.
    Weder Google noch Generatoren haben geholfen.
    Ich hoffe ich bin in der richtigen Rubrik ;)

    Ich brauche eine Seite mit drei div untereinander. Die Obere und die Untere mit einer Höhe von jeweils 25%. Die in der Mitte eine Höhe von 50%. Die Prozentangaben sollen sich auf jeweils die Seitenhöhe beziehen!
    Da drin befindet sich pro Zeile ein Bild. Ich glaube soweit habe ich die Bilder so, dass sie sich richtig verhalten wenn man das Fenster verkleinert.
    Nur habe ich keinen Weg gefunden die volle Bildschirmhöhe zu brauchen. Die Zeilen sind eigentlich so hoch wie die Bilder.
    Schlussendlich bin ich dann bei Tabellen gelandet was aber auch nicht funktioniert hat.
    Hier mal der aktuelle Code:

    HTML:
    1. <table width="100%" height="100%" border="0">
    2.   <tr bgcolor=#F9CF01>
    3.     <td style="height:25%"; valign="top" align="center"><a href="xxx">
    4.    
    5.     <img
    6. sizes="(max-width: 842px) 100vw, 842px"
    7. srcset="
    8. oldtimer-all-inclusive_yiendx_c_scale,w_190.png 190w,
    9. oldtimer-all-inclusive_yiendx_c_scale,w_842.png 842w"
    10. src="oldtimer-all-inclusive_yiendx_c_scale,w_842.png"
    11. alt="Oldtimer all inclusive">
    12.  
    13. </a></div></td>
    14.   </tr>
    15.   <tr bgcolor=#000000>
    16.     <td style="height:50%"> <div align="center"><a href="xxx">
    17.    
    18.     <img
    19. sizes="(max-width: 842px) 100vw, 842px"
    20. srcset="
    21. unikat-design_hthtmq_c_scale,w_190.png 190w,
    22. unikat-design_hthtmq_c_scale,w_842.png 842w"
    23. src="unikat-design_hthtmq_c_scale,w_842.png"
    24. alt="Unikat-Design">
    25.  
    26. </a></div></td>
    27.   </tr>
    28.   <tr bgcolor=#ECF0D1>
    29.     <td style="height:25%"; valign="bottom" align="center"> <a href="xxx">
    30.    
    31.     <img
    32. sizes="(max-width: 842px) 100vw, 842px"
    33. srcset="
    34. suhre-schoen_m7zbbd_c_scale,w_190.png 190w,
    35. suhre-schoen_m7zbbd_c_scale,w_842.png 842w"
    36. src="suhre-schoen_m7zbbd_c_scale,w_842.png"
    37. alt="Suhre-Schoen">
    38.  
    39. </a></div></td>
    40.   </tr>
    wäre mir natürlich lieber das Ganze mit div zu erstellen, aber da bin ich nirgends hin gekommen.
    Danke schon mal für eure Hilfe.
     
    Werbung:

    Jetzt registrieren, damit diese Werbung verschwindet
  2. MrMurphy

    MrMurphy Senior HTML'ler

    Registriert seit:
    28 Juli 2009
    Beiträge:
    1.270
    Punkte für Erfolge:
    63
    Hallo

    Die Tabelle kannst du in die Tonne treten.

    Gib den drei Containern jeweils Höhen mit der Einheit vh. Also zwei mal 25vh und einmal 50vh.

    Gruss

    MrMurphy
     
  3. wmc

    wmc Neues Mitglied

    Registriert seit:
    20 April 2017
    Beiträge:
    4
    Punkte für Erfolge:
    1
    Hi MrMurphy

    Habe deinen Rat befolgt und alles in die Tonne geworfen. Mit dem Stichwort vh habe ich nun auch gefunden was ich lange gesucht hatte.
    Nun habe ich das:
    HTML:
    1. <div class="grid">
    2. <div class="grid__item_oben">
    3.    <a href="http://www.suhre-schoen.ch"> <img src="suhre-schoen_480.png"
    4.  class="img"
    5.  width="480"
    6.  height="137"
    7.  alt="Ihr einzigartiges Kosmetikinstitut in Suhr."
    8. ></a>
    9. </div>
    10. <div class="grid__item_mitte">
    11.    <a href="http://www.unikat-design.ch/index.php"> <img src="unikat-design_480.png"
    12.  class="img"
    13.  width="480"
    14.  height="137"
    15.  alt="UNIKAT-DESIGN - Einzigartig. Originell. Handgemacht."
    16. ></a>
    17. </div>
    18. <div class="grid__item_unten">
    19.    <a href="https://www.facebook.com/OldtimerAllInclusive"> <img src="oldtimer-all-inclusive_480.png"
    20.  class="img"
    21.  width="480"
    22.  height="137"
    23.  alt="Alles aus einer Hand."
    24. ></a>
    25. </div>
    26. </div>
    und
    HTML:
    1. @charset "utf-8";
    2. /* CSS Document */
    3.  
    4. .grid::before,
    5. .grid::after {
    6.   clear: both;
    7.   content: '';
    8.   display: block;
    9. }
    10.  
    11. .grid__item_oben {
    12.   box-sizing: border-box;
    13.   float: left;
    14.   height: 28vh;
    15.   padding: 2em;
    16.   width: 100vw;
    17.   background-color: #ECF0D1;
    18. }
    19. .grid__item_mitte {
    20.   box-sizing: border-box;
    21.   float: left;
    22.   height: 44vh;
    23.   padding: 2em;
    24.   width: 100vw;
    25.   background-color: #000000;
    26. }
    27. .grid__item_unten {
    28.   box-sizing: border-box;
    29.   float: left;
    30.   height: 28vh;
    31.   padding: 2em;
    32.   width: 100vw;
    33.    background-color: #F9CF01;
    34. }
    35. img {
    36.     display: block;
    37.     margin: auto;
    38.     max-width: 100%;
    39.     position: relative;
    40.     height: auto;
    41. }
    42.  
    43.  
    Nun habe ich noch ein kleines und ein grosses Problem:

    Das Kleine: Ich habe oben, links und unten noch einen kleinen Rahmen der keine Hintergrundfarbe bekommt. Ist das Normal?

    Das Grosse: Die eingefügten Bilder sind nur horizontal zentriert, jedoch nicht vertical und es wäre gut wenn immer die maximale Höhe des Containers ausgenutzt wird. Ich habe ein paar Sachen ausprobiert aber nichts hat wirklich gepasst.
     
  4. wmc

    wmc Neues Mitglied

    Registriert seit:
    20 April 2017
    Beiträge:
    4
    Punkte für Erfolge:
    1
    Bin da wieder etwas weiter gekommen.
    Wenn ich mir die Seite unter http://deviceponsive.com/?url=https://www.unikat-design.ch/intro/test.html anschaue sieht meinen Erwartungen entsprechend gut aus. Auf meinem Smartphone Samsung Note 4 sind die Bilder immer noch nicht vertikal mittig :mad:
    Kann das jemand bestätigen? Der Link direkt ist https://www.unikat-design.ch/intro/test.html

    Das Problem mit den Rändern besteht immer noch!

    Hier noch die beiden Codes:
    HTML:
    1. <div class="grid">
    2. <div class="grid__item_oben" align="center">
    3.    <a href="http://www.suhre-schoen.ch"> <img src="suhre-schoen_480.png"
    4.  class="img"
    5.  width="480"
    6.  height="137"
    7.  alt="Ihr einzigartiges Kosmetikinstitut in Suhr."
    8. ></a></div>
    9. <div class="grid__item_mitte" align="center">
    10.    <a href="http://www.unikat-design.ch/index.php"> <img src="unikat-design_480.png"
    11.  class="img"
    12.  width="480"
    13.  height="137"
    14.  alt="UNIKAT-DESIGN - Einzigartig. Originell. Handgemacht."
    15. ></a></div>
    16. <div class="grid__item_unten" align="center">
    17.    <a href="https://www.facebook.com/OldtimerAllInclusive"> <img src="oldtimer-all-inclusive_480.png"
    18.  class="img"
    19.  width="480"
    20.  height="137"
    21.  alt="Alles aus einer Hand."
    22. ></a></div>
    23. </div>
    und
    HTML:
    1. @charset "utf-8";
    2. /* CSS Document */
    3.  
    4. .grid::before,
    5. .grid::after {
    6.   clear: both;
    7.   content: '';
    8.   display: block;
    9. }
    10.  
    11. .grid__item_oben {
    12.   box-sizing: border-box;
    13.   float: left;
    14.   height: 26vh;
    15.   padding: 2em;
    16.   width: 100vw;
    17.   background-color: #ECF0D1;
    18. }
    19. .grid__item_mitte {
    20.   box-sizing: border-box;
    21.   float: left;
    22.   height: 48vh;
    23.   padding: 2em;
    24.   width: 100vw;
    25.   background-color: #000000;
    26. }
    27. .grid__item_unten {
    28.   box-sizing: border-box;
    29.   float: left;
    30.   height: 26vh;
    31.   padding: 2em;
    32.   width: 100vw;
    33.    background-color: #F9CF01;
    34. }
    35. img {
    36.  max-width: 100%;
    37.   height: auto;
    38.   position: relative;
    39. top: 50%;
    40. -webkit-transform: translateY(-50%);
    41. -ms-transform: translateY(-50%);
    42. transform: translateY(-50%);
    43. -moz-transform: translateY(-50%;
    44. -o-transform: translateY(-50%;  
    45. }
    46.  
    47.  
    Danke für euer Feedback
     
  5. MrMurphy

    MrMurphy Senior HTML'ler

    Registriert seit:
    28 Juli 2009
    Beiträge:
    1.270
    Punkte für Erfolge:
    63
    Hallo

    Break! Stop!

    Du schreibst von

    und erstellt eine Webseite mit XHTML 1.0?

    Das geht gar nicht. Die Entwicklung von XHTML wurde bereits vor über 8 Jahren eingestellt und es wurde offiziell begraben. Smartphones und Tablets kennt XHTML nicht mal vom Hörensagen.

    Bereits seit einigen Jahren sollte für neue Webseiten HTML5 mit CSS3 verwendet werden. Also auch bei deiner.

    Und streiche HTML-Attribute wie width und height aus deinem Gedächtnis.

    Float sollte nur noch für das verwendet werden, wofür es gedacht ist: Damit Text andere Elemente umfließen kann. Zudem sollten die Nebenwirkungen bekannt sein und die sollten berücksichtigt werden. Da du keine Texte hast braucht du auch kein float. Und die Nebenwirkungen können dich nebenbei nicht ärgern.

    Nebenbei sind dann auch die width-Angaben für die Container im Quelltext überflüssig.

    Mit

    Code (text):
    1.  
    2. width: 100vw;
    3.  
    solltest du auch vorsichtig sein.

    Die Abstände kommen teilweise daher, dass du body nicht auf margin: 0; gesetzt hast. Ohne diese Anweisung fügen die Browser von selbst einen Abstand nach allen Seiten hinzu.

    Ich habe mal eine Testseite erstellt, das CSS kannst du natürlich auch in eine extra Datei auslagern:

    Code (text):
    1.  
    2. <!DOCTYPE html>
    3. <html lang="de">
    4. <head>
    5.    <meta charset="utf-8">
    6.    <title>Layout 02</title>
    7.    <meta name="description" content="HTML5, CSS3">
    8.    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    9.    <style>
    10.  
    11.    @media all {
    12.       * {
    13.          min-width: 0;
    14.       }
    15.       body {
    16.          margin: 0rem;
    17.       }
    18.       img {
    19.          min-width: 0;
    20.          display: block;
    21.          max-width: 100%;
    22.          border: 0;
    23.       }
    24.       .grid>* {
    25.          display: flex;
    26.          flex-wrap: wrap;
    27.          justify-content: center;
    28.          align-items: center;
    29.       }
    30.       .grid__item_oben {
    31.          background-color: #ECF0D1;
    32.          box-sizing: border-box;
    33.          height: 26vh;
    34.       }
    35.       .grid__item_oben img {
    36.          box-sizing: border-box;
    37.          padding: 0.5em;
    38.          max-height: 26vh;
    39.       }
    40.       .grid__item_mitte {
    41.          background-color: #000000;
    42.          box-sizing: border-box;
    43.          height: 48vh;
    44.       }
    45.       .grid__item_mitte img {
    46.          box-sizing: border-box;
    47.          padding: 0.5em;
    48.          max-height: 48vh;
    49.       }
    50.       .grid__item_unten {
    51.          background-color: #F9CF01;
    52.          box-sizing: border-box;
    53.          height: 26vh;
    54.       }
    55.       .grid__item_unten img {
    56.          box-sizing: border-box;
    57.          padding: 0.5em;
    58.          max-height: 26vh;
    59.       }
    60.    }
    61.  
    62.    </style>
    63. </head>
    64. <body>
    65.    <div class="grid">
    66.       <div class="grid__item_oben">
    67.          <a href="">
    68.             <img src="https://www.unikat-design.ch/intro/suhre-schoen_480.png" alt="Ihr einzigartiges Kosmetikinstitut in Suhr.">
    69.          </a>
    70.       </div>
    71.       <div class="grid__item_mitte">
    72.          <a href="">
    73.             <img src="https://www.unikat-design.ch/intro/unikat-design_480.png" alt="UNIKAT-DESIGN - Einzigartig. Originell. Handgemacht.">
    74.          </a>
    75.       </div>
    76.       <div class="grid__item_unten">
    77.          <a href="">
    78.             <img src="https://www.unikat-design.ch/intro/oldtimer-all-inclusive_480.png" alt="Alles aus einer Hand.">
    79.          </a>
    80.       </div>
    81.    </div>
    82. </body>
    83. </html>
    84.  
    Und noch ein zeitweiser Link zum direkten Ausprobieren:

    http://boratb.bplaced.net/index15.html

    Gruss

    MrMurphy
     
  6. wmc

    wmc Neues Mitglied

    Registriert seit:
    20 April 2017
    Beiträge:
    4
    Punkte für Erfolge:
    1
    :confused:Oh mann. Da habe ich wohl alles falsch gemacht. Aber immerhin probiert.
    Danke vielmals für die Hilfe.