rollover falsche position

vv

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

GreenRover

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.

GreenRover

so hier das versprochenen scipt.

Code

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


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


z-index: 1;
Visibility: hidden;
}

Alles anzeigen

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

vv

vielen dank für das script!

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

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

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

Marcus

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:
https://www.forum-hilfe.de/viewtopic.php?p=53748#53748

vv

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:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     "http://www.w3.org/TR/html4/transitional.dtd">
<html>
<head>
<title>Walter Veit GmbH Geschichte</title>


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


div.menu { 
position: absolute; 
width: 110px; 
top: 130px;
left: 435px;


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


z-index: 1; 
Visibility: hidden; 
}




-->
</style>






<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
      <!--

      function MenueAuf(Menue)
      {

          document.getElementById(Menue).style.visibility="visible";
        } 



      function MenueZu(Menue)
      {

          document.getElementById(Menue).style.visibility="hidden";
        }


      //-->
</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('Menue')"
         OnMouseOut="MenueZu('Menue')">


<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';">[url='seiten/leist3.html']Bodenbeläge [/url]</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';">[url='seiten/leist4.html']Lackierarbeiten[/url]</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][url='story.html'] GESCHICHTE [/url]</td>
<td align="left" width="120px" height="20px" bgcolor="#A68646" OnMouseOver="MenueAuf('Menue')"
          OnMouseOut="MenueZu('Menue')"><font face="Arial" font size="2" color="white">&nbsp&nbsp[b][url='leist.html']LEISTUNGEN[/url]</td>
<td align="left" width="120px" height="20px" bgcolor="#A68646"><font face="Arial" font size="2" color="white">&nbsp&nbsp[b][url='ref.html']REFERENZEN[/url]</td>
<td align="left" width="120px" height="20px" bgcolor="#A68646"><font face="Arial" font size="2" color="white">&nbsp&nbsp[b][url='kon.html']KONTAKT[/url]</td>
<td align="left" width="120px" height="20px" bgcolor="#A68646"><font face="Arial" font size="2" color="white">&nbsp&nbsp[b][url='../index.html']HOME[/url]</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:url(auto1.gif)"> 
<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">[url='#top'][img]back.gif[/img][/url]</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>

Alles anzeigen

Marcus

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

vv

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

vv

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

GreenRover

Code

<style type="text/css">
<!-- 
div.menu {
position: absolute;
width: 110px;
	<script language="JavaScript" TYPE="text/javascript">
	<!--
	document.write("top:");
	document.write(Math.round((document.body.clientHeight)/768)*130);
	document.write("px; \n left:");
	document.write(Math.round((document.body.clientWidth)/1024)*435);
	document.write("px;");
	// -->
	</script> 
z-index: 1;
Visibility: hidden;
}
-->
</style>

Alles anzeigen

so probiere es mal so.

vv

hallo GreenRover,

nochmal vielen vielen dank für das script, leider funktioniert es immer noch nicht.

wie würde das script denn wenn es dann hoffentlich funktioniert überhaupt erkennen welche auflösung vorhanden ist dazu muss man doch noch mehr einfügen oder??? kenn mich leider wie gesagt null aus.

hier mein jetziger code

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     "http://www.w3.org/TR/html4/transitional.dtd">
<html>
<head>
<title>Walter Veit GmbH Home</title>


<style type="text/css"> 
<!-- 
div.menu { 
position: absolute; 
width: 110px; 
   <script language="JavaScript" TYPE="text/javascript"> 
   <!-- 
   document.write("top:"); 
   document.write(Math.round((document.body.clientHeight)/768)*130); 
   document.write("px; \n left:"); 
   document.write(Math.round((document.body.clientWidth)/1024)*435); 
   document.write("px;"); 
   // --> 
   </script> 
z-index: 1; 
Visibility: hidden; 
} 
--> 
</style> 




<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
      <!--

      function MenueAuf(Menue)
      {

          document.getElementById(Menue).style.visibility="visible";
        } 



      function MenueZu(Menue)
      {

          document.getElementById(Menue).style.visibility="hidden";
        }


      //-->
</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">




<center>




<DIV CLASS="menu" ID="Menue" OnMouseOver="MenueAuf('Menue')"
         OnMouseOut="MenueZu('Menue')">


<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';" align="left"><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';" align="left"><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';" align="left">[url='seiten/leist3.html']Bodenbeläge [/url]</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';" align="left">[url='seiten/leist4.html']Lackierarbeiten[/url]</td></A>
</tr>
</table>
                  </DIV>






<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][url='seiten/story.html'] GESCHICHTE [/url]</td>
<td align="left" width="120px" height="20px" bgcolor="#A68646" OnMouseOver="MenueAuf('Menue')"
          OnMouseOut="MenueZu('Menue')" >
<font face="Arial" font size="2" color="white">&nbsp&nbsp[b][url='seiten/leist.html']LEISTUNGEN[/url]</td>


<td align="left" width="120px" height="20px" bgcolor="#A68646"><font face="Arial" font size="2" color="white">&nbsp&nbsp[b][url='seiten/ref.html']REFERENZEN[/url]</td>
<td align="left" width="120px" height="20px" bgcolor="#A68646"><font face="Arial" font size="2" color="white">&nbsp&nbsp[b][url='seiten/kon.html']KONTAKT[/url]</td>
<td align="left" width="120px" height="20px" bgcolor="#A68646"><font face="Arial" font size="2" color="white">&nbsp&nbsp[b][url='index.html']HOME[/url]</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:url(auto1.gif)"> 
<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">








Wir sind zwar nicht (ganz) der älteste, aber einer der ganz alten


Nürnberger Malermeisterbetriebe.






Als modernes Unternehmen mit über 100jähriger Firmengeschichte


legen wir nicht nur auf innovative Techniken, sondern vor allem auf


kundenorientierten Service größten Wert.






Sie können sicher sein, wir sind auch nach Auftragsausführung


noch für Sie da!






Denn - was nützt Ihnen das Versprechen eines Billiganbeiters den
 es
morgen vielleicht schon nicht mehr gibt?</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">
[url='folder.pdf'][img]folder.gif[/img][/url]</td>
<td align="left" width="60px" height="20px"></td>


</tr>


</table>


</td>
</tr>


<tr>
<td width="190px" height="20px" bgcolor="A68646"></td>
<td width="200px" height="20px" bgcolor="#A68646"></td>
</tr>




</table> 


</center>




</body>
</html>

Alles anzeigen

vv

sagt mal leute,

hier hat doch bestimmt irgendwer schon mal eine mittige auf tabellenlayout basierende seite mit einem rollover menu erstellt. dafür muss es doch eine lösung geben.

hoffnungsvoll

vv

Tags