Ergebnis 1 bis 5 von 5

Thema: Infobox über einer Verlinkung "verankern"

  1. #1
    HTML Newbie
    Registriert seit
    23.09.2012
    Beiträge
    6
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard 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.

    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

    HTML-Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"><style type="text/css">html, body {margin:0; padding:0; height:100%; overflow:hidden; }div.inhalt {margin-left:0px; padding-left:0px; height:93.8%; overflow:auto;}</style><html>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <style type="text/css">
           a.infobox {
                text-decoration: underline;
                border-bottom: none;
                        }
            a.infobox:hover {
                cursor: pointer;
            }
            a.infobox span {
             visibility: hidden;
                position: absolute;
                left: -99em;
                text-decoration: none;
    
                margin-top: -4.0em;
                padding:-200px;
                line-height: 0px;
                text-align:left;
                letter-spacing: 0.1px;
            }
            a.infobox:hover span {
                visibility: visible;
                left: auto;
            }
    
    .boxshadow {
    display: inline-block;
    line-height: 0px;
    -moz-box-shadow: 3px 4px 6px #6e6e6e;
    -webkit-box-shadow: 3px 4px 6px #888888;
    -khtml-box-shadow: 3px 4px 6px #888888;
    box-shadow: 3px 4px 6px #6e6e6e;
    }
    </style>
    <!--[if IE]>
    <style type="text/css">
    .boxshadow {
    line-height: 0px;
    filter:DropShadow(color=#6e6e6e, offx=3, offy=3);
    filter:progid:DXImageTransform.Microsoft.Shadow
    (color=#888888, Direction=135, Strength=6); /* IE6-7 */
    -ms-filter:"progid:DXImageTransform.Microsoft.Shadow
    (color=#888888, Direction=135, Strength=6)"; /* IE8 */
    }
    </style>
    <![endif]-->
    <body>
    <div class="inhalt">
    <div class="bild">
    <table border="1" width="100" height="600">
        <tr>
            <p>&nbsp;</td>
        </tr>
    </table>
    
    <div align="center"></div><p>
    &nbsp;</p><p align='center'>Über diesem <a class='infobox' href='#'>Beispiel<span><span class='boxshadow'><img border='0' src='bild.png' width='282' height='101'></span></span></a> 
    soll die Grafik erscheinen.
    </div></div>
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Samurai Avatar von Bleistift
    Registriert seit
    20.03.2012
    Alter
    21
    Beiträge
    235
    Danke
    0
    Bekam 4 mal "Danke" in 4 Postings

    Standard AW: Infobox über einer Verlinkung "verankern"

    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


  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    23.09.2012
    Beiträge
    6
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Infobox über einer Verlinkung "verankern"

    Hi,

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

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

    HTML-Code:
    &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

  4. #4
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    460
    Danke
    0
    Bekam 47 mal "Danke" in 47 Postings

    Standard AW: Infobox über einer Verlinkung "verankern"

    Geändert von djheke (24.09.2012 um 11:19 Uhr)

  5. #5
    HTML Newbie
    Themenstarter

    Registriert seit
    23.09.2012
    Beiträge
    6
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Infobox über einer Verlinkung "verankern"

    Jau,

    danke für Eure Hilfe. Habe das Problem jetzt endlich gelöst. Klappt mit allen Auflösungen und Browsern einwandfrei

Ähnliche Themen

  1. Verlinkung einer "slideshow"
    Von Piesay im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 07.02.2012, 22:20
  2. Ebenen "verankern"?
    Von finefine im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 31.01.2006, 20:50
  3. IE-"Infobox" entfernen
    Von eRik im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 01.02.2005, 16:49
  4. Vertikales Java Menü "verankern"
    Von im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 5
    Letzter Beitrag: 14.08.2004, 13:43
  5. "css" Verschiedene :hover über das class="&am
    Von vandyce im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 18.04.2004, 15:57

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •