| Autor |
Nachricht |
DonRollo
Threadersteller
Dabei seit: 04.11.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 04.11.2008 17:48
Titel CSS, height 100% und der Mist mit Browserverschiedenheiten |
  |
|
Hallo zusammen!
Wühle mich seit Tagen durch die Foren des Internets um mein CSS-Formatierungsproblem zu lösen. Leider tauschen immer wieder neue Probleme auf. Jetzt weiß ich hier nicht mehr weiter: Es geht mal wieder um CSS und 100% Höhe.
So soll es optimaler Weise aussehen: (In IE gehts)
http://crm.event-4you.de/ie-super.jpg
Hier mal die Struktur der HTMl-Seite:
| Code: |
<body>
<div id="container-page">
<div id="container-head">
</div>
<div id="container-foot">
</div>
<div id="wrapper" class="clearfix">
<div id="container-menu">
</div>
<div id="container-content">
</div>
</div>
</div>
</body>
|
Im Internet Explorer habe ich die Höhe des wrappers schön auf die Seitenhöhe bekommen:
| Code: |
height: expression(document.body.clientHeight - (260) + "px");
|
Bei Firefox und Opera geht das allerdings nur mit einer Pixelangabe:
Das macht das ganze natürlich leider etwas unflexibel und sieht bei größeren Monitor-Auflösungen unschön aus:
http://crm.event-4you.de/moz-falsch0.jpg
Gebe ich nun lässt der Firefox den Text einfach unten rauslaufen.
http://crm.event-4you.de/moz-falsch.jpg
Opera machts noch komischer:
http://crm.event-4you.de/opera-falsch.jpg
Hier der komplette CSS-Code:
| Code: |
html, body {
margin: 0;
padding: 0;
height: 100%;
background-image: url('images/bg.jpg') ;
background-attachment: fixed;
font-family: Tahoma, Arial, Verdana, Helvetica, sans-serif;
font-size: 10pt;,
color: black;
overflow:hidden;
}
div {
margin: 0;
padding: 0;
}
/* ==================== Definition für gesamte Seite */
#container-page {
width: 1024px ;
background-image: url('images/container.jpg') ;
background-repeat: repeat-y ;
position: relative ;
min-height: 100%;
height: auto !important;
height: 100%;
padding-left: 15px ;
margin-right: auto ;
margin-left: auto ;
}
/* ==================== Definition für Header */
#container-head {
width: 100%;
height: 190px;
background-image: url('images/head.jpg') ;
background-repeat:no-repeat;
padding-left: 15px ;
padding-top: 16px ;
font-size: 10px;
}
/* ==================== Definition des Menüs */
#container-menu {
float: left ;
width: 145px ;
padding-bottom: 25px ;
padding-left: 10px ;
margin-left: 10px;
}
/* ==================== Definition für den Inhalt */
#container-content {
background-image: url('images/vl.gif') ;
background-position: left ;
background-repeat: repeat-y ;
width: 790px ;
max-height: 90%;
padding-bottom: 25px ;
padding-left: 10px ;
padding-right: 10px ;
overflow:auto;
}
/* ==================== Definition für Footer */
#container-foot {
background-image: url('images/foot.jpg') ;
background-repeat:no-repeat;
background-position:40px;
width: 100%;
position: absolute;
bottom: 0 !important;
bottom: -1px;
height: 25px;
margin-left: -40px ;
padding-left: 40px ;
}
/* ==================== Definition für Wrapper */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix{
display: block;
height: expression(document.body.clientHeight - (260) + "px");
height: 100%;
}
|
WAS läuft hier falsch?? Wie bekomme ich auch in Firefox und Opera das DIV container-content ungefähr auf die passende Höhe??
|
|
| |
  |
 |
zweitaccount
Dabei seit: 25.01.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 04.11.2008 18:50
Titel
|
|
|
Hi,
deinem Code fehlt auf den ersten Blick z.B. der Doctype etc.
Aber wenn Du sowieso Javascript für den IE6 einsetzt, kannst
Du die restlichen Browser mit einer ziemlich simplen CSS-
Konstruktion bedienen:
Greisliges Boxmodell-Dummy
Den albernen IE6 gibts Du dann per C-Comment noch ein Script
für das Layout mit.
Gruß
Zweitaccount
|
|
| |
|
|
|
Anzeige
|
|
|
DonRollo
Threadersteller
Dabei seit: 04.11.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 04.11.2008 19:02
Titel
|
|
|
Den Doctype hatte ich hier mal rausgekürzt.
Ist aber vorhanden:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Für IE benutze ich übrigens eine andere css datei mittels:
| Code: |
<!--[if IE]>
<style type="text/css">@import url(../ie.css);</style>
<![endif]-->
|
Zuletzt bearbeitet von DonRollo am Di 04.11.2008 19:05, insgesamt 1-mal bearbeitet
|
|
| |
|
|
status4
Dabei seit: 01.10.2008
Ort: -
Alter: -
Geschlecht: -
|
|
| |
|
|
DonRollo
Threadersteller
Dabei seit: 04.11.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 04.11.2008 19:33
Titel
|
|
|
Ja genau so in etwa soll das aussehen.
H E A D E R
Menü Content
F O O T E R
Das ganze dann allerdings zentriert in der Mitte und kein Scrollen der ganzen Seite (Header und Footer also dauerhaft sichtbar). Und das Menü soll beim scrollen des Contents natürlich feststehen und nicht mit nach oben verschwinden.
Bei deinem Link
http://www.cssplay.co.uk/layouts/bodyfix.html
ist es entweder zentriert und kein Menü ODER linksbündig und mit Menü.
Und genau da liegt mein Problem. Einzeln kein Problem. Aber zusammen gehts nicht so richtig.
Gruß
Roland
Zuletzt bearbeitet von DonRollo am Di 04.11.2008 19:34, insgesamt 2-mal bearbeitet
|
|
| |
|
|
status4
Dabei seit: 01.10.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 04.11.2008 19:36
Titel
|
|
|
Naja, das ist jetzt nicht wirklich ein Problem oder? Entweder du ergänzt bei dem einen das Menü oder beim anderen die Breite und Zentrierung. 
|
|
| |
|
|
SURE612
Dabei seit: 02.12.2005
Ort: Bärlin / CB
Alter: -
Geschlecht: 
|
Verfasst Di 04.11.2008 21:22
Titel
|
|
|
mach das ganze css nochmal neu
das is zuviel krams
mache doch einfach alles untereinander ohne position absolute
dafür mit width in %
z.B.
head: 10%
content: 10%
foot: 10%
dann im content 2 float divs mit height: 100%
overflow: auto;
fertig
|
|
| |
 |
|
zweitaccount
Dabei seit: 25.01.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 04.11.2008 22:29
Titel
|
|
|
Die Stu Nicholls Lösungen sind schon ein prima
Geschichte, leider basieren die halt auf den
Quirksmode vom IE. Was ist denn an meinem
Beispiel auszusetzen - außer das Du da noch
deine Grafik drüberklatschen mußt?
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
[CSS] Height hin, Height her - Größe von DIV's
Bildqualität unter 800x600... so ein mist
[printler macht mist] Tabelle zerschossen
css: min-height bei IE 6
Div 100% Height
div height 100%?
|
|
Willkommen auf dem Portal für Mediengestalter
