CSS-Vereinfachung: Untergruppe mit den selben Eigenschaften bilden?!

[Erbsenroller]

Hallo,

Nachdem ich mein Header-Problem gelöst habe stehe ich vor einem neuen in meinem Stylesheet. Mit diesen Einträgen definiere ich die verschiedenen Header meiner Seiten:

div#home {
background-image: url(uploads/images/header/header_home.jpg); 
border:1px solid #999999;
width: 760px;
height: 175px;
}

div#news {
background-image: url(uploads/images/header/header_news.jpg); 
border:1px solid #999999;
width: 760px;
height: 175px;
}

Also Rahmen, Rahmenfarbe und Größe sind bei allen Headern gleich. Da es natürlich immer mehr Header werden würde ich gerne eine Art 'Parent-Eigenschaften' festlegen mit der diese Werte definiert werden; damit die einzelnen Header-Div's dann nur noch den Pfad zum Bild bekommen müssen?! Das würde eine etwaige Bearbeitung so sehr vereinfachen.

Jemand eine Idee?

Erbsenroller

[moonie]

Du könntest um Deinen ganzen Header noch einen weiteren Layer platzieren, z.B "header". Diesem gibst Du dann die globalen Eigenschaften wie den Boder mit, und die div#news etc. kriegen nur noch das background-image.


news
home


div#header {
border:1px solid #999999;
width: 760px;
height: 175px;
}

div#home {
background-image: url(uploads/images/header/header_home.jpg);
}

usw. So sollte es klappen.

[Erbsenroller]

Hi Moonie,

also das ist eine Idee. Ich habe es auch probiert. Nur durch die wechselnden Header-Bilder ist das ein bischen komplizierter.

Mein Template-Eintrag:

{get_root_page_alias assign="mainpage"}





Mein CSS-Eintrag:

div#home {
background-image: url(uploads/images/header/header_home.jpg);
border:1px solid #999999;
width: 760px;
height: 175px;
}

div#news {
background-image: url(uploads/images/header/header_news.jpg); 
border:1px solid #999999;
width: 760px;
height: 175px;
}

D.h. die Header werden in Abhängigkeit vom Seitennamen vergeben. Den Eintrag mit einem neuen DIV zu umklammern hat leider nicht funktioniert.

Erbsenroller

[cyberman]

Code: Select all

div#header {
border:1px solid #999999;
width: 760px;
height: 175px;
}

div#home {
background-image: url(uploads/images/header/header_home.jpg);
}

div#news {
background-image: url(uploads/images/header/header_news.jpg);   
}

Und das funktioniert nicht  ?

[nils73]

Das muss auf jeden Fall funktionieren, denn bei diesem Immobilien-Website Projekt haben wir das auch genutzt, auch mit dem User-Tag für get_root_page_alias --- daher direkt die Frage, ob Du den User-Tag auch angelegt hast?!?

Vielleicht solltest Du noch eine Sicherheit einbauen (wobei ich glaube, dass der Seitenalias standardmäßig klein geschrieben ist), also bei der Ausgabe ein {$mainpage|lower} und dann siehst Du es im Quelltext auch entsprechend. Wenn Dein Eintrag im Stylesheet dann entsprechend angelegt ist, dann klappt es auch mit den wechselnden Headern.

Gruß
Nils

[Nogga]

Mal ganz unabhängig von der Lösung mit den verschachtelten Divs:

Soweit ich weiß kannst Du Elemente auch mehrfach "stylen" - probiers mal damit:

Code: Select all

div#home, div#news {
/* allgemein */
background-image: url(uploads/images/header/header_home.jpg);   
border:1px solid #999999;
width: 760px;
height: 175px;
}

div#home {
/* spezifisch für home */
color: purple;
}

div#news {
/* spezifisch für news */
color: red;
}

[Erbsenroller]

Vielen Dank Nogga,

so hats geklappt. 

Gruß,
Erbsenroller