Bilder mit dem Text skalieren

[devius]

Hallo Forianer,

ich bin gerade dabei, den Webauftritt unserer Uni ein wenig zu verbessern. Ein Punkt dabei wäre, Bilder skalierbar zu machen, d.h. wenn jemand im Browser die Schriftgröße verändert, sollen auch die Bilder größer/kleiner werden.
Bisher habe ich schon folgende Lösung gebastelt:

<a href="../../../uni/en/index.html" title="en"><div style="height:2.1ex;width:3ex;float:left;"><img width="100%" height="100%" src="http://www.rz.uni-augsburg.de/de/styles/pictures/flagge_english.png" alt="" /></div> This site in english.</a>

Problem dabei ist, dass nach dem Bild immer eine neue Zeile beginnt, wenn man das float:left weglässt und mit float:left wird das Bild im IE7 nicht als Link interpretiert.

Weiß einer eine bessere Methode?

Vielen Dank und schöne Grüße
  devius

[wahsaga]

hi,

ich bin gerade dabei, den Webauftritt unserer Uni ein wenig zu verbessern. Ein Punkt dabei wäre, Bilder skalierbar zu machen, d.h. wenn jemand im Browser die Schriftgröße verändert, sollen auch die Bilder größer/kleiner werden.

Ob du damit etwas "verbesserst", bleibt fraglich.
Die Algorithmen, die die Browser zum skalieren von Bildern nutzen, sind bei weitem nicht so ausgereift, wie die in bspw. richtigen Grafikprogrammen - und entsprechend zweifelhaft zum Teil die Ergebnisse.

Problem dabei ist, dass nach dem Bild immer eine neue Zeile beginnt, wenn man das float:left weglässt und mit float:left wird das Bild im IE7 nicht als Link interpretiert.

Floate mal nicht das Bild, sondern den Link.

gruß,
wahsaga

[devius]

Hallo

Die Algorithmen, die die Browser zum skalieren von Bildern nutzen, sind bei weitem nicht so ausgereift, wie die in bspw. richtigen Grafikprogrammen - und entsprechend zweifelhaft zum Teil die Ergebnisse.

Das ist mir schon klar. Die Bilder, um die es geht sind ca. 20px große Flaggen, da reicht die Qualität auch bei 100-facher Vergrößerung noch aus :)

Floate mal nicht das Bild, sondern den Link.

Das Bild soll ein Teil des Links sein und wenn ich den Text dahinter mit <span style="float:right;"> versehe, ist der Text zwar rechts, aber immer noch in einer neuen Zeile.

Schöne Grüße
  devius

[Jürgen]

Hallo,

Das Bild soll ein Teil des Links sein und wenn ich den Text dahinter mit <span style="float:right;"> versehe, ist der Text zwar rechts, aber immer noch in einer neuen Zeile.

Setze erst <span style="float:right;"> und dahinter den Link.

[devius]

Hallo,

Das Bild soll ein Teil des Links sein und wenn ich den Text dahinter mit <span style="float:right;"> versehe, ist der Text zwar rechts, aber immer noch in einer neuen Zeile.

Setze erst <span style="float:right;"> und dahinter den Link.

Aber das Bild soll auch verlinkt werden... Und zwei Links finde ich persönlich sehr unpraktisch.

Schöne Grüße
    devius

[wahsaga]

hi,

Setze erst <span style="float:right;"> und dahinter den Link.

Aber das Bild soll auch verlinkt werden... Und zwei Links finde ich persönlich sehr unpraktisch.

Ja dann pack doch beides in einen Link ...?

(Oder ist mir noch zu unklar, welche Optik du eigentlich erreichen willst?)

gruß,
wahsaga

[Jürgen]

Hallo,

Das Bild soll ein Teil des Links sein und wenn ich den Text dahinter mit <span style="float:right;"> versehe, ist der Text zwar rechts, aber immer noch in einer neuen Zeile.

Setze erst <span style="float:right;"> und dahinter den Link.

Aber das Bild soll auch verlinkt werden... Und zwei Links finde ich persönlich sehr unpraktisch.

Schöne Grüße
    devius

Versuch mal das

<a href="../../../uni/en/index.html" title="en" style="display:block;height:2.1ex;width:22ex;"><span style="float:right">This site in english.</span><img height="100%" src="http://www.rz.uni-augsburg.de/de/styles/pictures/flagge_english.png" alt="" /></a>

[rfb]

Moin

<a href="../../../uni/en/index.html" title="en"><div style="height:2.1ex;width:3ex;float:left;"><img width="100%" height="100%" src="http://www.rz.uni-augsburg.de/de/styles/pictures/flagge_english.png" alt="" /></div> This site in english.</a>

Problem dabei ist

dass hier ein a ein div enthält, was einfach nicht zulässig ist.

Gruß
rfb

[devius]

Hallo

dass hier ein a ein div enthält, was einfach nicht zulässig ist.

Ok, ok, nicht aufgepasst. Der Fehler ist jedoch der gleiche, wenn ich statt div span verwende.

Schöne Grüße
   devius

[Gernot Back]

Hallo devius,

<a href="../../../uni/en/index.html" title="en"><div style="height:2.1ex;width:3ex;float:left;"><img width="100%" height="100%" src="http://www.rz.uni-augsburg.de/de/styles/pictures/flagge_english.png" alt="" /></div> This site in english.</a>

Ein DIV-Element in eine A-Element zu schachteln, ist aber nicht die feine Art. Die Angabe height="100%" beim IMG-Bild kann zu Verzerrungen führen, wenn das Elternelement doch mal eine Weite mitbekommen sollte. Lass sie lieber weg. Width="100%" reicht vollkommen aus. Wenn du dich zu Height nicht auslässt, sondern nur zu Width, wird das Bild zur auf die Weite des Elternelements bezogenen eigenen Weite auch in der Höhe proportional skaliert.

Gruß Gernot

[Der Martin]

Hallo,

Hallo Forianer,

*den* Ausdruck habe ich auch noch nicht gelesen! ;-)

<a href="../../../uni/en/index.html" title="en"><div style="height:2.1ex;width:3ex;float:left;"><img width="100%" height="100%" src="http://www.rz.uni-augsburg.de/de/styles/pictures/flagge_english.png" alt="" /></div> This site in english.</a>

Jetzt frage ich mich natürlich, warum du das Bild noch in ein div-Element einsperrst, anstatt die Formatierungen direkt auf das img-Element anzuwenden (vor allem Größe des Bildes in em oder ex). Dann wäre schon mal das Problem "Inline enthält Blockelement" gelöst.

Wenn du dann auch noch das ganze Gefloate weglässt, steht das Bild einfach als Inline-Element im Text und verhält sich damit wie ein Text-Zeichen.
Dann kannst du dem Bild noch etwas margin-right spendieren und so den Abstand zwischen Bild und Text justieren, und fertig.

Dass die Verwendung von Nationalflaggen für Sprachen nicht immer eindeutig ist, manchmal sogar problematisch sein kann, wurde hier schon mehrmals diskutiert. Besser ist es, einen einfachen Textlink zu setzen, der den Namen der jeweiligen Sprache _in der Zielsprache_ darstellt, also etwa Deutsch, English, Français, Nederlands, Dansk, ...
So erkennt jeder Besucher seine Sprache, ohne dass es zu mehrdeutigen Länder-Konstellationen kommt.

So long,
 Martin