Seite 1 von 2
Ausrichtung von Bildern mit CSS ?
Verfasst: 01.02.2003 23:24
von 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
Verfasst: 01.02.2003 23:26
von Pyramide
text-align kannst du für alles verwenden. Warum das aber gerade text-align heißt weiß ich auch nicht...
Verfasst: 02.02.2003 00:40
von itst
Verfasst: 02.02.2003 10:29
von 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
.
Verfasst: 02.02.2003 15:12
von 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>
Verfasst: 02.02.2003 20:33
von 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
.
Verfasst: 02.02.2003 21:36
von King Crusty
du kannst ja die css befehle -trotz externer css datei- verwenden
Verfasst: 02.02.2003 21:52
von jasc
Ja, nur leider ändern die auch nichts daran, dass jetzt jedes Bild in einer neuen Zeile ist
.
Verfasst: 02.02.2003 21:57
von itst
Code: Alles auswählen
-----------------------------------------------------------------
| div 1 |
| --------------------- --------------------- |
| | div 1a | | div 1b | |
| | | | | |
| | | | | |
| | | | | |
| --------------------- --------------------- |
| |
| --------------------- --------------------- |
| | div 1c | | div 1d | |
| | | | | |
| | | | | |
| | | | | |
| --------------------- --------------------- |
| |
-----------------------------------------------------------------
So mache ich das immer
Verfasst: 03.02.2003 16:57
von 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
.