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

Bilder neben- und untereinander

lukasmeier

Mitglied
Hallo,

Kann mir jemand sagen, wie man das hier macht: http://mandycapristo.com/blog dass man Bilder genau nebeneinander und untereinander hat, geht das irgenwie automatisch? Denn das ist viel zu viel arbeit, wenn ich das immer einzeln mache, und das mit der Bildgröße das das alles passt?
Und wie kann ich ein Hover machen, das da auch so ein Titel darüber erscheint?
Lg
 
Werbung:
Die Antwort auf alles ist CSS. Mit der CSS-Eigenschaft float kannst Du die Anordnung erreichen. Ebenfalls kannst Du per CSS solche hover-Effekte umsetzen.
 
Viele Fragen auf einmal!
1. erst mal der HTML-Aufbau mit figure und figcaption:
http://wiki.selfhtml.org/wiki/HTML/Textstrukturierung/figure

2. Ich würde es anstelle von float mit display:inline-block probieren:
http://wiki.selfhtml.org/wiki/CSS/E...ock:_Au.C3.9Fen_Inline-Box.2C_innen_Block-Box

Die Ränder (padding und margin) auf 0 setzen

3. Jetzt den :hover Effekt

Normalerweise ist figcaption unterhalb des img im figure-Elternelement positioniert.
a. figure relativ positionieren
figure{
position: relative;
display: block;
overflow: hidden;
}

b. figcaption wird absolut dargestellt und im Normalfall nicht angezeigt!( Das machen opacity und left:-100%)
figcaption {
position: absolute;
opacity: 0;
bottom: 0;
left: -100%;
-webkit-transition: all 0.6s ease;
transition: all 0.6s ease;
}

c. der :hover-Effekt
figure:hover figcaption {
opacity: 1;
left: 0;
}


hier ist das Ganze auf Englisch erklärt:
http://css-tricks.com/slide-in-image-captions/

Ansonsten deine Wunschseite nehmen , speichern und versuchen nachzubauen!
 
Werbung:
Kann es sein, das du deine Seite auf dem Stil, von dieser Seite aufbaust? :p Ansonsten kannst du dir mit dem Firefox Add-On Fireburg, die ganzen Elemente und CSS Eigenschaften genau anschauen und nachbauen. Bei den Bildern kannst du wieder gesagt entweder float oder display: inline-block verwenden.
 
Viele Fragen auf einmal!
1. erst mal der HTML-Aufbau mit figure und figcaption:
http://wiki.selfhtml.org/wiki/HTML/Textstrukturierung/figure

2. Ich würde es anstelle von float mit display:inline-block probieren:
http://wiki.selfhtml.org/wiki/CSS/E...ock:_Au.C3.9Fen_Inline-Box.2C_innen_Block-Box

Inline-Block hat aber den Nachteil, dass bei folgender Schreibweise
Code:
<figure>
    ....
</figure>
<figure>
    ....
</figure>
ein unschöner Abstand zwischen den Elementen entsteht (wegen dem Zeilenumbruch).
Das würde beim Floaten nicht passieren.
 
.. nochmal offtopic

Kann es sein, dass du deinen Blog statisch (also nur mit HTML) baust und komplett auf PHP verzichtest (aus welchen Gründen auch immer) ? Die Frage: Warum? du musst jede Seite bei einem neuen Eintrag vollkommen ändern und die nachfolgenden Seiten womöglich auch ..

PS: der 19.08.2014 ist ein Dienstag, kein Sonntag
 
Werbung:
Werbung:
Zurück
Oben