Ergebnis 1 bis 9 von 9

Thema: 5 Bilder auf Webseite gemäß Beispiel anordnen

  1. #1
    HTML Newbie
    Registriert seit
    17.01.2014
    Beiträge
    3
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard 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
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    Geändert von soft (18.01.2014 um 11:31 Uhr)

  2. #2
    König(in)
    Registriert seit
    13.06.2012
    Beiträge
    1.151
    Danke
    14
    Bekam 63 mal "Danke" in 61 Postings

    Standard AW: 5 Bilder auf Webseite gemäß Beispiel anordnen

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

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    17.01.2014
    Beiträge
    3
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: 5 Bilder auf Webseite gemäß Beispiel anordnen

    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-large;
    padding-top:20px;
    padding-right:80px;
    clear:both;
    }
    Geändert von soft (17.01.2014 um 16:41 Uhr)

  4. #4
    König(in)
    Registriert seit
    13.06.2012
    Beiträge
    1.151
    Danke
    14
    Bekam 63 mal "Danke" in 61 Postings

    Standard AW: 5 Bilder auf Webseite gemäß Beispiel anordnen

    Der Code ist dazu absolut ungeeignet. Kenntnisse über CSS könnten weiter helfen. Dazu ist Eigeninitiative nötig -> lernen.

    z.B. etwas Hintergrundwissen -> http://de.html.net/tutorials/css/lesson14.php

  5. #5
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: 5 Bilder auf Webseite gemäß Beispiel anordnen

    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

    HTML-Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <style type="text/css">
    *{
        margin:0;
        padding:0;
        outline:0;
    }
    .relative
    {
        position: relative;
        height: 100%;
        width:100%;
    }
    #master
    {
        width: 90%;
        height: 90%;
        position: absolute;
        background: #cccccc;
        margin: auto;
        top:0;
        left:0;
        right:0;
        bottom:0;
    }
    #topleft
    {
        width: 30%;
        height: 70%;
        position: absolute;
        top:0;
        left:0;
        background:lime;
        z-index: 10;
    }
    #topright
    {
        width: 70%;
        height: 30%;
        position: absolute;
        top:0;
        right:0;
        background:pink;
        z-index: 10;
    }
    #bottomright
    {
        width: 30%;
        height: 70%;
        position: absolute;
        bottom:0;
        right:0;
        background: lightblue;
        z-index: 10;
    }
    #bottomleft
    {
        width: 70%;
        height: 30%;
        position: absolute;
        bottom:0;
        left:0;
        background:magenta;
        z-index: 10;
    }
    #center
    {
        width: 40%;
        height:40%;
        position: absolute;
        background: red;
        margin: auto;
        top:0;
        left:0;
        right:0;
        bottom:0;
        z-index: 20;
    }
    </style>
    </head>
    <body>
    <div id="master">
        <div class="relative">
            <div id="topleft"></div>
            <div id="topright"></div>
            <div id="center"></div>
            <div id="bottomleft"></div>
            <div id="bottomright"></div>
        </div>
    </div>
    </body>
    </html>
    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
    Geändert von synaptic (17.01.2014 um 20:10 Uhr)
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  6. Folgende User finden die Antwort von synaptic gut:


  7. #6
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    569
    Danke
    0
    Bekam 66 mal "Danke" in 64 Postings

    Standard AW: 5 Bilder auf Webseite gemäß Beispiel anordnen

    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

  8. #7
    HTML Newbie
    Themenstarter

    Registriert seit
    17.01.2014
    Beiträge
    3
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: 5 Bilder auf Webseite gemäß Beispiel anordnen

    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....
    Geändert von soft (18.01.2014 um 11:30 Uhr)

  9. #8
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    569
    Danke
    0
    Bekam 66 mal "Danke" in 64 Postings

    Standard AW: 5 Bilder auf Webseite gemäß Beispiel anordnen

    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

  10. #9
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: 5 Bilder auf Webseite gemäß Beispiel anordnen

    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
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

Ähnliche Themen

  1. Bilder nebeneinander anordnen
    Von sdfg im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 24.10.2013, 10:05
  2. geoip für den ländercode gemäß ISO 3166-1
    Von synaptic im Forum Script-Archiv
    Antworten: 7
    Letzter Beitrag: 22.05.2012, 16:07
  3. Bilder mithilfe von HTML-Codes verschieden anordnen
    Von bratpfanne im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 30.12.2011, 15:11
  4. Wie 40 kleine Bilder genau anordnen? (mit Bild)
    Von Abendfrieden im Forum HTML & CSS Forum
    Antworten: 11
    Letzter Beitrag: 06.09.2009, 18:33
  5. Brauch eure Hilfe! (Bilder direkt nebeneinander anordnen)
    Von Foulfang im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 4
    Letzter Beitrag: 15.11.2004, 16:04

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •