nicht angemeldet
Dreispaltiges Layout mit festem Heater / Fooder
Hallo Post!
Ich schraube jetzt schon den ganzen nachmittag an einem neuen Design.
- Header (fixiert)
- Dreispaltiges Layout mit CSS
- Fooder (fixiert)
Im IE sieht es in etwa schon so aus, wie es werden soll, im FF rutscht ein Teil der drei Spalten unter den fixierten Header. Im IE ist zusätzlich der Fooder nicht zu bewegen, sich an den unteren Rand des Fensters zu bewegen.
Hier mein Problem:
Das zugehörige CSS:
/* ------------ Alles auf Null setzen für Internet Explorer ----------------------------- */
body
{
margin:0px;
padding:0px;
width:100%;
font-size: 100.01%;
}
/* --------- Footer: Angaben nur für den Internet Explorer mittels Star-HTML-Hack ------------- */
* html, * html body {
overflow:hidden;
}
* html container {
overflow: auto;
}
/* ---------- Kopfzeile (head) und Hauptteil (container) um Kopfzeile zu fixieren --------- */
#head {
width: 100%;
position: fixed;
top:0px; left:0px; right:0px;
background:#efefef;
text-align: left;
margin: 0px
padding: 0px;
background-color: #FFFFFF
}
/* ---------------- Kopfzeile: für Internet Explorer --------------------------- */
#container
{
margin-top: 0px;
padding-top: 0px;
padding-bottom: 20px;
padding-left: 0;
}
/* ----------------- Leiste "Du bist hier" ------------------------------------- */
.leiste {
width: 100%;
font-size: 10px;
color: #FFF;
font-family: verdana, sans-serifarial, helvetica, tahoma;
vertical-align: middle;
height: 16px;
border-bottom: solid 0px #FFF;
margin: 0px;
padding: 0px;
padding-left: 5px;
background-image: url(images/start/button.jpg);
background-repeat: repeat-x;
clear: both;
}
.leiste a, .leiste a:visited , .leiste a:active, .leiste a:hover {
color: #FFF;
background:transparent;
font-size: 10px;
font-family: verdana, sans-serifarial, helvetica, tahoma;
text-decoration: none;
}
/* ---------------- Einstellungen Schriften Hauptteil ------------------------------ */
h1 {
font-family: verdana, sans-serif, arial, helvetica, tahoma;
color:#FF8D02;
margin-bottom:20px;
letter-spacing:0px;
font-size: 19px;
border-bottom:dashed 1px #FF8D02;
padding-bottom:4px;font-style:italic;
}
p {
margin: 0px;
font-family: verdana, sans-serif, arial, helvetica, tahoma;
font-size:12px;
text-align: justify;
}
blockquote {
padding: 0 0 0 94px;
background: url(images/quote.gif) no-repeat;
font: italic small Times,Georgia,verdana, helvetiva, "Times New Roman", serif;
font-size: 22px;
height:80px
}
/* ----------- Kasten Navigation (links) Einstellungen -------------------------------------*/
div#navi {
clear: both;
float: left;
width: 150px;
background-color: #000000;
}
a.navi {
width: 140px;
margin-top: 4px;
color: #fff;
background-color: #666;
display: block;
font-family: verdana, sans-serif, arial, helvetica, tahoma;
font-size: 12px;
font-weight:bold;
}
a.navi:link {
color:#ccc;
background-color:transparent;
border:1px solid #000;
text-decoration:none;
}
a.navi:visited {
color:#ccc;
background-color:transparent;
border:1px solid #000;
text-decoration:none;
}
a.navi:hover {
color:#fff;
background-color:transparent;
border:1px solid #fff;
text-decoration:none;
}
a.navi:active {
color:#fff;
background-color:transparent;
border:1px solid #fff;
text-decoration:none;
}
div.navi {
color:#000;
background-color:#ccc;
border:1px solid #000;
width:200px;
text-align:center;
padding:10px;
}
/* -------- Kasten Neuigkeiten (rechts) Einstellungen -----------------------------------------*/
div#news {
float: right;
width: 150px;
background-color: #FFFFFF;
}
h1.news {
font-family: verdana, sans-serif, arial, helvetica, tahoma;
color:#FF8D02;
margin-bottom:20px;
border: none;
letter-spacing:0px;
font-size: 15px;
padding-bottom:4px;font-style:italic;
}
/* -------- Kasten Hauptteil Einstellungen ---------------------------------------------------*/
div#main {
padding: 0px 160px 5px 160px;
margin: 0px;
background-color: #FFFFFF;
}
/* -------------- Footer Einstellungen -----------------------------------------------------*/
#footer {
position:fixed;
bottom:0px;
width:100%;
color: #fff;
vertical-align: middle;
height: 20px;
border-bottom: solid 0px #fff;
margin: 0px;
padding: 0px;
padding-left: 5px;
background-image: url(images/start/button.jpg);
background-repeat: repeat-x;
}
#footer p {
font-size: 12px;
font-family: verdana, sans-serif, arial, helvetica, tahoma;
text-align:center;
}
-
Hi,
Ich schraube jetzt schon den ganzen nachmittag an einem neuen Design.
- Header (fixiert)
- Dreispaltiges Layout mit CSS
- Fooder (fixiert)
Was gibt's denn in letzterem zu Futtern?
(Dass du das Wort in den CSS-Kommentaren und bei Vergabe der ID ploetzlich richtig schreiben kannst, legt vielleicht die Frage nahe - wo hast du den Code denn weggefunden ...?)Im IE sieht es in etwa schon so aus, wie es werden soll, im FF rutscht ein Teil der drei Spalten unter den fixierten Header. Im IE ist zusätzlich der Fooder nicht zu bewegen, sich an den unteren Rand des Fensters zu bewegen.
Und, hast du 'ne Frage?
MfG ChrisB
--
„This is the author's opinion, not necessarily that of Starbucks.“-
Hallo!
Hi,
Was gibt's denn in letzterem zu Futtern?
(Dass du das Wort in den CSS-Kommentaren und bei Vergabe der ID ploetzlich richtig schreiben kannst, legt vielleicht die Frage nahe - wo hast du den Code denn weggefunden ...?)Den Code hab ich nicht "weggefunden", der fixierte Footer/Header sind in Anlehnung an das Tut hier unter aktuelles.selfhtml.org selbst geschrieben, daraufhin wollte ich aus dem Hauptteil ein dreispaltiges Layout machen, was nicht hinhaut.
Im IE sieht es in etwa schon so aus, wie es werden soll, im FF rutscht ein Teil der drei Spalten unter den fixierten Header. Im IE ist zusätzlich der Fooder nicht zu bewegen, sich an den unteren Rand des Fensters zu bewegen.
Und, hast du 'ne Frage?
Ja.
1.) Wie schaffe ich es, dass der Mittelteil, also meine drei Spalten, unter den Header fließt, und nicht wie jetzt im FF halb verdeckt wird?
2.) Wie erkläre ich dem IE, dass der Footer ans untere Ende des Bildschirms gehört?
Danke für eure Mithilfe,
Gruß, Markus
-
Hi,
1.) Wie schaffe ich es, dass der Mittelteil, also meine drei Spalten, unter den Header fließt, und nicht wie jetzt im FF halb verdeckt wird?
Wenn du den Header aus dem Fluss nimmst, musst du den nachfolgenden Elementen natuerlich beibringen, dass sie in dem Vakuum, welches er im Fluss hinterlaesst, einen gewissen Abstand halten sollen.
Abstaende macht man mit margin/padding.2.) Wie erkläre ich dem IE, dass der Footer ans untere Ende des Bildschirms gehört?
Wie erklaerst du mir, was du meinst?
Im IE 7 sehe ich ihn am unteren Rand des Viewports, wie anhand der FOrmatierung ja auch zu erwarten.MfG ChrisB
--
„This is the author's opinion, not necessarily that of Starbucks.“-
Wenn du den Header aus dem Fluss nimmst, musst du den nachfolgenden Elementen natuerlich beibringen, dass sie in dem Vakuum, welches er im Fluss hinterlaesst, einen gewissen Abstand halten sollen.
Abstaende macht man mit margin/padding.margin / padding sind bekannt, spiele ich jetzt aber mit den Werten margin-top bzw. padding-top sieht es im FF wie gewünscht aus, Im IE, in dem es ja jetzt "richtig" aussieht entsteht dann ein großer Abstand zwischen Header und Hauptteil...
2.) Wie erkläre ich dem IE, dass der Footer ans untere Ende des Bildschirms gehört?
Wie erklaerst du mir, was du meinst?
Im IE 7 sehe ich ihn am unteren Rand des Viewports, wie anhand der FOrmatierung ja auch zu erwarten.Stelle gerade fest, dass auf dieser Maschine noch IE6 läuft. Dort tritt das Problem auf, dass der Footer ungefähr in der Mitte des Bildschirms hängt.
Gruß & Dank schon mal,
Markus
-
Hi,
Stelle gerade fest, dass auf dieser Maschine noch IE6 läuft.
Dass der position:fixed noch nicht unterstuetzt, haettest du ueberall nachlesen koennen. Fuer moegliche Workarounds oder Fallbacks gilt das gleiche.
MfG ChrisB
--
„This is the author's opinion, not necessarily that of Starbucks.“
-
-
-