XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   css Style Änderung abhängig zur aktuellen Seite (http://xhtmlforum.de/showthread.php?t=68672)

HansiLick 02.01.2013 21:43

css Style Änderung abhängig zur aktuellen Seite
 
Hi,
ich habe meine css Style alles ausgelagert in einer css Datei.

Auf manchen Seiten soll jedoch das Layout geändert werden.
Aktuell habe ich auf der entsprechenden Seite dann im head-Teil die css aufgeführt, die geändert werden sollen und somit überschreiben die ja den Befehl aus der ausgelagerten Datei.

Ist mir auf Dauer, vor allem wenn weitere Seiten hinzukommen, zu stressig und würde diese css Änderungen gerne auch in der allgemeinen css Datei aufführen.

Geht das irgendwie... Wäre super, wenn ich der entsprechenden Seite eine id geben könnte und dann in der ausgelagerten css Datei ein Bereich aktiviert wird, der auf die id anspringt...

Diese Teile ändern sich und stehen bei mir dann so oder abgeändert auf entsprechenden Seiten...
also nicht nur ein zwei Sachen, sondern schon mehrere, sonst hätte ich einfach eine neue class hinzugefügt...

Code:

<style type="text/css">
<!--
body{
        background: url(../img_layout/hg_2_gelb.png);
}
#wrapper{
        background: #ffffff url(../img_layout/hg_1_gelb.png) repeat-y left top;
}

#navi ul li a:hover, #navi ul li a.aktiv{
        background: url(../img_layout/hg_3_gelb.png) repeat left top;
}
#navi ul li ul li a:hover, #navi ul li ul li a.aktiv{
        background: url(../img_layout/hg_3_gelb.png) repeat left top;
}

#header{
        background: url(../img_layout/gelb.png) no-repeat right top;}
td{vertical-align: top;}
</style>


gabischatz 02.01.2013 22:34

Hi um so säter du Style angaben machst desto ehr werden diese angezeigt.
Alternativ kannst du mit php prüfen ob deine Seite ein Kriterium erfüllt und dann die entsprechende Datei laden.
Hier mal ein Beispiel aus WP:
PHP-Code:

<link rel='stylesheet' id='original_stylesheet-css'  href='http://lspz.de/bilder/wp-content/themes/sp/css/css.css?ver=3.5' type='text/css' media='all' />
<?php if ( is_page(112) || is_page(550) || is_page(607)) {
/**
 * 607 = Startseite
 * 550 = Terminseite
 * 112 = Gästebuchsete

**/
?>
<meta http-equiv="pragma" content="no-cache" /> <?php //Verhindert das Webseiten oft auf Proyservern gespeichert werden. * Die Nutzung empfiehlt sich allerdings nur bei Seiten, die mehrmals täglich neue Inhalte präsentieren. ?>
<meta http-equiv="cache-control" content="no-cache" />

<meta http-equiv="expires" content="-1" /> <?php // ?>
    <?php if ( is_page(607)) {?>
<meta name="robots" content="nosnippet" /> <?php // Unterbindet das Auslesen von Seiteninhalten als beschreibenden Text für die Suchergebnisse. ?>
    <?php }?>
    <?php if ( is_page(112)) {?>
<meta name="robots" content="nofollow" /> <?php //Der Suchroboter darf die Webseite zwar aufnehmen, aber soll den Hyperlinks auf der Seite nicht folgen. ?>
<link rel='stylesheet' id='stylesheet-css'  href='http://lspz.de/bilder/wp-content/themes/sp/css/geastebuch.css?ver=3.5' type='text/css' media='all' />
    <?php }?>
<?php 
}else{?>
<meta http-equiv="cache-control" content="cache" /> <?php //Damit wird der Browser aufgefordert, die Seite im lokalen Speicher zu cachen. ?>
<?php 
}?>

MfG

HansiLick 02.01.2013 22:38

Muss ich dann die if clause in den head teil der einzelnen Seite setzen oder geht das auch im externen css Sheet?


Wie kann ich die Seiten mit den Nummern deklarieren?

Manfred62 03.01.2013 07:19

gib einfach auf jeder Seite dem body eine individuelle id.

HansiLick 03.01.2013 16:00

Quasi so?
HTML-Code:

<body id="1">

Muss ich das dann in head Teil der Seiten machen, oder kann ich das in die ausgelagerte Css Datei stecken?
Muss dazu der Code noch umgewandelt werden?

Sollte es nicht in die externe Datei gehen, würde ich es in einer seperaten php Datei speichern und per include einbinden, so müsste ich nur diese eine Datei bei gewünschten Änderungen ändern.

Gibt es einen besseren Vorschlag?

Manfred62 03.01.2013 16:30

Code:

<body id="seite1">
so gehört es ins html. Die css-Anweisungen kommen dann in die externe css Datei.
BTW: was willst du denn dort umwandeln?

HansiLick 03.01.2013 16:48

Zitat:

Zitat von Manfred62 (Beitrag 524486)
Code:

<body id="seite1">
so gehört es ins html. Die css-Anweisungen kommen dann in die externe css Datei.
BTW: was willst du denn dort umwandeln?

