✔ Anfängerfrage: divs Verschachteln?

Status
Nicht offen für weitere Antworten.
BastianW

BastianW

Mitglied
Hallo zusammen,

ich sitzte gerade vor einem keinen CSS Menu. Und überlege nun wie ich das Farblich gestalten kann. Es geht hier in erster Linie um die Technische Frage... Z.B. wie Hinterlege ich z.B. das h3 Mainmenu element mit einer Grafik? Wie würde in dem Unten genannten Beispiel das CSS Element aussehen?

(Ich weiß ich könnte dem H3 Element einen Class zuordnen und die dann in den CSS Bereich Eintragen, aber ich suche hier eine Lösung OHNE den Code zu verändern ;-) )

Code: 
<?xml version="1.0" encoding="utf-8"?><!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-gb" lang="en-gb" dir="ltr" >
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>testmenu</title>
<style type="text/css">
<!--


-->
</style>
</head>
<body>
<div id="page">
        <div>
                <div>

                        <div class="moduletable">
                                        <h3>Mainmenu</h3>
                                        <ul class="menu">
                                                <li class="level1"><a href="http://www.1.com/"><span>1</span></a></li>
                                                <li class="level1"><a href="http://www.2.com/"><span>2</span></a></li>
                                                <li class="level1"><a href="http://www.3.com/"><span>3</span></a></li>
                                                <li id="current" class="level1 parent active"><a href="http://www.4.com/"><span>Main 4</span></a>
                                                        <ul>
                                                                <li class="level2"><a href="http://www.A.com/"><span>Submenu A</span></a></li>
                                                        </ul></li>
                                        </ul>
                        </div>


                </div>

        </div>
</div>
</body>
</html>
 
Hi.

Kurz und schmerzlos, ohne eine Klasse für das h3-Element, und somit ohne weiteren Eingriff in den bestehenden HTML-Code ;-)

Code: 
h3 {
background: url(pfad/zur/grafik.jpg);
}
oder:

Code: 
.moduletable h3 {
background: url(pfad/zur/grafik.jpg);
}
oder:

Code: 
#page .moduletable h3 {
background: url(pfad/zur/grafik.jpg);
}
 
Hi, das ist genau die Antwort die ich gesucht habe... vielen Dank...

Wodrinn unterscheiden sich denn die einzellnen Möglichkeiten? Bzw. was sind die vor und Nachteile?

Wird H3 bei div.moduletable h3 auch an alle in dieser DIV Box verfügbaren weiterne DIV Boxen "vererbt"?

Kann ich überhaupt mit:

.page .moduletable h3 {background: url(pfad/zur/grafik.jpg);}
in meinem Beispiel Arbeiten? Ich dachte nur Klassen haben einen Punkt (.moduletable) und IDs müssen immer eine # in der CSS Datei haben (#page).

Wenn ich das alles so verstanden habe wie ich hoffe müßte der Code nicht:

#page .moduletable h3 {background: url(pfad/zur/grafik.jpg);}

lauten?
 
Hi.
Code: 
h3 {
background: url(pfad/zur/grafik.jpg);
}
Diese Regel gilt für alle h3-Elemente innerhalb des Dokumentenbaums.

Code: 
.moduletable h3 {
background: url(pfad/zur/grafik.jpg);
}
Diese Regel findet für alle h3-Elemente eine Übereinstimmung, die Nachfahre eines Elements mit der Klasse .moduletable sind.

Sie wird aber auch an die h3-Elemente vererbt, die in weiteren Nachfahrenelementen des Elements .moduletable notiert sind.

Code: 
#page .moduletable h3 {
background: url(pfad/zur/grafik.jpg);
}
Dieser Nachfahren-Selektor differenziert mit der vorangestellten ID den Gültigkeitsbereich, denn die Regel gilt im Vergleich zur obigen nur für die h3-Elemente, die Nachfahre eines Elements mit der Klasse .moduletable sind, das wiederum ein Nachfahre des Elements mit der ID #page ist.

Für alle h3-Elemente, die zwar in einem Element mit der Klasse .moduletable eingebunden sind, das aber kein Nachfahre des Elements #page ist, trifft die Regel somit nicht zu.

Aber auch hier wird die Formatierung an die h3-Elemente vererbt, die in weiteren Nachfahren des Elements .moduletable eingebunden sind, das sich innerhalb des Element #page befindet.

Vorteil: Mit dem Selektor für Nachfahren lässt sich eine spezifizierte Regel für ein bestimmtes Element im Dokumentbaum aufstellen, die eben nur für dieses Element Gültigkeit besitzt, das mit dem definierten Nachfahrenselektor übereinstimmt. Alle übrigen gleichartigen HTML-Elemente innerhalb des Dokuments, die diesem Selektor nicht entsprechen, bleiben hiervon unberührt, und werden mit diesem Stylesheet nicht formatiert.

Nachteil: Fällt mir spontan keiner ein.


P.S. Sorry, hab gestern Abend im Eifer des Gefechts anstelle des Rautenzeichens einen Punkt gesetzt, und aufgrund deines Hinweises meinen Beitrag entsprechend korrigiert, denn selbstverständlich handelt es sich um die ID #page. ;)
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück