nicht angemeldet
3 Bilder per CSS anordnen
Hi,
ich möchte in einer Seite drei Bilder wie hier dargestellt anordnen, ohne eine Tabelle zu verwenden.
<table id="layout-table">
<tr>
<td rowspan="2"><img src="image311.gif" alt="P" height="384" width="404" /></td>
<td><img src="image3141.gif" alt="Ji" height="252" width="124" /></td>
</tr>
<tr>
<td><img src="image3191.gif" alt="Gr" height="96" width="108" /></td>
</tr>
</table>
Da gibt es doch bestimmt ein bessere Möglichkeit mit CSS?
Ich komme gerade nicht auf die Lösung, aber bestimmt weiß jemand von euch weiter?
Gruß, Susanne
-
Hi,
zuerst mal ist die Tabelle fehlerhaft. Es fehlt in der zweiten Zeile die zweite Spalte.
Von daher bin ich gar nicht sicher was du sehen möchtest.
Zwei Bilder nebeneinander und eines darunter?Mike
-
Hi Mike
zuerst mal ist die Tabelle fehlerhaft. Es fehlt in der zweiten Zeile die zweite Spalte.
Rowspan 2 für Bild 1 !
Von daher bin ich gar nicht sicher was du sehen möchtest.
Zwei Bilder nebeneinander und eines darunter?Es sind 3 Bilder, ein großes und 2 kleine. Die beiden kleinen Bilder sollen untereinder rechts neben dem großen Bild stehen.
Gruß, Susanne
-
Hi Susanne,
Rowspan 2 für Bild 1 !
ups, richtig. Wobei ich sowas als Zerstörung einer Tabelle ansehe und (fast)nie genutzt habe;-)
Dein Problem ist ja recht einfach zu lösen, wenn ich es richtig verstehe.
<div>
<div>grosses Bild</div>
<div>kleine Bilder</div>
</div>Das Div der kleinen Bilder floaten um das div des grossen Bild. Die kleinen Bilder auf display:block setzen; oder in <p> setzen und clear nicht vergessen.
Nur auf die schnelle ohne viel darüber nachgedacht, geht also sicher auch anders.
Mike
-
Hi Mike,
»» Rowspan 2 für Bild 1 !
ups, richtig. Wobei ich sowas als Zerstörung einer Tabelle ansehe und (fast)nie genutzt habe;-)Deshalb wäre mir ja CSS lieber
Dein Problem ist ja recht einfach zu lösen, wenn ich es richtig verstehe.
<div>
<div>grosses Bild</div>
<div>kleine Bilder</div>
</div>Das Div der kleinen Bilder floaten um das div des grossen Bild. Die kleinen Bilder auf display:block setzen; oder in <p> setzen und clear nicht vergessen.
Das hört sich ganz gut an, aber vielleicht gibt es noch eine Möglchkeit ohne div-Suppe.
Gruß, Susanne
-
Hi Susanne,
»» »» Rowspan 2 für Bild 1 !
»» ups, richtig. Wobei ich sowas als Zerstörung einer Tabelle ansehe und (fast)nie genutzt habe;-)Deshalb wäre mir ja CSS lieber
nein so meinte ich das nicht, rowspan zu verwenden empfinde ich als Zerstörung. Was dein Problem betrifft, würde ich persönlich eine Tabelle bevorzugen, aber das ist Ansichtssache.
Das hört sich ganz gut an, aber vielleicht gibt es noch eine Möglchkeit ohne div-Suppe.
Geht auch ohne die DIV verdeutlichen aber die Struktur, daher. Aber du kannst auch einfach nur die kleinen Bilder in ein Block-Element packen und dieses um das grosse Bild floaten.
Mike
-
-
-
-
-
Hi Susanne07!
Da gibt es doch bestimmt ein bessere Möglichkeit mit CSS?
Wie sieht denn dein HTML aus?
Ich komme gerade nicht auf die Lösung, aber bestimmt weiß jemand von euch weiter?
Position, float, Hintergrungbilder oder Kombinationen davon könnten genutzt werden.
MfG H☼psel
--
"It's amazing I won. I was running against peace, prosperity, and incumbency."
George W. Bush speaking to Swedish Prime Minister unaware a live television camera was still rolling, June 14, 2001
Selfcode: ie:% fl:( br:> va:) ls:& fo:) rl:? n4:& ss:| de:] js:| ch:? sh:( mo:) zu:)-
Hallo Hopsel,
Wie sieht denn dein HTML aus?
xhtml 1.0 strict»»
»» Ich komme gerade nicht auf die Lösung, aber bestimmt weiß jemand von euch weiter?
Position, float, Hintergrungbilder oder Kombinationen davon könnten genutzt werden.Es sind 3 Bilder, ein großes und 2 kleine. Die beiden kleinen Bilder sollen untereinder rechts neben dem großen Bild stehen.
Mit float bekomme ich sie wunderbar nebeneinander, aber die beiden kleinen eben nicht untereinander.
Gruß, Susanne
-
Hi Susanne07!
Wie sieht denn dein HTML aus?
xhtml 1.0 strict»»Ist das ein Scherz? =)
Den Code, Susanne, du musst den relevanten Code liefern!
MfG H☼psel
--
"It's amazing I won. I was running against peace, prosperity, and incumbency."
George W. Bush speaking to Swedish Prime Minister unaware a live television camera was still rolling, June 14, 2001
Selfcode: ie:% fl:( br:> va:) ls:& fo:) rl:? n4:& ss:| de:] js:| ch:? sh:( mo:) zu:)-
Hallo Hopsel,
Den Code, Susanne, du musst den relevanten Code liefern!
Der Code der Tabelle steht in der Ausgangsfrage. Ich habe das Problem eben erst Mal mit einer Layouttabelle in Angriff genommen und meine, dass es da eine elegantere und semantisch korrektere Möglichkeit per CSS gibt, auf die ich eben nur leider nicht komme.
Gruß Susanne
-
-
Es sind 3 Bilder, ein großes und 2 kleine. Die beiden kleinen Bilder sollen untereinder rechts neben dem großen Bild stehen.
Probier doch mal das Erste zu floaten, dadurch sollte sich das Zweite ja daneben stellen, das Dritte positionierst du jetzt einfach unter dem 2. per position: absolute + left/right: Xpx.
Oder du packst die beiden kleinen in einen Div und setzt diesen dann neben das erste Bild. -
Hi,
Mit float bekomme ich sie wunderbar nebeneinander, aber die beiden kleinen eben nicht untereinander.
teste ma:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html><head>
<style type="text/css">
#main {
width:150px;
}
ul, li {
margin: 0;
padding: 0;
list-style: none;
}
li {
float: left;
}
#c1 {
width: 100px;
height: 100px;
background: blue;
}
#c2 {
width: 50px;
height: 50px;
background: red;
}
#c3 {
width: 50px;
height: 50px;
background: green;
}
</style>
</head><body>
<div id="main">
<ul>
<li id="c1"></li>
<li id="c2"></li>
<li id="c3"></li>
</ul><br style="clear:both" />
</div>
</body>
</html>Gruesse, Joachim
--
Am Ende wird alles gut.-
ersetze bitte dein br-Element durch ein Pseudoelement
der IE machts ohnehin falsch - also passts da auch wieder:
ul:after { content: "OMG, it's a clearfix!"; display: block; height: 0; visibility: hidden; } -
hi,
<div id="main">
<ul>
<li id="c1"></li>
<li id="c2"></li>
<li id="c3"></li>
</ul><br style="clear:both" />
</div>Hier könnte man noch auf das main verzichten und die gewünschte Breite direkt der ul verpassen, gegebenenfalls noch eine ID und Fertig.
Ich wollte gerade einen ähnlichen Gedankengang posten ;)mfg
--
echo '<pre>'; var_dump($Malcolm_Beck`s); echo '</pre>';
array(2) {
["SELFCODE"]=>
string(74) "ie:( fl:) br:> va:? ls:? fo:) rl:| n4:# ss:{ de:? js:} ch:? sh:( mo:? zu:("
["Meaningful"]=>
string(?) "Der Sinn des Lebens ist deinem Leben einen Sinn zu geben"
}
-
-
-
-
Hi,
ich möchte in einer Seite drei Bilder wie hier dargestellt anordnen, ohne eine Tabelle zu verwenden.
möglicherweise bietet meine Galerie Dir hierzu Anregungen, siehe url
Gruesse, Joachim
--
Am Ende wird alles gut.-
Hi Joachim,
möglicherweise bietet meine Galerie Dir hierzu Anregungen, siehe url
Schöne Photos in deiner Galerie, aber leider keine Lösung für mein Problem.
Danke für die Anregung.
Gruß, Susanne
-
Hi,
aber leider keine Lösung für mein Problem.
denke ich doch. Eine Liste mit gefloateten li's als Bildcontainer sollte genau das sein, was Du brauchst.
Gruesse, Joachim
--
Am Ende wird alles gut.
-
-