Bilder Anordnen in CSS und noch ein paar kleinigkeiten.

[Rockcrusher]

Hallo, ich bin ein Anfänger in HTML und CSS und hab versucht mittlerweile meine dritte kleine Seite zu bauen. Wird immer besser finde ich. Aber ich habe ein paar kleine Probleme.
Ich bin Fotograf und hab für mein Unternehmen eine Seite gebaut das mich Leute erreichen können und ich hab da auch eine kleine Galerie gemacht.
Der Code sieht im Moment so aus:

 <div class="spalte">
       <img src="img/bild1.jpg">
       <img src="img/bild2.jpg">
       <img src="img/bild3.jpg">
       <img src="img/bild3.jpg">
</div>

Der Klasse "spalte" hab ich dann einen CSS Code hinzugefügt. Hab ein Flex Element draus gemacht damit die Bilder zentriert und schön übereinander sind. Sieht im Moment so aus.

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

Jetzt habe ich im CSS den einzelnen Bildern noch Werte zugewiesen damit Bilder nicht breiter werden als das Handy Display. Code ist aktuell folgender:

.spalte img {
    padding-top: 2px;
    max-width: 100%;
}

Das Padding ist da damit die Bilder einen kleinen Abstand haben.

So weit so gut, es gibt aber ein kleines Problem. Ich habe die Bilder mit 1200px lange Kante hochgeladen. Wenn ich die Seite nun auf einem Display öffne, mit nur 800px Bild Höhe, wird ein Hochformat Bild natürlich nicht Vollbild angezeigt, man muss also Scrollen damit man es sieht. Dachte mir ich löse das Problem in dem ich den
max-height: 100% ; Befehl verwende aber das geht leider nicht. Es ändert sich nichts wenn ich den Befehl verwende.
Muss ich dafür einen speziellen Befehl verwenden damit bei einer Seite unter einer gewissen Auflösung eine andere Bildhöhe verwendet wird?
Kann es sein das die beiden max- Befehle sich gegenseitig blockieren und das System nicht mehr weiß ob es sich nun an der Höhe oder Breite festmachen soll?
Das Zweite Problem ist, dass meine Seite "Hüpft". Hab zuerst lang gesucht warum das so ist, bis ich drauf gekommen bin das es der Scrollbalken vom Browser rechts im Bild ist.
Meine Seite besteht aus vielen kleinen Unterseiten. Die index.html ist zB.: mein Startbildschirm. Der Startbildschirm ist natürlich nicht zum Scrollen sondern füllt einfach den Bildschirm aus. Klicke ich jetzt auf eine Galerie öffnet sich die Galerie html Datei. Dadurch hüpft mein Navigationsmenü das sich oben befindet genau um die Breite nach links wie der Browser Scrollbalken Breit ist. Gibt es dafür eine Elegante Lösung?

 

[M4ttX]

Nutz CSS Grid für sowas, da gibt es dann auch grid-gap. Die Tricks für Flex mit padding-top nutzt man nicht mehr und so ein padding ist in vielerlei Hinsicht einschränkend. Du brauchst wieder n-th child Selektoren um das Padding des ersten Bildes zu entfernen z.B.

.spalte img {
    max-width: 100%;
}

ist schon ein guter Ansatz, kann dir nicht auswendig sagen, was noch fehlt bzw. auch vom restlichen CSS und HTML abhängen.

Fürs Behalten des Bild-Seitenverhältnisses könnte auch noch

height: 100%;  // oder height: auto;

nötig sein. Bzw. lässt sich mit ein paar Zeilen mehr, jedes Bild in fixem Seitenverhältnis darstellen.


OT:
Um eine professionelle Seite zu gestalten, könnte dir ein Pagebuilder wie Bricks oder Oxygen für Wordpress helfen, um schneller ans Ziel und zu einem professionelleren Ergebnis zu kommen. Du kennst dich scheinbar eh schon etwas mit CSS aus und das Wissen kannst dort weiter nutzen. Da sind so manche Fallstricke sind dort schon gelöst und ein Template System gibt es natürlich auch. Bildskalierung kann man automatisieren und dem Nutzer die am besten passendste Bildgröße ausliefern lassen, sodass auch die Ladezeiten niedrig bleiben. Eine Seite mit 10-20 großen Bildern, ohne Rücksicht auf die Ladezeit, kann schon ein Grauen für Besucher werden.

 

[netzgestaltung]

hi,

in der grundeinstellung addieren sich padding und width.
daher:

.spalte img {
    padding-top: 2px;
    max-width: calc(100% - 2px);
}

oder:

.spalte img {
    padding-top: 2px;
    max-width: 100%;
    box-sizing: border-box;
}

