zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Hintergrundfarbe bis zum Boden

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 11.08.2005, 14:57
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.08.2005
Beiträge: 4
belorofon befindet sich auf einem aufstrebenden Ast
Standard Hintergrundfarbe bis zum Boden

Hallo Leute,

ich habe ein grundsätzliches CSS Problem. Ich habe schon gesucht und gemerkt, dass es eine einfache Lösung dafür nicht zu geben scheint.

Ich habe ein dreispaltiges Layout. Diese drei Spalten befinden sich in einem Hauptcontainer, der mir ein mittiges Layout sichern soll. Also einen Hintergrund der per body Tag generiert wird und darauf die eigentliche Webseite, die ca. 670 Pixel breit ist. Innerhalb dieser Breite befindet sich das dreispaltige Layout.

Das Problem.
Die linke Spalte hat eine andere Hintergrundfarbe, als der body Hintergrund. Diese Farbe wird aber nur bis zum Ende des Content (ein Menü) geführt. Danach kommt die Grundhintergrundfarbe wieder zum Vorschein. Sieht voll blöd aus. Zu sehen ist das hier:

http://www.dsl-user.de

Komischerweise funzt es mit dem IE. Also mal mit dem Firefox anschauen.
Könnt ihr mir einen Tip geben?

Danke!
__________________
Gruß,
Markus

http://www.dsl-user.de
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 11.08.2005, 15:21
Benutzer
neuer user
 
Registriert seit: 21.05.2005
Beiträge: 83
Finrod befindet sich auf einem aufstrebenden Ast
Standard

ist zwar gerade nicht relevant... aber statt
Code:
<body bgcolor="#FFFFFF">
nimm lieber
Code:
<body>
und dann in der css datei:
Code:
 body {background:#fff;}
nimm mal eine fest höhe bei #content

height:800px;
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 11.08.2005, 15:40
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 05.12.2004
Beiträge: 357
kippe befindet sich auf einem aufstrebenden Ast
Standard

Stichwort: "Faux Columns"
__________________
Gruß,
Sebastian
Mit Zitat antworten
  #4 (permalink)  
Alt 11.08.2005, 16:44
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 23.03.2005
Beiträge: 1.032
Swoop befindet sich auf einem aufstrebenden Ast
Standard

http://www.alistapart.com/articles/fauxcolumns

Zitat:
<div id="headermenu"></div>
und sowas will keiner sehen
__________________
Shibby.....

Mein Blog
Mit Zitat antworten
  #5 (permalink)  
Alt 11.08.2005, 19:31
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.08.2005
Beiträge: 4
belorofon befindet sich auf einem aufstrebenden Ast
Standard

Hallo Leute,

erstmal danke für Eure Tips. Klappt aber alles nicht. Ich habe nun gesehen, dass der Hauptcontainer nur bis unter den orangen Streifen geht. Dort hört er beim Firefox einfach auf. Ich kapier das nicht. Im IE geht er brav bis unten an den Rand. Versteht das jemand???
__________________
Gruß,
Markus

http://www.dsl-user.de
Mit Zitat antworten
  #6 (permalink)  
Alt 11.08.2005, 19:45
Benutzerbild von Dieter
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 12.09.2003
Beiträge: 3.635
Dieter sorgt für eine eindrucksvolle AtmosphäreDieter sorgt für eine eindrucksvolle Atmosphäre
Standard

Validier auch mal Deine Fehler (head abschliessen!) - vielleicht hängt es ja auch damit zusammen?
__________________
Informationen aus Koblenz-Metternich
-----------------------------------
"Wissen heißt, Fragen zu erwerben."
Mit Zitat antworten
  #7 (permalink)  
Alt 11.08.2005, 22:31
Neuer Benutzer
neuer user
 
Registriert seit: 11.08.2005
Beiträge: 16
Matti befindet sich auf einem aufstrebenden Ast
Standard Keine Kontrolle über Code

Hi,

ich hab' mir mal deinen Quelltext und -2- von den -3- (!) eingebundenen CSS-Dateien angeschaut.
Ich kenne TYPO3 nicht, glaube aber, dass dieses CMS den Code generiert und du nur bedingt Kontrolle darüber ausüben kannst.
Um den Fehler zu beheben müsste man sich tief in die Innereien von TYPO3 begeben oder die CSS-Dateien aufwändig prüfen und anpassen ...
Mein Tipp: Erstelle dein Layout zunächst außerhalb deines CMS (brücksichtige dabei die Hinweise der bisherigen Antworten) und binde dann die CSS-Datei in dein CMS ein.

Gruß Matti
Mit Zitat antworten
  #8 (permalink)  
Alt 11.08.2005, 22:49
Benutzerbild von Dieter
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 12.09.2003
Beiträge: 3.635
Dieter sorgt für eine eindrucksvolle AtmosphäreDieter sorgt für eine eindrucksvolle Atmosphäre
Standard

Es kann eigentlich nur so sein, dass Du Dein DIV für den umgebenden Container zu früh geschlossen hast!

Dein Quelltext ist allerdings aufgrund seiner Breite und seiner vielen Kommentare sehr schwer zu verfolgen - da solltest Du in eigenem Interesse mal nachbessern!
__________________
Informationen aus Koblenz-Metternich
-----------------------------------
"Wissen heißt, Fragen zu erwerben."
Mit Zitat antworten
  #9 (permalink)  
Alt 12.08.2005, 12:26
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.08.2005
Beiträge: 4
belorofon befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Dieter Krautkraemer
Es kann eigentlich nur so sein, dass Du Dein DIV für den umgebenden Container zu früh geschlossen hast!
Das ist ja definitiv nicht der Fall! Darum bin ich ja so ratlos. Der IE zeigt die Seite ja perfekt an. Ich habe testweise mal einen hellblauen Rahmen um den Hauptcontainer gelegt. Im IE alles paletti. Aber im Firefox geht der nur bis zum nächsten DIV Container. Hier nochmal ein bischen Code:
Code:
body {
	height: 100%;
	margin: 0;
	padding: 0;
	background: #0B1B58;
	color: #FFF;
	font: normal 12px verdana, geneva, arial, helvetica, sans-serif;
}

#container { 
         width:760px;margin:0px auto;text-align:left;background-color:#1C3651;
background: url(/fileadmin/assets/templates/main/res/backgroundpic.gif);
background-repeat:repeat-y;
border: 5pt solid #0000ff;
}


#header {
	height: 60px;
	width: 100%;
	margin: 0;
	border: 0;
	padding: 0;
}

#logo {
	float: left;
	width: 269px;
	margin: 5px;
	border: 0;
	padding: 0;
}

/* Platz fuer Werbung */
#werbung {
	float: left;
	background-color: #1C3651;
	height: 100%; 
}

/* Headermenu */
#headermenu {
	float: left;
	width: 100%; 
        height: 20px;
	padding: 3px 0 0 0;
	background-color: #F90;
	text-align: left;
}

#headermenu A {
	padding-right: 15px;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 11px;

	text-decoration: none;
	background-color: #F90; color:white;
 	font-weight: bold;
}

#headermenu A:hover {
	text-decoration: underline;
	background-color: #F90; color:navy;
}

#leftbox {
	float: left;
background: url(/fileadmin/assets/templates/main/res/background180.gif);
background-repeat:repeat-y;
border: 5pt solid #0000ff;
	padding: 0px;
	margin: 0px 0px 0px 0px;
	padding: 20px 0 0 0;
	margin: 0;
	border: 0;
	color: white;
	width: 180px;
}

#menu1 {
	width: 100%;

	margin: 0;
	border: 0;
	padding: 0;
}

#content {
	float: left;
background: url(/fileadmin/assets/templates/main/res/backgroundpic.gif);
background-repeat:repeat-y;
	width: 550px;
	margin: 0;
        height: 100%
	border: 0;
	padding: 10px;
}

#footer {
	float: left;
	width: 100%; height: 20px;
	background-color: #069; color: white;
	}
Und hier nochmal die Orginal Template Datei, die Typo3 benutzt.
Code:
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>
      Base template, header, menu, content and footer.
    </title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" href="res/layout.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="res/content.css" type="text/css" media="screen" />
  </head>
  <body>
<div id="container">

<div id="header">
<div id="logo">logo</div>
<div id="werbung">



Tag für Werbung
</p>
</div>

</div>

<div id="headermenu">


headermenu</p>
</div>



	<div id="leftbox">
	  <div id="menu1">
		<ul class="menu1-level1">
			<li class="menu1-level1-no">Menu item 1
			<li class="menu1-level1-no">Menu item 2
			<li class="menu1-level1-act">Menu item 3 (act)
				<ul class="menu1-level2">
					<li class="menu1-level2-no">Menu item 4
					<li class="menu1-level2-act">Menu item 5 (act)
				[/list]			
			<li class="menu1-level1-no">Menu item 6
		[/list]	  </div>
         </div>

	  


	<div id="content">
		

content</p>	
	</div>



	<div id="footer">
		

dsl-user.de 2005</p>
	</div>
</div>

  </body>
</html>
__________________
Gruß,
Markus

http://www.dsl-user.de
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 12.08.2005, 12:46
Benutzerbild von E|H
E|H E|H ist offline
body:hover{display:none;}
XHTMLforum-Kenner
 
Registriert seit: 27.01.2005
Beiträge: 1.325
E|H befindet sich auf einem aufstrebenden Ast
Standard

Der IE zeigt es falsch an, der FF richtig.

Wenn du alles floaten läßt, steht es natürlich unten aus dem container raus, da es aus dem Seitenfluß genommen wird.



</p> würde ich nur bei Absätzen verwenden.
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
preg_replace treibt mich in den Wahnsinn olik Serveradministration und serverseitige Scripte 14 30.03.2009 15:30
DIV bis GANZ unten burnZ CSS 5 27.07.2008 14:14
Hintergrundfarbe eines aktivierten Links fidel CSS 5 15.06.2006 03:18
css div container bis zum boden strecken hyperterminal CSS 5 14.05.2005 11:28
Box bis ganz an den Boden Zwacky CSS 4 01.01.2005 19:51


Alle Zeitangaben in WEZ +2. Es ist jetzt 20:26 Uhr.