Bilder je nach Ausrichtung formatieren

[Michael]

Ich habe auf meiner Seite mehrere Bilder, diese möchte ich automatisch mit css formatieren. Als Grundlage soll

align="left"

align="right"

dienen.  Wenn left bzw. right soll das Bild je nachdem formatiert werden. Kann mir jemand erklären wie ich so ein entsprechendes CSS aufbaue?

  
<img align="left" alt="bild.jpg" src="images/bild.jpg" />  
<img align="right" alt="bild.jpg" src="images/bild.jpg" />  
  

Bild Links soll so sein:

  
.bild{  
border:1px solid #f0f0f0;  
padding: 0 10px 10px 0;  
}

Bild  Rechts soll so sein:

.bild{  
border:1px solid #f0f0f0;  
padding: 0 0 10px 10px;  
}  

[martin88]

Ich habe auf meiner Seite mehrere Bilder, diese möchte ich automatisch mit css formatieren. Als Grundlage soll

align="left"

align="right"

dienen.  Wenn left bzw. right soll das Bild je nachdem formatiert werden. Kann mir jemand erklären wie ich so ein entsprechendes CSS aufbaue?

<img align="left" alt="bild.jpg" src="images/bild.jpg" />
<img align="right" alt="bild.jpg" src="images/bild.jpg" />

>   
> Bild Links soll so sein:  
>   
> ~~~css
  

> .bild{  
> border:1px solid #f0f0f0;  
> padding: 0 10px 10px 0;  
> }

Bild  Rechts soll so sein:

.bild{

border:1px solid #f0f0f0;
padding: 0 0 10px 10px;
}

>   
>   
  
du kannst zb klassen hinzufügen:  
  
img.left {  
 // deine daten  
}  
  
und beim bild machen class="left" als attribut.  
  
oder du löst es so:  
img[align="left"] {  
border: 1px solid #f0f0f0;  
padding: 0 10px 10px 0;  
}  
  
das gleiche natürlich mit right.  
  
ich hoffe ich hab es richtig verstanden,  
lg martin

[Matthias Apsel]

Om nah hoo pez nyeetz, Michael!

also sollen einige Bilder links in der Zeile sein und andere rechts des Textes?

float wäre eine Möglichkeit --> schau in unser Wiki.

anderslautende Eigenschaften über eine Klassenzugehörigkeit lösen.

<img class="sinnvoller_Klassenbezeichner" src="..." alt="...">

z.B.

img.sinvoller_Klassenbezeichner {float: left;  
                                 /* weitere Eigenschaften */}

Matthias

[Gunnar Bittersmann]

@@Michael:

nuqneH

Als Grundlage soll
align="left"
align="right"
dienen.  Wenn left bzw. right soll das Bild je nachdem formatiert werden. Kann mir jemand erklären wie ich so ein entsprechendes CSS aufbaue?

Du könntest den Attributselektor [CSS21 §5.8, http://de.selfhtml.org/css/formate/zentrale.htm#attributbedingte@title=SELFHTML] verwenden:

img[align="left"] {  
  border: 1px solid #f0f0f0;  
  padding: 0 10px 10px 0;  
}  
  
img[align="right"] {  
  border: 1px solid #f0f0f0;  
  padding: 0 0 10px 10px;  
}

Oder (vermutlich besser) nicht @align verwenden, sondern Klassen setzen: @class="image-left" bzw. @class="image-right".

Und ja, solche Klassen sind sinnvoll, wenn die Ausrichtung der Bilder vom Bildinhalt abhängt (bpsw. damit Personen nicht aus der Seite herausschauen, sondern hinein).

Qapla'