title image


Smiley Re: Navi - Position
Einfach? - Für den IE ist nichts einfach. Aber trotzdem machbar.



Für richtige Browser wird die Navigation einfach fixed-positioniert.



Für den IE muss die Höhe von body und html jeweils mit 100% formatiert und der

Scrollbalken aus beiden Containern entfernt werden (overflow:hidden).

In body wird ein Container positioniert (position: absolute; , left: -17px; (Breite

des Scrollbalken), z-index:1;)

Hier rein muss ein Container, der die negative Positionierung mit einem padding:left

in der gleichen Breite ausgleicht, damit der erste Inhalt im sichtbaren Bereich

dargestellt wird

Und da hinein kann nun Dein Menü eingebaut werden.

Damit der eigentliche Inhaltsbereich gescrollt werden kann, muss nun ein Container

erzeugt werden, der 100% hoch ist (Höhe von body) und mit einem overflow: auto;

formatiert wird.

In #content kommt ein weiteres Div rein, das mit einem padding-top in der Höhe

von #navi formatiert ist, damit dessen Inhalt sichtbar unterhalb der Navigation

gezeigt wird.



Quelltext:

<body>

<div id="navi">

<div id="iecorrect">

Dein Menü

</div>

</div>

<div id="content">

<div id="inner">

Inhalte

</div>

</div>

</body>



CSS:



* {

margin: 0;

padding: 0; /* entfernt alle Element-eigenen margin+padding */

}

html {

width: 100%;

height: 100%;

}

body {

width: 100%;

font-family: arial,helvetica,tahoma,verdana,sans-serif;

font-size: 100.01%;

color: #000000;

background-color: #FFFFFF;

}

#navi {

position: fixed;

}

/* fix for IE-win, hide from IE-mac \*/

* html, * html body {

height: 100%;

overflow: hidden;

}

* html #navi {

positition: absolute;

top: 0;

left: -17px;

width: 100%;

z-index: 1;

}

* html #iecorrect {

padding-left: 17px;

}

* html #content {

height: 100%;

overflow: auto;

}

* html #inner {

padding-top: /* Höhe der #navi */

}

/* end fix/hide */



Bedenke

Der Scrollbalken kann in der Windows-Systemsteuerung bis 100px Beite eingestellt

werden. Standardmäßig ist dieser in Windows XP ca. 17px breit. In meinem Windows 98

nur 16px breit.



mfg Achim





geschrieben von

Login

E-Mail:
  

Passwort:
  

Beitrag anfügen

Symbol:
 
 
 
 
 
 
 
 
 
 
 
 
 

Überschrift: