Bilder links - Text Rechts

[Capecok]

Hi zusammen,

Thema wurde bestimmt schon 70000000 mal behandelt aber trotzdem meine Frage:

Haben möchte ich folgendes:

Bild1 -> Text
Bild2 -> Text
Bild3 -> Text
Bild4 -> Text
Bild5 -> Text
Bild6 -> Text

Schön sauber soll der Text neben dem Bild rechts. Mein code sieht folgendermaßen aus und funktioniert auch.... mit 1 bild -.-

  
<div id="container1">  
  <div id="fpic">  
	<p><img src="xxxx/bild1.jpg" alt="bild1" width="180" height="260" /></p>  
  </div>  
<p>Hier kommt der Text hinne</p>  
</div>  

das CSS dazu:

  
div#fpic {  
  float:left;  
  width:bildbreite+8px;  
  text-align:center;  
}  

Meine Frage: Wie kann ich jetzt am saubersten ein zweites Bild mit Text da drunter kreigen. Insgesamt sind es 6 bilder wo jeweils der Text daneben muss.

Lieben dank für die hilfe,

Cape

[suit]

Meine Frage: Wie kann ich jetzt am saubersten ein zweites Bild mit Text da drunter kreigen. Insgesamt sind es 6 bilder wo jeweils der Text daneben muss.

Mit Copy&Paste.

Ich empfehle dir aber, deinen Quelltext etwas zu entschlacke und die IDs durch Klassen zu ersetzen.

Etwa so:
<div class="imgbox">
  <img />
  <p />
</div>

[Capecok]

»» Meine Frage: Wie kann ich jetzt am saubersten ein zweites Bild mit Text da drunter kreigen. Insgesamt sind es 6 bilder wo jeweils der Text daneben muss.

Mit Copy&Paste.

Ich empfehle dir aber, deinen Quelltext etwas zu entschlacke und die IDs durch Klassen zu ersetzen.

Etwa so:
<div class="imgbox">
  <img />
  <p />
</div>

Danke dir für deine Rasche antwort. Das hatte ich natürlich als erstes probiert und funktioniert nicht wirklich. das nächste bild hängt dann oben inkl. Text drinne. Überlappt also förmlich.

Das mit dem Id's werde ich machen, danke dir.

[ChrisB]

Hi,

Meine Frage: Wie kann ich jetzt am saubersten ein zweites Bild mit Text da drunter kreigen. Insgesamt sind es 6 bilder wo jeweils der Text daneben muss.

Mit Copy&Paste.
[...]
Das hatte ich natürlich als erstes probiert und funktioniert nicht wirklich. das nächste bild hängt dann oben inkl. Text drinne. Überlappt also förmlich.

Du möchtest dich informieren, wie man das Floating wieder aufhebt.

MfG ChrisB

[LX]

Hallo, Cape!

1. solltest Du Klassen nehmen, um die entsprechende Struktur im CSS zu identifizieren.
2. Ist die Struktur völlig übertrieben. Einfach ist besser:

HTML:

<div class="bildtext">  
  <img ...>  
  <p>Ganz nebenbei: schon die Petition gegen Internetzensur gezeichnet?</p>  
</div>

CSS:

.bildtext { overflow: hidden; }  
.bildtext p { padding: 0; margin: -[Bildhöhe]px 0 0 [Bildbreite+8]px; position: relative; float: left; display: inline; }

Das "display: inline;" ist übrigens dem IE geschuldet, um den "float double margin"-Fehler zu beheben.

Gruß, LX

[Capecok]

HTML:

<div class="bildtext">

<img ...>
  <p>Ganz nebenbei: schon die Petition gegen Internetzensur gezeichnet?</p>
</div>

>   
> CSS:  
>   
> ~~~css

.bildtext { overflow: hidden; }  

> .bildtext p { padding: 0; margin: -[Bildhöhe]px 0 0 [Bildbreite+8]px; position: relative; float: left; display: inline; }

Das "display: inline;" ist übrigens dem IE geschuldet, um den "float double margin"-Fehler zu beheben.

Gruß, LX

Das klappt hervorragend. Lieben Dank an LX und den Rest der Bande. Wieder was gelernt und weiss wo ich wieder auftauche wenn was ist ;)

lg, Cape

[henman]

hallo!

<div id="fpic">
<p><img src="xxxx/bild1.jpg" alt="bild1" width="180" height="260" /></p>
  </div>

Attribute, die das Bild formatieren(width,height,border etc.), gehören da nicht mehr rein, dass regelt CSS. "alt" bleibt aber.
Gib den Bildern ne Klasse, dann sparst du dir ein Div.
<p>[...]</p> ist unnötig und kommt auch raus. Das regelt auch die Klasse des Bildes.

also zum Beispiel: <img src="xxxx/bild1.jpg" class="bild" alt="bild1">

<p>Hier kommt der Text hinne</p>

Ich bin mir nicht sicher, aber wenn du statt <p>[...]</p> ein span benutzt, dass per CSS zum Inline-Block machst und die Höhe definierst, dürfte es so aussehen, wie du es haben willst

Lieben dank für die hilfe,

Ich hoffe, geholfen zu haben

Cape

henman

[suit]

Attribute, die das Bild formatieren(width,height,border etc.), gehören da nicht mehr rein, dass regelt CSS. "alt" bleibt aber.

Die Abmaße des Bilds sind integraler Bestandteil des Inhalts - auch wenn du kein Autoren-CSS hast, möchtest du doch, dass anstelle der Bilder ein passend großer platzhalter zu sehen ist?

[Capecok]

Ich bedanke mich bei allen für die sehr nette und informative Hilfe. Habe jetzt Feierabend und werde das morgen auf der Arbeit mit euren Tipps probieren und eine Rückmeldung machen.

lg, Cape

[henman]

Die Abmaße des Bilds sind integraler Bestandteil des Inhalts - auch wenn du kein Autoren-CSS hast, möchtest du doch, dass anstelle der Bilder ein passend großer platzhalter zu sehen ist?

Gut, 1:0 für dich ;)

[Felix Riesterer]

Liebe(r) Capecok,

warum nicht ein sehr simples Markup? Entweder Du hast eine Liste, oder Du hast eine Reihe an Textabsätzen mit Bild.

Im Regelfalle denke ich an solche Lösungen:

<p class="illustration-rechts"><img ... /> Text unter dem Bild</p>

In Deinem Falle aber handelt es sich anscheinend um eine Liste mit Bildern und deren Erklärungen. Dazu gibt es drei sinnvolle Möglichkeiten:

1.) unsortierte "Allerweltsliste"

<ul class="bilder-liste">  
    <li><img ... /> Text zum Bild</li>  
    ...  
</ul>

2.) Definitionsliste

<dl class="bilder-liste">  
    <dt><img ... /></dt>  
    <dd>Text zum Bild</dd>  
    <dt><img ... /></dt>  
    <dd>Text...</dd>  
</dl>

3.) Tabelle

<table>  
    <tr><th>Bild</th><th>Beschreibung</th></tr>  
    <tr><td><img ... /></td><td>Text zum Bild</td></tr>  
    ...  
</table>

Das mit dem CSS ist nun kein echtes Problem mehr, oder?

Liebe Grüße,

Felix Riesterer.