DIV positionieren/ausrichten

arual

Grünschnabel
Hallo ich bin neu hier

arbeite aber schon seit einiger Seit mit Dreamweaver, komme nun aber an ein problem

Ich hab eine Site gebaut mit einem horizontalen Menü, das ganze mit Frames Index, Menü,Left und Main.
Beim überfahren der Buttons im Menüframe öffnet sich im Mainframe eine Ebene mit weiteren Navigationspunkten. ( erstellt mit SnapLayer)

Nun zum problem, leider schaffe ich es nicht diese Untermenüs so zu positionieren , das sie bei verschiedenen Monitor Auflösungen immer an der richtigen Stelle sind.
Beim Scollen des Main frames verschwinden diese auch nach oben, sollten aber immer am oberen Framrahmen sichtbar sein.

Kann mir jemand helfen
danke für die Hilfe

Hier der Code für den Mainframe

Code:
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('/images/buttons_new/uns_over.gif','/images/buttons_new/news_over.gif','/images/buttons_new/suchen_over.gif','/images/buttons_new/gaestebuch_over.gif','/images/buttons_new/forum_over.gif','/images/buttons_new/fun_over.gif','/images/buttons_new/gallerie_over.gif','/images/buttons_new/webcam_over.gif','/images/buttons_new/sponsoren_over.gif','/images/buttons_new/linkliste_over.gif','/images/buttons_new/zeiten_over.gif','/images/buttons_new/standort_over.gif','/images/buttons_new/1882_over.gif','/images/buttons_new/besatzung_over.gif','/images/buttons_new/modellbau_over.gif','/images/buttons_new/agrarflug_over.gif','/images/buttons_new/sonderausstellung_over.gif','/images/buttons_new/aussengelaende_over.gif','/images/buttons_new/uns_over.gif','/images/buttons_new/news_over.gif','/images/buttons_new/suchen_over.gif','/images/buttons_new/sponsoren_over.gif','/images/buttons_new/linkliste_over.gif','/images/buttons_new/download_over.gif');P7_Snap('Layer1','Layer1',0,0,'Layer2','Layer2',0,0,'Layer3','Layer3',0,0,'Layer4','Layer4',0,0,'Layer5','Layer5',0,0)" onResize="P7_Snap('Layer1','Layer1',0,0,'Layer2','Layer2',0,0,'Layer3','Layer3',0,0,'Layer4','Layer4',0,0,'Layer5','Layer5',0,0)">
<table width="100%" border="0" align="center" cellpadding="0">
<tr>
<td height="74" align="center">
<div id="Layer1" style="position:absolute; width:130px; z-index:5; left: 3%; top: 1px; height: 91px; visibility: hidden;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><a href="/1024/verein.htm" target="mainFrame" onMouseOver="MM_swapImage('Image8','','/images/buttons_new/uns_over.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="/images/buttons_new/uns.gif" name="Image8" width="130" height="30" border="0"></a>
<a href="/1024/news.htm" target="mainFrame" onMouseOver="MM_swapImage('Image9','','/images/buttons_new/news_over.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="/images/buttons_new/news.gif" name="Image9" width="130" height="30" border="0"></a>
<a href="/1024/wir_suchen.htm" target="mainFrame" onMouseOver="MM_swapImage('Image10','','/images/buttons_new/suchen_over.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="/images/buttons_new/suchen.gif" name="Image10" width="130" height="30" border="0"></a>
</tr>

usw... das ist nur der teil für den ersten Layer
 
Zuletzt bearbeitet:
M

Maik

Hi,

ohne vorab dein komplettes Frameset live in Aktion gesehen zu haben, wird es schwer mit der Hilfestellung. Also poste mal den Link zu deiner Seite.

Was das Fixieren der Submenüs beim Scrollen des Frames betrifft, steht dir hierfür position:fixed anstelle von position:absolute zur Verfügung.

mfg Maik
 
M

Maik

In diesem Konstrukt solltest du links neben der Navigation einen blinden Frame einbauen (Breite analog zum darunterliegenden Frame "leftFrame"), damit sich der Navi-Frame nicht mehr verschieben lässt. So gibt's dann auch keine Probleme mit der Positionierung der Untermenüs.

Mit position:fixed für die einzelnen <div>-Blöcke kann ich in Firebug das von dir beschriebene Verhalten nicht registrieren.

mfg Maik
 

arual

Grünschnabel
Hallo Maik

ich hab das jetzt mal so geändert, schau dir das bitte noch mal an

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script language="JavaScript1.1" type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

function P7_Snap() { //v2.62 by PVII
  var x,y,ox,bx,oy,p,tx,a,b,k,d,da,e,el,args=P7_Snap.arguments;a=parseInt(a);
  for (k=0; k<(args.length-3); k+=4)
   if ((g=MM_findObj(args[k]))!=null) {
    el=eval(MM_findObj(args[k+1]));
    a=parseInt(args[k+2]);b=parseInt(args[k+3]);
    x=0;y=0;ox=0;oy=0;p="";tx=1;da="document.all['"+args[k]+"']";
    if(document.getElementById) {
     d="document.getElementsByName('"+args[k]+"')[0]";
     if(!eval(d)) {d="document.getElementById('"+args[k]+"')";if(!eval(d)) {d=da;}}
    }else if(document.all) {d=da;} 
    if (document.all || document.getElementById) {
     while (tx==1) {p+=".offsetParent";
      if(eval(d+p)) {x+=parseInt(eval(d+p+".offsetLeft"));y+=parseInt(eval(d+p+".offsetTop"));
      }else{tx=0;}}
     ox=parseInt(g.offsetLeft);oy=parseInt(g.offsetTop);var tw=x+ox+y+oy;
     if(tw==0 || (navigator.appVersion.indexOf("MSIE 4")>-1 && navigator.appVersion.indexOf("Mac")>-1)) {
      ox=0;oy=0;if(g.style.left){x=parseInt(g.style.left);y=parseInt(g.style.top);
      }else{var w1=parseInt(el.style.width);bx=(a<0)?-5-w1:-10;
      a=(Math.abs(a)<1000)?0:a;b=(Math.abs(b)<1000)?0:b;
      x=document.body.scrollLeft + event.clientX + bx;
      y=document.body.scrollTop + event.clientY;}}
   }else if (document.layers) {x=g.x;y=g.y;var q0=document.layers,dd="";
    for(var s=0;s<q0.length;s++) {dd='document.'+q0[s].name;
     if(eval(dd+'.document.'+args[k])) {x+=eval(dd+'.left');y+=eval(dd+'.top');break;}}}
   if(el) {e=(document.layers)?el:el.style;
   var xx=parseInt(x+ox+a),yy=parseInt(y+oy+b);
   if(navigator.appName=="Netscape" && parseInt(navigator.appVersion)>4){xx+="px";yy+="px";}
   if(navigator.appVersion.indexOf("MSIE 5")>-1 && navigator.appVersion.indexOf("Mac")>-1){
    xx+=parseInt(document.body.leftMargin);yy+=parseInt(document.body.topMargin);
    xx+="px";yy+="px";}e.left=xx;e.top=yy;}}
}

</script>
</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('/images/buttons_new/uns_over.gif','/images/buttons_new/news_over.gif','/images/buttons_new/suchen_over.gif','/images/buttons_new/gaestebuch_over.gif','/images/buttons_new/forum_over.gif','/images/buttons_new/fun_over.gif','/images/buttons_new/gallerie_over.gif','/images/buttons_new/webcam_over.gif','/images/buttons_new/sponsoren_over.gif','/images/buttons_new/linkliste_over.gif','/images/buttons_new/zeiten_over.gif','/images/buttons_new/standort_over.gif','/images/buttons_new/1882_over.gif','/images/buttons_new/besatzung_over.gif','/images/buttons_new/modellbau_over.gif','/images/buttons_new/agrarflug_over.gif','/images/buttons_new/sonderausstellung_over.gif','/images/buttons_new/aussengelaende_over.gif','/images/buttons_new/uns_over.gif','/images/buttons_new/news_over.gif','/images/buttons_new/suchen_over.gif','/images/buttons_new/sponsoren_over.gif','/images/buttons_new/linkliste_over.gif','/images/buttons_new/download_over.gif');P7_Snap('Layer1','Layer1',0,0,'Layer2','Layer2',0,0,'Layer3','Layer3',0,0,'Layer4','Layer4',0,0,'Layer5','Layer5',0,0)" onResize="P7_Snap('Layer1','Layer1',0,0,'Layer2','Layer2',0,0,'Layer3','Layer3',0,0,'Layer4','Layer4',0,0,'Layer5','Layer5',0,0)">
<table width="100%" border="0" align="center" cellpadding="0">
  <tr> 
    <td> <div id="Layer1" style="position:fixed; width:130px; z-index:5; left: 3%; top: 1px; height: 91px; visibility: hidden;" onmousewheel="P7AniMagic('Layer1',300,0,1,20,1,0)"> 
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr> 
            <td><a href="verein.htm" target="mainFrame" onMouseOver="MM_swapImage('Image8','','/images/buttons_new/uns_over.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="/images/buttons_new/uns.gif" name="Image8" width="130" height="30" border="0"></a> 
              <a href="news.htm" target="mainFrame" onMouseOver="MM_swapImage('Image9','','/images/buttons_new/news_over.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="/images/buttons_new/news.gif" name="Image9" width="130" height="30" border="0"></a> 
              <a href="wir_suchen.htm" target="mainFrame" onMouseOver="MM_swapImage('Image10','','/images/buttons_new/suchen_over.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="/images/buttons_new/suchen.gif" name="Image10" width="130" height="30" border="0"></a> 
          </tr>
        </table>
      </div>
      <div id="Layer2" style="position:fixed; width:130px; z-index:5; left: 35%; top: 1px; height: 91px; visibility: hidden;"> 
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr> 
            <td><a href="ausstellung.htm" target="mainFrame" onMouseOver="MM_swapImage('Image20','','/images/buttons_new/zeiten_over.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="/images/buttons_new/zeiten.gif" name="Image20" width="130" height="30" border="0"></a> 
              <a href="standort.htm" target="mainFrame" onMouseOver="MM_swapImage('Image21','','/images/buttons_new/standort_over.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="/images/buttons_new/standort.gif" name="Image21" width="130" height="30" border="0"></a> 
              <a href="Kaisereich.htm" target="mainFrame" onMouseOver="MM_swapImage('Image22','','/images/buttons_new/1882_over.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="/images/buttons_new/1882.gif" name="Image22" width="130" height="30" border="0"></a> 
              <a href="Sowjetische_Besatzung.htm" target="mainFrame" onMouseOver="MM_swapImage('Image23','','/images/buttons_new/besatzung_over.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="/images/buttons_new/besatzung.gif" name="Image23" width="130" height="30" border="0"></a> 
              <a href="Aust_Modellbau.htm" target="mainFrame" onMouseOver="MM_swapImage('Image24','','/images/buttons_new/modellbau_over.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="/images/buttons_new/modellbau.gif" name="Image24" width="130" height="30" border="0"></a> 
              <a href="Agrarflug.htm" target="mainFrame" onMouseOver="MM_swapImage('Image25','','/images/buttons_new/agrarflug_over.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="/images/buttons_new/agrarflug.gif" name="Image25" width="130" height="30" border="0"></a> 
              <a href="Sonderaustellung.htm" target="mainFrame" onMouseOver="MM_swapImage('Image26','','/images/buttons_new/sonderausstellung_over.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="/images/buttons_new/sonderausstellung.gif" name="Image26" width="130" height="30" border="0"></a> 
              <a href="Aussengelaende.htm" target="mainFrame" onMouseOver="MM_swapImage('Image27','','/images/buttons_new/aussengelaende_over.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="/images/buttons_new/aussengelaende.gif" name="Image27" width="130" height="30" border="0"></a> 
          </tr>
        </table>
      </div>
      <div id="Layer3" style="position:fixed; width:130px; z-index:5; left: 52%; top: 1px; height: 91px; visibility: hidden;"> 
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr> 
            <td><a href="http://www.thedealer.de/gaestebuch/cgi-bin/guestbook.pl?seite=1&anzeigen=10&id=Flugwelt" target="mainFrame" onMouseOver="MM_swapImage('Image28','','/images/buttons_new/gaestebuch_over.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="/images/buttons_new/gaestebuch.gif" name="Image28" width="130" height="30" border="0"></a> 
              <a href="forum.htm" target="mainFrame" onMouseOver="MM_swapImage('Image29','','/images/buttons_new/forum_over.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="/images/buttons_new/forum.gif" name="Image29" width="130" height="30" border="0"></a> 
              <a href="download.htm" target="mainFrame" onMouseOver="MM_swapImage('Image35','','/images/buttons_new/download_over.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="/images/buttons_new/download.gif" name="Image35" width="130" height="30" border="0"></a> 
              <a href="spiele.htm" target="mainFrame" onMouseOver="MM_swapImage('Image30','','/images/buttons_new/fun_over.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="/images/buttons_new/fun.gif" name="Image30" width="130" height="30" border="0"></a> 
          </tr>
        </table>
      </div>
      <div id="Layer4" style="position:fixed; width:130px; z-index:5; left: 67%; top: 1px; height: 66px; visibility: hidden;"> 
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr> 
            <td><a href="/1024/bilder.htm" target="mainFrame" onMouseOver="MM_swapImage('Image31','','/images/buttons_new/gallerie_over.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="/images/buttons_new/gallerie.gif" name="Image31" width="130" height="30" border="0"></a> 
              <a href="webcam.htm" target="mainFrame" onMouseOver="MM_swapImage('Image32','','/images/buttons_new/webcam_over.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="/images/buttons_new/webcam.gif" name="Image32" width="130" height="30" border="0"></a> 
          </tr>
        </table>
      </div>
      <div id="Layer5" style="position:fixed; width:131px; z-index:5; left: 83%; top: 1px; height: 65px; visibility: hidden;"> 
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr> 
            <td><a href="sponsoren.htm" target="mainFrame" onMouseOver="MM_swapImage('Image33','','/images/buttons_new/sponsoren_over.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="/images/buttons_new/sponsoren.gif" name="Image33" width="130" height="30" border="0"></a> 
              <a href="linkliste.htm" target="mainFrame" onMouseOver="MM_swapImage('Image34','','/images/buttons_new/linkliste_over.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="/images/buttons_new/linkliste.gif" name="Image34" width="130" height="30" border="0"></a> 
          </tr>
        </table>
      </div> 
<h1 align="center"><font color="#182979">Aktuelles</font></h1></td>
  </tr>
</table>
<table width="100%" border="0" align="center" cellpadding="0">
  <tr> 
    <td height="28" align="center" valign="middle">
<table width="93%" border="0">
        <tr>
          <td><div align="center"><font color="#000000"><strong>Sie haben am Wochenende 
              noch nichts vor? - Dann besuchen Sie einmal unsere Ausstellung.</strong><br>
              Neben interessanten Ausstellungsst&uuml;cken k&ouml;nnen Sie einiges 
              zur Fliegerei und zur Geschichte des Flugplatzes Altenburg erfahren. 
              Freunde der Zivilluftfahrt k&ouml;nnen sich an einer gro&szlig;en 
              Sammlung von Modellen der verschiedensten Passagiermaschinen erfreuen.</font> 
            </div></td>
        </tr>
      </table> 
      <table width="100%" border="0" align="center" cellpadding="5">
        <tr>
          <td align="center" valign="middle"><a href="Landung.htm" target="_blank"><img src="../images/brequet3.jpg" width="234" height="184" border="0"></a></td>
          <td align="center" valign="middle"><img src="../images/An-2.jpg" width="234" height="184"></td>
          <td align="center" valign="middle"><img src="../images/Jets.jpg" width="234" height="184"></td>
        </tr>
      </table>
      <table width="75%" border="0">
        <tr>
          <td><font color="#000000"> 
            <p align="center"><font color="#000000">Erfahren Sie, warum ein Druckanzug 
              Druckanzug hei&szlig;t,</font> <br>
              <font color="#000000">schauen Sie sich unsere Luftfahrttechnik an</font></p>
            </font></td>
        </tr>
      </table>
      <table width="75%" border="0" align="center" cellpadding="5">
        <tr> 
          <td align="center" valign="middle"><div align="center"><img src="../images/SPS2.jpg" width="234" height="184"></div></td>
          <td align="center" valign="middle"><div align="center"><img src="../images/libelle.jpg" width="234" height="184"></div></td>
        </tr>
      </table>
      <table width="75%" border="0">
        <tr>
          <td><div align="center"><font color="#000000">und verweilen Sie anschlie&szlig;end 
              bei Kaffee und Kuchen in unserem Cafe.</font></div></td>
        </tr>
      </table>
      <table width="75%" border="0" align="center" cellpadding="5">
        <tr>
          <td align="center" valign="middle"><img src="/images/cafe1.jpg" width="234" height="167"></td>
        </tr>
      </table>
      
    </td>
  </tr>
</table>
</body>
</html>

das ist der der ganze code vom MAin frame


Danke
 
M

Maik

Sieht soweit gut aus, nur hast du nun im blinden Frame den Menüpunkt "Home" untergebracht, was nicht im Sinne des Erfinders ist.

mfg Maik
 

arual

Grünschnabel
Hallo Maik

wenn ich dort den frame leer lasse , reicht der Platz über dem Main frame nicht für alle Menüpunkte bei einer 1024er Auflösung

Danke
 
M

Maik

Dann sorg halt für schmälere Menüpunkte, oder laß in dem Navi-Frame das Scrollen zu, denn was du da nun versuchst, ist mit Sicherheit nicht die Lösung.

mfg Maik
 

Neue Beiträge