Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 12

Thema: rollover falsche position

  1. #1
    vv
    Gast

    Standard rollover falsche position

    Hi Leute,

    ich habe eine layout mit tabellen zusammgebastelt. Dabei habe ich auch ein Menü mit rollover-effekt eingebaut. Fährt man mit der maus über den Menühauptpunkt der in einer tabelle steht erscheinen die unterpunkte. mit der auflösung in der ich das gemacht hab ist alles wunderbar, doch geh ich auf 800*600 verschiebt es die untermenüs. Dies liegt daran, dass ich die positionen der untermenüs über Kaskadierendes Stylesheet-Dokument bestimmt habe:

    .menu {
    position: absolute;
    width: 110px;
    top: 130px;
    left: 435px;
    z-index: 1;
    Visibility: hidden;
    }

    wie bekomm ich das hin dass es auch bei anderen auflösungen an der selben stelle erscheint?

    vielen dank

    vv
    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
    Forum Guru
    Registriert seit
    28.12.2004
    Ort
    Ringgenberg(bei Interlaken) / Schweiz
    Beiträge
    4.787
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    in dem du mit java-script die momentane browsergröße ermittels und das ganze dan ausrechnen läst und per dokument write ind die CSS schreibst.

    Ich gucke später mal ob ich was in der art habe. ODer zusammenbasteln kann.

  3. #3
    Forum Guru
    Registriert seit
    28.12.2004
    Ort
    Ringgenberg(bei Interlaken) / Schweiz
    Beiträge
    4.787
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    so hier das versprochenen scipt.

    Code:
    .menu {
    position: absolute;
    width: 110px;
    
    <script language="JavaScript">
    <!--
    document.write&#40;"top&#58;"&#41;;
      130
    document.write&#40;"px; \n left&#58; "&#41;;
    document.write&#40;&#40;document.body.clientHeight&#41;/608*130&#41;;
    document.write&#40;&#40;document.body.clientWidth&#41;/1024*435&#41;;
    document.write&#40;"px;"&#41;;
    // -->
    </script> 
    
    z-index&#58; 1;
    Visibility&#58; hidden;
    &#125;
    dabei muss der CSS teil in der HTML -Datei befindlich sein.

    Die rechnungen die ich da rein getahen habe sind "reiner Quatsch" Das musst du dir selbst auskaspern. da dir die funktionen nur die autuelle browser breite und höhe ausgebeben.

    Was bei mir in 1024*768 auflösung bei maximierten Browser 1024*608

  4. #4
    vv
    Gast

    Standard

    vielen dank für das script!

    ich habe es nun in den head meiner html datei so eingefügt:

    <style type="text/css">
    <!--

    div.menu {
    position: absolute;
    width: 110px;


    <script language="JavaScript" TYPE="text/javascript">
    <!--
    document.write("top:");
    130
    document.write("px; \n left:");
    document.write((document.body.clientHeight)/768*130);
    document.write((document.body.clientWidth)/1024*435);
    document.write("px;");
    // -->
    </script>

    z-index: 1;
    Visibility: hidden;
    }


    -->
    </style>

    es funktioniert aber nicht, das untermenü mit der (div menu) erscheint in der links oben in der ecke, also es findet keine top und left px angabe. ich kenn mich in javascript leider überhaupt nich aus muss ich in das script noch irgendwas eintragen ????

    vielen vielen dank

    vv

  5. #5
    Fortgeschrittene/r
    Registriert seit
    21.11.2004
    Ort
    Bremen
    Beiträge
    175
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Hi,

    und was wollt ihr machen, wen die Auflösungen irgendwo dazwischen liegen uder sogar bei 1600x1200 wie bei einigen Linux-Usern?
    Statt Javascript würde ich an deiner Stelle nur auf CSS und absolute Positionierung setzen, dazu musst du nur die Untermenüs ins selbe div packen wie das Menu und dieses absout positionieren, die postition der Untermenus solltee dann absolut zum umgebenden div bestimmt werden (das funktioniert auch, wenn das Haupt-div relativ positioniert ist).

    Hab ich mich einigeermaßen verständlich ausgedrückt? - wahrscheinlich nicht so besonders, aber poste doch mal einen Link zu der Seite, dann werf ich gerne mal einen Blick drauf.

    Gruß
    Marcus

    P.S.: Etwas ähnliches hatten wir übrigens gerade unter:
    http://www.forum-hilfe.de/viewtopic.php?p=53748#53748

  6. #6
    vv
    Gast

    Standard

    Hallo,

    danke für die schnelle antwort. das problem ist, dass ich mein komplettes layout in tabellen-form erstellt habe und nur das untermenu mit einer css positionierung. jetzt habe ich das problem bei änderung der auflösung. die tabelle ist auch noch <center> damit sie bei jeder auflösung in der mitte steht hier mal der code:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
         "http&#58;//www.w3.org/TR/html4/transitional.dtd">
    <html>
    <head>
    <title>Walter Veit GmbH Geschichte</title>
    
    <style type="text/css">
    <!--
    
    div.menu &#123; 
    position&#58; absolute; 
    width&#58; 110px; 
    top&#58; 130px;
    left&#58; 435px;
    
    <script language="JavaScript" TYPE="text/javascript"> 
    <!-- 
    document.write&#40;"top&#58;"&#41;; 
      130 
    document.write&#40;"px; \n left&#58;"&#41;; 
    document.write&#40;&#40;document.body.clientHeight&#41;/800*335&#41;; 
    document.write&#40;&#40;document.body.clientWidth&#41;/1024*435&#41;; 
    document.write&#40;"px;"&#41;; 
    // --> 
    </script> 
    
    z-index&#58; 1; 
    Visibility&#58; hidden; 
    &#125;
    
    
    -->
    </style>
    
    
    
    <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
          <!--
          
          function MenueAuf&#40;Menue&#41;
          &#123;
            
              document.getElementById&#40;Menue&#41;.style.visibility="visible";
            &#125; 
          
          
          
          function MenueZu&#40;Menue&#41;
          &#123;
           
              document.getElementById&#40;Menue&#41;.style.visibility="hidden";
            &#125;
          
                
          //-->
    </SCRIPT>
    
    
    <LINK REL=STYLESHEET TYPE="text/css" HREF="style.css">
    <LINK REL=STYLESHEET TYPE="text/css" HREF="site.css">
    
    
    </head>
    <body marginwidth="0" marginheight="0" topmargin="0" leftmargin="0" bgcolor="#C0C0C0">
    
    <DIV CLASS="menu" ID="Menue" OnMouseOver="MenueAuf&#40;'Menue'&#41;"
             OnMouseOut="MenueZu&#40;'Menue'&#41;">
    
    <table width="110px" border="0" bgcolor="#E0E0E0" CELLSPACING=0 CELLPADDING=3>
    <tr>
    
    <tr><A HREF="seiten/leist1.html">
    <td id="Menuecell1" onmouseover="document.all.Menuecell1.style.background='666699';" onmouseout="document.all.Menuecell1.style.background='E0E0E0';"><A class="link1" HREF="seiten/leist1.html">Fassaden-
    renovierung</A></td></A>
    </tr><tr><A HREF="seiten/leist2.html">
    <td id="Menuecell2" onmouseover="document.all.Menuecell2.style.background='666699';" onmouseout="document.all.Menuecell2.style.background='E0E0E0';"><A class="link1" HREF="seiten/leist2.html">Innenanstriche 
     und Tapeten</A></td></A>
    </tr>
    <tr><A HREF="seiten/leist3.html">
    <td id="Menuecell3" onmouseover="document.all.Menuecell3.style.background='666699';" onmouseout="document.all.Menuecell3.style.background='E0E0E0';">Bodenbeläge </td></A>
    </tr>
    <tr><A HREF="seiten/leist4.html">
    <td id="Menuecell4" onmouseover="document.all.Menuecell4.style.background='666699';" onmouseout="document.all.Menuecell4.style.background='E0E0E0';">Lackierarbeiten</td></A>
    </tr>
    </table>
                      </DIV>
    
    <center>
    
    <table border="0" cellspacing="0" cellpadding="0">
    
    <tr>
    <td width="190px" height="30px" bgcolor="#E0E0E0"></td>
    <td align="right" width="550px" height="30px" bgcolor="#E0E0E0"><font face="Arial" font size="1">IMPRESSUM &nbsp |  &nbsp SITEMAP &nbsp&nbsp&nbsp&nbsp</td>
    
    <tr>
    <td valign="bottom" width="190px" height="100px" bgcolor="#A68646">
    
    <table frame="above" border="1" cellspacing="0" cellpadding="0">
    <tr>
    <td width="190px" height="25px">
    </td>
    </tr>
    </table>
    
    
    </td>
    <td valign="bottom" width="550px" height="60px" bgcolor="#A68646">
    
    <table frame="above" border="1" cellspacing="0" cellpadding="0">
    <tr>
    <td align="left" width="120px" height="25px" bgcolor="#A68646"><font face="Arial" font size="2" color="white">&nbsp&nbsp[b] GESCHICHTE </td>
    <td align="left" width="120px" height="20px" bgcolor="#A68646" OnMouseOver="MenueAuf&#40;'Menue'&#41;"
              OnMouseOut="MenueZu&#40;'Menue'&#41;"><font face="Arial" font size="2" color="white">&nbsp&nbsp[b]LEISTUNGEN</td>
    <td align="left" width="120px" height="20px" bgcolor="#A68646"><font face="Arial" font size="2" color="white">&nbsp&nbsp[b]REFERENZEN</td>
    <td align="left" width="120px" height="20px" bgcolor="#A68646"><font face="Arial" font size="2" color="white">&nbsp&nbsp[b]KONTAKT</td>
    <td align="left" width="120px" height="20px" bgcolor="#A68646"><font face="Arial" font size="2" color="white">&nbsp&nbsp[b]HOME</td>
    
    
    </table>
    
    </td>
    </tr>
    
    
    <tr>
    <td align="middle" width="190px" height="500px" bgcolor="#4F5F83" valign="top">
    
    
    [img]logo.gif[/img]
    
    
    <table border="0" cellspacing="0" cellpadding="0">
    
    <tr>
    
    <td width="130px" height="150px" align="left">
    
    <p align="justify"><font face="Arial" font size="2" color="white">
    
    Fon &nbsp 0911 / 44 44 04
    Fax &nbsp 0911 / 43 76 49 
     
     Paradiesstraße 9
    90459 Nürnberg 
    
    </td>
    </tr>
    
    
    </table>
    
    </td>
    <td  align="middle" valign="top" width="550px" height="500px" bgcolor="#ffffff">
    
    
    <table border="0" cellspacing="0" cellpadding="0" style="background-image&#58;url&#40;auto1.gif&#41;"> 
    <tr>
    
    <td align="left" width="70px" height="20px"></td>
    
    
    <td colspan="2" align="left" width="390px" height="20px">
     [img]ueber.gif[/img]</td>
    <td align="left" width="50px" height="20px"></td>
    
    </tr>
    
    <tr>
    
    <td align="left" width="30px" height="25px">
     </td>
    
    <td align="left" width="20px" height="20px"></td>
    
    <td align="left" width="400px" height="25px"> 
    
    
    
    <font face="Arial" font size="2">
    
    
    
    
    Das Lackieren von Fensterrahmen, Türen, Heizkörpern, Treppengeländern und aller sonstigen Holz- und Metallflächen, ja sogar Hart-PVC-Untergründen  sind Arbeiten, die durch uns routiniert und versiert ausgeführt werden. Von der fachgerechten Untergrundbehandlung über sämtliche Grund- und Zwischenanstriche bis zur sauberen Endlackierung!
    
     
    
    
    
    Mobile Objekte wie Türblätter oder Möbeleinzelstücke behandeln wir auch gerne in unserer stationären Spritzanlage zur weiteren Optimierung des Ergebnisses.Kostenlose Abholung und Anlieferung versteht sich von selbst.
    
    
    
    
    Auch das fachmännische Beschichten von Stahlkonstruktionen gehört zu unseren Leistungen.
    
    
    
    
    Ebenso übernehmen wir auch das Lasieren aller geeigneten Holzflächen, wie Naturfenster- und -Türen, Zäune, Dachuntersichten, Fassadenverbretterungen etc.
    
    
    
    
    
    
    
    
    
    
    <div class="leist4">
    <table border="0" cellspacing="1" cellpadding="0">
    <tr>
    <td valign="bottom">
    [img]leist1/li.gif[/img]
    </td>
    <td valign="middle">
    [img]leist1/1.gif[/img]
    </td>
    <td valign="middle">
    [img]leist1/2.gif[/img]
    </td>
    <td valign="middle">
    [img]leist1/3.gif[/img]
    </td>
    <td valign="middle">
    [img]leist1/4.gif[/img]
    </td>
    <td valign="middle">
    [img]leist1/re.gif[/img]
    </td>
    </tr>
    
    </table>
    
    </div>
    
     </td>
    
    <td align="left" width="50px" height="20px"></td>
    
    </tr>
    
    <tr>
    <td align="left" width="30px" height="20px"></td>
    
    <td align="right" width="20px"  height="20px"></td>
    <td align="right" height="20px"> </td>
    <td align="left" width="60px" height="20px">[img]back.gif[/img]</td>
    </tr>
    </table>
    
    
    </td>
    </tr>
    <tr>
    <td width="190px" height="20px" bgcolor="A68646"></td>
    <td width="200px" height="20px" bgcolor="#A68646"></td>
    </tr>
    </table> 
    </body>
    </html>

  7. #7
    Fortgeschrittene/r
    Registriert seit
    21.11.2004
    Ort
    Bremen
    Beiträge
    175
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Oh je,

    ich fürchte da kann ich dir nicht weiterhelfen, aber wenn du das Untermenü in die selne Tabellenzelle packen würdest, wie das Hauptmenü und diesem style="position:relativ" zuweist, müsstest du des Menü absolut und in relation zu dieser Zelle positionieren können.

    Gruß
    Marcus

  8. #8
    vv
    Gast

    Standard

    hi,

    hab ich versucht, aber dann wird meine zelle ja größer und dass zerstört das layout.

    Aber im prinzip müsste es ja so sein dass das untermenu (div menu) immer unterhalb der zelle in der Leistungen steht erscheint. gibt es eine möglichkeit die position von dieser zelle abhängig zu machen?

    Vielen Dank

    vv

  9. #9
    vv
    Gast

    Standard

    also dass problem ist ja wirklich nur dass die tabelle <center> ist wenn ich sie am linken rand hätte könnte man mit der auflösung machen was man wollte und das <div menu> würde am richtigen platz erscheinen. ich will aber eine mittiges layout. muss ich das rollover menu jetzt vergessen und mir ein anderes menu einfallen lassen?

    oder weiss jemand einen weg?????


    Danke

    vv

  10. #10
    Forum Guru
    Registriert seit
    28.12.2004
    Ort
    Ringgenberg(bei Interlaken) / Schweiz
    Beiträge
    4.787
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Code:
    <style type="text/css">
    <!-- 
    div.menu &#123;
    position&#58; absolute;
    width&#58; 110px;
    	<script language="JavaScript" TYPE="text/javascript">
    	<!--
    	document.write&#40;"top&#58;"&#41;;
    	document.write&#40;Math.round&#40;&#40;document.body.clientHeight&#41;/768&#41;*130&#41;;
    	document.write&#40;"px; \n left&#58;"&#41;;
    	document.write&#40;Math.round&#40;&#40;document.body.clientWidth&#41;/1024&#41;*435&#41;;
    	document.write&#40;"px;"&#41;;
    	// -->
    	</script> 
    z-index&#58; 1;
    Visibility&#58; hidden;
    &#125;
    -->
    </style>
    so probiere es mal so.

Ähnliche Themen

  1. falsche Darstellung im IE 7
    Von Flasher im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 01.12.2006, 13:17
  2. Falsche Grafikkarte?
    Von Kuhgel im Forum Computer - Internet Forum
    Antworten: 5
    Letzter Beitrag: 25.10.2006, 17:23
  3. Falsche Verlinkung
    Von Daniel18m im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 22.09.2006, 19:49
  4. Falsche Anzeige im IE !!!
    Von Ronaldinho im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 10.09.2005, 14:30
  5. PHP Include Fehler: Falsche Position
    Von Jakob1985 im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 27
    Letzter Beitrag: 21.06.2005, 21:36

Stichworte

Berechtigungen

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