5 Bilder auf Webseite gemäß Beispiel anordnen

soft

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

Gastl

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

soft

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;
}

Gastl

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

synaptic

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

HTML

<!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>

Alles anzeigen

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

MrMurphy

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

soft

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....

MrMurphy

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

synaptic

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

Tags