Ausrichtung einer Menüleiste für jede Auflösung

[Jan Huss]

Hallo Ihr,

ich darf mich heute seit langem mal wieder mit CSS und Co. rumschlagen und merke schon was ich absolut nicht vermisst habe. :o)

Ich habe eine aufklappbare Navigationsleiste welche über Layer funktioniert. So ein Menü kann zum Beispiel so aussehen:

<div id="m1" style="position:absolute; z-index:1; top:116; left:10%">
<table class="backgroundblue" cellspacing="0" cellpadding="0" border="0" width="100">
<tr><td>
 <a href="huhu.htm">Übersicht</a><br>
 <a href="">Struktur</a><br>
 <a href="">History</a><br>
 <a href="">Silicon Saxony</a><br>
</td></tr>
</table>
</div>

Problem: Wie positioniere ich das div so das es bei jeder Auflösung an der richtigen Stelle steht?

Ich habe versucht die richtige Position mit JavaScript zu ermitteln, in einer Variable abzulegen und dann den gesamten div-Tag per document.write() [top:116; left:'+varName+'] auszugeben. Leider nimmt Netscape diese Vermischung nicht an.

Wie löst Ihr ein soclhes Problem?

Danke für die Hilfe!

Gruß Jan

[Mirko Richter]

Hallo Jan!

Problem: Wie positioniere ich das div so das es bei jeder Auflösung an der richtigen Stelle steht?

Ein Ansatz wäre z.B. per JavScript aufgrund der Layerbreite und des zur Verfügung stehenden Anzeigenbereichs (Vorsicht: Anzeigenbereich != Auflösung) eine Position für den Links-Wert zu ermitteln und in einer Variablen abzulegen. Der Layer sollte beim Laden nicht sichtbar sein. Nun kannst Du mit dem Event-Handler onLoad eine Funktion ausführen, die erst den ermittelten Wert Deinem Layer zuweist und ihn anschließend einblendet.

HTH
Mirko

[Jan Huss]

Hallo,

danke für den Ansatz, habe es aber letzten Endes dank dieses Artikels gelöst:

http://www.teamone.de/selfaktuell/artikel/dhtml/positionierung/index.htm

Gruß Jan

[Sven Rautenberg]

<div id="m1" style="position:absolute; z-index:1; top:116; left:10%">
<table class="backgroundblue" cellspacing="0" cellpadding="0" border="0" width="100">
<tr><td>
 <a href="huhu.htm">Übersicht</a><br>
 <a href="">Struktur</a><br>
 <a href="">History</a><br>
 <a href="">Silicon Saxony</a><br>
</td></tr>
</table>
</div>

Problem: Wie positioniere ich das div so das es bei jeder Auflösung an der richtigen Stelle steht?

Ich habe versucht die richtige Position mit JavaScript zu ermitteln, in einer Variable abzulegen und dann den gesamten div-Tag per document.write() [top:116; left:'+varName+'] auszugeben. Leider nimmt Netscape diese Vermischung nicht an.

Wie löst Ihr ein soclhes Problem?

Ich habe mal folgende Funktion geschrieben, die mit onload aufgerufen wird (wahlweise auch am Ende der HTML-Datei, damit Webwasher das nicht rausfiltert):

ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false
v6 = (document.getElementById)? true:false

function size()
{
  var sizex=0;
  if (window.innerWidth)
  {
    (window.innerWidth)?sizex=window.innerWidth:sizex=0;
  }
  else if (document.body)
  {
    (document.body.offsetWidth)?sizex=document.body.offsetWidth:sizex=Math.max(sizex,0);
  }
  // Hier wird die zentrierte Position ausgerechnet. Die Tabelle ist
  // 795 Pixel breit. Ist das Fenster schmaler, dürfen die Layer aber
  // nicht zu weit nach links kommen, deswegen Math.max (Immer
  // mindestens "0 + 115 als Ergebnis).
  posX = Math.max( ((sizex-795)/2) , 0) + 115;
  if (ns4)
    { // Positioning for Netscape
    posX = posX - 10;
    document.layers["Unternehmen"].pageX=posX;
    }
  else if (ie4)
    { // Positioning for Internet Explorer
      // IE for Mac needs the 'px' String!
    posX = posX - 10;
    document.all["Unternehmen"].style.left = posX+'px';
    }
  else if (v6)
    { // Positioning for other Browsers
    document.getElementById("Unternehmen").style.left = posX;
    }
  }

Damit kriegst du zwar keine 100% Pixelgenaue Position hin, aber es klappt ungefähr. Das Skript positioniert im Moment auch nur horizontal, weil meine Layer zu einer zentrierten Tabelle passen mußten. Vertikal ist alles mit der Style-Definition positioniert.

Danke für die Hilfe!

Gruß Jan