Bilder mittig ausrichten

martinavc · 23.11.2023

Hallo zusammen,

ich habe eine kleine Seite erstellt, die später die gemalten Bilder meiner Mum zeigen soll. Jetzt ist es aber so, dass die momentanen Bilder nicht in der Mitte sind und ich mich nicht mehr auskenne, wie ich das realisieren kann. Die Tabelle ansich wurde mit "div´s" umgesetzt. Ich muss dazu schreiben, dass ich diesbezüglich sehr, sehr schwach bin. Vielleicht kann oder möchte mir jemand dabei helfen? Wäre echt super!
Anschauen kann man die Seite hier: http"s"://www.mwd."at"/tonini/
Oder sollte die Tabelle eher mit <table> gemacht werden?

Ich könnte auch die vorhandenen Dateien senden und bitte seid nicht allzu streng mit mir.
Liebe Grüße

Sempervivum · 23.11.2023

Hallo und willkommen im Forum!
Die Dateien brauchst Du nicht zu senden, wenn man die Seite im Browser hat, kann man sie jederzeit mit den Entwicklerwerkzeugen einsehen.
Dass Du das mit divs gemacht hast, ist schon in Ordnung, das hat den Vorteil, dass man damit viel leichter eine responsive Darstellung erreichen kann.
Die mittige Ausrichtung kannst Du sehr leicht mit margin: 0 auto; erreichen:

Code:

div.blueTable {
    font-family: "Comic Sans MS", cursive, sans-serif;
    border: 0px solid #1C6EA4;
    background-color: transparent;
    width: 80%;
    text-align: center;
    border-collapse: collapse;
    margin: 0 auto;
}

Unabhängig von deiner Frage wäre es noch wünschenswert, wenn sich die Anordnung an die Breite des Browserfenster anpassen würde, d. h. je breiter, desto mehr Spalten. Dann würde die Seite auch auf einem Handy gut anzusehen sein.
Wenn Du Interesse hast, kann ich oder jemand anders dir gern erklären, wie man das macht.
Beste Grüße!

martinavc · 23.11.2023

Ohh, das ging aber schnell! Vielen Dank und hat funktioniert!

Dass es auch auf einem Handy gut aussieht, würde mich sehr interessieren. Ist das nicht zu kompliziert?

Liebe Grüße

Sempervivum · 23.11.2023

Ich schlage dir mal eine Lösung vor, die sehr einfach umzusetzen ist.

Als erstes im HTML die Aufteilung in Zeilen heraus nehmen:

Code:

    <div class="divTable blueTable">

        <div class="divTableBody">

            <!-- Zeile 1 -->
            <!-- <div class="divTableRow"> -->
            <div class="divTableCell"><a href="pics/klein/bild-clean01.png" data-lightbox="image-1"
                    data-title="Bild 1"><img src="pics/klein/bild-clean01.png" alt="Bild 1" height="50"></a>
                <div class="nummer">1</div>
            </div>

            <div class="divTableCell"><a href="pics/klein/bild-clean01.png" data-lightbox="image-1"
                    data-title="Bild 2"><img src="pics/klein/bild-clean01.png" alt="Bild 2" height="50"></a>
                <div class="nummer">2</div>
            </div>

            <div class="divTableCell"><a href="pics/klein/bild-clean01.png" data-lightbox="image-1"
                    data-title="Bild 3"><img src="pics/klein/bild-clean01.png" alt="Bild 3" height="50"></a>
                <div class="nummer">
                    <div class="tesla">3</div>
                </div>
            </div>
            <!-- </div> -->

            <!-- Zeile 2 -->
            <!-- <div class="divTableRow"> -->
            <div class="divTableCell"><a href="pics/klein/bild-clean01.png" data-lightbox="image-1"
                    data-title="Bild 4"><img src="pics/klein/bild-clean01.png" alt="Bild 4" height="50"></a>
                <div class="nummer">4</div>
            </div>

            <div class="divTableCell"><a href="pics/klein/bild-clean01.png" data-lightbox="image-1"
                    data-title="Bild 5"><img src="pics/klein/bild-clean01.png" alt="Bild 5" height="50"></a>
                <div class="nummer">5</div>
            </div>

            <div class="divTableCell"><a href="pics/klein/bild-clean01.png" data-lightbox="image-1"
                    data-title="Bild 6"><img src="pics/klein/bild-clean01.png" alt="Bild 6" height="50"></a>
                <div class="nummer">
                    <div class="tesla">6</div>
                </div>
            </div>
            <!-- </div> -->

            <!-- Zeile 3 -->
            <!-- <div class="divTableRow"> -->
            <div class="divTableCell"><a href="pics/klein/bild-clean01.png" data-lightbox="image-1"
                    data-title="Bild 7"><img src="pics/klein/bild-clean01.png" alt="Bild 7" height="50"></a>
                <div class="nummer">7</div>
            </div>
<!-- usw. -->

Und dann im CSS diese Änderungen:

Code:

