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

Frage Divcontainer bei @Media untereinander Darstellen

NotSoShifty

Neues Mitglied
Hallo,

schon einmal vorneweg - ich bin kein Profi.
Ich habe 2 Div Container und die werden auf 100% Größe nebeneinander dargestellt.

Ich möchte allerdings, dass diese beiden Container bei responsiver Darstellung untereinander angezeigt werden. Ich habe soetwas noch nie gemacht - hat da vielleicht jemand von euch eine schnelle und einfache Lösung?


HTML:
<div id="versand" class:"wrapper">
<img src="http://i.epvpimg.com/MQhjbab.png"
width="672px"
height="250px"
alt="Versand"><br>
<h2>Schneller Versand</h2>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>

<div id="zahlung" class:"wrapper">
<img src="http://i.epvpimg.com/nlsGeab.png"
width="672px"
height="250px"
alt="Zahlung"><br>
<h2>Sichere Zahlung</h2>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
 
Werbung:
Nun ja dazu müsste ich mal dein CSS sehen. Generell hast du 2 Möglichkeiten:
  1. Du setzt beide Container via inline-block nebeneinander und sobald nicht mehr genug Platz ist, verschieben sie sich ja automatisch untereinander.
  2. Du benutzt media-queries, mit denen du ab einer bestimmten Bildschirmweite/-höhe die CSS-Attribute so veränderst, dass sie untereinander sind:
    https://www.w3schools.com/css/css_rwd_mediaqueries.asp
 
Kleine Anmerkung:
Du notierst in deinem <div> Tag ...class:"wrapper"! Richtig wäre class="wrapper".
Für deine <img...> nutzt du die Inlineattribute 'height' und 'width' und weist beiden Attributen einen festen Pixelwert zu - das ist etwas unglücklich und kann so nicht responsive sein.
Besser wäre es, du nutzt ein Stylesheet (inline oder extern) und notierst dort für die Bilder...
img {
width: 100%;
max-width: 672px;
}
Die height- Angabe kannst du weglassen oder auf 'auto' setzen.
In Sachen Div-Container hat @Aaaron3219 dir ja schon die richtigen Wege aufgezeigt!
 
Werbung:
Hallo

Ich kann mir zu diesem HTML

Code:
      <article class="konditionen">
         <section id="versand">
            <figure>
               <img src="http://i.epvpimg.com/MQhjbab.png" alt="Versand">
            </figure>
            <h2>Schneller Versand</h2>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
         </section>
         <section id="zahlung">
            <figure>
               <img src="http://i.epvpimg.com/nlsGeab.png" alt="Zahlung">
            </figure>
            <h2>Sichere Zahlung</h2>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
         </section>
      </article>

dieses CSS

Code:
   /*.konditionen*/
   @media all {
      .konditionen section {
         max-width: 650px;
         margin: 0 auto;
      }
   }
   @media only screen and (min-width: 1000px) {
      .konditionen {
         display: flex;
      }
      .konditionen section {
         padding: 0.5rem;
      }
   }

vorstellen. Wobei das folgende CSS sich bewährt hat und von mir als Grundlage immer vor dem restlichen CSS eingetragen wird:

Code:
   @media all {
      * {
         min-width: 1px;
      }
      figure {
         min-width: 1px;
         max-width: 100%;
         min-height: 1px;
         margin: 0;
      }
      img {
         min-width: 1px;
         display: block;
         max-width: 100%;
         /*max-height: 100vh;*/
         border: 0;
      }
   }

Beim Layout habe ich darauf geachtet, dass die Texte nicht breiter als die Bilder werden, da das meiner Ansicht nach am besten aussieht. Das kann aber natürlich problemlos angepasst werden.

Ich habe mal eine Beispielseite zum direkten Ausprobieren erstellt:

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

Gruss

MrMurphy
 
Hallo

Ich kann mir zu diesem HTML

Code:
      <article class="konditionen">
         <section id="versand">
            <figure>
               <img src="http://i.epvpimg.com/MQhjbab.png" alt="Versand">
            </figure>
            <h2>Schneller Versand</h2>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
         </section>
         <section id="zahlung">
            <figure>
               <img src="http://i.epvpimg.com/nlsGeab.png" alt="Zahlung">
            </figure>
            <h2>Sichere Zahlung</h2>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
         </section>
      </article>

dieses CSS

Code:
   /*.konditionen*/
   @media all {
      .konditionen section {
         max-width: 650px;
         margin: 0 auto;
      }
   }
   @media only screen and (min-width: 1000px) {
      .konditionen {
         display: flex;
      }
      .konditionen section {
         padding: 0.5rem;
      }
   }

vorstellen. Wobei das folgende CSS sich bewährt hat und von mir als Grundlage immer vor dem restlichen CSS eingetragen wird:

Code:
   @media all {
      * {
         min-width: 1px;
      }
      figure {
         min-width: 1px;
         max-width: 100%;
         min-height: 1px;
         margin: 0;
      }
      img {
         min-width: 1px;
         display: block;
         max-width: 100%;
         /*max-height: 100vh;*/
         border: 0;
      }
   }

Beim Layout habe ich darauf geachtet, dass die Texte nicht breiter als die Bilder werden, da das meiner Ansicht nach am besten aussieht. Das kann aber natürlich problemlos angepasst werden.

Ich habe mal eine Beispielseite zum direkten Ausprobieren erstellt:

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

Gruss

MrMurphy


Guten Morgen!
Megagroßes Dankeschön -
darauf wäre ich nie gekommen. Ich mache momentan einen Kurs, aber soweit war ich noch.

Top! Hat mir echt weitergeholfen. Danke dir!
 
Hallo

Ein Tip: Der Kurs erscheint mir sehr veraltet. Wenn der als Container nur div-Elemente kennt und zudem die seit über 15 Jahren veralteten width- und height-Attribute verwendet ist das ein ganz schlechtes Zeichen.

Gruss

MrMurphy
 
Werbung:
Zurück
Oben