Zum Inhalt springen

height:100%; backgroundcolor wird nicht angezeigt

Erstellt am 3. November 2008 · 11 Antworten · letzte Antwort am 6. November 2008

Tags: HTML & CSS, Frage

chtypo ·

Ich suche schon eine lange Zeit und kommen einfach nicht hinter die Sache!
Ich habe folgender css-Ausschnitt:

body {
	margin: 0px auto auto;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: black;
	font-weight: normal;
	text-decoration: none;
	text-align: left;
	height: 100%;
	}

#d000 {
	position: relative;
	margin: 0px auto 0px auto;
	width: 759px;
        height: 100%;
	background-color: #FF6600;
}

Im DIV-Container #d000 wird die Spalte Normal ausgegeben und der Hintergrund sollte mit der entsprechenden Farbe angezeigt werden. Somit wächst der farbige Hintergrund mit der Menge des Inhalts.

Im TS-Script habe ich folgenden Code:

# ------ Doctype definieren --------------
config.doctype = xhtml_trans
config.xhtml_cleaning = all
config.htmlTag_langKey = de

Auf der Seite wird ausgegeben:

<html lang="de" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />

Leider fehlt die Hintergrundfarbe oder auch ein Hintergrundbild.

Wenn ich das CSS im TopStyle anschaue, wird mir der Hintergrund auch nur gezeigt wenn ich den Doctype auf HTML 4.0/4.01 Frameset oder auf HTML 4.0/4.01 Transitional setze.

Nur wie kann ich dennoch mit xhtml_trans dieses 100% zum anzeigen bringen. Ich sehe da wirklich nicht durch und wäre für einen einfachen Hinweis sehr dankbar.

chtypo ·

Kann mir da niemand einen Tipp geben, oder habe ich wieder eine wichtige Information vergessen?
Vielleicht noch einmal meine Frage: Wie kann ich mit "height:100%" arbeiten so dass der farbige Hintergrund auch bei XHTML sichtbar wird?

Unbekannter Benutzer ·

Mir ist nicht ganz klar was du willst. Grundsätzlich sollte (wenn dein div #d000 einen Inhalt hat) die Hintergrundfarbe auch angezeigt werden. Ich verstehe noch nicth den Sinn von height 100% dabei...

yahooooo ·

Sehe ich das richtig, dass Du eigentlich nur ein Spaltenlayout haben willst, bei dem die Spalten bzw deren Hintergrundfarbe bis an den unteren Seitenrand gehen sollen? Dann leg ein gekacheltes Hintergrundbild in den Body. Oder google mal nach 'faux columns'

chtypo ·

Im Grunde möchte ich nur, dass der "DIV #000" der ja abhängig von der Inhaltmenge grösser oder kleiner sein kann, immer vollständig mit einer Hintergrundfarbe hinterlegt ist. Aber eben einmal ist er grösser einmal kleiner. Somit Angaben mit fixer Höhe oder auch min-height funktionieren nicht.
Es ist mir auch klar, dass das Parent-Element als Referenz angezogen wird, darum habe ich auch beim body 100% gesetzt.
Es läuft ohne einen XHTML-DOCTYPE gesetzt, aber mit XHTML nicht. Somit denke ich, dass ich was nicht berücksichtigt habe und im meinem TS bezüglich DOCTYPE was ändern muss. Nur ich sehe auch mit der TS-Referenz nicht durch.
Sorry wenn ich unverständlich bin.

d.​walter ·

Also, es kann jetzt sein, dass ich total daneben liege, aber wenn du überhaupt nichts angibst, dann sollte das DIV doch immer so groß werden das der Inhalt komplett rein passt.

Wenn du jetzt dem DIV eine Hintergrundfarbe zuweist, dann ist ja auch das komplette DIV mit der Hintergrundfarbe gefüllt. Oder???

Daniel

chtypo ·

Verzeiht, ich muss weiter präzisieren: Der Text, die Menüs alles wird angezeigt. Alles geht. Nur die Hintergrundfarbe oder ein Hintergrundbild wird einfach ignoriert. Ich habe mit der "Web Developper" Toolbar die CSS kontrolliert und da ist das CSS richtig angezogen, Hintergrundfarbe drinn, wirklich alles ok. Nur mit dem Doctype XHTML wird die Farbe oder das Bild nicht angezeigt, wenn ich mit height:100% arbeite.

Unbekannter Benutzer ·

Kann man die URL mal sehen, bzw. kannst du mal den HTML-Code einer kompletten Seite posten, dann guck ich mir das mal an und kann mir selbst den Doctype ändern und sehen wie es sich verhält. Dann kann man da mehr zu sagen, denke ich.

chtypo ·

Vielen Dank für die Mühe!

<!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="de-DE" lang="de-DE">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<!-- 
	This website is powered by TYPO3 - inspiring people to share!
	TYPO3 is a free open source Content Management Framework initially created by Kasper Skaarhoj and licensed under GNU/GPL.
	TYPO3 is copyright 1998-2008 of Kasper Skaarhoj. Extensions are copyright of their respective owners.
	Information and contribution at http://typo3.com/ and http://typo3.org/
-->

	<link rel="stylesheet" type="text/css" href="typo3temp/stylesheet_2743b77a43.css" />
	<link rel="stylesheet" type="text/css" href="fileadmin/styles/M_dimension1_FF_B.css" />
	<link rel="stylesheet" type="text/css" href="fileadmin/styles/defaultstylesheet_FF_B.css" />
	<title>Titel</title>

	<meta name="generator" content="TYPO3 4.2 CMS" />
	<meta name="description" content="Organisation" />
	<meta name="language" content="de" />
	<meta name="keywords" content="Stichworte" />
	<meta name="robots" content="all" />
	<meta name="copyright" content="Organistion - Alle Rechte vorbehalten - All rights reserved" />
	<meta name="email" content="info(at)organisation(dot)com" />

</head>
<body>

        

    <div id="d000">
      <div id="menue_O"> <span id="uv"> <a href="zurueck.7.0.html" onfocus="blurLink(this);" class="link_gelb">zurück</a> </span> <span id="ho"><a href="Hoffnung.14.0.html" onfocus="blurLink(this);" class="link_blau">Hoffnung</a> </span> <span id="eu"><a href="Euthanasie.18.0.html" onfocus="blurLink(this);" class="link_weiss">Euthanasie</a> </span> <span id="ab"><a href="Abtreibung.16.0.html" onfocus="blurLink(this);" class="link_weiss">Abtreibung</a> </span> </div>

         <div id="m_menue_L"> <div class="ma"><a href="Medizinpersonal.40.0.html" onfocus="blurLink(this);">Medizinpersonal</a></div><div class="ma"><a href="Impressum.32.0.html" onfocus="blurLink(this);">Impressum</a></div><div class="ma"><a href="Kontakt.34.0.html" onfocus="blurLink(this);">Kontakt</a></div><div class="ma"><a href="Unser-Video.36.0.html" onfocus="blurLink(this);">Unser Video</a></div><div class="ma"><a href="Freunde.38.0.html" onfocus="blurLink(this);">Freunde</a></div> </div>
         <div id="d0022"> 
	<!--  CONTENT ELEMENT, uid:13/textpic [begin] -->
		<a id="c13"></a>
		<!--  Image block: [begin] -->
			<div class="csc-textpic-text">

		<!--  Text: [begin] -->
			<p class="bodytext"><b>Organisation</b><br />Adresse<br />Ortschaft</p>
		<!--  Text: [end] -->
			</div>
		<!--  Image block: [end] -->
			
	<!--  CONTENT ELEMENT, uid:13/textpic [end] -->
		 </div>

    </div>

    
</body>
</html><div id="typo3-previewInfo" style="position: absolute; top: 20px; right: 20px; border: 2px solid #000; padding: 5px 5px; background: #f00; font: 1em Verdana; color: #000; font-weight: bold; z-index: 10001">Preview of workspace &quot;Default Draft Workspace&quot; (-1)</div>
Unbekannter Benutzer ·

Vielleicht wäre der Browser noch von Interesse. Also bei mir im FF3 und IE7 zeigt er die Hintergrundfarbe (mehr vom CSS hab ich ja nicht) vom DIV #d000 an, egal ob der Doctype XHTML, HTML oder gar nicht gesetzt ist.

chtypo ·

Der "Fehler" wurde von Kitsunet lokalisiert!
Da die div-container alle auf "position:absolute" gesetzt sind, und somit ausserhalb des Seitenfluss stehen, ist da nichts mehr mit Inhalt vorhanden, also Höhe Null, und somit kann auch kein Hintergrund, weder Farbe noch Bild angezeigt werden.