|
|||
FF overflow Problem 3-spaltiges Layout
Hallo Leute,
ich möchte ein 3-spaltiges Layout(s.u. #navigation, #content, #meinmenu) umsetzen, wobei die 3 Spalten gleich hoch sein sollen (da mit HG-Farbe gefüllt). Bei Überlauf, soll der entsprechende Container größer werden, und natürlich auch die beiden anderen Container (keine Scrollbalken). Im IE funktioniert das einwandfrei, nur im Firefox wird bei fest definierter Höhe der Container in px der Überlauf abgeschnitten. Bei Prozentangabe 100% zeigt er zwar den Überlauf an, allerdings ausserhalb des Containers, ausserdem ist der Container bei wenig Inhalt zu groß. Ich hoffe mir kann jemand helfen, das zu lösen. Bisher habe ich folgenden HTML-Code: Code:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Unbenanntes Dokument</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body class="aussen"> <div id="site"> <div class="oben"> <div class="header"><img src="images/header.jpg" /></div> </div> <div id="mitte"> <div id="main"> <div id="navigation">Inhalt von Navigation</div> <div id="content">irgendwelcher Content. Kann auch länger sein! </div> <div id="meinmenu">personaliesierbarer Inhalt</div> </div> </div> <div class="unten"> <div class="footer">Uhrzeit, Druckenbutton, etc</div> </div> <div class="rest"> <div class="rest-mitte"></div> </div> </div> </body> </html> Code:
HTML, body { height: 100%; } BODY { margin: 0em; color: #000000; font-family: Arial, Helvetica, sans-serif; font-size: 0.75em; height: 100%; text-align: center; } /* #################### Hauptlayout #####################*/ .site { width: 100%; height: 100%; text-align: center; } .oben { width: 100%; background: url(images/layout/tab-oben.gif); text-align: center; } .oben .header { width: 79.8em; height: 8.2em; margin: auto; background-color: #FF6600; } .oben .header IMG{ width: 100%; } div#mitte { width: 100%; float: left; min-height: none; height: auto; overflow: visible; } div#main { width: 79.8em; margin: auto; height: 100%; overflow: visible; } div#navigation { width: 13.25em; height: 100%; min-height: 100%; background: #D7D7D7; overflow: visible; float: left; } div#content { width: 53.3em; list-style: url(images/verlauf_kopf_fuss_leiste.jpg); background: #EBEBEB; height: 100%; min-height: 100%; overflow: visible; float: left; } div#meinmenu { width: 13.24em; height: 100%; min-height: 100%; background: #fafafa; float: left; } .unten { width: 100%; float: left; background: #D7D7D7; } .unten .footer { width: 79.8em; margin: auto; background: #FF6600; } .rest { width: 100%; height: auto; float: left; background: #EBEBEB; } .rest .rest-mitte { width: 79.8em; height: auto; margin: auto; background: #999999; } /* ############## Characters ###############*/ .sectionheader { background-color: #4E4A49; color: White; text-transform: uppercase; } /* ############## Mein Menü ###############*/ .mein_menu .menu{ width: 100%; } .mein_menu .menu .sectionheader { padding-left: 8px; } |
Sponsored Links |
|
|||
Schau dir dieses Beispiel an:
http://www.cssplay.co.uk/layouts/3cols.html Damit kannst du gleichlange Spalten auch mit em-Breiten umsetzen. Ansonsten gibt's da noch equal height columns. |
Sponsored Links |
|
|||
ich musste leider gerade feststellen, das im IE die linke und die rechte Spalte zu klein werden (d.h. die mittlere Spalte wird zu groß), wenn man "Ansicht->Schriftart->größer" auswählt. Im Firefox funktioniert das wunderbar.
hier mein aktueller Quelltext Code:
<div id="site"> <div class="oben"> <div class="header"><img src="mages/header.jpg" /></div> </div> <div id="main"> <div id="content"> <div id="navigation">Inhalt von Navigation</div> <div id="meinmenu">personaliesierbarer Inhalt</div> <p>irgendwelcher Content. Kann auch länger sein! </p> <div class="clear"></div> </div> </div> <div class="unten"> <div class="footer">Uhrzeit, Druckenbutton, etc</div> </div> <div class="rest"> <div class="rest-mitte"></div> </div> </div> Code:
/* #################### Hauptlayout #####################*/ .site { width: 100%; height: 100%; text-align: center; } .oben { width: 100%; background: url(images/layout/tab-oben.gif); text-align: center; } .oben .header { width: 79.8em; height: 8.2em; margin: auto; background-color: #FF6600; } .oben .header IMG{ width: 100%; } #main { width: 79.8em; margin: auto; } #content { position:relative; display: block; list-style: url(images/verlauf_kopf_fuss_leiste.jpg); background: #EBEBEB; overflow: visible; float: left; border-left: 13.25em solid #D7D7D7; border-right: 13.25em solid #fafafa; } * html #content {display:inline-block;} /* * #content{ width: 79.8em;}*/ #navigation { position:relative; display: inline; width: 13.25em; margin-left: -13.25em; float: left; } * html #navigation {width:13.25em;} #meinmenu { /* ein hundertstel kleiner als navigation, weil manchmal Umbruch im IE*/ position:relative; display: inline; width: 13.24em; margin-right: -13.24em; float: right; } .clear {clear:both;height:1px;overflow:hidden;} .unten { width: 100%; float: left; background: #D7D7D7; } .unten .footer { width: 79.8em; margin: auto; background: #FF6600; } .rest { width: 100%; height: auto; float: left; background: #EBEBEB; } .rest .rest-mitte { width: 79.8em; height: auto; margin: auto; background: #999999; } Gruß, smartt |
|
|||
Der IE hat einen Rundungsfehler.
Verwende body {font-size:100.01%} und setz die gewünschte Schriftgröße dann in den einzelnen Elementen. http://css-technik.de/details/2/5/CSS-Browser-Bugs.htm Welchen Doctype verwendest du? In deinen Codebeispielen fehlt er bisher ganz. Du hast im HTML eine id="site", im CSS sprichst du aber eine Klasse .site an. Willst du das header-Bild wirklich vom Browser skalieren lassen? |
|
|||
Die Schriftgröße ist nicht das Problem. Die margins von #content werden kleiner, bzw. rutschen links und rechts aus dem Browser, so das die mittlere Spalte zu groß ist und man den Text in #navigation und #meinmenu nicht komplett lesen kann.
im Moment verwende ich gar keinen Doctype, da ich einen Ansatz im Quirksmode getestet habe. Sollte ich wohl mal setzen. Ja, die gesamte Site soll sich skalieren lassen - Barrierefreiheit. .site hab ich in #site geändert, stimmt. Hatte aber keine Auswirkungen Danke und Gruß, smartt |
|
|||
hab die Schriftgröße im body jetzt auf 100,01% gesetzt. Der Erste Buchstabe des Textes in #navigation, bzw. der letzte in #meinmenu wird immer noch abgeschnitten. Doctype hab ich auf html 4.01 transitional gesetzt.
Gruß, smartt |
|
|||
hier nochmal das gesamte css, hatte vorhin was weggelassen damits nicht so viel wird und weil ich dachte das es keine Rolle spielt:
Code:
HTML, body { height: 100%; margin:0px; padding:0px; } BODY { margin: 0em; color: #000000; font-family: Arial, Helvetica, sans-serif; /* enspricht ==> font-size: 12px; hier müssen em angegeben werden, damit der IE skaliert */ /*font-size: 0.75em;*/ font-size:100.01% height: 100%; text-align: center; } /* * * * * * * * * * * * * * * * * * * * * * * * Umrechnung von px in em: (Basis vom body): 12px = 1em Beispiel: 18px = 1.5em * * * * * * * * * * * * * * * * * * * * * * * */ DIV { } /* #################### Hauptlayout #####################*/ #site { width: 100%; height: 100%; text-align: center; } .oben { width: 100%; background: url(images/layout/tab-oben.gif); text-align: center; } .oben .header { width: 79.8em; height: 8.2em; margin: auto; background-color: #FF6600; } .oben .header IMG{ width: 100%; } #main { width: 79.8em; margin: auto; } #content { position:relative; display: block; list-style: url(images/verlauf_kopf_fuss_leiste.jpg); background: #EBEBEB; overflow: visible; /*float: left;*/ border-left: 13.25em solid #D7D7D7; border-right: 13.24em solid #fafafa; } * html #content {display:inline-block;} /* * #content{ width: 79.8em;}*/ #navigation { position:relative; display: inline; width: 13.25em; margin-left: -13.25em; float: left; } /* * html #navigation {width:13.25em;}*/ #meinmenu { /* ein hundertstel kleiner als navigation, weil manchmal Umbruch im IE*/ position:relative; display: inline; width: 13.24em; margin-right: -13.24em; float: right; } .clear {clear:both;height:1px;overflow:hidden;} .unten { width: 100%; float: left; background: #D7D7D7; } .unten .footer { width: 79.8em; margin: auto; background: #FF6600; } .rest { width: 100%; height: auto; float: left; background: #EBEBEB; } .rest .rest-mitte { width: 79.8em; height: auto; margin: auto; background: #999999; } /* ############## Schriften ###############*/ .schrift_1{ font-size: 120%; line-height: 180%; font-weight: bold; } .schrift_2{ font-size: 80%; line-height: 120%; } /* ############## Characters ###############*/ .sectionheader { background-color: #4E4A49; color: White; text-transform: uppercase; } /* ############## Mein Menü ###############*/ .mein_menu .menu{ width: 100%; } .mein_menu .menu .sectionheader { padding-left: 8px; } |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Problem beim 2 Layout Homepage | arek-1 | CSS | 13 | 03.08.2010 12:27 |
Problem mit overflow, Navigation verschoben... | buemplizer | CSS | 9 | 09.09.2009 10:43 |
3 spaltiges Layout, die 100.000te | Speedoo | CSS | 21 | 18.08.2006 11:13 |
2 spaltiges layout problem | danysahne1983 | CSS | 3 | 15.08.2006 15:48 |
Layout Problem ! | Tim25 | CSS | 2 | 04.07.2005 13:35 |