Die Flex-Deklaration ist in dieser Form unpassend. Column wird nicht benötigt, stattdessen wrap:

.spalte {
  display:flex;
  justify-content:center;
  align-items:center;
  flex-flow:row wrap;
}

Aus meiner Sicht ist dein Ansatz ausreichend professionell, lernen hilft.

Einfachere Demos gehen zb mit jsfiddle:
https://jsfiddle.net/sj8y37er/2/

E: hab noch img Einstellungen wie von @M4ttX erwähnt, im fiddle ergänzt und eine A/B Version gebaut.

 

[Rockcrusher]

Danke für die Hilfe. Ich will keine Automatischen Vorlagen oder Pagebuilder verwenden da ich es gerne selbst lernen will. Da die Seite nur für mich ist muss ich auch niemanden Glücklich machen. Ich kann gerne mal die Seite Hochladen wenn erwünscht.

 

[Rockcrusher]

So, ich habe das Problem nun anders gelöst und zwar hab ich versucht Kreativ zu sein.
Habe eine große Flexbox erstellt und in der Flexbox 3 weitere kleine Boxen gebaut. In den Boxen sind nun die Bilder drinnen. Mein selbstgebastelter Code sieht nun so aus:

<div class="galeriecontainer">
    <div class="galerie">
        <img src="img/bild1.jpg">
        <img src="img/bild2.jpg">
    </div>
    <div class="galerie">
        <img src="img/bild3.jpg">
        <img src="img/bild4.jpg">
    </div>
    <div class="galerie">
        <img src="img/bild5.jpg">
        <img src="img/bild6.jpg">
    </div>
</div>

.galeriecontainer {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

.galerie {
    width: 33%;
    min-width: 320px;
}

.galeriecontainer img {
    width: 100%;
}

Die Befehle in .galeriecontainer sorgt dafür das sich die kleineren Container schön anordnen und wenn es zu klein wird übereinander springen.

Unter .galerie hab ich eine weite von 33% festgelegt so das 3 nebeneinander angezeigt werden. min-width hab ich so festgelegt damit man auch auf den kleinsten Handy Displays nicht scrollen muss.

Bei .galeriecontainer img hab ich festgelegt das die Bilder den vollen Platz von den kleinen .galerie boxen nutzen.

Hatte dann das Problem das beim Verkleinern vom Browser Fenster es irgendwann zu einer 2 1 Anordnung kam. Also 2 nebeneinander und dann eine .galerie Box darunter.
Darum hab ich jetzt die Befehle für niedrige Auflösungen genauer angegeben.
Folgendes Funktioniert Aktuell:

@media (max-width: 1020px) {
    .galeriecontainer {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    }
}

@media (max-width: 1020px) {
    .galerie {
        width: 100%;
    }
}

Der erste Code sorgt dafür das der Sprung von 3 nebeneinander auf alle Untereinander ab einer gewissen Auflösung stattfindet.
Der zweite sorgt dafür das die Box (und somit die Bilder) den gesamten Bildschirm ausfüllen.
Findet ihr ich hab das so richtig Gemacht und ich kann es so lassen? Als Web Design Anfänger wars ein bisschen eine Arbeit das zu verstehen und ohne Hilfe hinzubekommen.

 

[Rockcrusher]

Ich baue immer weiter und weiter und Lerne dazu, doch ab und an bleibe ich hängen. Aktuell versuche ich gerade eine Diashow zu bauen mit HTML und CSS. Bin dabei auf eine sehr einfache Idee gekommen.
Habe mir einen leeren Container gebaut.
Der HTML Code ist so simpel das es nicht einfacher geht:

<div class="container"></div>

Also ohne etwas drinnen.

In CSS hab ich dann mit dem Content Befehl ein Bild eingefügt und das ganze mit @keyframes animiert. Schaut so aus:

.container {
    width: 100%;
    content:url("titel/titel1.jpg");
    animation: dia 20s infinite;
}

@keyframes dia{
    20%{content: url(titel/titel2.jpg) ;}
    40%{content: url(titel/titel3.jpg) ;}
    60%{content: url(titel/titel4.jpg) ;}
    80%{content: url(titel/titel5.jpg) ;}
    100%{content: url(titel/titel6.jpg) ;}
}

Und siehe da, es Funktioniert wirklich. Nur die Bilder springen jetzt "hart" von einem zum anderen ohne Übergang. Gibt es eine Möglichkeit die Bilder langsam überblenden zu lassen? Ich hoffe ihr wisst wie ich meine. Also nicht Bild1, Bild2, Bild3 usw... Sondern Bild1 überblendet sich langsam mit Bild 2 und Bild 2 Langsam mit Bild3.