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

Ausrichtung einer <div galerie trotz float: left

Prgrmmrgrl

Neues Mitglied
Hallo Zusammen,

ich habe eine BilderGalerie nach folgendem Schema gebaut:


<ul>
<div id="galerie">
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
<li><img src="{{media url="wysiwyg/wedding-1.jpg"}}" alt="name">name</li>
<li><img src="{{media url="wysiwyg/wedding-2.jpg"}}" alt="name">name</li>
<li><img src="{{media url="wysiwyg/wedding-3.jpg"}}" alt="name">name</li>
<li><img src="{{media url="wysiwyg/wedding-4.jpg"}}" alt="name">name</li>
<li><img src="{{media url="wysiwyg/wedding-5.jpg"}}" alt="name">name</li>
<li><img src="{{media url="wysiwyg/wedding-6.jpg"}}" alt="name">name</li>
<li><img src="{{media url="wysiwyg/wedding-7.jpg"}}" alt="name">name</li>
<li><img src="{{media url="wysiwyg/wedding-8.jpg"}}" alt="name">name</li>
</ul>
<div style="clear: both;"></div>
</div>


hier die CSS dazu:

#galerie li
{
float: left;
text-align: center;
list-style-type: none;
font-size: 20px;
margin: 0;

}

#galerie img
{
width: 280px;
height: auto;
display: block;
padding: 6px;
}

#galerie img:hover
{
background-color: #3c3c3b;

}


Sie funktioniert auch so wie ich es brauche und sie sieht auch gut aus, jedoch schaue ich sie mir auf dem Smartphone an und drehe den Bildschirm quer ist sie links versetzt, was an dem float:left; Befehl liegt, der wird gebraucht um die Bilder nebeneinander "aufzulisten". Hat jemand von euch eine Idee wie ich sie zentriert bekomme?

Danke im Voraus!
 
Werbung:
Hey,

du benutzt bei deinem CSS eine sehr veraltete Methode, die (offensichtlich) nicht gut funktioniert.
Für solche vorhaben solltest du dir insbesondere mal Flex- und Grid-Layouts anschauen. Mit solchen Sachen kannst du fast deine komplette Seite strukturieren.

Floats solltest du nur in ganz bestimmten Fällen verwenden.
 
Werbung:
Das kommt ganz darauf an, was du noch vorhast mit deiner Galerie.
Eignen tun sich beide für das was ich sehen kann.
 
Ich habe es jetzt mit Flexlayout versucht, die platzierung hat soweit geklappt jedoch klappt im CSS der befehl justify-content: flex-start; nicht, ich habe also keinen Abstand (padding) zwischen den Items.
Weißt du woran es liegt? Es wird allgemein kein Befehl unter display: flex; angenommen..

Grüße
 

Anhänge

  • Bildschirmfoto 2019-02-18 um 08.03.21.png
    Bildschirmfoto 2019-02-18 um 08.03.21.png
    13,7 KB · Aufrufe: 3
flex-start heißt ja auch, dass die Container am Anfang der Flexbox, ohne padding gesetzt werden.
Dafür würdest du Dinge wie space-between oder space-around verwenden. Man kann aber auch ein normales padding setzen und justify-content: center setzen.
Vergiss nicht, flex-wrap: wrap zu setzen um es responsive zu machen.
 
Werbung:
Jetzt habe ich nur noch ein Problem, wenn ich flex-wrap: wrap; bei container einfüge ordnen sich die Items untereinander aus..

Html:

<div class="flex-container">
<div class="flex-item1"><img src="{{media url="wysiwyg/wedding-2844538_1920.jpg"}}" alt="Events">EVENTS</div>
<div class="flex-item2"><img src="{{media url="wysiwyg/wedding-2844538_1920.jpg"}}" alt="Events">EVENTS</div>
<div class="flex-item3"><img src="{{media url="wysiwyg/wedding-2844538_1920.jpg"}}" alt="Events">EVENTS</div>
<div class="flex-item4"><img src="{{media url="wysiwyg/wedding-2844538_1920.jpg"}}" alt="Events">EVENTS</div>
</div>

CSS:

.flex-container {
display: flex;
flex-wrap: wrap;
}


.flex-item1 {
padding: 6px;
}

.flex-item2 {
padding: 6px;
}

.flex-item3 {
padding: 6px;
}

.flex-item4 {
padding: 6px;
}
 
Werbung:
Ich war der Meinung, so soll es auch sein. Das eignet sich für Smartphones ziemlich gut und sollte auch so gemacht werden. Wenn du 4 Bilder auf dem Handy nebeneinander hast, sind sie ja winzig. Falls das dennoch gewünscht ist, dann ersetze flex-wrap: wrap; durch justify-content: space-around;.

Das padding fällt dann weg. Falls du im übrigen ein padding setzen willst, musst du das nicht für jeden einzelnen Container, es reicht .flex-container > img.

Du musst jetzt ein max-width setzen, damit es wieder responsive ist.
 
Zuletzt bearbeitet:
Achso, da haben wir uns falsch verstanden. Die Items sollen nebeneinander (4 Stk.) platziert sein, sich jedoch für Smarphones untereinander anordnen..
Nein auf keinen Fall dürfen Sie winzig werden :eek:
 
Das ist doch hiermit erreicht:

Du kannst mit reinem CSS das ganze für alle Bildschirmgrößen responsive machen und zwar genau so.
Wenn du einen Bildschirm hast, der groß genug ist (also seine Auflösung), dann siehst du alles nebeneinander (sofern deine Bilder nicht zu groß sind). Sobald die Bilder nicht mehr nebeneinander passen, klappen die Bilder in die nächste Reihe.
 
Werbung:
Hey @Aaron3219,

ich habe jetzt noch ein Problem, wnne ich den in meinen items platzierten Bildern einen Link hinzufügen will umd die auf eine Seite zu verweisen zerschiesst es das ganz Design und die items stehen wieder untereinander. :confused: Hast du dafür eine Lösung hier nochmal der Code:

<div class="flex-container">
<div class="flex-item"><img src="{{media url="wysiwyg/wedding-2844538_1920.jpg"}}" alt="Events">EVENTS</div></div>
<div class="flex-item"><img src="{{media url="wysiwyg/wedding-2844538_1920.jpg"}}" alt="Weihnachten">WEIHNACHTEN</div>
<div class="flex-item"><img src="{{media url="wysiwyg/wedding-2844538_1920.jpg"}}" alt="Marketing">MARKETING</div>
<div class="flex-item"><img src="{{media url="wysiwyg/wedding-2844538_1920.jpg"}}" alt="Messeeinladung">MESSEEINLADUNG</div>
</div>

jedes der items bekommt einen Link zu einer anderen Seite..
Danke im Voraus.
Grüße
 
Werbung:
Zurück
Oben