Background color

[kati]

hallo..

Ich hab ne wahrscheinlich einfache Frage. Aber ich komm einfach nicht auf die Lösung.

Ich hab ne navigaiton:

<div class="subnav"><br />
<h1>navigation</h1>
        <ul>
          <li>
          <a id="selected" href="home.html">Home</a></li>
          <li>
          <a href="news.html">News</a></li>
          <li>
          <a href="about.html">About</a></li><br />
          <li>
          <a href="lineUp.html">Line-Up/Bands</a></li>
          <li>
          <a href="location.html">Location</a></li>
          <li>
          <a href="kontakt.html">Kontakt</a></li>
        </ul>
      </div>

und deren CSS:

/* sub-navigation */
.subnav h1 {
 background: #222;
 color: #FFE;
 font: bold 1.1em Verdana,sans-serif;
 line-height: 24px;
 padding-left: 8px;
}
.subnav ul {margin: 0; padding: 0;}
.subnav li {
 border-bottom: 1px solid #696755;
 list-style: none;

}

.subnav li a {
 background: #89866F;
 color: #111;
 display: block;
 padding: 8px 0 8px 12px;
 width: 148px;
 text-decoration: none;
}
.subnav li a:hover {
 background: #9C997C;
 color: #000;
}
.subnav li a #selected {
 background: #9C997C;
 color: #000;
}

Mein Problem ist:

die Hintergrundfarbe bei id="selected" wird nicht übernommen.

Weiss jemand warum?

Zusätzlich hab ich noch ein Problem mit einem Bild. FF und Opera zeigt es an, IE nicht.

<div class="sponsor">   <img class="sponsor" src="layout/img/sponsor.gif" /></div></a>

Der Pfad stimmt 100% (FF zeigts ja an). Braucht IE vor dem Pfad ein / oder \ oder sonst etwas? Ich komm nicht draus!

Danke schon im vorraus

[Cheatah]

Hi,

.subnav li a #selected {
background: #9C997C;
color: #000;
}

die Hintergrundfarbe bei id="selected" wird nicht übernommen.

Du hast kein Element mit id="selected", welches sich innerhalb eines <a>-Elements befindet.

Weiss jemand warum?

Das Leerzeichen ist der Nachfahrenselektor.

<div class="sponsor">   <img class="sponsor" src="layout/img/sponsor.gif" /></div></a>

Dein Code ist an mindestens zwei Stellen invalide. Behebe dies; vorher macht eine Problembetrachtung keinerlei Sinn.

Cheatah

[kati]

Ich hab den Code verbessert. Sorryd das dieser so hässlich war, hab irgendwie den überblick verloren ;)

<div class="sponsor">
  <a href="example.html">
    <img class="sponsor" src="layout/img/sponsor.gif" alt="" />
  </a>
</div>

Ich hoffe das stimmt soweit. Weisst du warum der IE
das bild nicht anzeigt?

[Gunnar Bittersmann]

Hello out there!

Weisst du warum der IE das bild nicht anzeigt?

Ad-Blocker?

See ya up the road,
Gunnar

[Cheatah]

Hi,

Sorryd das dieser so hässlich war, hab irgendwie den überblick verloren ;)

Du brauchst Dich nicht zu entschuldigen. Um Fehler zu finden postest Du schließlich hier ;-)

Ich hoffe das stimmt soweit.

Ja, wobei ich keinen Grund für die Klasse im <img>-Element sehe. Durch das <div class="sponsor"> ist der Kontext bereits klar.

Weisst du warum der IE das bild nicht anzeigt?

Nein, aus der hohlen Luft heraus kann ich leider nicht sagen, welcher der vielen IE-Bugs da greifen mag. Bitte verlinke die Seite, dann lässt sich das analysieren.

Cheatah

[Gunnar Bittersmann]

Hello out there!

.subnav li a #selected {

Das selektiert das Element mit der ID "selected", das Nachfahre eines 'a'-Elements ist (welches wiederum Nachfahre eines 'li'-Elements ist, welches wiederum Nachfahre eines Elements der Klasse "subnav" ist).

Solch ein Element gibt es nicht. Du willst das 'a'-Element mit der ID "selected" selektieren: '.subnav li a#selected' (oder nur '.subnav li #selected').

Dein Ansatz ist jedoch schon nicht der beste: „Verlinke niemals auf die aktuelle Seite!“ (Punkt 10 der zehn meist-missachteten Homepage-Design-Richtlinien [Nielsen])

Dein Menü sollte besser so aussehen:

        <ul>  
          <li id="selected">  
          Home</li>  
          <li>  
          <a href="news.html">News</a></li>  
          <li>  
          <a href="about.html">About</a></li><br />  
          <li>  
          <a href="lineUp.html">Line-Up/Bands</a></li>  
          <li>  
          <a href="location.html">Location</a></li>  
          <li>  
          <a href="kontakt.html">Kontakt</a></li>  
        </ul>

Die ID "selected" brauchst du auch nicht, da du Formate für '.subnav li' und für '.subnav li a' angeben kannst.

See ya up the road,
Gunnar

[kati]

danke Gunnar. Funktioniert

„Verlinke niemals auf die aktuelle Seite!“

mach ich auch gar nich. ich bin noch mitten im programmeiren der Page. Ich hätte das schon noch behoben. Aber Danke!