MaLa29: Hintergrundfarbe im div wird nicht angezeigt je nach DOCTYPE

SELF-Forum

Hintergrundfarbe im div wird nicht angezeigt je nach DOCTYPE

MaLa29
– Informationen zu den Bewertungsregeln

Hi Zusammen,

mittlerweile bin ich etwas ratlos und komme nicht mehr weiter. :(

Wenn ich einen HTML5 DOCTYPE oder einen 4.01 mit URI nehme, dann zeigt er mir die Hintergrundfarbe der DIVs nicht mehr an.
Ich habe ein paar DIVs miteinander verschachtelt, vermutlich liegt es daran, allerdings funktioniert es ohne DOCTYPE oder mit einem einem ohne URI. Wenn ich aber ein neues Div erstelle und den Tag schliesse mit einem Text drin, dann funktioniert es auch mit dem anderen DOCTYPE.
Der Validator sagt, dass alles in Ordnung ist.

Irgendwas muss ich übersehen, aber ich habe keine Ahnung was. :(

Vielleicht hat jemand eine Idee? :)

Anbei mein Code.

Danke vorab!

Grüsse
Markus

  
<!DOCTYPE html>  
<html lang="en">  
<head>  
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
	<meta name="author" content="author">  
	<meta name="viewport" content="width=device-width; initial-scale=0.4; maximum-scale=0.4; user-scalable=0;">  
	<link href="standard.css" rel="stylesheet" type="text/css">  
	<title>Title</title>  
</head>  
<body>  
<div class="boxheader">  
  
	<div class="headercontentdetails">  
		<p>Text2</p>  
	</div>  
</div>  


  
.boxheader {  
	font: bold 2em/0.9em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;  
	color: #ffffff;  
	margin-top: 0px;  
	padding-top: 0px;  
	height: 50%;  
	background-color: #000000;  
	display: block;  
}  
  
.boxbody {  
	font: bold 2em/0.9em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;  
	margin-top: 0px;  
	padding-top: 0px;  
	height: 50%;  
	background-color: #eaecee;  
	display: block;  
	}  
  
  
/* Header styles */  
.headerpicmala {  
	background-attachment: scroll;  
	background-image: url(lit_mala_h220.jpg);  
	background-repeat: no-repeat;  
	position: fixed;  
	height: 220px;  
	width: 146px;  
	top: 50%;  
	left: 40%;  
	margin-top: -220px;  
	margin-left: -146px;  
	}  
  
.headername {  
	position: fixed;  
	top: 50%;  
	left: 40%;  
	margin-top: -180px;  
	color: #262b2f;  
	}  
  
.headercontentdetails {  
	font: 0.5em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;  
	position: fixed;  
	top: 50%;  
	left: 40%;  
	margin-top: -150px;  
	color: rgb(31,69,123);  
}
Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Hintergrundfarbe im div wird nicht angezeigt je nach DOCTYPE

    Der Martin
    +2 Informationen zu den Bewertungsregeln

    Hallo,

    Wenn ich einen HTML5 DOCTYPE oder einen 4.01 mit URI nehme, dann zeigt er mir die Hintergrundfarbe der DIVs nicht mehr an.

    wer?

    Ich habe ein paar DIVs miteinander verschachtelt, vermutlich liegt es daran, allerdings funktioniert es ohne DOCTYPE oder mit einem einem ohne URI.

    Also im Quirksmode, in dem der Browser bei fehlerhaftem oder mehrdeutigem HTML raten darf, was der Autor wohl gemeint haben könnte. Manchmal rät er ganz gut.

    <!DOCTYPE html>

    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="author" content="author">
    <meta name="viewport" content="width=device-width; initial-scale=0.4; maximum-scale=0.4; user-scalable=0;">
    <link href="standard.css" rel="stylesheet" type="text/css">
    <title>Title</title>
    </head>
    <body>
    <div class="boxheader">

    <div class="headercontentdetails">
    <p>Text2</p>
    </div>
    </div>

      
Fehlt hier nicht noch ein schließendes </body> und </html>?  
  

> ~~~css

.boxheader {  

> 	font: bold 2em/0.9em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;  
> 	color: #ffffff;  
> 	margin-top: 0px;  
> 	padding-top: 0px;  
> 	height: 50%;  
> 	background-color: #000000;  
> 	display: block;  
> }

    Ah, der Klassiker! Eine prozentuale Höhenangabe, ohne dass eindeutig klar ist, worauf sich die 50% beziehen. height:50% bedeutet nur: 50% der Höhe des Elternelements. Allerdings hat das Elternelement body selbst keine Höhenangabe, es ist also nur so hoch, wie es für seinen Inhalt erforderlich ist.
    Du musst also alle Vorfahrenelemente bis hinauf zu html auch mit einer festen Höhenangabe versehen - und sei es 100%.

    .headercontentdetails {

    font: 0.5em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    position: fixed;
    top: 50%;
    left: 40%;
    margin-top: -150px;
    color: rgb(31,69,123);
    }

      
Dazu kommt noch, dass position:fixed (ähnlich wie position:absolute oder float) dieses Element aus dem Textfluss herausnimmt. Aus CSS-Sicht hat div.boxheader also von einer Leerzeile abgesehen überhaupt keinen Inhalt mehr.  
  
Ciao,  
 Martin  

-- 
[Dieser Satz](http://community.de.selfhtml.org/zitatesammlung/zitat262) wurde in mühsamer Kleinstarbeit aus einzelnen Wörtern zusammengesetzt.  
  (Hopsel)  
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
    Beitrag melden
    +2
    Informationen zu den Bewertungsregeln

    1. Hintergrundfarbe im div wird nicht angezeigt je nach DOCTYPE

      MaLa29
      – Informationen zu den Bewertungsregeln

      Hallo Martin,

      jetzt ist mir das klar.
      Super..  Danke Dir!! Damit habe ich etliche Stunden verbracht und es einfach nicht gesehen.. :)

      btw. geschlossene body usw. Tags fehlen, da ich nur den oberen Teil eingepastet hatte. ;)
      Und "er" war der liebe Browser..   FF und IE.. beide haben das gleiche..öh nicht angezeigt.. :)

      Wieder was gelernt.

      Danke & Grüsse!!
      Markus

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln