nicht angemeldet
Thumb soll vergrößert werden, Thumb mit Float im Text
Hallo zusammen.
Ich habe soeben eine kleine Anleitung geschrieben, die auch Screenshots beinhaltet. Diese nehmen natürlich viel Platz weg und sind deshalb lediglich als Thumbnail in den Text eingebunden und zwar so, dass der Text mit float darum herum fließt. Beim darauf klicken soll auf das große Bild verwiesen werden.
Also so:
<p style="min-height: 150px;">
<a href="img/grosses_bild.png">
<img style="float:right; width:200px; height:150px;" src="img/kleines_bild.png" alt="stuff" /></a>
Viel Text, der links vom Bild den kompletten Raum einnimmt (also über das Bild hinaus geht)
</p>
Mein Problem:
Das Bild ist schlicht nicht anklickbar!
Woran könnte das liegen? :-/
L00NIX
-
Hallo L00NIX.
<p style="min-height: 150px;">
<a href="img/grosses_bild.png">
<img style="float:right; width:200px; height:150px;" src="img/kleines_bild.png" alt="stuff" /></a>Das Bild ist schlicht nicht anklickbar!
Mabe:
<a href="img/grosses_bild.png"><img style="float:right; width:200px; height:150px;" src="img/kleines_bild.png" alt="stuff" /></a>
Gruß, Ashura
--
Selfcode: sh:( fo:) ch:? rl:( br:^ n4:& ie:{ mo:) va:) de:> zu:) fl:( ss:( ls:# js:|-
Mabe:
<a href="img/grosses_bild.png"><img style="float:right; width:200px; height:150px;" src="img/kleines_bild.png" alt="stuff" /></a>
Also ohne Zeilenumbrüche?
Nein, geht nicht! :-(
Es hängt wohl irgendwie mit dem umfließenden Text zusammen, denn wenn ich das Fenster breiter ziehe, so dass der Text nicht komplett am Bild vorbei geht (also etwas weiter oben aufhört), ist genau der Teil vom Bild anklickbar, der unter dem Text liegt.
Mein Fehler oder BUG? Aber gleich in Konqueror UND Firefox???
Gruß
L00NIX-
Hallo L00NIX.
Mein Fehler oder BUG? Aber gleich in Konqueror UND Firefox???
Kann ich nicht nachvollziehen, da das Bild bei mir korrekt verlinkt wird:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>New Document</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> </head> <body> <div style="min-height: 150px;"> <a href="img/grosses_bild.png"> <img style="float:right; width:200px; height:150px;" src="img/kleines_bild.png" width="200" heigth="150" alt="stuff" /></a> <p> Viel Text, der links vom Bild den kompletten Raum einnimmt (also über das Bild hinaus geht)</p> </div> </body> </html>Alles korrekt...
Gruß, Ashura
--
Selfcode: sh:( fo:) ch:? rl:( br:^ n4:& ie:{ mo:) va:) de:> zu:) fl:( ss:( ls:# js:|-
Mein Fehler oder BUG? Aber gleich in Konqueror UND Firefox???
Kann ich nicht nachvollziehen, da das Bild bei mir korrekt verlinkt wird:
Ich auch nicht! :-(
Interessant wird es mit Rändern, da sieht man dann, dass der
Paragraph das Bild komplett umschließt und eben dieser Bereich ist
nicht klickbar.Bleiben oben und unten kleine Teile übrig, sind sie klickbar.
Merkwürdig... mit z-index:500 in Anker oder Bild ändert sich daran auch nix.
-
Hallo L00NIX.
Interessant wird es mit Rändern, da sieht man dann, dass der
Paragraph das Bild komplett umschließt und eben dieser Bereich ist
nicht klickbar.Dann setze mal spaßenshalber eine width für das <p> Element...
Gruß, Ashura
--
Selfcode: sh:( fo:) ch:? rl:( br:^ n4:& ie:{ mo:) va:) de:> zu:) fl:( ss:( ls:# js:|-
Dann setze mal spaßenshalber eine width für das <p> Element...
Auf was?
Der Text ist ja schließlich nicht genau in der Breite festlegbar, da
sich das je nach Fenster- und Schriftgröße ändert. Klar kann ich so
was wie 30em angeben und dann funktioniert es ja auch, aber dann ist
die Textbreite suboptimal. Das Bild hingegen ist Pixelgenau
festzulegen.So geht's leider nicht!
L00NIX-
Hallo L00NIX.
So geht's leider nicht!
Tja, tut mir leid, aber bei mir gibt es da kein Problem. (Gut, Konquereror kann ich nicht testen.)
Gruß, Ashura
--
Selfcode: sh:( fo:) ch:? rl:( br:^ n4:& ie:{ mo:) va:) de:> zu:) fl:( ss:( ls:# js:|-
OK, hier eine Notlösung:
Ich habe bei dem Paragraphen einen right-margin von 200px (der
Bildbreite) gegeben und jetzt überlappen Paragraph und Bild nicht
mehr. Es tut.Dennoch finde ich das ganze höchst seltsam und hätte gerne eine
Erklärung...L00NIX
-
Hallo L00NIX
Dennoch finde ich das ganze höchst seltsam und hätte gerne eine
Erklärung...Manche Browser haben Probleme, den Inhalt von Links anklickbar zu machen,
wenn sich Link und Inhalt an verschiedenen Stellen befinden.Schreibe spaßeshalber mal:
<a href="img/grosses_bild.png">TEST
<img style="...Wo erscheint dann "TEST", und wo das Bild?
Ich würde mal probieren, das "float:right;" nicht dem <img ...> sondern dem
<a ...> mitzugeben.Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Hallo L00NIX
Dennoch finde ich das ganze höchst seltsam und hätte gerne eine
Erklärung...Manche Browser haben Probleme, den Inhalt von Links anklickbar zu
machen, wenn sich Link und Inhalt an verschiedenen Stellen
befinden.»»
Schreibe spaßeshalber mal:
<a href="img/grosses_bild.png">TEST
<img style="...Wo erscheint dann "TEST", und wo das Bild?
TEST außerhalb des Floats links, Das Bild rechts.
Ich würde mal probieren, das "float:right;" nicht dem <img ...>
sondern dem
<a ...> mitzugeben.
Habe ich auch probiert. Der selbe Effekt. Wenn du dem Paragraphen
einen Rahmen verpasst, siehst du, dass er sich immer noch über das
ganze Bild inklusive Anker erstreckt. Somit ist das Bild dann nicht
anklickbar.Also bleibt nur die Lösung mit dem Margin.
Gruß
L00NIX
-
-
-
-
-
-
-
-
-
-
Ergänzung (es ist noch eine div drumrum!):
<div style="min-height: 150px;">
<a href="img/grosses_bild.png">
<img style="float:right; width:200px; height:150px;"
src="img/kleines_bild.png" alt="stuff" /></a>
<p>
Viel Text, der links vom Bild den kompletten Raum einnimmt
(also über das Bild hinaus geht)
</p>
</div>