Infobox über einer Verlinkung "verankern"

  • Hi,


    ich habe da ein Problem mit der Positionierung einer Infografik. Diese wird aufgerufen, wenn man mit der Maus über die Zeichenkette "Beispiel" fährt. Die Grafik wird dann über dem Wort und rechts daneben dargestellt. Das funktioniert auch soweit einwandfrei. Wenn ich jedoch die Bildschirmauflösung z.B. auf 1024x768 ändere, wird die Infografik bei den meisten Browsern nun unterhalb des Wortes dargestellt.[Blockierte Grafik: http://xhtmlforum.de/images/smilies/icon_eek.gif]


    Ich denke, das das an der Divinition von "body" und "inhalt" liegt. Aber diese Werte müssen unbedingt so bleiben. Bin leider Anfänger in Sachen CSS. Könnt Ihr mir helfen? Danke im voraus [Blockierte Grafik: http://xhtmlforum.de/images/smilies/icon_smile.gif]


  • Benutz externe Stylesheets, sprich:
    Neue Datei anlegen und am Besten mit Notepad++ bearbeiten und als .css (Cascade Stylesheet Datei) speichern.
    In deiner HTML Datei so verlinken: <head><link href="path" rel="stylesheet" type="text/css"></head>


    Von deiner Erklärung her verstehe ich dein Problem nicht ganz.


    Wieso öffnest du einen Span in einem Span ? (<span><span class='boxshadow'>)
    Du kannst dem Span auch eine Position zuweisen, welche sich dann auf das Wort Beispiel bezieht.
    Versuch es doch mal damit.


    An der Definition von html oder div.inhalt wird es sehr warscheinlich nich t liegen.



    Ps: Definition



    lg

  • Hi,


    danke für den Tip. Für das Beispiel, habe ich auf eine externe css Datei verzichtet. Ist aber eine gute Idee:rolleyes:


    Das mit dem doppelten "span" ist natürlich eine freudsche Fehlleistung. Richtig müßte es heißen:


    HTML
    1. &nbsp;</p><p align='center'>Über diesem <a class='infobox' href='#'>Beispiel<span class='boxshadow'><img border='0' src='bild.png' width='282' height='101'></span></a> soll die Grafik erscheinen.


    Wie gesagt, soll die Position der Infografik immer an derselben Position stehen, also genau über dem Wort "Beispiel". Und dann etwas weiter nach rechts, so das die linke untere Ecke der Grafik das Wort "Beispiel" fast berührt. Das Problem ist jedoch das sich die Position dann verschiebt, wenn Scrollbalken ins Spiel kommen also z.B. wenn man das Browserfenster verkleinert oder die Auflösung so verringert, das die Scrollbalken zwangsweise erscheinen. Ich weiß einfach keine Lösung. Bin noch Anfänger. Möchte aber auch ungern für dieses kleine Problem ellenlange Handbücher studieren;-)