Ausrichtung einer <div galerie trotz float: left

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

Prgrmmrgrl

Neues Mitglied
15 Februar 2019
18
0
1
26
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!
 

Aaron3219

Senior HTML'ler
6 Oktober 2015
1.017
200
63
17
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.
 

Prgrmmrgrl

Neues Mitglied
15 Februar 2019
18
0
1
26
Okay vielen Dank!
welche der beiden Methoden Flex- oder GriLayout eignet sich besser für mein Vorhaben?

Grüße
 

Aaron3219

Senior HTML'ler
6 Oktober 2015
1.017
200
63
17
Das kommt ganz darauf an, was du noch vorhast mit deiner Galerie.
Eignen tun sich beide für das was ich sehen kann.
 

Prgrmmrgrl

Neues Mitglied
15 Februar 2019
18
0
1
26
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

Aaron3219

Senior HTML'ler
6 Oktober 2015
1.017
200
63
17
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.
 

Prgrmmrgrl

Neues Mitglied
15 Februar 2019
18
0
1
26
okay, muss ich flex-wrap: wrap für jedes Item setzen oder auch nur unter .flex-container.


Vielen Dank schon mal!
 

Prgrmmrgrl

Neues Mitglied
15 Februar 2019
18
0
1
26
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;
}
 

Aaron3219

Senior HTML'ler
6 Oktober 2015
1.017
200
63
17
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:

Prgrmmrgrl

Neues Mitglied
15 Februar 2019
18
0
1
26
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:
 

Aaron3219

Senior HTML'ler
6 Oktober 2015
1.017
200
63
17
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.
 

Prgrmmrgrl

Neues Mitglied
15 Februar 2019
18
0
1
26
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
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.277
263
83
66
Bei dem Code, den Du da gepostet hast, kann ich keine Links erkennen?

Besser das generierte HTML aus der Quelltextansicht des Browsers posten.
 
Reactions: Prgrmmrgrl
Werbung:

Latest posts