Frage CSS Bild und Text

[rauberer]

Hallo,

ich möchte, wie abgebildet, die 3 Bilder inkl.Texte neben dem linken größeren Bild platzieren. Wie löse ich das am besten?

[KissYaNeck]

<table border="1">
     <tr>
          <td rowspan="2"><img src="#" /></td>
          <td><img src="#" /></td>
          <td>Text</td>
     </tr>
     <tr>
          <td><img src="#" /></td>
          <td>Text</td>
     </tr>
     <tr>
	  <td>&nbsp;</td>
	  <td><img src="#" /></td>
	  <td>Text</td>
     </tr>
</table>

[rauberer]

Die Möglichkeit ist mir bekannt. Allerdings wollte ich keine Tabelle dafür missbrauchen, sondern es per Stylesheet lösen. Das Platzieren der Bilder ist ja nicht das Problem, aber eben das genaue positionieren des Textes, da habe ich meine Probleme.

[Dexter]

Du nimmst 2 Boxen (DIV), die nebeneinander floaten.
In der rechten Box nimmst Du wiederum für die einzelnen Inhaltsblöcke ein Div innerhalb dessen Du dann die kleinen Bilder links floatest. (clearen innerhalb der Divs nicht vergessen)
Alternativ kannst Du die Grafiken dort auch per CSS als Hintergrundbilder setzen und den Text mittels padding nach rechts "schieben".

Hilfe zum Floating: http://www.css-technik.de/css-examples/219_9/

[Fryhstyxei]

Eine andere Möglichkeit wäre an der Stelle auch ein Zusammenspiel von position:relative bzw. absolute.

[rauberer]

Irgend wie bin ich jetzt durcheinander gekommen. Nochmal ganz langsam:

- große Bild per margin-left und margin top platzieren

Wie platziere ich im css jetzt die 3 kleinen Bild inkl des Textes rechts daneben?

position:absolute ist in meinem Fall nicht so günstig, da das linke Bild kleiner als die 3 rechten Bild ist und somit die kleinen Bilder außerhalb der Formatierung landen.

[KissYaNeck]

Mach doch mit Tabelle, ist doch am einfachsten, dann border statt 1 auf 0 einstellen und fertig. Mit Css kannst du noch Abstände einstellen können und falls du Bock hast die Tabelle noch eine ID geben.

[Kugelfisch23]

Mach doch mit Tabelle, ist doch am einfachsten

Die Lösung mag einfach scheinen, ist allerdings semantisch wenig sinnvoll und bedingt unnötiges zusätzliches Markup; zudem sind Tabellen-Layouts oftmals nicht sinnvoll skalierbar, insbesondere bei schmalen Viewports, und das genaue Layout-Verfahren ist bei einer table-layout-Eigenschaft mit Wert auto (Standardwert) gemäss CSS 2.1 undefiniert (http://www.w3.org/TR/CSS21/tables.ht...o-table-layout). Siehe auch http://seybold.jan-andresen.de/.

rauberer, ein Beispiel-XHTML-Fragment wäre etwa das Folgende:

     <img class="left" src="foobar.png" alt="..." />
     <div class="right"><img src="foo.png" alt="..." /><p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor
        invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p></div>
     <div class="right"><img src="bar.png" alt="..." /><p>
        At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
        sea takimata sanctus est Lorem ipsum dolor sit amet.</p></div>
     <div class="right"><img src="baz.png" alt="..." /><p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor 
        invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p></div>

... wobei ggf. anstelle der div-Elemente eine Liste semantisch passender wäre. Das hängt von deinen konkreten Inhalten ab.

Zugehöriges Stylesheet (wobei du die Abstände und Breitenangaben natürlich deinen Bedürfnissen und Bildergrössen angleichen musst):

        img.left {
           display: block;
           float: left;
        }
        div.right {
           margin-left: 320px;
           overflow: auto;
        }
        div.right img {
           display: block;
           float: left;
        }
        div.right p { 
           margin-left: 60px;
           width: 300px;
           margin-top: 0;
        }

[Dexter]

KissYaNeck: der TS hat nicht nach der einfachsten, sondern nach der sinnvollsten Lösung gefragt. Davon abgesehen ist dieser Tabellenquatsch obendrein der komplizierteste, siehe Kugelfisch23s Beitrag dazu...

@rauberer: wenn Du Deine Versuche die *nicht* funktionieren, hier dokumentieren würdest, könnte man Dir besser helfen und muss nicht lang rumraten, wo Dein Kenntnisstand genau ist.

[rauberer]

Danke erst mal an alle für die Unterstützung.

Im Endeffekt habe ich es folgendermaßen gelöst: Das größere linke Bild habe ich per position:absolute und den entsprechenden margin Werten platziert. Die 3 kleineren inkl.Text anschließend per margin-left und margin-top ebenfalls an die entsprechende Position.
Ich werde aber auch mal die Variante von Kugelfisch testen.