nicht angemeldet
Hover Bild mittig anzeigen lassen
0 
suit
0 
Der Martin
Hover Bild mittig anzeigen lassen
Gunnar BittersmannHallo Zusammen,
ich habe folgendes Problem:
Ich will über einen hover-tag ein Bild mittig am Bildschirm angezeigt haben und zwar UNABHÄNGIG von der Größe des Bildes. Verwende ich sowas wie " margin-left:..." muss ich ja vorher wissen, wie groß das Bild ist, damit ich es richtig verschieben kann.
Gibt es eine (für Anfänger) simple Lösung für das Problem?
Danke im vorraus
Micha
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//DE">
<html>
<head>
<title>test2</title>
<style type="text/css">
<!--
a:hover span { display:block; position:fixed; top:50%; left:50% }
a span {display: none;}
a img { border:2px solid black }
-->
</style>
</head>
<body>
<a href='http://www.welt.de'>Link
<span>
<img src='http://www.welt.de/multimedia/archive/00398/fisch_02_haifa_DW_P_398485p.jpg'>
</span>
</a>
</body>
-
Ich will über einen hover-tag ein Bild mittig am Bildschirm angezeigt haben und zwar UNABHÄNGIG von der Größe des Bildes.
Es gibt kein hover-tag - es gibt ein a-Element welches die Pseudoklasse :hover tragen kann.
Verwende ich sowas wie " margin-left:..." muss ich ja vorher wissen, wie groß das Bild ist, damit ich es richtig verschieben kann.
Nicht wenn du es anderweitig zentrierst - z.B. mit vertical-align und text-align in einem Element welches mit position: fixed über die volle Viewportgröße gezogen wird.
Gibt es eine (für Anfänger) simple Lösung für das Problem?
Nein, die Lösung ist nicht trivial und selbst für "Experten" eine harte Nuss - vor allem unter dem Gesichtspunkt des mangelnden Browsersupports.
Was hältst du von einer gängigeren Lösung wie etwa ColorBox - die lässt sich ohne viel Aso "umbauen", dass sie per mouseover anstatt click geöffnet wird.
-
Hi,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//DE">
dieser DOCTYPE ist ungültig - es gibt keine in Deutsch verfasste HTML-DTD.
Unabhängig davon schickst du die Browser damit in den Quirks-Mode.So long,
Martin--
Gültig sind Frauen ab 16, wohlgeformt ab 160 Pfund.
(Gunnar Bittersmann)
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
Hi,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//DE">
dieser DOCTYPE ist ungültig - es gibt keine in Deutsch verfasste HTML-DTD.
Unabhängig davon schickst du die Browser damit in den Quirks-Mode.So long,
MartinHi Martin, dass habe ich soeben auch rausgefunden.
Das kommt davon, wenn man Sachen aus dem I-Net einfach kopiert :(Habe das gerade auf:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
geändert, und prompt das nä Problem, benutzt man den Link jetzt innerhalb ner Datei, siehts bei FF und Opera besser aus; Nur der IE kriegst nicht mehr gebacken und stellt das Bild nicht mehr wie bei der "strict"-Variante richtig da, sondern haut das in die Tabelle rein. :(
Gibt's dafür ne Lösung?<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>test2</title> <style type="text/css"> <!-- a:hover span { display:block; position:fixed; top:50%; left:50% } a span {display: none;} a img { border:2px solid black; position:fixed; top:50%; left:50%} --> </style> </head> <body> <table border="1"> <tr> <td><a href='http://www.welt.de'>Link <span> <img src='http://www.welt.de/multimedia/archive/00398/fisch_02_haifa_DW_P_398485p.jpg'> </span> </a> </td> </tr> </table> </body>-
Hi,
Habe das gerade auf:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
geändert, und prompt das nä ProblemDas Stichwort Quirks Mode hast du gerade genannt bekommen - bitte informiere dich darüber.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Hi,
Habe das gerade auf:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
geändert, und prompt das nä ProblemDas Stichwort Quirks Mode hast du gerade genannt bekommen - bitte informiere dich darüber.
MfG ChrisB
ok, habs gerafft.
Habe "http://www.w3.org/TR/html4/loose.dtd" vergessen. Auf selfhtml stand das wäre optional, aber anscheinend nicht für den guten ie.
Mit der Zeile kommt er in den Almost Standard Mode und es sieht vernünftig aus.Danke.
Gruß Micha
-
-
-
@@Der Martin:
nuqneH
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//DE">
dieser DOCTYPE ist ungültig - es gibt keine in Deutsch verfasste HTML-DTD.ACK.
'…//EN' im public identifier gibt die dem _Markup_ (Element- und Attributbezeichner) zugrundeliegede Sprache an. Das ist Englisch: hX für heading, p für paragraph, @lang für language, @src für source, @align für – ähm, schlechtes Beispiel.
Die Sprache des _Inhalts_ gibt man mit @lang an. Und man sollte dies auch tun.
Unabhängig davon schickst du die Browser damit in den Quirks-Mode.
NAK. Oder: Welche genau?
Getestet für IE 6: Die DOCTYPE-Angabe HTML 4.01 Transitional ohne system identifier schaltet in den Quirksmodus (auch mit '…//DE'). Die DOCTYPE-Angabe HTML 4.01 Strict ohne system identifier (auch wie hier mit '…//DE') tut dies nicht.
Gültig sind Frauen ab 16, wohlgeformt ab 160 Pfund.
Hab ich’s nicht gesagt?
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Hallo,
Unabhängig davon schickst du die Browser damit in den Quirks-Mode.
NAK. Oder: Welche genau?IE6 und Konsorten, dachte ich.
Getestet für IE 6: Die DOCTYPE-Angabe HTML 4.01 Transitional ohne system identifier schaltet in den Quirksmodus (auch mit '…//DE'). Die DOCTYPE-Angabe HTML 4.01 Strict ohne system identifier (auch wie hier mit '…//DE') tut dies nicht.
Verständnisfehler meinerseits: Ich dachte, ein unvollständiger DOCTYPE (ohne system identifier) führe automatisch *immer* zu Transitional - und damit im IE zum Ratemodus.
Gültig sind Frauen ab 16, wohlgeformt ab 160 Pfund.
Hab ich’s nicht gesagt?Ja. Auch wenn ich der Aussage an sich nicht vollkommen zustimme - ich fand sie einfach originell.
So long,
Martin--
Chef zum Bewerber: Es gibt zwei Dinge, auf die ich allergrößten Wert lege. Das eine ist Sauberkeit! Haben Sie übrigens die Schuhe auf der Matte abgetreten? - Ja, selbstverständlich. - Gut. Das andere ist uneingeschränkte Ehrlichkeit. Übrigens, draußen liegt gar keine Fußmatte.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
-
-