CSS Vererbung

[God]

Und zwar habe ich folgendes Problem:

Ich habe eine Horizontale Navigation (zentriert) und eine Unternavigation (linksbündig)

Die Unternavigation erbt die Eigenschaften der Unternavigation, nur soll die Unternavigation die um eine Eigenschaft "link ausrichten" und "andere Hintergrundfarbe" erweitert werden. Hat jemand eine Idee, wie man das am besten löst?

Hier ein Auszug der Quellen:

- Style obere Navigation Anfang -

ul.metanav {
    margin: 0; 
    padding: 0.1em;
    padding-top:0.4em;
    height: 17px;
    text-align: center;
    background-color:#333;   
}
ul.metanav li {
    list-style: none;
    display: inline;
    margin: 0.4em 0.4em 0em 0em;
    padding: 0;
}

ul.metanav a, ul.metanav span {
    padding: 0.2em 1em; 
    font-size: 10px;
    font-weight: bold;
    color: #FFF; 
    text-decoration: none;
}

* html ul.metanav a, * html ul.metanav span {
    text-decoration: none;  
    width: 8em;
    w\idth: 6em;
}

ul.metanav a:visited, ul.metanav span {
    text-decoration: none;  
}

ul.metanav a:hover, ul.metanav span {
    color: white; 
    text-decoration: underline;
}

ul.metanav div {
    clear: left;
}

<ul class="metanav">
    <li><a href="#">Link1</a></li>
    <li><a href="#">Link2</a></li>
    <li><a href="#">Link3</a></li>
    <li><a href="#">Link4</a></li>
</ul>

- obere Navigation Ende -

- untere Navigation Anfang (erweitern??) -

ul.metanav, ul.metanav #leftalign{
    text-align: left;
    background-color: #EEE;
}

<ul class="metanav" id="leftalign">
    <li><a href="">Link1</a></li>
    <li><a href="">Link2</a></li>
    <li><a href="">Link3</a></li>
    <li><a href="">Link4</a><div></div></li>
</ul>

- untere Navigation Ende -

 

[flapo]

Erstmal: Statt der Unternavigation eine ID und eine Klasse zuzuweisen (ist auch nicht erlaubt, soweit ich weiss), könntest du beide in ein Div packen, dem eine Klasse zuweisen und den Navigationen dann eine entsprechende ID.

Achja: Was soll das <div></div> am Ende der unteren Navigation?

 

[God]

Vielen Dank. Funktioniert!

Habe jetzt beide in einen DIV gepackt und den Navigationen jeweils eine ID mitgegeben...

So sieht`s aus:

.metanav, #topnav {
    text-align: center;
    background-color:#333;  
}

.metanav, #footernav{
    text-align: left;
    background-color: #4C5E58; 
}


<div class="metanav" id="topnav">
     <ul>
         <li><a href="">Link</a></li>
    </ul>
 </div>

 
<div class="metanav" id="footernav">
    <ul>
        <li><a href="">Link</a></li>
   </ul>
</div>

...


Nochmals Vielen Dank!

Mod-Edit: Code-Tags hinzugefügt - Das nächste Mal bitte dran denken (XraYSoLo)

 

[God]

Musste leider gerade feststellen dass wenn ich z.B. der ID "footernav" z.B. einen

padding-left:30px;

gebe, dann bekommt die ID "topnav" auch das Padding!

"text-align" und "background-color" funktionieren so wie ich das haben will auf beide ID´s unterschiedlich.

Was mache ich falsch?

 

[flapo]

Ich habe mir das zwar eher so vorgestellt:

<div class="metanav">
  <ul id="topnav">
    <li><a href="">Link</a></li>
  </ul>
  
  <ul id="footernav">
    <li><a href="">Link</a></li>
  </ul>
</div>

... Es gäbe auch noch eine Variante mit first-child und ohne IDs, aber das lassen wir mal.

Zu deiner Frage: Wie definierst du das Polster (padding) genau?

 

[God]

Wie sieht denn bei deiner Variante der CSS Code aus?

So?

.metanav, ul#topnav {
    text-align: center;
    background-color:#333;  
}

.metanav, ul#footernav{
    text-align: left;
    background-color: #4C5E58;
    [B]padding-left:30px;[/B]
}

<div class="metanav">  
<ul id="topnav">  
   <li><a href="">Link</a></li>  
</ul>  
<ul id="footernav">  
   <li><a href="">Link</a></li>  
</ul> </div>

 

[flapo]

Ja ist ja klar, dass beide ein padding haben, du definierst es ja so:

.metanav, ul#footernav{
    text-align: left;
    background-color: #4C5E58;
    padding-left:30px;
}

Das heisst das padding gilt für alle Elemente mit der Klasse metanav und somit auch für die obere Navigation.

Ich verstehe nicht, warum du den beiden Navigationen eine Klasse zuweist, da du ja keine gemeinsamen Sachen definierst. Somit kannst du die metanav-Klasse gleich weglassen und:

ul#topnav {
    text-align: center;
    background-color:#333;  
}

ul#footernav{
    text-align: left;
    background-color: #4C5E58;
    padding-left:30px;
}

schreiben. Sollten gemeinsame Sachen (Listenpunkt, Schriftart/Farbe) dazukommen, solltest du ein div um die beiden Listen legen (wie ich das in meinem Beispiel weiter oben gemacht habe) und dann das Zeugs für den div-Container definieren.
Ich hoffe, du hast verstanden, was ich hier geschwafelt habe.

 

[God]

Hatte das eigentlich auch so im Style Sheed definiert. Vielen Dank nochmal!