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

responsive

J

janrichter

Neues Mitglied
Hallo zusammen,

ich hoffe ihr könnt mir helfen.
ich habe eine Tabelle die ich mobil darstellen möchte.
Mit "@media only screen and (min-width: 1024 px)" klappt es gut.

ich möchte noch die Ansicht zwischen "min-width: 1024 px" und "min-width: 1920 px" darstellen. Nur wie??
Der erste Schritt wäre erstmal, den margin-right Wert einzustellen meiner Tabelle. Das klappt leider nicht.
Bei 1920 sieht alles toll aus, wenn ich den Browser aber zusammen schiebe, ist alles bis 1024 kreuz und quer.

Hat jemand eine Idee, wie man das umsetzt? Anbei mal meine Tabelle. Viele Grüße


Code: 
<div class="row2"><center>
<div class="preistabelle">
<div class="pricemain">
<div class="bildmain"></div>
<div class="pricehead6"></div>
<div class="pricehead">Artikel1</div>
<div class="pricehead2" id="hov"><br /><uu></uu></div>
<div class="pricehead4">schnell und zuverlässig</div>
<div class="pricehead41">günstige Preise</div>
<div class="pricehead4">Start Innerhalb 24-48 Std.</div>
<div class="pricehead41">Lieferzeit je nach Bestellgröße</div>
<div class="pricehead4">keine Zugangsdaten notwendig</div>
<div class="pricehead6"></div>
<div class="zelle5"><a href="../Bilder/Bild1.png">auswählen</a></div>
</div>
</div>

<div class="preistabelle">
<div class="pricemain">
<div class="bildmain"></div>
<div class="pricehead6"></div>
 <div class="pricehead">Artikel2</div>
<div class="pricehead2" id="hov"><br /><uu></uu></div>
<div class="pricehead4">schnell und zuverlässig</div>
<div class="pricehead41">günstige Preise</div>
<div class="pricehead4">Start Innerhalb 24-48 Std.</div>
<div class="pricehead41">Lieferzeit je nach Bestellgröße</div>
<div class="pricehead4">keine Zugangsdaten notwendig</div>
<div class="pricehead6"></div>
<div class="zelle5"><a href="../Bilder/Bild1.png">auswählen</a></div>
</div>
</div>
     
<div class="preistabelle">
<div class="pricemain">
<div class="bildmain"></div>
<div class="pricehead6">Artikel3</div>
<div class="pricehead">FACEBOOK</div>
<div class="pricehead2" id="hov"><br /><uu></uu></div>
<div class="pricehead4">schnell und zuverlässig</div>
<div class="pricehead41">günstige Preise</div>
<div class="pricehead4">Start Innerhalb 24-48 Std.</div>
<div class="pricehead41">Lieferzeit je nach Bestellgröße</div>
<div class="pricehead4">keine Zugangsdaten notwendig</div>
<div class="pricehead6"></div>
<div class="zelle5"><a href="../Bilder/Bild1.png">auswählen</a></div>

</div>
</div>

<div class="preistabelle"><div class="pricemain">
<div class="bildmain"></div>
<div class="pricehead6">&nbsp;&nbsp;</div>
<div class="pricehead">Artikel4</div>
<div class="pricehead2" id="hov"><br /><uu></uu></div>
<div class="pricehead4">schnell und zuverlässig</div>
<div class="pricehead41">günstige Preise</div>
<div class="pricehead4">Start Innerhalb 24-48 Std.</div>
<div class="pricehead41">Lieferzeit je nach Bestellgröße</div>
<div class="pricehead4">keine Zugangsdaten notwendig</div>
<div class="pricehead6"></div>
<div class="zelle5"><a href="../Bilder/Bild1.png">auswählen</a></div>
</div><br />

