✔ CSS id Problem

Metha · 17. Mai 2006

Nabend zusammen!

Ich habe folgende id in CSS definiert:

Code:

#footer {
	background: #FF0000;}

#footer p{
	display: inline; color: #333333; font-size: 11px; font-weight: normal;}
	
#footer a{
	display: inline; color: #333333; font-size: 11px; font-weight: normal;
	text-decoration: none; margin: 0px 6px 0px 6px;}
	
#footer a:hover{
	display: inline; color: #ffffff;	font-size: 11px; font-weight: normal;
	text-decoration: none; margin: 0px 6px 0px 6px; background: #999966;}

Der dazugehörige HTML Teil sieht so aus:

HTML:

<div id="footer">
	<p><a href="index.php?main=kontakt&sub=impressum">Impressum</a>|<a href="index.php?main=login">Login</a></p>
</div>

Das Problem ist das die im "footer" befindlichen <p> und <a> Attribute auch wie in der CSS-Datei definiert erkannt und formatiert werden, das DIV-Elemt jedoch nicht. Ich habe auch schon #footer div{..} versucht, doch auch da tut sich nichts

.

Kann mir jemand sagen was ich da falsch mache

Danke und Gruß
Micha

Maik · 17. Mai 2006

Wie sieht denn der übrige Quelltext (HTML, CSS) aus?

Metha · 17. Mai 2006

Ich habe mal ein Quelltext einer Seite kopiert:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>methadesign.de</title>
<link rel="stylesheet" href="classes/template/css/stylesheet.css" type="text/css" />
<script type="text/javascript" src="classes/template/js/javascript.js"></script>
</head>
<body>
<div id="master">
	<div id="masterhead"></div>
		<div id="mastercont">
			<div id="contenthead">

				<div id="mainmenu">
					<p><a href="index.php?main=neuigkeiten">Neuikeiten</a>|<a href="index.php?main=referenzen">Referenzen</a>|<a href="index.php?main=kontakt">Kontakt</a></p>
				</div>
			</div>
			 <div id="content">
<div id="lay2col">
	<div id="lay2col_rowtop">

<h1>Hier steht schon wieder die Headlien</h1>
<h3>All each tun! Gundherzl ich englück. Wunsch siege "hör enzu" denwen. Igenau ser wähl, Tendie heraus. Gef und enha, Bendass diesk eing ewöhn, li cherbl Indtex tist.</h3>
	</div>
	<div id="lay2col_colleft">
<div style="width: 178px; padding: 10px 10px 10px 10px; border: 1px solid #999999; text-align: center;">
	<img src="classes/news/img/[2].gif" alt="Hier steht schon wieder die Headlien">
</div>
	</div>
	<div id="lay2col_colright">
<p>[Sonntag, 31.Dezember 2006] - All each tun! Gundherzl ich englück. Wunsch siege "hör enzu" denwen. Igenau ser wähl, Tendie heraus. Gef und enha, Bendass diesk eing ewöhn, li cherbl Indtex tist. Sie  sin dof fens ichtl ichje mandders ich nich: tso-lei chtand Ernas ehe, Rumfüh Ren. Lässt ei nerder mi tal Lenwas sern gew asch: Enis tein alt, er Hase sozu sag. Enund sieha Benwie der ei Nmal Denricht igenrie Cher ge? Habtdenntats ächl ichverb. Irgt si chin (dies Enbel anglo) sersch einend enz. Eilen einebotsch, aftei, negehei, menach richtdiesichnur. Dengew it ztes tenunt, erdenbet racht ern, Beinä he remhin seh en. Ersch liesst: Manmuss scho neinziem li cher trott elsei. Nund nix Gesch ei tes. Mitsei nemle benanzu "fang", en wis senumb lind? Tex tezu le sen.</p>

	</div>
</div>
				<div id="clear"></div>
			</div>
			<div id="contentfoot">
				<div id="browser">
<a id="left" class="inaktiv">&laquo;&nbsp;Weiter</a>
<a id="right" href="/methadesign.de/index.php?main=neuigkeiten&seite=2">Zur&uuml;ck&nbsp;&raquo;</a> 
				</div>

				<div id="clear"></div>
			</div>
		</div>
	<div id="masterfoot"></div>
		<div id="footer">
<p><a href="index.php?main=kontakt&sub=impressum">Impressum</a>|<a href="index.php?main=login">Login</a></p>
		</div>
	<div id="clear"></div>

</div>
</body>
</html>

Die CSS ist zu groß um sie komplett zu kopieren. Hier der betroffene Bereich.

Code:

	#footer {background: #FF0000}

	#footer p{
		display: inline; color: #333333; font-size: 11px; font-weight: normal;}
	
	#footer a{
		display: inline; color: #333333; font-size: 11px; font-weight: normal;
		text-decoration: none; margin: 0px 6px 0px 6px;}
	
	#footer a:hover{
		display: inline; color: #ffffff;	font-size: 11px; font-weight: normal;
		text-decoration: none; margin: 0px 6px 0px 6px; background: #999966;}

Die id="clear" im HTML teil ist nur eine Aufhebung eines Floats!

Maik · 17. Mai 2006

Anstatt den CSS-Codeschnipsel doppelt zu posten, solltest du besser das vollständige Stylesheet für das Dokument zeigen, ansonsten wird dir niemand sagen können, was da falsch läuft.

Metha · 17. Mai 2006

Ok, hier die CSS.

Code:

a{
	display: inline; color: #333333;	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 11px; font-weight: bold; text-decoration: none; margin: 0px; border: 0px;}

a:hover{
	display: inline; color: #ffffff;	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 11px; font-weight: bold; text-decoration: none; margin: 0px; border: 0px;
	background: #999966}

p{
	display: block; color: #333333; font-family: verdana, arial, helvetica, sans-serif;
	font-size: 11px; font-weight: normal; line-height: 17px; text-decoration: none; margin: 0px;}

h1{
	display: block; color: #999966; font-family: verdana, arial, helvetica, sans-serif;
	font-size: 17px; font-weight: bold; text-decoration: none; margin: 0px 0px 5px 0px;}

h2{
	display: block; color: #999999; font-family: verdana, arial, helvetica, sans-serif;
	font-size: 10px; font-weight: normal; text-decoration: none; margin: 0px;}

h3{
	display: block; color: #999999; font-family: verdana, arial, helvetica, sans-serif;
	font-size: 11px; font-weight: bold; line-height: 15px; text-decoration: none; margin: 0px;}

h5{
	display: block; color: #669900; font-family: verdana, arial, helvetica, sans-serif;
	font-size: 12px; font-weight: bold; text-decoration: none; margin: 0px;}

h6{
	display: block; color: #FF0000; font-family: verdana, arial, helvetica, sans-serif;
	font-size: 12px; font-weight: bold; text-decoration: none; margin: 0px;}

img{
	display: inline; margin: 0px; padding: 0px; border: 0px;}

form{
	margin: 0px; padding: 0px; border: 0px;}
	
textarea{
	display: block; margin: 0px 0px 10px 0px; width: 100%;
	font-family: verdana, arial, helvetica, sans-serif; line-height: 17px; font-size: 11px;}	

input.textfeld{
	display: block; margin: 0px 0px 10px 0px; width: 100%;
	font-family: verdana, arial, helvetica, sans-serif; font-size: 11px;}

input.dateifeld{
	display: block; margin: 0px 0px 10px 0px; width: 100%;
	font-family: verdana, arial, helvetica, sans-serif; font-size: 11px;}
	
input.schaltflaeche{
	display: block;
	font-family: verdana, arial, helvetica, sans-serif; font-size: 12px;}

<!-- Seitenlayout Anfang -->
	html{
		margin: 0px; padding: 0px;}

	body{
		margin: 0px; padding: 50px 0px 50px 0px; background: url(../img/md_backgrund.gif) repeat;}
	
	#master{
		margin: 0px auto 0px; width: 600px;}
	
	#masterhead{
		width: 600px; height: 10px; background: url(../img/md_master_head.gif) no-repeat top;}
	
	#mastercont{
		padding: 25px 25px 15px 25px; width: 550px; background: url(../img/md_master_cont.gif) repeat-y;}
	
	#masterfoot{
		width: 600px; height: 10px; background: url(../img/md_master_foot.gif) no-repeat top;}
	
	#contenthead{
		padding: 14px 0px 0px 202px; width: 350px; height: 21px; background: url(../img/md_logo.gif) no-repeat top left;}
	
	#content{
		margin: 25px 0px 15px 0px; padding: 25px 0px 15px 0px; font-size: 11px; border-top: 1px solid #999999; border-bottom: 1px solid #999999;}
	
	#contentfoot{
		width: 550px;}

	#left{
		float: left;}
	
	#right{
		float: right;}
	
	#none{
		float: none;}
	
	#clear{
		clear: both;}
<!-- Seitenlayout Ende -->

<!-- Lay2Col Anfang -->
	#lay2col {}

	#lay2col_rowtop{
		float: none; width: 550px; margin: 0px 0px 15px 0px; text-align: left;}

	#lay2col_colleft{
		float: left; width: 200px; text-align: left;}

	#lay2col_colright{
		float: right; width: 335px; text-align: left;}
<!-- Lay2Col Ende -->