Umwandeln?
Ich war mir nur nicht sicher, ob der php-Code, der oben geschrieben wurde, so von mir einfach in die css-Datei geschrieben werden kann. Oder ob man den vorher "auf css" umwandeln muss.

Das kann ich dann also einfach so in die css Datei schreiben?
PHP-Code:

<?php if ( is_page(112) || is_page(550) || is_page(607)) { 
/** 
 * 607 = Startseite 
 * 550 = Terminseite 
 * 112 = Gästebuchsete 

**/ 
?> 
<meta http-equiv="pragma" content="no-cache" /> <?php //Verhindert das Webseiten oft auf Proyservern gespeichert werden. * Die Nutzung empfiehlt sich allerdings nur bei Seiten, die mehrmals täglich neue Inhalte präsentieren. ?> 
<meta http-equiv="cache-control" content="no-cache" /> 

<meta http-equiv="expires" content="-1" /> <?php // ?> 
    <?php if ( is_page(607)) {?> 
<meta name="robots" content="nosnippet" /> <?php // Unterbindet das Auslesen von Seiteninhalten als beschreibenden Text für die Suchergebnisse. ?> 
    <?php }?> 
    <?php if ( is_page(112)) {?> 
<meta name="robots" content="nofollow" /> <?php //Der Suchroboter darf die Webseite zwar aufnehmen, aber soll den Hyperlinks auf der Seite nicht folgen. ?> 
<link rel='stylesheet' id='stylesheet-css'  href='http://lspz.de/bilder/wp-content/themes/sp/css/geastebuch.css?ver=3.5' type='text/css' media='all' /> 
    <?php }?> 
<?php }else{?> 
<meta http-equiv="cache-control" content="cache" /> <?php //Damit wird der Browser aufgefordert, die Seite im lokalen Speicher zu cachen. ?> 
<?php }?>


Thielo 03.01.2013 18:17

Vergiss alles was in dem PHP-Code steht. Vergiss es einfach komplett ;)
In die CSS-Datei gehört kein PHP (Außer man nutzt Variablen in der CSS-Datei die erst geparst werden müssen) und das was im genannten PHP steht, wird im header einer normalen Seite benutzt, was also nichts mit CSS zu tun hat.

Ebenfalls muss nichts umgewandelt werden.

Sehen wir folgende Beispiele:

HTML-Code:

<body><h1>Ich bin eine Überschrift</h1></body>
HTML-Code:

<body id="kontaktseite"><h1>Ich bin eine Überschrift</h1></body>
Du könntest nun die Überschrift im 2. Code-Container mit dem Selektor
Code:

#kontaktseite h1
ansprechen.

Vielleicht hilft dir diese Erklärung etwas :)

Manfred62 03.01.2013 18:26

das mit dem php ist Stuss...
Noch ein Hinweis: eine id oder class muss mit einem Buchstaben anfangen.

Beispiel:
Code:

html:
<body id="seite1">
<body id="seite2">
<body id="seite3">

css:
#seite1 #wrapper {background: red;}
#seite2 #wrapper {background: blue;}
#seite3 #wrapper {background: green;}


HansiLick 03.01.2013 18:59

Zitat:

Zitat von Thielo (Beitrag 524494)
...

Danke auch für deine Erklärung.
Mir war im php Code aber nicht so ganz klar welcher Abschnitt nun die Bedingung und welcher die Auswirkung behandelt... konnte kein eindeutiges Muster im Code erkennen.


Zitat:

Zitat von Manfred62 (Beitrag 524495)
das mit dem php ist Stuss...
Noch ein Hinweis: eine id oder class muss mit einem Buchstaben anfangen.

Beispiel:
Code:

html:
<body id="seite1">
<body id="seite2">
<body id="seite3">

css:
#seite1 #wrapper {background: red;}
#seite2 #wrapper {background: blue;}
#seite3 #wrapper {background: green;}


Die Idee ist natürlich am einfachsten, hab ich aber auch gar nicht dran gedacht...

Habe es nun so umgesetzt, jedoch ein Problem dabei.
Leider wird der code nicht übernommen...
Auch das Ändern der Bild URL mit fixem Pfad brachte keine Besserung.


Aktuell folgender Code:

HTML:
HTML-Code:

<link href="gb_style.css" rel="stylesheet" type="text/css">

<body id="nord_osten">

In der CSS-Datei:

PHP-Code:

#nord-osten body{
    
backgroundurl(../img_layout/hg_2_gelb.png);
}
#nord-osten #wrapper{
    
background#ffffff url(../img_layout/hg_1_gelb.png) repeat-y left top;
}

#nord-osten #navi ul li a:hover, #nord-osten #navi ul li a.aktiv{
    
backgroundurl(../img_layout/hg_3_gelb.pngrepeat left top;
}
#nord-osten #navi ul li ul li a:hover, #nord-osten #navi ul li ul li a.aktiv{
    
backgroundurl(../img_layout/hg_3_gelb.pngrepeat left top;
}

#nord-osten #header{
    
backgroundurl(../img_layout/gelb.pngno-repeat right top;}
#nord-osten td{vertical-align: top;} 



Alle Zeitangaben in WEZ +2. Es ist jetzt 12:29 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023