Hi,
im Tutorials zum tabellenlosen Basislayout steht auch etwas von z-Indizes. Mit deren Hilfe werden
die Ebenen hierarchisch angeordnet. Wenn du diesen Aspekt verfolgst, kannst du auf
expression
komplett verzichten. Stattdessen realisierst du den Abstand nach oben und unten im IE über
die Rahmenstärken. Diese bleiben jedoch verborgen, da sie mit Hilfe von
z-Index in tieferliegenden
Ebenen angeordnet sind.
Hinweisen möchte ich dich auch auf die Breite deines Layouts!
Wer die Seite mit geringeren Auflösungen als 1000 Pixel Breite ansieht, kann die äussersten
Bereiche nicht sehen (Scrolling wurde ja deaktiviert!). Vielleicht solltest du die Seitenbreite
an das Fenster anpassen. Damit ist eine vernünftige Anzeige bis zu einer Auflösung von 800x600
noch möglich.
Die PopDown-Menues kannst du dann auch präzise von links anordnen.
Mein CSS-Vorschlag - das Extra-CSS-File für den IE kann entfallen:
Code:
html, body {
width: 100%;
height: 100%;
margin: 0;
border: 0;
padding: 0;
font-family: verdana, arial, sans-serif;
font-size: 12px;
line-height: 18px;
overflow: hidden; /* Scrollbalken im Fenster unterbinden */
}
body {
background-color: #fff;
}
a {
color: #a85555;
text-decoration: none;
font-weight: bold;
}
a:hover {
text-decoration: underline;
}
img {
border: 0px;
}
#oben {
position: absolute;
top: 0px; /* Abstand zum oberen Fensterrand */
width: 100%; /* Blockbreite */
height: 70px; /* Blockhöhe */
padding: 0; /* Interpretation Boxmodell! */
background-color: #ffffff;
border: 1px solid #000000;
overflow: hidden; /* Scrollbalken unterbinden */
z-index: 5;
}
#oben .inhaltDiv {
margin: 10px; /* Abstand des Inhalts zum Blockrand */
}
#nav {
position: absolute;
top: 71px; /* Abstand zum oberen Fensterrand */
width: 100%; /* Blockbreite */
height: 25px; /* Blockhöhe */
padding: 0; /* Interpretation Boxmodell! */
background-color: #ffffff;
border: 1px solid #000000;
overflow: hidden; /* Scrollbalken unterbinden */
z-index: 4;
}
* html #nav{ top: 69px;} /* Filter für IE wg. Boxmodell */
#nav0 {
position: absolute;
top: 97px; /* Abstand zum oberen Fensterrand */
left: 16px; /* Abstand zum linken Fensterrand */
width: 108px; /* Blockbreite */
height: 75px; /* Blockhöhe */
padding: 0; /* Interpretation Boxmodell! */
overflow: hidden; /* Scrollbalken unterbinden */
}
#nav5 {
position: absolute;
top: 97px; /* Abstand zum oberen Fensterrand */
left: 67px; /* Abstand zum linken Fensterrand */
width: 108px; /* Blockbreite */
height: 150px; /* Blockhöhe */
padding: 0; /* Interpretation Boxmodell! */
overflow: hidden; /* Scrollbalken unterbinden */
}
#nav10 {
position: absolute;
top: 97px; /* Abstand zum oberen Fensterrand */
left: 181px; /* Abstand zum linken Fensterrand */
width: 108px; /* Blockbreite */
height: 150px; /* Blockhöhe */
padding: 0; /* Interpretation Boxmodell! */
overflow: hidden; /* Scrollbalken unterbinden */
}
* html #nav0, * html #nav5, * html #nav10{ top: 93px;} /* Filter für IE wg. Boxmodell */
#mitte {
position: absolute;
top: 97px; /* Abstand zum oberen Fensterrand */
bottom: 40px; /* Abstand zum unteren Fensterrand */
width: 100%; /* Blockbreite */
border: 1px solid #000000;
overflow: auto; /* Scrollbalken, falls notwendig */
z-index: 1;
}
/* Filter für IE mit Rahmen zum Abstandhalten */
* html #mitte{ top: 0;
bottom: 0;
height: 100%;
border-top: 94px solid #ffffff;
border-bottom: 40px solid #ffffff;}
#mitte .inhaltDiv {
margin: 15px; /* Abstand des Inhalts zum Blockrand */
}
#unten {
position: absolute;
bottom: 0 !important; /* Abstand zum unteren Fensterrand */
bottom: 0px; /* nur für IE */
width: 100%; /* Blockbreite */
height: 40px; /* Blockhöhe */
padding: 0; /* Interpretation Boxmodell! */
background-color: #dedede;
border: 1px solid #000000;
overflow: hidden; /* Scrollbalken unterbinden */
z-index: 3;
}
#unten .inhaltDiv {
margin: 15px; /* Abstand des Inhalts zum Blockrand */
line-height: 0px;
font-size: 11px;
}
Zu beachten ist bei dieser Variante, dass sich der IE im Quirksmode befinden muss. In deinem
Fall sollte nachstehender Doctype mit Prolog angegeben werden. Wegen eines Bugs wird der
IE durch den Prolog in den Quirksmode gesetzt.
HTML:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Ciao
Quaese
