zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden FF overflow Problem 3-spaltiges Layout

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 25.07.2006, 16:54
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.07.2006
Beiträge: 9
smartt befindet sich auf einem aufstrebenden Ast
Standard 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>
und folgendes CSS:

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;
}
Gruß, smartt
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 25.07.2006, 17:24
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.780
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 25.07.2006, 18:54
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.07.2006
Beiträge: 9
smartt befindet sich auf einem aufstrebenden Ast
Standard

Danke - Klappt! Darauf wär ich nie gekommen
Mit Zitat antworten
  #4 (permalink)  
Alt 26.07.2006, 17:01
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.07.2006
Beiträge: 9
smartt befindet sich auf einem aufstrebenden Ast
Standard

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>
und hier noch mein css

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;
}
woran liegt das nun wieder?

Gruß, smartt
Mit Zitat antworten
  #5 (permalink)  
Alt 26.07.2006, 17:37
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.780
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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?
Mit Zitat antworten
  #6 (permalink)  
Alt 26.07.2006, 17:57
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.07.2006
Beiträge: 9
smartt befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #7 (permalink)  
Alt 26.07.2006, 17:59
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.780
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Hast du' s ausprobiert?! Die Schriftgröße *ist* das Problem, da du mit em-Breiten arbeitest.

Und: ja, verwende einen Doctype!
Mit Zitat antworten
  #8 (permalink)  
Alt 26.07.2006, 18:05
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.07.2006
Beiträge: 9
smartt befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #9 (permalink)  
Alt 26.07.2006, 18:05
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.780
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Das Komma ist falsch.

Warum transitional? Mit oder ohne URI?
Wie wär's mit einem Link?
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 26.07.2006, 18:09
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.07.2006
Beiträge: 9
smartt befindet sich auf einem aufstrebenden Ast
Standard

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;
}
Gruß, smartt
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
3 spaltiges Layout - Problem mit Höhe felis CSS 2 25.02.2011 12:30
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
Layout Problem AndyTrendy CSS 6 02.08.2009 23:16
2 spaltiges layout problem danysahne1983 CSS 3 15.08.2006 15:48


Alle Zeitangaben in WEZ +2. Es ist jetzt 04:23 Uhr.