Problem mit der Vererbung

A

aleks

Mitglied
Problem mit der Überschreibung von einer Eigenschaft

Hallo Leute,
nach langer Zeit habe ich mich wieder einmal mit CSS beschäftigt.
Ich habe ein Problem mit der Vererbung der Klasse "unterteilung". Diese soll, wenn Sie angegeben wird, aus einem rosa Hintergrund(in der Klasse right) einen anderen machen. Bloß passiert das hier nicht. Das Tag (h3) übernimmt nichts aus der Klasse div.right div.unterteilung h3. Ich bin am ende meines Wissens. Hab Ihr vielleicht einen Tipp, wie ich den Code ändern sollte? Danke schon mal.
Hier die Code:
HTML: 
<!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></title>
	<link rel="stylesheet" media="all" type="text/css" href="css/css2.css" />
</head>

<body>
<!-- ****banner content*********************************************************************************-->
<div id="banner" ><img src="img/monorom_css_logo.gif" alt="" width="414" height="56" border="0" /></div>
<!--******************************************beginn container****************************************-->
<div id="container">

 		<h1>service for a better code</h1>
	


<!-- **************************************************************beginn Side left*******************-->
<div id="left"></div>
<!--**************************************************beginn Side right*******************************-->
<div class="right">
<h3 class="right unterteilung">blabla</h3>
</div>
<!-- ************************************************beginn content**********************************-->
<div id="content"></div>
<!-- ******************************************************beginn footer*****************************-->
<div id="#footer"><h1>in valid code we trust (*^_^*) miss monorom</h1></div>
</div> <!-- *******************************************************end of container*****************-->

</body>
</html>
und CSS:
Code: 
body {
background-color: #e1ddd9;
font-size: 11px;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
color:#564b47;
padding:0;
margin:0;
}
a {color: #DB7093;}
a:visited {color:#DB7093;}
a:hover {color: #564b47;}
a:active { color:#000000;}

h1 {
font-size: 11px;
text-transform:uppercase;
background-color: #E0A3B7;
border-top:1px solid #564b47;
border-bottom:1px solid #564b47;
padding:5px 15px;
margin:0 }

h2 {
font-size:20px;
font-weight: normal;
padding: 5px 10px;
margin:0px;}

img.download {vertical-align:middle;}

/* ----------container zentriert das layout-------------- */
#container {
width: 900px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
background-color: #EBD3E0;
}

/* ----------banner for logo-------------- */
#banner {
background-color: #e1ddd9;
text-align: right;
padding: 0px;
margin: 0px;
}
#banner img {padding:10px 0px;} 

/* -----------------Inhalt--------------------- */
#content {
background-color: #ffffff;
padding: 0;
margin: 0 200px;
}
div#content { 
min-height:600px;
height:expression(this.scrollHeight > 600 ? "auto":"600px"); 
}

p, pre{
padding: 5px 10px;
margin:0;
}

/* --------------left navigavtion------------- */
#left {
float: left;
width: 200px;
margin: 0px;
padding: 0px;
}
.right {
	float: right;
	width: 200px;
	margin: 0;
	padding: 0;}

.unterteilung{
	margin: 0;
	padding: 0;
	width: 200px;
	height: 2em;
}
div.right div.unterteilung h3
{
	


	
	background-color: #D6BF86;
	
}
/* -----------footer--------------------------- */
#footer {
clear: both;
margin: 0px;
padding: 0px;
text-align: right; }

Gruß
aleks
 
Zuletzt bearbeitet:
Hi,

Code: 
div.right div.unterteilung h3
{
	background: #D6BF86;
}

Schreib das mal so:
Code: 
.right, .unterteilung, h3
{
	background: #D6BF86;
}
 
Danke hat geklappt!:)
Ich hätte da noch eine Frage: Was muss man den ändern, wenn ich statt „h3“ „h1“ schreibe (welches ja schon allgemeine Definition hat) Ziel ist es h1{} zu übertreiben durch die Definition in „unterteilung{}“ und die Verbindung von „unterteilung“ und „h1“. Wenn ich deine Vorgabe für „h1“ übernehme, wird trotzdem „h1{}“ angewand! Wie würde das denn aussehen. Will ja nur das Prinzip verstehen. Danke.

Gruß
aleks
 
Hi,

wenn es nur Elemente betreffen soll, die im Container mir der Klasse right enthalten sind, ist folgender Selektor richtig.
Code: 
.right .unterteilung
{
	background-color: #D6BF86;
}

Damit sollten auch H1-Überschriften abgedeckt sein.

Ciao
Quaese
 
Danke hat geklappt.
Jetzt habe ich noch ein Problem mit Positionierung einer Trennlinie: Firefox zeigt die Linie an der richtigen Stelle, der IE versetzt sie um einiges mehr nach links. Also kann mir jemand helfen, damit die Position der Trennlinie in beiden Browsern gleich ist. Danke. Hier sind die relevanten Codeteile:
Code: 
hr
{
	 width:180px; position: absolute; left:775px;top:133px; 
	 
	 
	background-color: #FFFFFF; /* Farbe für Opera und Firefox */ 
color: #FFFFFF; /* Farbe für Internet Explorer (IE) */
border: 0; 
height: 1px; 
display: block

}
HTML: 
<div id="banner" ><a href="#" border="0"><img src="file:///C|/Dokumente%20und%20Einstellungen/Aleksandr/Eigene%20Dateien/logo.gif" border="0"></a><p style="text-align:right; color: #ffffff;text-decoration:none;";"><a href="#">Ihr Konto</a> |<a href="#">Warenkorb</a>| <a href="#">Kasse</a></p><hr 
/>
 		<h1><a href="#" name="#" style="color: #ffffff;text-decoration:none;">Startseite></a> <a href="#" name="#"style="color: #ffffff;text-decoration:none;">Katalog</a></h1>
	</div>
	<div class="left">
Gruß
aleks
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück