Zur Navigation

div-Navigation: gemeinsame Angaben zusammenfassen?

1 Domenika

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

29.04.2006 13:02

2 Jörg

Hallo Domenika,

ein DAU hinsichtlich CSS bist du sicher nicht, du hast ja schon einiges zustande gebracht :)

Zusammenfassen kannst du gemeinsame Eigenschaften der Links, indem du den betreffenden Selektor über das "Großeltern"-Element .buttonscontainer kennzeichnest, z.B. für die Eigenschaft padding:

.buttonscontainer a {
padding: 2px;
}

29.04.2006 14:14 | geändert: 29.04.2006 14:16

3 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;
	}

29.04.2006 14:41

4 Jörg

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?

Du könntest dafür eine gemeinsame Klasse definieren, z.B. "under" und dort die gemeinsamen Eigenschaften aufführen:

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

Die individuellen Eigenbschaften werden weiterhin in den individuellen Klassen aufgeführt. Den betreffenden Elementen werden dann im HTML-Quelltext beide Klassen zugeordnet (jeweils durch ein Leerzeichen getrennt):

<div class="buttons_under under">

<div class="buttons_under_last_passive under">

29.04.2006 14:51 | geändert: 29.04.2006 14:52

5 Domenika

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!

29.04.2006 15:11

6 Jörg

.buttons_under_last_passive und
.buttons_under_passive
ignorieren padding-left in der neuen under-Gruppe.

Dort wird der Angabe dieser Klasse, nämlich padding:2px, Vorrang gegeben. Vielleicht könntest du dies so lösen:

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

(die vier Zahlen bezeichnen die Abstände von oben nach links im Uhrzeigersinn)

Wenn ich das padding: 2px; in die neue under-Gruppe schreibe, dann hört kein Block darauf, sondern sie gehen alle auf 0.

Die 2px bezeichnen z.B. im Falle von '.buttons_under a' den Innenabstand dieses Links, nicht den Innenabstand des Divs, in welchem sich der Links befindet. Bei einer Übertragung auf die höhere Ebene müsstest du diese Angabe entsprechend nicht dem Selektor '.under', sondern dem Selektor '.under a' zuordnen:

.under a {
padding: 2px;
}

29.04.2006 16:51

7 Domenika

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*

29.04.2006 17:11

8 Gustafsson

moin domenika,

schön das du hergefunden hast und wie ich sehe bist du gleich in guten händen gelandet ;-)

nun denn, dann wünsch ich dir viel erfolg mit deinen präsenzen ,-)

gruß uwe

29.04.2006 17:11

9 Domenika

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

29.04.2006 17:15

10 Jörg

Zitat von Domenika
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?

Das sollte eigentlich funktionieren - vielleicht hat dein Browser noch das alte Style Sheet im Cache? dann einmal aktualisieren.

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

Mir ist keine bekannt - aber so eine Frage wäre vielleicht mal ein Extra-Thread wert :)

29.04.2006 22:02