div-Navigation: gemeinsame Angaben zusammenfassen?

Hallo allerseits,

Gustafsson hat mir Mut gemacht, hier mal meine Probleme zu posten. Ich bin ein wahrer DAUser bezüglich css & divs und so...

Ich bastel gerade meine Navigation um. Hab mir ein Gerüst kopiert und für meine Zwecke umgebaut. Nun benötige ich für meine Textnavigation 7 verschiedene Darstellungsweisen (zum einen wegen der Farbgebung, zum anderen wegen der Abstände nach links + unten). Also habe ich 7 <div class> erstellt:

1. buttons = normale, anklickbare Begriffe

2. buttons_aktive = Begriff, der ausgewählt ist

3. buttons_head = Begriff, unter dem Unterpunkte aufgeklappt sind (der ist auch gleichzeitig aktive)

4. buttons_under = Unterpunkte

5. buttons_under_passive = Unterpunkt, der nicht anzuklicken ist

6. buttons_under_last_passive = letzter Unterpunkt in der Navi (nicht anzuklicken)

7. buttons_under_last_aktive = letzter Unterpunkt in der Navi (anklickbar)

Soweit funktioniert das alles auch (*stolz*). Allerdings denke ich, daß man das css-mäßig noch besser zusammenfassen könnte!
Nehmen wir mal die Unterpunkte:

Ich habe jetzt für jede dieser <div class> im css ein eigenes Ding angelegt, z.B.:
.buttons_under a {
.buttons_under_passive {
und so weiter

Die Blöcke enthalten aber jeweilse viele Angaben doppelt, die für ALLE Unterpunkte gelten, wie z.B. padding-left: 18px
Nun bekomme ich da in meinem Kopf irgendwie nicht gebacken, nur EINEN Block zu machen, in dem alle für alle Unterpunkte gültigen Angaben stehen (z.B. das padding-left) und dann die jeweiligen individuelle Angaben (z.B. color) in den einzelnen Blöcken.

Hier mein HTML-Code:

<div class="buttonscontainer">
		
		<div class="buttons">
		<a href="home.html">Home</a>
		<a href="einleitung.html">Einleitung</a>
		</div>
		
		
		<div class="buttons_head"><a href="traumdeutung_welcome.html">Traumdeutung</a></div>

		<div class="buttons_under">
		<a href="traumdeutung_allgemein.html">Allgemeines</a>
		<a href="traumdeutung_besonderes.html">Besonderes</a>
		</div>
		
		<div class="buttons_under_last_passive">Ablauf</div>


		<div class="buttons">
		<a href="traumhelfer.html">Traumhelfer</a>
		<a href="zurperson.html">zur Person</a>
		<a href="kontakt.html">Kontakt</a>
		</div>
		
</div>

Und der css-Code, falls es interessiert:

/* -----------------------------------*/
/* -------->>> Navigation <<<---------*/
/* -----------------------------------*/


/* Position und Größe der Navigation*/	

.buttonscontainer {
	position:fixed;
    top: 9.8em; 
    left: 1em;
	width: 125px;
	}


/* für Navigations-Hauptpunkte*/

.buttons a {
	color: #054AF9;
	background-color: #FFFFFF;
	padding: 2px;
	padding-left: 3px;
	display: block;
	font-size: 0.83em;
	font-family: Verdana,Helvetica,Arial,sans-serif;
	font-weight: normal;
	text-decoration: none;
	text-align: left;
	margin: 0 0 1.2em;
	}
	
.buttons a:hover {
	background-color: #FFFFFF;
	color: #9CB6F8;
	text-decoration: none;
	}

	
	
/* für aktive Navigations-Hauptpunkte*/

.buttons_aktive a {
	color: #003399;
	background-color: #FFFFFF;
	padding: 2px;
	display: block;
	font-size: 0.83em;
	font-family: Verdana,Helvetica,Arial,sans-serif;
	font-weight: normal;
	text-decoration: none;
	text-align: left;
	margin: 0 0 1.2em;
	}

	

		
/* für den Begriff über den Unterpunkten */	

.buttons_head a {
	color: #003399;
	background-color: #FFFFFF;
	padding: 2px;
	display: block;
	font-size: 0.83em;
	font-family: Verdana,Helvetica,Arial,sans-serif;
	font-weight: normal;
	text-decoration: none;
	text-align: left;
	margin: 0 0 0.4em;
	}
	
.buttons_head a:hover {
	background-color: #FFFFFF;
	color: #9CB6F8;
	text-decoration: none;
	}
	
	
/* für aktive Unterpunkte in der Navigation */	

.buttons_under a {
	color: #80A4FC;
	background-color: #FFFFFF;
	padding: 2px;
	padding-left: 18px;
	display: block;
	font-size: 0.70em;
	font-family: Verdana,Helvetica,Arial,sans-serif;
	font-weight: normal;
	text-decoration: none;
	text-align: left;
	margin: 0 0 0.4em;
	}
	
.buttons_under a:hover {
	background-color: #FFFFFF;
	color: #003399;
	text-decoration: none;
	}


/* für passive Unterpunkte in der Navigation */	

.buttons_under_passive {
	color: #003399;
	background-color: #FFFFFF;
	padding: 2px;
	padding-left: 18px;
	display: block;
	font-size: 0.70em;
	font-family: Verdana,Helvetica,Arial,sans-serif;
	font-weight: normal;
	text-decoration: none;
	text-align: left;
	margin: 0 0 0.4em;
	}



/* für den untersten aktiven Unterpunkt in der Navigation */	

.buttons_under_last_aktive a {
	color: #80A4FC;
	background-color: #FFFFFF;
	padding: 2px;
	padding-left: 18px;
	display: block;
	font-size: 0.70em;
	font-family: Verdana,Helvetica,Arial,sans-serif;
	font-weight: normal;
	text-decoration: none;
	text-align: left;
	margin: 0 0 1.2em;
	}
	
.buttons_under_last_aktive a:hover {
	background-color: #FFFFFF;
	color: #003399;
	text-decoration: none;
	}



/* für den untersten passiven Unterpunkt in der Navigation */	

.buttons_under_last_passive {
	color: #003399;
	background-color: #FFFFFF;
	padding: 2px;
	padding-left: 18px;
	display: block;
	font-size: 0.70em;
	font-family: Verdana,Helvetica,Arial,sans-serif;
	font-weight: normal;
	text-decoration: none;
	text-align: left;
	margin: 0 0 1.2em;
	}

Live zu sehen unter: http://www.traumhelfer.de/traumdeutung_ablauf.html

Bei allem, was ich an Zusammenfassung versuche kommt nur Chaos raus...¿ X-/ ?

Ich bin also für Tips dankbar!

Domenika

Hallo Jörg,

danke für Deine Antwort. Darauf hätte ich ja auch kommen können... :)
Jetzt habe ich schon einiges zusammengespart.

Die Unterpunkte haben ja alle die gleiche font-size (kleiner als die Hauptpunkte) und padding-left.
Ist es da sinnvoll, irgendwie ein Element für die Unterpunke (und separat für die Hauptpunkte) zu schaffen, in dem diese Gemeinsamkeit festgehalten ist? Einfacher wäre es ja mit nur einem Block, wenn man mal was ändern will.
Oder sollte man das einfach in jedem Block einzeln stehen lassen, weil es sonst chaotisch wird?

Da müßte ich ja irgendwie noch diese Unterpunkte zusammenfassen. Das krieg ich nicht hin. Wenn ich da sowas einbaue, mit dem ich alle Unterpunkte ansprechen will:

.buttons_under {
	padding-left: 18px;
	font-size: 0.70em;
	}

dann wissen die Blöcke ".buttons_under a", ".buttons_under_passive" und so weiter nicht, daß sie dort nachgucken sollen.

(Ist es wichtig, daß die Namen irgendwie zusammenpassen?)

Danke!
Domenika

Der jetzige Stand:

/* -----------------------------------*/
/* -------->>> Navigation <<<---------*/
/* -----------------------------------*/


/* Position und Größe der Navigation*/	

.buttonscontainer {
	position:fixed;
    top: 9.8em; 
    left: 1em;
	width: 125px;
	background-color: #FFFFFF;
	font-family: Verdana,Helvetica,Arial,sans-serif;
	font-weight: normal;
	display: block;
	text-align: left;
	}
	
.buttonscontainer a {
	text-decoration: none;
	display: block;
	}


/* für Navigations-Hauptpunkte*/

.buttons a {
	color: #054AF9;
	padding: 2px;
	padding-left: 3px;	
	font-size: 0.83em;	
	margin: 0 0 1.2em;
	}
	
.buttons a:hover {
	color: #9CB6F8;
	text-decoration: none;
	}

	
	
/* für aktive Navigations-Hauptpunkte*/

.buttons_aktive a {
	color: #003399;
	padding: 2px;	
	font-size: 0.83em;		
	margin: 0 0 1.2em;
	}

	

		
/* für den Begriff über den Unterpunkten */	

.buttons_head a {
	color: #003399;
	padding: 2px;
	font-size: 0.83em;	
	margin: 0 0 0.4em;
	}
	
.buttons_head a:hover {
	color: #9CB6F8;
	text-decoration: none;
	}
	
	
	
/* für aktive Unterpunkte in der Navigation */	

.buttons_under a {
	color: #80A4FC;
	padding: 2px;
	padding-left: 18px;
	font-size: 0.70em;
	margin: 0 0 0.4em;
	}
	
.buttons_under a:hover {
	color: #003399;
	}


/* für passive Unterpunkte in der Navigation */	

.buttons_under_passive {
	color: #003399;
	padding: 2px;
	padding-left: 18px;
	display: block;
	font-size: 0.70em;
	margin: 0 0 0.4em;
	}



/* für den untersten aktiven Unterpunkt in der Navigation */	

.buttons_under_last_aktive a {
	color: #80A4FC;
	padding: 2px;
	padding-left: 18px;
	font-size: 0.70em;
	margin: 0 0 1.2em;
	}
	
.buttons_under_last_aktive a:hover {
	color: #003399;
	}



/* für den untersten passiven Unterpunkt in der Navigation */	

.buttons_under_last_passive {
	color: #003399;
	padding: 2px;
	padding-left: 18px;
	font-size: 0.70em;
	margin: 0 0 1.2em;
	}

Wow, Du eröffnest mir ein völlig neues Universum! Das man da 2 reinschreiben kann war mir nicht klar! Wie praktisch :)

Jetzt siehts so aus:

/* ----- UNTERPUNKTE ----- */	
	
.under {
	padding-left: 18px;
	font-size: 0.70em;
	display: block;
	}
	
	
			
/* für aktive Unterpunkte in der Navigation */	

.buttons_under a {
	color: #80A4FC;
	padding: 2px;
	margin: 0 0 0.4em;
	}
	
.buttons_under a:hover {
	color: #003399;
	}



/* für passive Unterpunkte in der Navigation */	

.buttons_under_passive {
	color: #003399;
	padding: 2px;
	margin: 0 0 0.4em;
	}



/* für den untersten aktiven Unterpunkt in der Navigation */	

.buttons_under_last_aktive a {
	color: #80A4FC;
	padding: 2px;
	margin: 0 0 1.2em;
	}
	
.buttons_under_last_aktive a:hover {
	color: #003399;
	}



/* für den untersten passiven Unterpunkt in der Navigation */	

.buttons_under_last_passive {
	color: #003399;
	padding: 2px;
	margin: 0 0 1.2em;
	}

Allerdings hören nicht alle Blöcke darauf:
.buttons_under_last_passive und
.buttons_under_passive
ignorieren padding-left in der neuen under-Gruppe.
(Ja, ich habe im HTML die das under in die Class eingefügt und auf Rechtschreibung geprüft ;) )
Diese beiden zeichnen sich dadurch aus, daß sie keine Links beschreiben. Bei allen Gruppen mit Links funktioniert es. ???

Wenn ich das padding: 2px; in die neue under-Gruppe schreibe, dann hört kein Block darauf, sondern sie gehen alle auf 0. Gibt es bestimmte Eigenschaften die man nicht in solche "Eltern"-Blöcke stellen kann?

Fällt Dir dazu was ein?

Danke!

Ahh, der Innenabstand, verstehe! Danke!

Jetzt hab ich das ganze Ding schon ganz schön abgespeckt, so siehts besser aus ;)

Noch eine Frage: Ich wollte einige der Bezeichnungen ändern:

<div class="buttonscontainer"> in
<div class="navigation">

Das habe ich im HTML und im CSS template geändert, aber dann gings nicht mehr? Kann das sein? Warum?

Noch eine Style-Frage: gibt es eine inoffizielle Ordung, in der man die Eigenschaften innerhalb der { } ordnet?

position:fixed;
top: 9.8em;
left: 1em;
width: 125px;
background-color: #FFFFFF;
font-family: Verdana,Helvetica,Arial,sans-serif;
font-weight: normal;
display: block;
text-align: left;
padding: 2px;

Oder ist das egal?

Danke, Du hast mir sehr geholfen! :)

Domenika
*always willing to learn*

Danke! Bin dank Jörg schon sehr viel weiter :)
Danke für den Tip!