• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Klasse wird nicht erkannt

C

Corraggiouno

Mitglied
Hi,

benötige mehrere Listen auf meiner Seite; habe folgenden code geschrieben:
Code: 
html {
height: 100.3%;
}

body{
font-family: Verdana, sans-serif;
font-size:0.8em;
background: #efeded;
color: #000000;
}

* {
margin: 0;
padding: 0;
}

div#wrapper {
width: 840px;
margin:5px auto;
}

h1 {
background: url(../images/logo.gif) no-repeat;
height:262px;
text-indent: -999em;
border-bottom-style:double;
border-width:5px;
border-color: #c1c0c0;
}

ul#navigation{
width:650px;
margin-top: -36px;
list-style-type:none;
}

ul#navigation li
{
background: url(../images/abgrenzung.gif) no-repeat;
float:left;
display:inline;
padding-left:2px;
line-height: 2.0em;
}

.none_bg
{
background-image:none;
}

a 
{
text-decoration:none;
padding: 0 22px;
}

a.mail
{
padding:0px;
}

a:link
{
text-decoration:none;
color:#000000;
}

a:visited
{
color:#000000;
}

a:hover
{
background-image: url(../images/hover.gif);
background-repeat: no-repeat;
background-position:50% 15px;
display:block;
height: 25px;
}

a.mail:hover
{
background:none;
display:inline;
}



div#maintext
{
float:left;
background-color:#E0E0E0;
background-repeat: repeat-y;
width: 600px;
margin-top:12px;
padding-top:20px;
padding-left: 15px;
padding-right:10px;
border-left:1px solid #b2b2b2;
line-height: 1.8em;
}


h3
{
padding-bottom: 5px;
}

p
{
padding-bottom: 15px;
}


div#sidebar
{
float:right;
background-color:#D6D6D6;
background-repeat: repeat-y;
width: 200px;
height: 380px;
margin-top:12px;
padding-top: 20px;
padding-left: 10px;
border-left:3px double #A4A4A4;
border-right:1px solid #A4A4A4;
line-height: 1.8em;
	

}

img
{
margin-top: -20px;
float:right;
}

html-code
Code: 
<!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>Jaki und Klaiber</title>
<link href="css/jk.css" rel="stylesheet" type="text/css" />
</head>

<body>
 <div id="wrapper">
  <h1>Jaki und Klaiber</h1>
   <ul id="navigation">
    <li class="none_bg"><a href="unternehmen.html">Unternehmen</a></li>
    <li><a href="leistungen.html">Leistungen</a></li>
    <li><a href="partner.html">Partner</a></li>    
    <li><a href="stellenangebote.html">Stellenangebote</a></li>
    <li><a href="kontakt.html">Kontakt</a></li>
   </ul>
  <div id="maintext">
  <h3>Unternehmen</h3>
  
  </div>
  <div id="sidebar">
    <h3>Kontakt</h3>
     
   </div>
 </div>
</body>
</html>

wenn ich nun meine Liste ganze normal definiere mit
Code: 
ul{
width:650px;
margin-top: -36px;
list-style-type:none;
}
und
Code: 
 li
{
background: url(../images/abgrenzung.gif) no-repeat;
float:left;
display:inline;
padding-left:2px;
line-height: 2.0em;
}
.....dann wird links vom Link Unternehmen keine Begrenzung angezeigt; wenn ich aber
wie oben
Code: 
ul#navigation{
width:650px;
margin-top: -36px;
list-style-type:none;
}
ul#navigation li
{
background: url(../images/abgrenzung.gif) no-repeat;
float:left;
display:inline;
padding-left:2px;
line-height: 2.0em;
}
.......dann wird trotz der Klasse
Code: 
.none_bg
die Abgrenzung links vom Link Unternehmen angezeigt...........habe dafür keine Erklärung
kann mir da jemand einen Tipp geben?
Jaki und Klaiber
 
Eine ID hat eine höhere Gewichtung als eine Klasse die zudem nicht in Zusammenhang mit dieser Liste steht. Du müsstest die Klasse anders (genauer) definieren.

Code: 
ul#navigation li.none_bg
 
super, hat funktioniert; danke für den Tipp!!
kannst du mir noch den Unterschied zwischen folgenden beiden erklären:
Code: 
ul#navigation li.none_bg
also ist es doch so, dass innerhalb des div-bereichs navigation wo die Klasse none_bg in einem Listen-Element auftaucht, keine Begrenzung bekommt
................. aber wie ist dann das zu verstehen?
Code: 
ul#navigation li .none_bg
 