</div><br />
<div class="preistabelle">
<div class="pricemain">
<div class="bildmain"></div>
<div class="pricehead6">&nbsp;&nbsp;</div>
<div class="pricehead">Artikel5</div>
<div class="pricehead2" id="hov"><br /><uu></uu></div>
<div class="pricehead4">schnell und zuverlässig</div>
<div class="pricehead41">günstige Preise</div>
<div class="pricehead4">Start Innerhalb 24-48 Std.</div>
<div class="pricehead41">Lieferzeit je nach Bestellgröße</div>
<div class="pricehead4">keine Zugangsdaten notwendig</div>
<div class="pricehead6"></div>
<div class="zelle5"><a href="../Bilder/Bild1.png">auswählen</a></div>
</div>
</div>

<div class="preistabelle">
<div class="pricemain">
<div class="bildmain"></div>
<div class="pricehead6">&nbsp;&nbsp;</div>
 <div class="pricehead">Artikel6</div>
<div class="pricehead2" id="hov"><br /><uu></uu></div>
<div class="pricehead4">schnell und zuverlässig</div>
<div class="pricehead41">günstige Preise</div>
<div class="pricehead4">Start Innerhalb 24-48 Std.</div>
<div class="pricehead41">Lieferzeit je nach Bestellgröße</div>
<div class="pricehead4">keine Zugangsdaten notwendig</div>
<div class="pricehead6"></div>
<div class="zelle5"><a href="../Bilder/Bild1.png">auswählen</a></div>
</div>
</div>
     
<div class="preistabelle">
<div class="pricemain">
<div class="bildmain"></div>
<div class="pricehead6">&nbsp;&nbsp;</div>
<div class="pricehead">Artikel7</div>
<div class="pricehead2" id="hov"><br /><uu></uu></div>
<div class="pricehead4">schnell und zuverlässig</div>
<div class="pricehead41">günstige Preise</div>
<div class="pricehead4">Start Innerhalb 24-48 Std.</div>
<div class="pricehead41">Lieferzeit je nach Bestellgröße</div>
<div class="pricehead4">keine Zugangsdaten notwendig</div>
<div class="pricehead6"></div>
<div class="zelle5"><a href="../Bilder/Bild1.png">auswählen</a></div>

</div>
</div>

<div class="preistabelle"><div class="pricemain">
<div class="bildmain"></div>
<div class="pricehead6">&nbsp;&nbsp;</div>
<div class="pricehead">Artikel8</div>
<div class="pricehead2" id="hov"><br /><uu></uu></div>
<div class="pricehead4">schnell und zuverlässig</div>
<div class="pricehead41">günstige Preise</div>
<div class="pricehead4">Start Innerhalb 24-48 Std.</div>
<div class="pricehead41">Lieferzeit je nach Bestellgröße</div>
<div class="pricehead4">keine Zugangsdaten notwendig</div>
<div class="pricehead6"></div>
<div class="zelle5"><a href="../Bilder/Bild1.png">auswählen</a></div>


</div></div></center>
 
Html müsste jetzt auf der problem Seite passen.
Für Tipps und Ratschläge für mein genanntes Problem oben, wäre ich dankbar.
Zumindestens mal eine Starthilfe wäre super...
 
Hallo

Deine Seite enthält leider immer noch sehr viele Fehler. Zudem Lösungen, die so nicht verwendet werden sollten, da sie regemäßig zu Problemen führen und die Wartung / Erweiterung der Seite erschweren.

So ist in den aktuellen HTML-Regeln festgeschrieben, dass der HTML-Quelltext keine überflüssigen Elemente und Angaben enthalten soll.

Text sollte niemals in Containern wie div stehen, sondern nur in den dafür vorgesehenen Elementen wie p, h1 bis h6, li und so weiter.

Abstände werden mit CSS und nicht mit dem br-Element erzeugt.

Und, und, und ...

Media Queries werden zudem nach dem Inhalt und nicht nach Endgeräten gesetzt.

Was du willst wird häufig als Card-Layout bezeichnet.

