Be KreaTief

[CSS] Übersicht in Bildern ✤✤


Auf Wunsch heute ein kleines Tutorial zum Thema Übersicht in Bildern, auch "Wie man Bilder in Blogger" nebeneinander platziert etc.

Unser Endergebnis wird ausschauen wie die statischen Seiten die ihr unter Rezepte und DIY findet. Aber weil ich grad noch was mit dem Hover ausprobieren wollte, hab ich trotzdem ein DEMO geschrieben, die Bilder wurden mit der gleichen Technik nebeneinander platziert.
Okay. Zu Beginn braucht ihr eure Bilder, die direkt die richtige Grösse haben sollten. Ich mag quadratisch und denke, dass 200px Breite eigentlich reichen.

Habt ihr das gemacht, ladet ihr eure Bilder bei Picasa hoch.
Die Bilder werden in einen Figure-Tag gepackt. In diesem Figure-Tag platzieren wir das Bild in einem Link, der Link soll dann zu unserem Post führen.
Und die ganzen figure-Tags kommen dann noch in einen div-Container, weil wir den noch richtig platzieren wollen.

Der Grundaufbau schaut also so aus:
<div>
<figure><a href="POSTLINK"><img src="BILDLINK"/></a></figure>
<figure><a href="POSTLINK"><img src="BILDLINK"/></a></figure>
<figure><a href="POSTLINK"><img src="BILDLINK"/></a></figure>
</div>


Ich hab das jetzt mal hier unten gemacht und es schaut jetzt noch so aus:




Das ist nicht ganz das, was wir haben wollen.
Wir brauchen das gute alte CSS.
In der statischen Seite fügen wir also folgende CSS ein:
<style>
figure {
display: table-cell;
padding: 0 4px;
text-align: center
}
</style>

Und dann fügen wir im div-Container auch noch eine kleine CSS ein und schon sind eure Bilder schön nebeneinander angeordnet.
So schaut der Code dann am Ende bei mir aus:
<div style="display: table; width: 100%;">
<figure><a href="http://goo.gl/wA6IW"><img src="http://goo.gl/wX70n" /></a></figure>
<figure><a href="http://goo.gl/wA6IW"><img src="http://goo.gl/vw24W" /></a></figure>
<figure><a href="http://goo.gl/wA6IW"><img src="http://goo.gl/WuVPk" /></a></figure>
</div>



Und wenn ihr dann noch bisschen weiter rumspielt könnt ihr auch noch bisschen mit Hovern experimentieren, und das ganze nach eurem Willen gestalten. :)
Ich hoffe, dass dieses kleine Tutorial hilfreich war, und ihr was damit anfangen könnt.
edit

4 comments:

  1. Hey Miri,
    vielen vielen lieben Dank, dass du dir extra Zeit genommen hast, um dieses Tutorial zu schreiben!
    Ich werde das auf jeden Fall in den nächsten Tagen - sobald ich Zeit habe - ausprobieren und hoffentlich erfolgreich umsetzen ;)
    Tausend Dank dir nochmal :)
    Liebe Grüße, Hannah

    ReplyDelete
    Replies
    1. Kein Problem. :)
      Wenn's Probleme gibt, Bescheid sagen und ich schaus mir an :D

      Delete
  2. Vielen Dank für das Tutorial :) Klappt super!

    ReplyDelete

Fragen, Feedback oder anderes, was du loswerden willst?
Kommentiere über das alte Kommentarsystem (check wieder vorbei um zu sehen, ob ich geantwortet habe) oder G+

Questiosn, Feedback or something else you want to tell me?
Comment using the old system or G+ and make sure to check back to see if I answered