5 Bilder auf Webseite gemäß Beispiel anordnen

  • Guten Tag,
    ich versuche auf einer Webseite 5 Bilder gemäß dem beigefügtem Beispiel anzuordnen.
    Leider bekomme ich die Bilder nur "nacheinander" auf die Webseite, sobald ich ein Bild
    einbinden möchte das über 2 Zeilen geht wird daneben nichts mehr angezeigt.
    Für einen Hinweis wäre ich dankbar, für ein Beispielcode würde ich sehr dankbar sein :)

    Einmal editiert, zuletzt von soft (18. Januar 2014 um 10:31)

  • Dein Ansatz wäre hier wichtig. Was hast du schon versucht? Wo schlägt es fehl?

    Gegen Mods kommt man nicht an, die haben immer Recht. Sind scheinbar nicht kritikfähig.

  • Hallo,
    wie gesagt ich habe nur das nebeneinander der Bilder mit nachfolgenden Codeauszug erreicht.
    Das Zusammenspiel der Bilder über Zeilen und Spalten hinweg, zu einer Art Collage, wie im Beispielfoto,
    ist mir nicht geläufig.
    Anbei Codeauszug aus HTML und CSS
    Danke für einen Hinweis.

    //Auszug aus HTML
    <div id="test">
    <img src="http://www.beispiel.de/images/test1.jpg" alt="Test Foto 1" title="Test Foto 1" height="225" />
    <img src="http://www.beispiel.de/images/test2.jpg" alt="Test Foto 2" title="Test Foto 2" height="225" />
    </br>
    <img src="http://www.beispiel.de/images/test3.jpg" alt="Test Foto 3" title="Test Foto 3" height="500" />
    <img src="http://www.beispiel.de/images/test4.jpg" alt="Test Foto 4" title="Test Foto 4" height="225" />
    <img src="http://www.beispiel.de/images/test5.jpg" alt="Test Foto 5" title="Test Foto 5" height="225" />
    </div>
    //Auszug aus CSS
    #test {
    float:right;
    text-align:right;
    font-size:x-large;
    padding-top:20px;
    padding-right:80px;
    clear:both;
    }

    2 Mal editiert, zuletzt von soft (17. Januar 2014 um 15:41)

  • ich bin ja eigentlich nich so der code-poster, ohne dass sich einer vorher richtige gedanken gemacht hat...
    aber hier hast du von mir eine spielerei.
    ich nenne es "absolute fluid".
    is an sich genau das was du willst, aber kann bei bildern zu massiven problemen führen, durchs verzerren. aber das is dein kampf des ding anzupassen :P

    edit: ach ja, der internet-explorer 7 wirds nicht richtig anzeigen. aber da der support für winXP eh im april auslaufen wird, sollte der eh egal sein :)

    Einmal editiert, zuletzt von synaptic (17. Januar 2014 um 19:10)

  • Hallo soft,

    deine Quellcodeschnipsel sind leider nicht sehr aussagekräftig. Ein Online-Beispiel wäre besser.

    Die Bilder musst du natürlich passend nach links und rechts floaten, damit die Anordnung passt. Zusätzlich würde ich so weit möglich auf feste Einheiten wie px verzichten, um die ganze Darstellung flexibel mit Responsive Design zu ermöglichen.

    Gruss

    MrMurphy

  • MrMurphy: Danke für den Hinweis, ich habe oben von Synaptic ein tolles Beispiel erhalten in dem sich die Bildergrößen auch zum Bildschirm entsprechend anpassen.

    - - - Aktualisiert - - -

    Synaptic: Ein ganz tolles Beispiel, vielen Dank dafür, ich werde daran durch modifizieren und ausprobieren viel lernen können.
    Nochmals Danke das Du doch ein Code gepostet hast, mein Nachdenken fängt nun an....

    Einmal editiert, zuletzt von soft (18. Januar 2014 um 10:30)

  • Hallo

    dann hat es sich ja erledigt. Ich war davon ausgegangen, das du eine flexible Webseite nach aktuellen Standards mit Responsive Design erstellen willst, die auch auf Tablets und Smartphones im Hoch- und Querformat sinnvoll angezeigt wird.

    Gruss

    MrMurphy

  • wie gehabt, das beispiel ist so auf jeden fall flexibel, du kannst da feste werte einsetzen, statt der prozent-angaben.
    du kannst aber auch einfach dem master feste werte zuweisen etc. spiel halt n bissi damit herum, dann kannste dadurch herausfinden, wie des ganze funktioniert.

    ich habs mit absoluter positionierung gewählt, weil das center-div mit dieser methode ohne irgendwelchen negativen margins usw auskommt.
    man kann das ganze auch mit floatenden elementen machen, aber dann braucht man wie gehabt negative margins, um deine darstellung zu erreichen.

    wenn du feste bildgrößen hast und diese nutzt, den master aber flexibel hälst, kannst du mit ner hintergrundkachel oder farbe zusätzliche effekte erzeugen, weil du dann in dem konstrukt noch freiräume erhälst

    (oder auch den center einfach mal kleiner machen etc.

    bei fragen hau se hier nei und poste dann aber bitte mit nem link :)