Zum Inhalt springen

Reihenfolge in Stylsheets macht Probleme


paka

Empfohlene Beiträge

Hallo

Ich versuch mich grade mal wieder in xhtml css... einzuarbeiten, und habe Probleme mit dem Verständniss, in welcher Reihenfolge die Definitionen der Formate aufgeführt werden müssen. Zum Verständnis poste ich einfach mal den Code( Es ist nicht wirklich viel, und er ist echt einfach).

So klappts:


@CHARSET "ISO-8859-1";


div.InhaltBox {

	padding: 10pt ;

	float: left ;

	}


 /* Das Problem liegt hier, wenn das vor */

#boxMitte {

	height: 500pt ;	

	}


/* dem da steht, dann klappts */

div.HauptBox {

	border-color: red ;

	border-width: thin ;

	border-style: solid ;	

	margin: 10pt;

	padding: 10pt;

			};




div#boxOben { 

	hight: 20pt ;                

			};






und so klappts nicht:

@CHARSET "ISO-8859-1";


div.InhaltBox {

	padding: 10pt ;

	float: left ;

	}



div.HauptBox {

	border-color: red ;

	border-width: thin ;

	border-style: solid ;	

	margin: 10pt;

	padding: 10pt;

			};


/* wenn ich es aber hier unten hin schreibe, ist die Box zu klein */


#boxMitte {

	height: 500pt ;	

	}


div#boxOben { 

	hight: 20pt ;                

			};

Dazu gehört dann folgender xhtml Code:

<?xml version="1.0" encoding="ISO-8859-1" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />


<title>Grundgerüst</title>

<link rel="stylesheet" type="text/css" href="../Styles/style1.css" />


</head>

<body>

	<div  class="HauptBox" id="boxOben" >

		Das hier ist die  ganz obere Box

	</div>

	<div class="HauptBox"  id="boxMitte" >

		<div class="InhaltBox"  id="boxMitteLinks" style=" width: 150px; background: rgb(220,230,220);">

		   <p >erster Eintrag</p>

		   <p>zweiter Eintrag</p>

		</div>

		<div class="InhaltBox" id="boxMitteMitte" style="fmargin-left: 15px; border: 1px solid silver; ">

		   <p>Das hier soll den rechts stehen </p>

		   <p>und das soll auc rechts stehen, aber unter dem anderen rechts</p>

		</div>

		<div id="boxMitteRechts"></div>

	</div>



</body>

</html>

Bei dem oberen Code ist die 2. Box groß, wie in #boxMitte { height: 500pt }

angegeben. Was ich nicht verstehe, ist warum das unten nicht klappt. Setzt irgendeine Anweisung aus div.HauptBox... das was ich oben schreibe außer Kraft? Nach meinem Verständnis haben die nix miteienander zu tun, und definieren ganz unterschiedliche Eigenschaften :confused:

Das gleiche ist mir mit der anderen Anweisung: div#boxOben { hight: 20pt ; }; passiert. Wenn die vor den Anweisungn: div.HauptBox... stand, wurden die nicht ausgeführt, und es gab keine roten Kästchen.:(

Also meine Frage: wie kann ich das verstehen?

Schon mal danke für eure Antwort

LG

Paka

Link zu diesem Kommentar
Auf anderen Seiten teilen

Dein Kommentar

Du kannst jetzt schreiben und Dich später registrieren. Wenn Du ein Konto hast, melde Dich jetzt an, um unter Deinem Benutzernamen zu schreiben.

Gast
Auf dieses Thema antworten...

×   Du hast formatierten Text eingefügt.   Formatierung wiederherstellen

  Nur 75 Emojis sind erlaubt.

×   Dein Link wurde automatisch eingebettet.   Einbetten rückgängig machen und als Link darstellen

×   Dein vorheriger Inhalt wurde wiederhergestellt.   Editor leeren

×   Du kannst Bilder nicht direkt einfügen. Lade Bilder hoch oder lade sie von einer URL.

Fachinformatiker.de, 2024 by SE Internet Services

fidelogo_small.png

Schicke uns eine Nachricht!

Fachinformatiker.de ist die größte IT-Community
rund um Ausbildung, Job, Weiterbildung für IT-Fachkräfte.

Fachinformatiker.de App

Download on the App Store
Get it on Google Play

Kontakt

Hier werben?
Oder sende eine E-Mail an

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

×
×
  • Neu erstellen...