Zum Inhalt springen

Reihenfolge in Stylsheets macht Probleme

paka

Von paka
in Webdesign

 Teilen

Empfohlene Beiträge

paka

paka

Geschrieben
Geschrieben

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

Erstelle ein Benutzerkonto oder melde Dich an, um zu kommentieren

Du musst ein Benutzerkonto haben, um einen Kommentar verfassen zu können

Benutzerkonto erstellen

Neues Benutzerkonto für unsere Community erstellen. Es ist einfach!

Neues Benutzerkonto erstellen

Anmelden

Du hast bereits ein Benutzerkonto? Melde Dich hier an.

Jetzt anmelden
 Teilen
Zur Themenübersicht

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.

Weiterlesen  

Links

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...