Antworten auf deine Fragen:
Neues Thema erstellen

Elementen in 3 Spalten-Layout responsive einordnen

Lenka

Squirrel

Hallo liebe Leute,

ich habe ein folgendes Problem.
Ich habe 5 Bilder mit deren Beschreibung jeweils in einem div-Container positioniert.
In einer Reihe sollen 3 Bilder stehen. So weit so gut, mit width: 33%; und float: left; geht alles gut.
Nur sind die Beschreibungen unter den Bildern unterschiedlich lang. Und wenn ich die Seite verkleinere, rutscht mein Drittes Bild nicht wie gewünscht ganz nach links, sondern bleibt am Ende des ersten div's hängen, weil dessen Beschreibung länger ist als die vom zweiten Bild.
Im Internet habe ich nur solche Beispiels mit den Boxen in gleicher Höhe gefunden. Zu meinem Problem finde ich nichts.
Kann mir vielleicht jemand von euch helfen?

Ganz liebe Grüsse
Lenka
 

Myhar

Hat es drauf

Ohne dass du uns deinen HTML-Aufbau zeigst können wir die leider nicht viel helfen.
Da können wir zB nur fragen, wieso du float und nicht flexbox verwendest?
Wenn dein HTML Aufbau korrekt ist, sollte es jedoch auch mit floats funktionieren.
 

Lenka

Squirrel

Sorry, habe gar nicht daran gedacht...

Mein HTML:
<section>
<div class="box">
<h3>Überschrift 1</h3>
<img class="img-reihe" src="images/bild-3.gif" alt="Überschrift 1" />
<p>Ich bin ein kleiner Blindtext. Und zwar schon so lange ich denken kann. Es war nicht leicht zu verstehen, was es bedeutet,
ein blinder Text zu sein: Man macht keinen Sinn. </p>
</div>
<div class="box">
<h3>Überschrift 2</h3>
<img class="img-reihe" src="images/bild-1.gif" alt="Überschrift 2" />
<p>Aber andere Texte schaffen das auch nicht. Und darum stört es mich nicht besonders blind zu sein.</p>
</div>
<div class="box">
<h3>Überschrift 3</h3>
<img class="img-reihe" src="images/bild-2.gif" alt="Überschrift 3" />
<p>Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien.</p>
</div>
<div class="box">
<h3>Überschrift 4</h3>
<img class="img-reihe" src="images/bild-4.gif" alt="Überschrift 4" />
<p>Ein kleines Bächlein namens Duden fließt durch ihren Ort und
versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene
Satzteile in den Mund fliegen.</p>
</div>
<div class="box">
<h3>Überschrift 5</h3>
<img class="img-reihe" src="images/bild-5.gif" alt="Überschrift 5" />
<p>Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen
Semikoli, doch das Blindtextchen ließ sich nicht beirren. Es packte seine sieben Versalien, schob sich sein
Initial in den Gürtel und machte sich auf den Weg.</p>
</div>
</section>

und CSS dazu:

.box {
width: 28%;
margin: 15% 0 0 2%;
background: #fff;;
padding: 1em;
border: none;
text-align: center;
float: left;
}
.img-reihe { width: 100%; }
p {
font-family: Arial, Helvetica, sans-serif;
color: #333;
font-size: 130%;
line-height: 160%;
text-align: justify;
font-weight: 300;
}
h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 160%;
line-height: 180%;
color: #009999;
text-align: center;
}
 

Myhar

Hat es drauf

Wer floatet muss/sollte auch clearen.
Auch vermischt du verschiedene Einheiten: % und em für margin/padding, etc.

Hier nochmal die Frage: Wieso verwendest du nicht flexbox für deine Umsetzung? Damit ersparst du dir einiges an Ärger und du hast eine bessere Kontrolle über das Layout.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

edit: und falls du wieder einmal code einfügen musst hier im Forum, verwende doch bitte die [ CODE ] - Tags.
 

Lenka

Squirrel

Danke Myhar für deine Hilfe.

Clearen tue ich am Ende, sonst springen meine Boxen beim Verkleinern der Seite nicht mehr nach oben.

Mit den % und em habe ich tatsächlich beim Herumexperimentieren irgendwie durch einander gekommen und es nicht mehr gesehen. Werde es einheitlich machen. Danke für den Tipp.

Mit flexbox habe ich bis jetzt keine Erfahrung gemacht. Werde mich nun in das Thema einlesen. Bis jetzt habe ich so verstanden, dass neue flexbox - Syntax nur bei den neuen Browser-Versionen funktioniert. In meinem Fall brauche ich dann sowohl alte als auch neue Syntax. Muss dann halt irgendwie schauen, wie ich alt mit neu kombinieren kann.
Dein Link wird mir bestimmt dabei helfen.
 

Myhar

Hat es drauf

Abgesehen von IE funktioniert Flexbox überall, bzw. bis IE Version 9 gar nicht, ab dann mit Einschränkungen.
Wie groß ist denn die Besucheranzahl die noch mit IE Version 9 (oder kleiner) auf deiner Seite aufscheinen? Ist diese vernachlässigbar, dann verwende Flexbox.
In Flexbox muss man sich zwar zuerst einmal ein wenig einarbeiten, aber wenn man es einmal beherrscht ist man damit doch schneller und effizienter als mit floats.
Floats sind jetzt nichts böses und können auch weiterhin verwendet werden, aber genau für solche "einzeiligen" (horizontal, vertikal) Layouts, welche sich auch noch über mehrere Zeilen/Spalten erstrecken wurde flexbox entwickelt.
Für zweidimensionale Layouts gibt es dann display: grid, da ist die Unterstützung aber noch geringer, kommt aber auch schon :)

http://caniuse.com/#feat=flexbox
 

Lenka

Squirrel

Wenn Flexbox überall funktioniert, wird es schön sein. Nur bis dahin müssen wir anders auskommen. Bei mir ist das IE tatsächlich ein Problem. Die meisten Zielpersonen für meine Seite werden wohl Nutzer von IE- "Trommelversion"sein. Ich kann auf sie nicht verzichten. Deshalb muss ich ein Weg finden meine HP auch für sie ansehnlich zu machen.
 

Myhar

Hat es drauf

Flexbox wird niemals überall funktionieren. IE9 wird nie flexbox unterstützen.
Ist das nur eine Vermutung deinerseits oder hast du auch Zahlen, die eine derart hohe IE9 (oder kleiner) Nutzung auf deiner Seite bestätigen? Würde mich doch interessieren, wie diese Nutzung auf anderen Seiten aussieht. Auf Seiten, wo ich es kenne, sind es ein verschwindend kleiner Prozentsatz (1-2% vielleicht).
Man kann ja auch flexbox + float gemeinsam anbieten. Browser, die flexbox können, verwenden eben flexbox, die anderen eben float.
Aber mit dem Hinweis auf einheitliche Einheiten sollte dein Problem ohnehin gelöst sein, oder?
 

Lenka

Squirrel

Die Einheiten habe ich nun alle auf % gesetzt. Die Höhe bleibt da natürlich gleich. Und das Problem bleibt dementsprechend auch. Im Moment habe ich es ganz unelegant gelöst, nämlich feste gleiche Höhe allen Boxen zugewiesen. Und so floatet es wie gewünscht.

Feste Zahlen für die IE9 Nutzern habe ich nicht. Bis jetzt habe ich nur relativ viele Gespräche mit potenziellen Kunden eines Produktes, das auf der Seite angeboten wird, gesprochen. Es sind Kleinunternehmer und viele von ihnen sind der Meinung, so lange ihr PS läuft, brauchen sie nichts daran zu ändern. :) Und weil der HP-Kunde nicht zuletzt an solchen Zielpersonen interessiert ist, muss die Seite für alle attraktiv aussehen. Und ich darf mir den Kopf zerbrechen, wie ich das mache. :)

Ich werde noch versuchen , wie du es empfohlen hast, flexbox mit floaten zusammen anzubieten.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Keine Mitglieder online.

Statistik des Forums

Themen
118.635
Beiträge
1.538.449
Mitglieder
67.556
Neuestes Mitglied
Ggirl
Oben