Positionierung von Bildern

[Tom]

Hello,

ich habe auf einer Seite ein relativ groß dargestelltes Bild, das mittels float:left auf der rechten Seite und unten von Text umflossen wird. Das Bild wird nun mittels Links im Text und JavaScript gegen andere Bilder ausgetauscht. Solange die Bilder alle gleich groß sind, ist das auch wunderbar. Wenn ich aber nun schmalere dabei habe (die Höhe ist immer identisch), springt natürlich der Text in der Gegend rum.

Wie kann ich das Bild nun an der rechten Kante des Startbildes ausrichten, sodass der Text weiterhin brav floatet, ohne wieder ins Messer des Box-Bug zu leufen (wenn ich z.B. ein DIV drum herum positioniere).

Da der Text floaten soll, kommt selbstverständlich auch keine Subtablelle in Frage.

Harzliche Grüße vom Berg
esst mehr http://www.harte-harzer.de

Tom

[Gunther]

Hello Tom,

Wenn ich aber nun schmalere dabei habe (die Höhe ist immer identisch), springt natürlich der Text in der Gegend rum.

Wie kann ich das Bild nun an der rechten Kante des Startbildes ausrichten, sodass der Text weiterhin brav floatet, ohne wieder ins Messer des Box-Bug zu leufen (wenn ich z.B. ein DIV drum herum positioniere).

Folgendes fällt mir dazu ein:

• dem (DIV um das Image) float eine feste Breite geben
• für nicht IEs min-width verwenden
• das Image rechts floaten lassen

Gruß Gunther

[lulu]

Huhu Tom,

Solange die Bilder alle gleich groß sind, ist das auch wunderbar.

Spricht etwas dagegen alle Bilder gleich groß zu machen?
Also einfach um kleinere Bilder einen Fond z.B. in der Hintergrundfarbe ergänzen.
Das kann man ja auch automatisieren wenn es viele Bilder sind.

Viele Grüße

lulu

[Tom]

Hello,

Solange die Bilder alle gleich groß sind, ist das auch wunderbar.

Spricht etwas dagegen alle Bilder gleich groß zu machen?
Also einfach um kleinere Bilder einen Fond z.B. in der Hintergrundfarbe ergänzen.
Das kann man ja auch automatisieren wenn es viele Bilder sind.

Habe ich auch schon gedacht. Liegt eben an Hochformat und Querformat und den jeweils relevanten Ausschnitten. Wenn man jetzt die Hitergrundfarbe zum Bild dazuklatscht, dürfen die keinen Border mehr bekommen. Haben sie aber.

Jedenfalls sieht es nach Arbeit aus :-((

Harzliche Grüße vom Berg
esst mehr http://www.harte-harzer.de

Tom

[Ingo Turski]

Hi,

Jedenfalls sieht es nach Arbeit aus :-((

dann setze doch wie bereits angedeutet einfach ein entsprechend breites div um die img:
<div style="width:XXXpx;float:left;text-align:right;"><img /></div>

freundliche Grüße
Ingo

[Tom]

Hello,

Jedenfalls sieht es nach Arbeit aus :-((
dann setze doch wie bereits angedeutet einfach ein entsprechend breites div um die img:
<div style="width:XXXpx;float:left;text-align:right;"><img /></div>

+------------------------------------------
 |  randabstand
 |  +----------------------------+   und hier floatet
 |  |                +----------+|   dann der höchst
 |  |                |          ||   informative und
 |  |                |          ||   werbesprachlich
 |  |                |          ||   voll ausformulierte
 |  |                |          ||   Text, der
 |  |                |          ||   fließen soll
 |  |                +----------+|   und sowieso ohne
 |  |                            |   ohne jeden Sinn
 |  +----------------------------+   und Verstand ist.
 |                                   Wenn der Abstand
 | ^ ausreicht, kann dann der Text auch unter dem Bild...
   |
   +--- um diesen linken Mindestabstand geht es mir.
        Der geht mit entsprechend Box-Bug kaputt.

Es sit so ein simples Ding, aber ich dreh mich nur im Kreis.

Harzliche Grüße vom Berg
esst mehr http://www.harte-harzer.de

Tom

[Ingo Turski]

Hi,

| ^ ausreicht, kann dann der Text auch unter dem Bild...
   |
   +--- um diesen linken Mindestabstand geht es mir.
        Der geht mit entsprechend Box-Bug kaputt.

^----------------<
dann gib doch diesem ^ Elternelement padding-left.

freundliche Grüße
Ingo

[Tom]

Hello,

| ^ ausreicht, kann dann der Text auch unter dem Bild...
   |
   +--- um diesen linken Mindestabstand geht es mir.
        Der geht mit entsprechend Box-Bug kaputt.
    ^----------------<
dann gib doch diesem ^ Elternelement padding-left.

Ich habe es mMn hinbekommen für alle Broswer.
http://renditebahnhof.de/ausstattung

Harzliche Grüße vom Berg
esst mehr http://www.harte-harzer.de

Tom