Zunächst verwende ich im CSS einige Grundangaben, die sich als sinnvoll erwiesen haben. Für das Card-Layout sind folgende davon erforderlich:

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

Der HTML-Quellcode für das Card-Layout könnte folgendermaßen aussehen:

Code: 
      <article class="promotion">
         <section>
            <figure>
               <img src="http://likepromotion.de/img/sm/facebook.png" alt="Beispielbild">
            </figure>
            <h2>Facebook</h2>
            <h3>Fanpage Likes</h3>
            <p>International</p>
            <p>schnell und zuverlässig</p>
            <p>günstige Preise</p>
            <p>Start innerhalb 24-48 Std.</p>
            <p>Lieferzeit je nach Bestellgröße</p>
            <p>keine Zugangsdaten notwendig</p>
            <a href="">auswählen</a>
         </section>
         <section>
            <figure>
               <img src="http://likepromotion.de/img/sm/facebook.png" alt="Beispielbild">
            </figure>
            <h2>Facebook</h2>
            <h3>Post Likes</h3>
            <p>International</p>
            <p>schnell und zuverlässig</p>
            <p>günstige Preise</p>
            <p>Start innerhalb 24-48 Std.</p>
            <p>Lieferzeit je nach Bestellgröße</p>
            <p>keine Zugangsdaten notwendig</p>
            <a href="">auswählen</a>
         </section>
         <section>
            <figure>
               <img src="http://likepromotion.de/img/sm/facebook.png" alt="Beispielbild">
            </figure>
            <h2>Facebook</h2>
            <h3>Kommentare</h3>
            <p>Wunschtext</p>
            <p>schnell und zuverlässig</p>
            <p>günstige Preise</p>
            <p>Start innerhalb 24-48 Std.</p>
            <p>Lieferzeit je nach Bestellgröße</p>
            <p>keine Zugangsdaten notwendig</p>
            <a href="">auswählen</a>
         </section>
         <section>
            <figure>
               <img src="http://likepromotion.de/img/sm/facebook.png" alt="Beispielbild">
            </figure>
            <h2>Facebook</h2>
            <h3>Emoticons</h3>
            <p>Love</p>
            <p>schnell und zuverlässig</p>
            <p>günstige Preise</p>
            <p>Start innerhalb 24-48 Std.</p>
            <p>Lieferzeit je nach Bestellgröße</p>
            <p>keine Zugangsdaten notwendig</p>
            <a href="">auswählen</a>
         </section>
         <section>
            <figure>
               <img src="http://likepromotion.de/img/sm/facebook.png" alt="Beispielbild">
            </figure>
            <h2>Facebook</h2>
            <h3>Emoticons</h3>
            <p>Haha</p>
            <p>schnell und zuverlässig</p>
            <p>günstige Preise</p>
            <p>Start innerhalb 24-48 Std.</p>
            <p>Lieferzeit je nach Bestellgröße</p>
            <p>keine Zugangsdaten notwendig</p>
            <a href="">auswählen</a>
         </section>
         <section>
            <figure>
               <img src="http://likepromotion.de/img/sm/facebook.png" alt="Beispielbild">
            </figure>
            <h2>Facebook</h2>
            <h3>Emoticons</h3>
            <p>Wow</p>
            <p>schnell und zuverlässig</p>
            <p>günstige Preise</p>
            <p>Start innerhalb 24-48 Std.</p>
            <p>Lieferzeit je nach Bestellgröße</p>
            <p>keine Zugangsdaten notwendig</p>
            <a href="">auswählen</a>
         </section>
         <section>
            <figure>
               <img src="http://likepromotion.de/img/sm/facebook.png" alt="Beispielbild">
            </figure>
            <h2>Facebook</h2>
            <h3>Emoticons</h3>
            <p>Sad</p>
            <p>schnell und zuverlässig</p>
            <p>günstige Preise</p>
            <p>Start innerhalb 24-48 Std.</p>
            <p>Lieferzeit je nach Bestellgröße</p>
            <p>keine Zugangsdaten notwendig</p>
            <a href="">auswählen</a>
         </section>
         <section>
            <figure>
               <img src="http://likepromotion.de/img/sm/facebook.png" alt="Beispielbild">
            </figure>
            <h2>Facebook</h2>
            <h3>Emoticons</h3>
            <p>Angry</p>
            <p>schnell und zuverlässig</p>
            <p>günstige Preise</p>
            <p>Start innerhalb 24-48 Std.</p>
            <p>Lieferzeit je nach Bestellgröße</p>
            <p>keine Zugangsdaten notwendig</p>
            <a href="">auswählen</a>
         </section>
      </article>

Das spezielle CSS zu dem Quelltext

Code: 
   @media all {
      .promotion section {
         box-shadow: 2px 1px 1px 1px #808080;
         padding: 1rem 0rem 2rem 0rem;
         margin: 0.5rem 1rem;
      }
      .promotion h2,
      .promotion h3,
      .promotion p,
      .promotion a {
         font-family: sans-serif;
         text-align: center;
      }
      .promotion h2 {
         font-size: 1.5rem;
         font-weight: 100;
         text-transform: uppercase;
      }
      .promotion h3 {
         font-size: 1.0rem;
         font-weight: 100;
         text-transform: uppercase;
      }
      .promotion p {
         padding: 0.3rem 0rem;
         margin: 0rem;
      }
      .promotion p:nth-of-type(2n+2) {
         background-color: #F8F8F8;
      }
      .promotion p:nth-of-type(2n+3) {
         background-color: #E5E5E5;
      }
      .promotion p:nth-of-type(1) {
         color: #000075;
      }
      .promotion a {
         background-color: #006FA4;
         color: white;
         display: block;
         margin: 0.3rem 0rem;
      }
   }
   @media only screen and (min-width: 600px) {
      .promotion {
         display: flex;
         flex-wrap: wrap;
      }
      .promotion section {
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: calc(50% - 0rem - 2px - 2rem);
      }
   }
   @media only screen and (min-width: 900px) {
      .promotion section {
         flex-basis: calc(33.333% - 0rem - 2px - 2rem);
      }
   }
   @media only screen and (min-width: 1200px) {
      .promotion {
         max-width: 1500px;
         margin: 0 auto;
      }
      .promotion section {
         flex-basis: calc(25% - 0rem - 2px - 2rem);
      }
   }

Zum Schluß noch eine Beispielseite zum direkten Ausprobieren:

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

Abstände, Farben, Größen, ... können natürlich noch angepasst werden. Mir kam es nur auf das Verhalten bei unterschiedlichen Fensterbreiten / Browserbreiten an.

Gruss

MrMurphy
 
vielen Dank für deine Mühe. Ich werde die Baustelle mal angehen.
Es ist schon komisch, dass man mit wenig script viel bewirken kann.

das mit card Layout wusste ich nicht... :)
 
Hallo

Cardlayout ist auch ziemlich neu und bezeichnet keine bestimme CSS-Technik sondern ist eher ein Oberbegriff.

Grundsätzlich ist damit gemeint, dass sich mehrere Container (in meinem Beispiel die section-Elemente) mit ähnlichem Inhalt innerhalb eines weiteren Containers (in meinem Beispiel das article-Element) ohne dazwischenliegende Container flexibel der zur Verfügung stehenden Seitenbreite anpassen.

Dazu ist aktuell Flexbox am besten geeignet, weil im Gegensatz zu Float die "Karten" bei unterschiedlichen Höhen nicht aneinander festhaken und das Layout zerstören können.

Das CSS für ein Cardlayout ist also immer individuell.

Der große Vorteil von Cardlayouts ist die Übersichtlichkeit der Inhalte und die flexible Anpassung an unterschiedliche Fensterbreiten.

Gruss

MrMurphy
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben