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

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

W

wmc

Neues Mitglied
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: 
<table width="100%" height="100%" border="0">
  <tr bgcolor=#F9CF01>
    <td style="height:25%"; valign="top" align="center"><a href="xxx">
    
    <img
sizes="(max-width: 842px) 100vw, 842px"
srcset="
oldtimer-all-inclusive_yiendx_c_scale,w_190.png 190w,
oldtimer-all-inclusive_yiendx_c_scale,w_842.png 842w"
src="oldtimer-all-inclusive_yiendx_c_scale,w_842.png"
alt="Oldtimer all inclusive">

</a></div></td>
  </tr>
  <tr bgcolor=#000000>
    <td style="height:50%"> <div align="center"><a href="xxx">
    
    <img
sizes="(max-width: 842px) 100vw, 842px"
srcset="
unikat-design_hthtmq_c_scale,w_190.png 190w,
unikat-design_hthtmq_c_scale,w_842.png 842w"
src="unikat-design_hthtmq_c_scale,w_842.png"
alt="Unikat-Design">

</a></div></td>
  </tr>
  <tr bgcolor=#ECF0D1>
    <td style="height:25%"; valign="bottom" align="center"> <a href="xxx">
    
    <img
sizes="(max-width: 842px) 100vw, 842px"
srcset="
suhre-schoen_m7zbbd_c_scale,w_190.png 190w,
suhre-schoen_m7zbbd_c_scale,w_842.png 842w"
src="suhre-schoen_m7zbbd_c_scale,w_842.png"
alt="Suhre-Schoen">

</a></div></td>
  </tr>
</table>
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:
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
 
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: 
<div class="grid">
<div class="grid__item_oben">
   <a href="http://www.suhre-schoen.ch"> <img src="suhre-schoen_480.png"
  class="img"
  width="480"
  height="137"
  alt="Ihr einzigartiges Kosmetikinstitut in Suhr."
></a>
</div>
<div class="grid__item_mitte">
   <a href="http://www.unikat-design.ch/index.php"> <img src="unikat-design_480.png"
  class="img"
  width="480"
  height="137"
  alt="UNIKAT-DESIGN - Einzigartig. Originell. Handgemacht."
></a>
</div>
<div class="grid__item_unten">
   <a href="https://www.facebook.com/OldtimerAllInclusive"> <img src="oldtimer-all-inclusive_480.png"
  class="img"
  width="480"
  height="137"
  alt="Alles aus einer Hand."
></a>
</div>
</div>
und
HTML: 
@charset "utf-8";
/* CSS Document */

.grid::before,
.grid::after {
  clear: both;
  content: '';
  display: block;
}

.grid__item_oben {
  box-sizing: border-box;
  float: left;
  height: 28vh;
  padding: 2em;
  width: 100vw;
  background-color: #ECF0D1;
}
.grid__item_mitte {
  box-sizing: border-box;
  float: left;
  height: 44vh;
  padding: 2em;
  width: 100vw;
  background-color: #000000;
}
.grid__item_unten {
  box-sizing: border-box;
  float: left;
  height: 28vh;
  padding: 2em;
  width: 100vw;
   background-color: #F9CF01;
}
img {
    display: block;
    margin: auto;
    max-width: 100%;
    position: relative;
    height: auto;
}
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.
 
Werbung:
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: 
<div class="grid"> 
<div class="grid__item_oben" align="center">
   <a href="http://www.suhre-schoen.ch"> <img src="suhre-schoen_480.png"
  class="img"
  width="480"
  height="137"
  alt="Ihr einzigartiges Kosmetikinstitut in Suhr."
></a></div> 
<div class="grid__item_mitte" align="center">
   <a href="http://www.unikat-design.ch/index.php"> <img src="unikat-design_480.png"
  class="img"
  width="480"
  height="137"
  alt="UNIKAT-DESIGN - Einzigartig. Originell. Handgemacht."
></a></div> 
<div class="grid__item_unten" align="center">
   <a href="https://www.facebook.com/OldtimerAllInclusive"> <img src="oldtimer-all-inclusive_480.png"
  class="img"
  width="480"
  height="137"
  alt="Alles aus einer Hand."
></a></div> 
</div>
und
HTML: 
@charset "utf-8";
/* CSS Document */

.grid::before,
.grid::after {
  clear: both;
  content: '';
  display: block;
}

.grid__item_oben {
  box-sizing: border-box;
  float: left;
  height: 26vh;
  padding: 2em;
  width: 100vw;
  background-color: #ECF0D1;
}
.grid__item_mitte {
  box-sizing: border-box;
  float: left;
  height: 48vh;
  padding: 2em;
  width: 100vw;
  background-color: #000000;
}
.grid__item_unten {
  box-sizing: border-box;
  float: left;
  height: 26vh;
  padding: 2em;
  width: 100vw;
   background-color: #F9CF01;
}
img {
 max-width: 100%;
  height: auto;
  position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
-moz-transform: translateY(-50%;
-o-transform: translateY(-50%;   
}

Danke für euer Feedback
 
Hallo

Break! Stop!

Du schreibst von

Samsung Note 4
Zum Vergrößern anklicken....

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: 
width: 100vw;

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: 
<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Layout 02</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>

   @media all {
      * {
         min-width: 0;
      }
      body {
         margin: 0rem;
      }
      img {
         min-width: 0;
         display: block;
         max-width: 100%;
         border: 0;
      }
      .grid>* {
         display: flex;
         flex-wrap: wrap;
         justify-content: center;
         align-items: center;
      }
      .grid__item_oben {
         background-color: #ECF0D1;
         box-sizing: border-box;
         height: 26vh;
      }
      .grid__item_oben img {
         box-sizing: border-box;
         padding: 0.5em;
         max-height: 26vh;
      }
      .grid__item_mitte {
         background-color: #000000;
         box-sizing: border-box;
         height: 48vh;
      }
      .grid__item_mitte img {
         box-sizing: border-box;
         padding: 0.5em;
         max-height: 48vh;
      }
      .grid__item_unten {
         background-color: #F9CF01;
         box-sizing: border-box;
         height: 26vh;
      }
      .grid__item_unten img {
         box-sizing: border-box;
         padding: 0.5em;
         max-height: 26vh;
      }
   }

   </style>
</head>
<body>
   <div class="grid">
      <div class="grid__item_oben">
         <a href="">
            <img src="https://www.unikat-design.ch/intro/suhre-schoen_480.png" alt="Ihr einzigartiges Kosmetikinstitut in Suhr.">
         </a>
      </div>
      <div class="grid__item_mitte">
         <a href="">
            <img src="https://www.unikat-design.ch/intro/unikat-design_480.png" alt="UNIKAT-DESIGN - Einzigartig. Originell. Handgemacht.">
         </a>
      </div>
      <div class="grid__item_unten">
         <a href="">
            <img src="https://www.unikat-design.ch/intro/oldtimer-all-inclusive_480.png" alt="Alles aus einer Hand.">
         </a>
      </div>
   </div>
</body>
</html>

Und noch ein zeitweiser Link zum direkten Ausprobieren:

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

Gruss

MrMurphy
 
:confused:Oh mann. Da habe ich wohl alles falsch gemacht. Aber immerhin probiert.
Danke vielmals für die Hilfe.
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben