Ausrichtung von Bildern mit CSS ?

[jasc]

Also ich habe da mal eine Frage zu CSS. Ich habe mir da eine kleine Seite erstellt und möchte nun 4 Bilder schön anordnen und zwar so, dass 2 links (untereinander) und 2 rechts sind. Das mit untereinander ist natürlich kein Problem, aber wie kann ich ein Bild links bzw. rechts ausrichten mit CSS ? Für Text gibt es text-align aber für Bilder habe ich noch nichts gefunden .
Ich hoffe, ihr könnt mir helfen, schon mal danke im voraus!


Markus

[Pyramide]

text-align kannst du für alles verwenden. Warum das aber gerade text-align heißt weiß ich auch nicht...

[itst]

http://selfhtml.teamone.de/css/eigensch ... ierung.htm

[jasc]

text-align:left; bzw. text-align:right; geht aber irgendwie nicht so recht .

@itst: Mit position:absolute; oder position:relative; sieht das dann aber bei jeder Auflösung anders aus oder habe ich da was falsch verstanden .

[Pyramide]

Worauf hast du das Attribut denn angewendet? Es wirkt sich nämlich auf den Inhalt des Elements aus, d.h. wenn du <img style="text-align: right"> schreibst, passiert gar nichts.

Was du also brauchst, ist ein Elternelement in der gewünschten Breite, im welchem du dann das Bild nach rechts ausrichten kannst. Also z.B. eine Tabellenzelle, ein <p> Element, oder ein auf 100% vergrößertes <span>:

Code: Alles auswählen

<span style="width=100%; text-align: right"><img ...></span>

<p style="text-align: right"><img ...></p>

[jasc]

Ich habe die CSS-Anweisungen in einer externen css file, daher sieht es bei mir etwas anders aus, aber das macht nichts, ich habe es jetzt anstatt mit class mal mit einem Container gemacht, also in ein <div> Tag. Nun klappt das auch, nur leider kommt jetzt jedes Bild in eine neue Zeile . Wäre nett, wenn du mir da auch noch helfen könntest .

[King Crusty]

du kannst ja die css befehle -trotz externer css datei- verwenden

[jasc]

Ja, nur leider ändern die auch nichts daran, dass jetzt jedes Bild in einer neuen Zeile ist .

[itst]

Code: Alles auswählen

-----------------------------------------------------------------
| div 1                                                         |
|  ---------------------               ---------------------    |
|  | div 1a            |               | div 1b            |    |
|  |                   |               |                   |    |
|  |                   |               |                   |    |
|  |                   |               |                   |    |
|  ---------------------               ---------------------    |
|                                                               |
|  ---------------------               ---------------------    |
|  | div 1c            |               | div 1d            |    |
|  |                   |               |                   |    |
|  |                   |               |                   |    |
|  |                   |               |                   |    |
|  ---------------------               ---------------------    |
|                                                               |
-----------------------------------------------------------------

So mache ich das immer

[jasc]

Hm, wie es grafisch auszusehen hat, wusste ich auch .
Aber irgendwie scheine ich wohl gerade auf dem Schlauch zu stehen, weil ich das nicht hinbekomme .

Hier mal die Ausschnitte aus den Quellcodes:

HTML-File:

<div>
<div id="left"><img src="beide.bmp"></div><div id="right"><img src="christian.bmp"></div>
<div id="left"><img src="lager.bmp"></div><div id="right"><img src="monitore.bmp"></div>
</div>

CSS-File:

#left
{
text-align:left;
}

#right
{
text-align:right;
}

Vielleicht kann mir ja jemand sagen, wo ich mich dumm anstelle .