Fester Header und Footer

[B-ellanna]

Hallo
Ich stehe für den Star Hack im IE6 total auf dem Schlauch.
Ich habe eine Seite angelegt, die mit dem FF gut ausschaut. Aber der IE6...
Hab mich an dem Beispiel hier orientiert:
http://aktuell.de.selfhtml.org/artikel/css/footer/#fixierte_navigation
Und dann aber doch die Navi wieder "entfixiert".

Unten ist das entsprechende CSS/Html, wie gesagt im FF super, aber die im Bsp verwendeten Star Hacks krieg ich irgenwie nciht richtig übertragen.
Was muß ich denn machen, damit das klappt?
Ich hab schon an den top bottom... Werten rumgespielt sowie mal width 50% ausprobiert und noch an einiges anderes. Das sieht am Ende auch halbwegs nach was aus, aber dann ist die Scrollbarkeit aber total weg?!? Und wenn ich für "Inhalt" alles angepasst hab, und danach die Navi angehe, hüpft der Inhalt sonstwohin.

Der IE6 treibt mich sozusagen gerade in den Wahnsinn. (Die anderen IEs hab ich nur noch nicht ausprobiert, sonst würden die das wohl auch tun...)
Noch ne Nebenfrage, wie bekommt man den IE dazu PNGs so wie hier erwähnt transparent darzustellen, das seh ich dem Bsp leider nicht an...

Ich hoffe auf eure Hilfe.

body {  
    position:absolute;  
    color:/*Text*/#553300/*braun*/;  
    background: #FFFF99/*hellgelb*/;  
    font-family: 'Times New Roman', Times, serif;  
}  
  
html, body {  
    top:0; left:0; right:0;  
    min-height:100%;  
    margin:0;  
    padding:0;  
    width:100%;  
}  
  
#header_container {  
   position:fixed;  
 top:0px; left:0px; right:0px;  
 text-align: center;  
 padding-bottom: 6em;  
 background-image: url(./ranke.png);  
 background-repeat: repeat-x;  
 z-index:3;  
   border: 1px red solid;  
}  
  
#header {  
    position:absolute;  
    top:0; left:0; right:0; bottom:0;  
    z-index:3;  
    margin:0em 0 1.25em 0; /*Außenabstand*/  
    padding:0.2em; /*Innenabstand*/ /*oben rechts unten links*/  
    background: url(./head_hell.png) no-repeat center;  
    border: 1px solid blue;  
  
}  
  
#startimage {  
 z-index:1;  
 position: fixed;  
 bottom: 3em; left: 2.5em;  
 width: 8em;  
 height: 15em;  
 background-image: url(./wappenfoto.gif);  
 background-repeat:no-repeat; background-position:center center;  
  
}  
  
#Navigation {  
    font-size: 1.0em;  
    float: left;  
    width: 9em;  
    margin: 7.5em 0 2.5em 2.5em; /*Außenabstand*/  
    padding: 0; /*Innenabstand*/ /*oben rechts unten links*/  
    color:#553300/*braun*/;  
    background-color: #FFFF99/*hellgelb*/;  
    text-align: center;  
    border:1px solid black;  
}  
  
#Inhalt {  
    font-size: 1.0em;  
    margin: 7.5em 6.5em 2.5em 19.5em; /*oben rechts unten links*/  
    padding: 0 2.5em 2.5em 2.5em;  
    text-align: justify; /*Blocksatz*/  
    border:1px solid black;  
    z-index:2;  
}  
  
#footer_container {  
    position:fixed;  
    bottom:0; left:0; right:0;  
    text-align:center;  
    margin:0;  
    height:3.5em;  
    z-index:3;  
    background-image: url(./ranke_fuss.png);  
  background-repeat:repeat-x; background-position: bottom;  
  border: red 1px solid;  
}  
  
#footer {  
    position:absolute;  
    top:2em; left:0; right:0; bottom:0;  
    z-index:3;  
    color: #FFFF99/*hellgelb*/;  
    border: blue 1px solid;  
}  
  
#Navigation li {  
    list-style: none;  
    margin: 0; padding: 0; /*oben rechts unten links*/  
}  
  
#Navigation a, span {  
    display:block;  
    margin: 0; /*Außenabstand*/  
    padding: 0; /*Innenabstand*/ /*oben rechts unten links*/  
    width: 120px;  
    height:45px;  
    text-decoration: none;  
    font-weight: bold;  
    color:/*Text*/ #553300/*braun*/;  
    background: #FFFF99/*hellgelb*/ url(./parchment_off_old.gif) no-repeat center; /*Hintergrundbild*/  
    border:1px dashed black;  
}  
  
#Navigation a:hover, span {  
    background: #FFFF99/*hellgelb*/ url(./parchment_on_old.gif) no-repeat center; /*Hintergrundbild*/  
}  
  
/* Nur für den MSIE */  
  
* html, * html body {  
    overflow:hidden;  
    bottom:0;  
    height:100%;  
}  
  
* html #header_container, * html #footer_container {  
    position:absolute;  
    width:100%;  
    padding-right:16px;  
}  
  
* html #Navigation {  
    position:absolute;  
}  
  
* html #header,* html #footer {  
    height:100%;  
    position:static;  
}  
  
* html #Inhalt {  
    position:absolute;  
    top:0; bottom:0; left:0; right:0;  
    height:100%;  
    width:100%;  
    overflow:auto;  
    margin:0;  
}  
}  
/* Der IE soll das Element breiter darstellen, da margin  
   und padding hier von der Breite abgezogen werden! */  
  
* html #Navigation {  
    margin:0;  
    width:9em;  
}  
#startimage {  
 z-index:10;  
 position: absolute;  
 bottom: 3em; left: 2.5em;  
 width: 8em;  
 height: 15em;  
 background-image: url(./wappenfoto.gif);  
 background-repeat: no-repeat center;  
 background-position: left top;  
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  
<html>  
<head>  
  
<link rel="stylesheet" type="text/css" href="./bilder/maus_fix.css">  
<link rel="shortcut icon" href="favicon.ico">  
<title>Mus Rusticus</title>  
  
<meta name="description" content="startseite">  
<meta name="author" content="Bellanna">  
<meta name="keywords" content="Stichworte">  
<meta name="generator" content="Bluefish 1.0.7">  
</head>  
  
<body>  
<div id="header_container">  
 <h1 id="header">&nbsp;</h1>  
</div>  
 <ul id="Navigation">  
     <li><a href="termine.htm">Kalendarium</a></li>  
     <li><a href="angebot.htm">Angebot f&uuml;r Veranstalter</a></li>  
     <li><a href="gefolge.htm">Gefolge</a></li>  
     <li><a href="bilder.htm">Galerie</a></li>  
     <li><a href="links.htm">Links</a></li>  
    <li><a href="intern.htm">Intern</a></li>  
     <li><a href="k_i.htm">Kontakt & Impressum</a></li>  
     <li><span>Startseite</span></li>  
 </ul>  
 <div id="Inhalt">  
    <h2>Sch&ouml;n, dass ihr hergefunden habt!</h2>  
  <img src="./bilder/fotologo.jpg" alt="Titel" />  
    <p class="textleft">BlablaText</p>  
   </div>  
<div id="footer_container">  
 <div id="footer">&copy; 2009  
   </div>  
</div>  
  
<div id="startimage">&nbsp;</div>  
  
</body>  
</html>  

[suit]

Noch ne Nebenfrage, wie bekommt man den IE dazu PNGs so wie hier erwähnt transparent darzustellen, das seh ich dem Bsp leider nicht an...

das wird im beispiel auch nicht gemacht "In diesem Beispiel wurde die nach oben erste Verschachtelungsmethode für den Internet Explorer gewählt, aus diesem Grund können für den IE (per CSS-Hack) auch die semi-transparenten PNG-Grafiken (welche vom IE nur mangelhaft unterstützt werden) problemlos gegen nicht-transparente JPG-Grafiken ausgetauscht werden, ohne dass es zu optischen Veränderungen kommt."

eine mögliche lösung wäre zb diese hier wobei ich eher dazu neige, dem ie6 indizierte transparenz zu verpassen - wer einen so alten browser verwendet, will[1] doch dass alles schrottig aussieht :p

[1] nein, nicht mein ernst - es gibt viele leute die dürfen ihren browser nicht tauschen oder updaten

[B-ellanna]

PNGs transparent

indizierte transparenz

Okay
Dann ab sofort nur GIFs.
Danke dafür, B-ellanna

[suit]

PNGs transparent
indizierte transparenz
Dann ab sofort nur GIFs.

das hab ich nicht gesagt

pngs mit indizierter transparenz bieten im vergleich zu gif kaum nachteile (die vorteile überwiegen sogar gewaltig) und können auch im ie6 fehlerfrei dargestellt werden

[B-ellanna]