Zuletzt bearbeitet:
Kein DIV sondern die ID bezieht sich auf ein UL Element.

ul#navigation li .none_bg

Das ist ein Element mit der Klasse 'none_bg' in einem LI Element, was in einer UL Liste steht, mit der ID navigation
Das ist ein Nachfahrenselektor
 
.....warum funktioniert dann diese Deklaration
Code: 
ul#navigation li .none_bg
nicht? Die Abgrenzung links von Unternehmen ist zu sehen.
 
Weil in den LI Elementen keine Element mit der Klasse none_bg vorhanden ist.
 
Hast du dir die Seite durchgelesen, dich ich dir verlinkt habe?
 
Ja, diese Deklaration wirkt nur auf ein Element innerhalb des LI Elements, dass diese Klasse hat. Welches Element spielt keine Rolle.
 
Ja, aber damit sprichst du das Element <none_bg> an, das existiert nicht, d.h. du müßtest die Seite in XHTML deklarieren und dieses Element deiner XML Deklaration hinzufügen - oder so - ich hab das noch nie gemacht, ist aber prinzipiell möglich, aber ich frage mich wozu du das machen willst?
 
aaah verstanden; super vielen dank für die präzise Erklärung!
ich hätte da noch ein kleines Problem hinsichtlich meiner Verlinkung;
ich habe ja in meiner Navigation mehrere Links die unterschiedliche CSS-Eigenschaften besitzt; nun möchte ich aber auf der Seite "partner.html" andere CSS-Eigenschaften definieren, damit die Seite auch dementsprechend optisch anzusehen ist.
siehe Jaki und Klaiber
da soll eine Liste mit mehreren bildern entstehen (nebeneindander), welche auf andere Seiten verlinken.
Nun, man sieht ja schon das die css-eigenschaften von der Navigation auch auf die Seite partner.html gelten. Der Link muss viel weiter links und der hover-effekt muss weg.
Muss ich da zwei unterschiedliche Divs definieren?
aktueller code
Code: 
a 
{
text-decoration:none;
padding: 0 22px;
}

a.mail
{
padding:0px;
}

a:link
{
text-decoration:none;
color:#000000;
}

a:visited
{
color:#000000;
}

a:hover
{
background-image: url(../images/hover.gif);
background-repeat: no-repeat;
background-position:50% 15px;
display:block;
height: 25px;
}
Kannst du mir da noch einen Tipp geben?
 
Nein, du musst den hover Effekt auf die Links beschränken, die ihn erhalten sollen. Also auf #navigation a:hover
 
mmh; ok aber es ist nach nicht nur der hover-effekt; wie auf der partner.html zu sehen ist, wird ja der link auch noch links ziemlich eingezogen;
das kommt ja von
Code: 
a 
{
text-decoration:none;
padding: 0 22px;
}
das möchte ich an dieser Stelle bzw. auf der Seite nicht.
 
hi,

möchte hier noch ein Untermenü bzw. später ein Klappmenü erstellen.
Hier möchte ich gerne den linken Rand bzw. überhaupt keinen Rand im Untermenü haben.

Code: 
ul#navigation li
{
float:left;
display:inline;
border-left: 1px solid #9F9F9F;
padding-left:2px;
line-height: 2.0em;
}

ul#navigation li:first-child
{
border-left: none;
}

ul#navigation li.ul li
{
border-left:none;
}

Kann mir jemand einen Tipp geben, was ich da falsch definiert habe? Jaki und Klaiber
 
Häng border-left und padding-left nicht an "ul#navigation li" sondern an "ul#navigation li a". Dadurch müsstest Du ggfs. auch den Link etwas breiter machen. Dadurch fällt dann aber auch im Untermenü der Strich links weg, da dieser vom "ul#navigation li" kommt, welches ja bis runter reicht, entlang des Untermenüs. Im Firebug ist das ganz schön nachvollziehbar.
 
habs nun so definiert:
Code: 
ul#navigation
{
width:100%;
margin-top: -36px;
list-style-type:none;
}

ul#navigation li
{
float:left;
display:inline;
line-height: 2.0em;
}

ul#navigation li:first-child
{
border-left: none;
}



ul#navigation li a 
{
text-decoration:none;
border-left: 1px solid #9F9F9F;
padding:0 20px;
}

leider wird nun der linke Rand beim ersten Link nun wieder angezeigt und im Untermenü habe ich immer noch einen Rand.
Jaki und Klaiber
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben