Page 1 of 1

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

Posted: Mon Mar 12, 2007 12:38 pm
by 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

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

Posted: Mon Mar 12, 2007 1:12 pm
by 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.

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

Posted: Mon Mar 12, 2007 1:46 pm
by 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

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

Posted: Mon Mar 12, 2007 4:44 pm
by 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  ::)?

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

Posted: Mon Mar 12, 2007 8:54 pm
by 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

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

Posted: Tue Mar 13, 2007 4:00 pm
by 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;
}



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

Posted: Tue Apr 03, 2007 12:10 pm
by Erbsenroller
Vielen Dank Nogga,

so hats geklappt.  ;D

Gruß,
Erbsenroller