pngs mit indizierter transparenz bieten im vergleich zu gif kaum nachteile (die vorteile überwiegen sogar gewaltig) und können auch im ie6 fehlerfrei dargestellt werden

Okay.
Gimp oder Inkskape können das? Wenn ja was muß ich für ne Anleitung ins Google geben?
Danke.
B-ellanna

[suit]

Gimp oder Inkskape können das?

Gimp -> Bild -> Modus -> Indiziert

[B-ellanna]

Gimp -> Bild -> Modus -> Indiziert

Super. Das schaut ja einfach aus :). Danke!

[B-ellanna]

Hallo ihr lieben Helferlein,

Nachtrag:
Ich habe die Meisten Positionierungen nun hinbekommen. Was wirklich noch ganz komisch ist, ist das die "Inhalt"Box viel zu breit dargestellt wird. Eigentlich hat sie ein right: 2.5em, aber sie ist viel breiter als der Bildschirm, und auch wesentlich breiter als der fixe Header/Footer. Hat das irgendwas mit dem Boxmodell Fehler im IE6 zu schaffen? Ich hab den Eindruck er addiert das angegebene left mit drauf. Wie bekomme ich einen Left und Right Abstand wie im FF, also ohne das die Box mysteriös breiter wird?

Verwirrte, hilfesuchende Grüße
B-ellanna

  
#Inhalt {  
    font-size: 1.0em;  
    margin: 7.5em 6.5em 2.5em 19.5em; /*oben rechts unten links*/  
    padding: 0 2.5em 2.5em 2.5em;  
    text-align: justify; /*Blocksatz*/  
    border:1px solid black;  
    z-index:2;  
}  
  
* html #Inhalt {  
    position:absolute;  
    top:7.5em; bottom:0; left:19.5em; right:2.5em;  
    height:100%;  
    width:100%;  
    overflow:auto;  
    margin:0;  
}  

[ChrisB]

Hi,

Was wirklich noch ganz komisch ist, ist das die "Inhalt"Box viel zu breit dargestellt wird. Eigentlich hat sie ein right: 2.5em, aber sie ist viel breiter als der Bildschirm, und auch wesentlich breiter als der fixe Header/Footer. Hat das irgendwas mit dem Boxmodell Fehler im IE6 zu schaffen?

Hoechstens mit seiner Abwesenheit im vorliegenden Falle.

* html #Inhalt {
    position:absolute;
    top:7.5em; bottom:0; left:19.5em; right:2.5em;
    width:100%;

Ich hab den Eindruck er addiert das angegebene left mit drauf.

19.5em von links positioniert, und mit 100% Breite - 100% der Breite des umgebenden Elements.

Die Masze eines Elementes aus Angaben fuer zwei gegenueberliegende Koordinaten absoluter Positionierung herzuleiten, beherrscht der IE < 7 nicht. Die right-Angabe wird also einfach ignoriert.

MfG ChrisB

[B-ellanna]

Hallöchen,

19.5em von links positioniert, und mit 100% Breite - 100% der Breite des umgebenden Elements.

Aha, Lieben Dank für die Info.
Muß ich also um meine Inhaltsbox noch eine Box legen? Geht das nciht eleganter?
Danke
B-ellanna

[B-ellanna]

Hallöchen.
Ich habe mir eure Tipps angeguckt, und, soweit sie sich mir erschlossen haben, umgesetzt.
Es sieht im IE6 leider immer noch nicht richtig aus. Die Elemente hab ich alle dahin bekommen wo ich sie gerne hätte. Ebenso ist der Inhalt durch die width: 50em; Angabe so breit wie ich es mir vorgestellt habe. Das Problem sieht man aber sehr gut, wenn man sich den Unterschied zwischen FF und IE<7(?) anschaut. Es kommt ein Scrollbalken in das Inhaltsdiv, welcher nicht über die komplette Seitenhöhe verläuft, sondern  nur im Inhaltsdiv. Außerdem kann man zwar runterscrollen, aber nur mit dem Mausrad, der Pfeil ist unter meinem Footer versteckt.
mit einem Margin-bottom: 7em; passiert leider auch nichts.
Im FF geht alles sehr gut, wie gesagt, machen mir nur die Star Hacks für den IE Probleme.
Hier jetzt also die Webadresse meines Projekts: http://www.mus-rusticus.de/angebot.htm und das entsprechende css.
Vielen Dank fürs durchgucken. Ich freu mich schon auf eure Tipps!
B-ellanna