<!-- Hauptmenü Anfang -->
	#mainmenu {}

	#mainmenu p{
		display: inline; color: #333333; font-size: 11px; font-weight: normal;}
	
	#mainmenu a{
		display: inline; color: #333333; font-size: 11px; font-weight: bold;
		text-decoration: none; margin: 0px 12px 0px 12px;}
	
	#mainmenu a:hover{
		display: inline; color: #ffffff;	font-size: 11px; font-weight: bold;
		text-decoration: none; margin: 0px 12px 0px 12px; background: #999966;}
<!-- Hauptmenü Ende -->

<!-- Seitenfunktion Anfang -->
	#browse {background: #ff0000}

	#browse a{
		display: inline; color: #333333; font-size: 11px; font-weight: bold;
		text-decoration: none; background: #ffffff;}
	
	#browse a:hover{
		display: inline; color: #ffffff;	font-size: 11px; font-weight: bold;
		text-decoration: none; background: #999966;}

	a.inaktiv{
		color: #cccccc;}

	a:hover.inaktiv{
		color: #cccccc; background: #ffffff;}
<!-- Seitenfunktion Ende -->

<!-- Seitenfunktion Anfang -->
	#footer {background: #ff0000}

	#footer p{
		display: inline; color: #333333; font-size: 11px; font-weight: normal;}
	
	#footer a{
		display: inline; color: #333333; font-size: 11px; font-weight: normal;
		text-decoration: none; margin: 0px 6px 0px 6px;}
	
	#footer a:hover{
		display: inline; color: #ffffff;	font-size: 11px; font-weight: normal;
		text-decoration: none; margin: 0px 6px 0px 6px; background: #999966;}
<!-- Seitenfunktion Ende -->

<!-- Submenu Anfang -->
	#submenu {background: #ff0000}

	#submenu a{
		float: left; display: block; color: #333333;	font-size: 11px; font-weight: bold; text-decoration: none;
		width: 193px; height: 16px; border: 1px solid #CCCCCC; margin: 0px 0px 10px 0px; text-align: left; padding: 3px 0px 0px 5px;}

	#submenu a:hover{
		float: left; display: block; color: #ffffff;	font-size: 11px; font-weight: bold; text-decoration: none;
		width: 193px; height: 16px; border: 1px solid #999966; margin: 0px 0px 10px 0px; text-align: left; padding: 3px 0px 0px 5px;}
<!-- Submenu Ende -->

<!-- Statusmeldungen Anfang-->
	#status {background: #ff0000}
	
	#status img{
		float: left; margin: 0px 10px 0px 0px;}
	
	#status p{
		display: block; color: #000000; font-family: verdana, arial, helvetica, sans-serif;
		font-size: 11px; font-weight: normal; text-decoration: none; margin: 0px;}
	
	#status h1{
		display: block; color: #669900; font-family: verdana, arial, helvetica, sans-serif;
		font-size: 13px; font-weight: bold; text-decoration: none; margin: 20px 0px 10px 0px;}
	
	#status h2{
		display: block; color: #FF0000; font-family: verdana, arial, helvetica, sans-serif;
		font-size: 13px; font-weight: bold; text-decoration: none; margin: 20px 0px 10px 0px;}
<!-- Statusmeldungen Ende -->

Hektik · 17. Mai 2006

In deiner CSS-Datei steht doch auch:

Code:

<!-- Seitenfunktion Anfang -->
#footer {}

Dort musst du deinen DIV definieren.

z.B.

Code:

<!-- Seitenfunktion Anfang -->
#footer {
width: 300px;
}

Maik · 17. Mai 2006

Na bitte, da haben wir doch gleich eine entscheidende Fehlerquelle gefunden: Kommentare werden in CSS mit /* */ maskiert

Code:

aus

<!-- Seitenlayout Anfang -->

wird

/* Seitenlayout Anfang */

usw.

Hektik · 17. Mai 2006

michaelsinterface hat gesagt.:
Na bitte, da haben wir doch gleich eine entscheidende Fehlerquelle gefunden: Kommentare werden in CSS mit /* */ maskiert

Code:

aus  wird /* Seitenlayout Anfang */ usw.

Ungültige Angaben werden in CSS aber einfach ignoriert, als kann es daran nicht liegen.

Metha · 17. Mai 2006

Perfekt, die maskierten Kommentare warens.

Danke für die schnelle Hilfe

Hektik · 17. Mai 2006

Ja, ist denn die Hälfte von dem was ich lese Humbug?!

✔ CSS id Problem

Metha

Mitglied

Maik

Metha

Mitglied

Maik

Metha

Mitglied

Hektik

Erfahrenes Mitglied

Maik

Hektik

Erfahrenes Mitglied

Metha

Mitglied

Hektik

Erfahrenes Mitglied

Neue Beiträge