.divTableBody {
    /* display: table-row-group; */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

d. h. die Elemente mit Flex anordnen, Zeilenumbrüche erlauben und horizontal zentrieren.

Und bei den Zellen ein kleines Margin hinzu fügen, damit sie mehr Abstand bekommen, so wie sie es bisher hatten:

Code:

.divTable.blueTable .divTableBody .divTableCell {
    font-size: 13px;
    margin: 0 1.5em;
}

martinavc · 23.11.2023

Super, das probiere ich morgen.
Danke schonmal.

martinavc · 29.11.2023

Hallo Sempervivum,

ich habe die Seite jetzt geändert. Allerdings passt da so einiges noch nicht (meinerseits). Nur zum Verständnis: Diese Seite möchte ich gerne um meine verstorbene Mutter Wertzuschätzen. Wobei am Freitag ihr Begräbnis ist.

Ich würde Dir sehr gerne, für Deine Hilfe, etwas zukommen lassen! Und nein, diese Seite muss nicht bis zum Freitag fertig sein! Könntest Du bitte einmal nachschauen, wie sie bei Dir aussieht?

Liebe Grüße

Sempervivum · 29.11.2023

Guten Abend,
dann erst Mal mein herzliches Beileid zu diesem Verlust!
Selbstverständlich unterstütze ich dich gern weiter.
Nach meinem Empfinden sieht die Seite gar nicht schlecht aus, jedenfalls funktionieren die Umbrüche.

Was gefällt dir denn nicht? Vielleicht, dass die Nummern nicht auf einer Höhe sind wenn Quer- und Hochformat gemischt sind. Könnte man so ändern, dass man es generell unten ausrichtet und beim Querformat oben ein wenig Luft ist.

martinavc · 30.11.2023

Vielen Dank, Sempervivum, das ist sehr nett!
Vielleicht könnte man die Querformate (es sind ja nur 10 im Moment) oben anzeigen lassen und alle (Hochformate) darunter, also mit einem kleinem Abstand.
Und dann gefällt mir der Header nicht wirklich, aber das sollte dann ein anderesmal behandelt werden!

Vielen Dank und es gibt doch noch liebe Leute!

Sempervivum · 30.11.2023

Das könnte man auch machen. Du müsstest dann das HTML ein wenig umsortieren, so dass die Querformate und Hochformate jeweils zusammen stehen.

Noch eine Anmerkung: Die Seite lädt bei mir sehr langsam und manchmal gibt der Browser sogar mit Timeout auf. Das liegt sehr wahrscheinlich daran, dass die Bilder zwar als Thumbnails klein dargestellt werden aber trotzdem erst Mal die volle Größe geladen werden muss. Bei einem Bild sehe ich da über 7MB, das ist im Web zu viel. Man kann es verbessern, indem man für die Thumbnails ein kleineres Bild bereit stellt. Hast Du eine Bildbearbeitung, wo Du das im Stapel-Modus erledigen kannst?

Mein Vorschlag würde so aussehen:

Sempervivum · 30.11.2023

... oder die Querformat-Bilder mittig:

martinavc · 30.11.2023

Also das letzte was du geschrieben hast wäre schön! So ist es nicht so einseitig, denke ich. Und das mit der Größe der Bilder hast du vermutlich Recht! Ich werde sie kleiner machen.
Stapelverarbeitung, lieber Sempervivum - da kenne ich mich leider überheupt nicht aus. Ist jedoch nicht schlimm, ich verkleinere die Bilder so vor zu.

Sempervivum · 30.11.2023

Das lässt sich leicht machen mit dem CSS rechts:

Code:

.divTableCell {
    display: flex;
    align-items: center;
    justify-content: end;
    flex-direction: column;
}

Code:

.divTableCell>a {
    /* Dies macht die vertikale Zentrierung: */
    margin: auto 0;
}

martinavc · 30.11.2023

So wie ich gelesen habe, würde das mit IrfanView funktionieren (Stapel-Modus). Ich muss jedoch echt gestehen, ich traue mich nicht.

Sempervivum · 30.11.2023

Guten Morgen,
ja, mit Irfanview geht es sicher aber ich habe da etwas anderes was ich immer wieder gern benutze:
https://www.heise.de/download/product/image-resizer-59304?hg=1&hgi=2&hgf=false
Das klinkt sich im Kontextmenü ein und liefert alles was man braucht um Bilder zu verkleinern. Dass es nur drei Sterne hat, kann ich nicht nachvollziehen, ich finde es perfekt.
Am besten immer die originalen Bilder anders wo aufbewahren, damit sie erhalten bleiben. Der Imageresizer fügt aber auch einen Suffix hinzu, so dass das originale Bild ebenfalls nicht geändert wird.

Heute bin ich tagsüber erst Mal unterwegs. Falls Du irgend wo nicht weiter kommst, kann dir sicher jemand anders helfen.

martinavc · 12.12.2023

Vielen Dank, Sempervivum. Du hast mir sehr geholfen.

Sempervivum · 15.12.2023

Guten Morgen, das freut mich zu lesen.
Wenn ich mir deine Seite ansehe, sieht das schon recht gut aus: Sie ist responsiv, d. h. die Anzahl der Bilder in einer Reihe passt sich an die Größe des Browserfensters an. Und die Bilder hast Du verkleinert, so dass die Seite jetzt viel schneller lädt.
Was ich vermisse, ist die vertikale Zentrierung der Bildchen im Querformat. Du hattest ja selbst geschrieben, dass Du das hübscher findest. Hattest Du Probleme bei der Umsetzung, habe ich es nicht gut genug beschrieben?
Beste Grüße, Ulrich

martinavc · 03.01.2024

Hi Ulrich,

zu erst einmal wünsche ich Dir nachträglich alles Liebe und ein gesundes neues Jahr.
Ja, Du hast recht, das wollte ich. Ich habe das irgendwie aus den Augen verloren.
Da jetzt unverhofft nochmals ca. 50 Bilder dazu kommen, muss ich das wohl umsetzen.

Liebe Grüße,
Martina