kostenloser Webspace werbefrei: lima-city

PHP in CSS

lima-city → Forum → Programmiersprachen → PHP, MySQL & .htaccess

anfang auto beispiel benutzen bild browser code datei definition design header hintergrund image index post programm text url webseite wissen
  1. Autor dieses Themas

    webdesignerin

    Kostenloser Webspace von webdesignerin

    webdesignerin hat kostenlosen Webspace.

    10:26, 2.5.2009
    Hallo

    Habe grad Neuland für mich entdeckt und möchte das mit Eurer Hilfe gern erkuden... :biggrin:

    Es geht um CSS in PHP und umgekehrt , siehe: PHP in CSS - Dynamic Style Sheet

    Ich würde gerne wissen, wie ich meine CSS entsprechend umcoden muss. Zudem habe ich eher Hintergrundbilder als Farben und auch mehrere und ich weiß nicht wie das geht und ob man die "background" PHP Befehle nummerieren muss etc.

    Hier mein Quellcode:

    body {
	margin: 0;
	padding: 0;
	background: #FEEDB9 url(images/img01.jpg) repeat-x left top;
	text-align: justify;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 10px;
	color: #2F4600;
}

form {
	margin: 0;
	padding: 0;
}

fieldset {
	margin: 0;
	padding: 0;
	border: none;
}

input, textarea, select {
	font: normal 1em "Trebuchet MS", Arial, Helvetica, sans-serif;
}


h1, h2, h3 {
	font-weight: normal;
	color: #5F8700;
}

h1 {
	letter-spacing: -1px;
	font-size: 1.2em;
}

h2 {
	font-size: 1.2em;
}

h3 {
	font-size: 1.2em;
}

p, ul, ol {
}

p {
}

.blockbg {
	background: #D9D785;
}

blockquote {
	font-style: italic;
	border: #D9D785 1px dashed;
	background: #ECE29F;
	margin: 0;
	padding: 0px 20px;
	font-size: 14px;
	color: #A1B635;
}

ul {
}

ol {
}

a {
	color: #4E7301;
}

a:hover {
	text-decoration: none;
}

small {
}

hr {
	display: none;
}

img {
	border: none;
}

img.left {
	float: left;
	margin: 0 15px 0 0;
	border: #D9D785 1px dashed;
}

img.right {
	float: right;
	margin: 0 0 0 15px;
	border: #D9D785 1px dashed;
}

/* Header */

#header {
	#header {
	width: 800px;
	height: 155px;
	margin-top: 0 auto;
	letter-spacing: -1px;
	font-family: Georgia, "Times New Roman", Times, serif;
}
}

#headerbg {
	margin: 0 auto;
	width: 800px;
	height: 150px;
	margin-top: 75px;
	background: url(images/img02.jpg) no-repeat left top;
}

/* Logo */


#logo h1, #logo h2, #logo p {
	float: left;
        url(images/header.gif)
}

#logo h1 {
	padding-top: 100px;
	text-align: center;
	font-size: 4em;
	color: #299762;
}

#logo h1 a {
	color: #FEEDB9;
}

#logo p {
	padding-top: 100px;
	text-transform: lowercase;
	font-size: 1.8em;
	color: #ABC13A;
}

#logo h2 a, #logo p a {
	color: #ABC13A;
}

#logo a {
	text-decoration: none;
}



/* Menu */

#menu {
	display: inline;
	height: 1+0px;
        text-align: center;

}

#menu ul {
	display: inline;
        text-align: center;
	margin: 0 auto;
	list-style: none;

}

#menu li {
	display: inline;
        text-align: center;

}

#menu a {
	float: left;
	height: 0px;
	margin: 0 auto;
	padding: 30px 53px 0px 0px;
	text-decoration: none;
	font-size: 1.8em;
	color: #A2B736;
        font-family: Mael;
        letter-spacing: -1px;
}
#menu a:hover {
	height: 0px;
	color: #FFFFFF;
}

#menu .current_page_item a {
	color: #FEEDB9;
}

/* Page */

#page {
	width: 820px;
	margin: 0 auto;
	padding-top: 40px;
}

#latest-post {
	float: left;
	width: 400px;
	padding: 0px 20px 0px 20px;
	line-height: 25px;
	font-size: 16px;
}

#recent-posts {
	float: right;
	width: 300px;
	padding: 0px 20px 20px 20px;
	line-height: 25px;
	font-size: 16px;
}

#recent-posts .entry {
}

#recent-posts .entry a {
}

#recent-posts .more {
	background: url(images/img04.gif) no-repeat left 50%;
	padding-left: 20px;
}

.post {
}

.post .title {
	margin: 0;
}

.post .meta {
	margin: 0;
	padding-bottom: 10px;
	padding-top: 10px;
	line-height: normal;
	font-size: 13px;
	color: #A2B736;
}

.post .meta a {
	color: #7F9C1E;
}

.post .entry {
	margin-bottom: 20px;
	padding-bottom: 5px;
	border-bottom: #D9D785 1px dashed;

}


/* Footer */

#footer {
	width: 800px;
	height: 40px;
	margin: 0 auto;
	padding-top: 20px;
	background: #F5E7AC;
}

#footer p {
	margin: 0;
	padding: 15px;
}

#legal {
	float: left;
}

#links {
	float: right;
}

#wrapper {
	width: 100%;
	background: #5C8400;
}


    Vielen Dank schonmal im Vorraus.


    LG
    Webdesignerin :angel:

  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. bladehunter

    Kostenloser Webspace von bladehunter

    bladehunter hat kostenlosen Webspace.

    10:42, 2.5.2009
    Hm. Was ist jetzt eigentlich deine Frage?

    Du scheinst noch nicht grundsätzlich verstanden zu haben, was PHP eigentlich ist.
    "PHP" steht für "PHP Hypertext Preprocessor" . Und ja, das ist ein Rekursives Akronym.

    Ein Präprozessor ist ein Programm, dass vor ein anderes Programm vorgeschaltet wird und die Eingabe des anderen Programms vorprozessiert.

    Am Beispiel von PHP und HTML:

    PHP macht aus
    <p>
<?php
echo "Ich bin HTML"
?>
</p>

    die Eingabe
    <p>
Ich bin HTML
</p>

    für den Browser.

    Oder noch einmal schematisch:
    PHP Datei --[PHP Hypertext Preprocessor]--> HTML Datei --[Browser]--> Man sieht eine Website :smile:

    Und PHP kannst du natürlich nicht nur für HTML benutzen. Im Grunde genommen ist jedes Dateiformat mit PHP erzeugbar. Mit CSS würde das so aussehen:

    div { //anfang der CSS Definition für div
<?php //anfang des PHP Blocks
if( $gruen ) {
 echo "background-color:green";
}
else {
 echo "background-color:red";
}
?> //ende des PHP Blocks
font-size:20px;
} //ende der CSS Definition für div


    Und einbinden tust du das ganze dann mit
    <link rel="stylesheet" type="text/css" href="mein_php_zauber_stylesheet.php" />

    im <head>

    Beitrag zuletzt geändert: 2.5.2009 10:43:07 von bladehunter
  4. Autor dieses Themas

    webdesignerin

    Kostenloser Webspace von webdesignerin

    webdesignerin hat kostenlosen Webspace.

    11:39, 2.5.2009
    Hi :wave:

    bladehunter schrieb:

    Du scheinst noch nicht grundsätzlich verstanden zu haben, was PHP eigentlich ist. "PHP" steht für "PHP Hypertext Preprocessor" . Und ja, das ist ein Rekursives Akronym.

    Ein Präprozessor ist ein Programm, dass vor ein anderes Programm vorgeschaltet wird und die Eingabe des anderen Programms vorprozessiert.


    Doch, das habe ich schon verstanden. ;-)


    bladehunter schrieb:
    Was ist jetzt eigentlich deine Frage?


    Ich scheine mich wohl nicht klar genug ausgedrückt zu haben. :rolleyes: Ich wollte wissen, wie die Variablen aussehen, wenn ich anstatt Farben Bilder als Hintergrund in der PHP-CSS definiere.


    bladehunter schrieb:
    Und PHP kannst du natürlich nicht nur für HTML benutzen. Im Grunde genommen ist jedes Dateiformat mit PHP erzeugbar. Mit CSS würde das so aussehen:

    div { //anfang der CSS Definition für div
<?php //anfang des PHP Blocks
if( $gruen ) {
 echo "background-color:green";
}
else {
 echo "background-color:red";
}
?> //ende des PHP Blocks
font-size:20px;
} //ende der CSS Definition für div


    Dein Beispiel wiederholt ja nur nochmal das, was auf der von mir verlinkten Seite steht. Ich möchte aber wissen, wie das mit Hintergrundbildern aussieht. Bleibt die Variable "background" oder muss sie "background url" lauten oder anders usw.? :confused:


    LG
    Webdesignerin :angel:

  5. bladehunter

    Kostenloser Webspace von bladehunter

    bladehunter hat kostenlosen Webspace.

    11:48, 2.5.2009
    webdesignerin schrieb:
    Dein Beispiel wiederholt ja nur nochmal das, was auf der von mir verlinkten Seite steht. Ich möchte aber wissen, wie das mit Hintergrundbildern aussieht. Bleibt die Variable "background" oder muss sie "background url" lauten oder anders usw.? :confused:

    Was hat dein Problem dann mit PHP zu tun?
    Für Hintergrundbilder musst du die CSS-Eigenschaft background-image benutzen.
  6. Autor dieses Themas

    webdesignerin

    Kostenloser Webspace von webdesignerin

    webdesignerin hat kostenlosen Webspace.

    12:20, 2.5.2009
    Hi :nosmile:

    Irgendwie reden wir, glaube ich, aneinander vorbei... :slant:

    bladehunter schrieb:
    Was hat dein Problem dann mit PHP zu tun?


    Viel! :rolleyes:


    Naja also es wird ja geschrieben:

    <?php
  header('Content-type: text/css');
  $background = "#ffffff";
  $color = "#000000";
  $green = "#16a86f";
?>


    Wenn ich anstatt einer Farbe das Bild 01.jgp habe, muss dann in der 2. Zeile $background-url="images/01.jpg" stehen?


    Und hier: 

    body {
  background-color: <?=$background?>;
}


    Muss die Zeile, im Falle der Verwendung eines Hintergrundbildes dann wie folgt lauten?

    background-url: images/01.jpg.jpg<?=$background?>;
}



    Dann das Logo. Das ist ja bei mir so:

    #logo h1, #logo h2, #logo p {
	float: left;
        url(images/header.gif)


    Also mit Bild und nicht mit Farbe (z.B. $green?) wie hier:

    #logo {
  color: <?=$green?>;
  font-weight: bold;
}


    Eigentlich müsste es doch egal sein ob man $green? oder <$blaugelb?> schreibt, wen ich Deiner These folgen würde. Genauso müsste es <$background?> sein, also man dürfte es auch <$Hintergrund?> nennen, was ich aber partout nicht glaube ;-)

    MfG
    Webdesignerin :angel:

    P.S: Jetzt klarer wasich meine? Ich möchte beides unter einen hut bringen und nicht entweder CSS oder PHP. Und nach der von mir genannten Webseite geht das mit der sogannnte style.css.php ...

  7. w******s

    12:26, 2.5.2009
    Die Sachen mit dem Dollar-Zeichen nennt man Variablen. Geht es um die?
    Wenn ja, dann haste recht. Man kann die (fast) frei wählen. Also kannste "$background-image" genauso benutzen wie "$hintergrundbild" oder sonst was. Sind ja auch Variablen;-)
  8. Autor dieses Themas

    webdesignerin

    Kostenloser Webspace von webdesignerin

    webdesignerin hat kostenlosen Webspace.

    12:32, 2.5.2009
    werktags schrieb:
    Die Sachen mit dem Dollar-Zeichen nennt man Variablen. Geht es um die?
    Wenn ja, dann haste recht. Man kann die (fast) frei wählen. Also kannste "$background-image" genauso benutzen wie "$hintergrundbild" oder sonst was. Sind ja auch Variablen;-)


    :redface: ENDLICH weiß jemand was ich meine!!! :thumb:

    Ja ich meinte die Variablen, das hatte ich ja auch schon 10 Posts vorher erwähnt, ist aber wohl auf der anderen Seite bis jetzt nicht angkommen. :biggrin:

    So und nun mal ein Stück weitergedacht, stimmt denn der Code so wie ich ihn im obigen Post an meine Verhältnisse angepasst habe? Wenn nicht, wie müsste er sein?

    Danke und LG,
    Webdesignerin :angel:

  9. b******a

    12:33, 2.5.2009 
    #logo {
  color: <?=$green?>;
  font-weight: bold;
}

    Sowas dürfte nicht funktionieren ;) Wenn dann:

    #logo {
  color: <?php echo $green; ?>;
  font-weight: bold;
}


    Jetzt musst du natürlich irgendwo $green definieren. Das kannst du z.B. mit
    <?php
$green = "#00B400";
?>

    machen.

    Bitte denke auf jeden Fall daran, dass du ganz am Anfang deiner PHP-Datei welche einmal CSS ausgeben soll das da stehen hast:
    <?php
  header('Content-type: text/css');
?>

    Ansonsten stellen sich manche Browser etwas quer, da das Stylesheet nicht den richtigen MIME-Type hat.
  10. Autor dieses Themas

    webdesignerin

    Kostenloser Webspace von webdesignerin

    webdesignerin hat kostenlosen Webspace.

    14:28, 2.5.2009
    HI ;-)

    Danke, :thumb: aber warum 

    color: <?php echo $green; ?>


    und nicht wie auf der Webseite

    color: <?=$green?>


    Wieso ist das von der Webseite falsch? :confused:


    Ich habe die CSS bereits zur Hälfte umgebaut, doch an einem Punkt weiß ich nicht weiter. Muss das inder Definition der Variablen am Anfang

    $header_background = (images/img02.jpg)


    heißen, oder eher:

    $header_background = images/img02.jpg


    oder sogar

    $header_background = "images/img02.jpg"



    :confused: :biggrin:


    LG
    Webdesignerin :angel:

  11. kochmarkus

    Co-Admin Kostenloser Webspace von kochmarkus

    kochmarkus hat kostenlosen Webspace.

    14:55, 2.5.2009 
    <?php
$hintergrund = "url(images/img02.jpg)";
?>
...
#headerbg {
	margin: 0 auto;
	width: 800px;
	height: 150px;
	margin-top: 75px;
	background: <?=$hintergrund?> no-repeat left top;
}


    Das ganze macht aber eigentlich nur Sinn, wenn du das Hintergrundbild öfter in deiner Stylesheetdatei verwendest, weil du es dann zentral an einer Stelle ändern kannst.

    €dit: Achja, zu dem 
    color: <?php echo $green; ?>
    bzw. 
    color: <?=$green?>
    das zweite ist eine Kurzschreibweise für die ersten Zeile. Es sollte eigentlich beides funktionieren.

    Beitrag zuletzt geändert: 2.5.2009 14:59:25 von kochmarkus

  12. w******s

    15:13, 2.5.2009
    Jetzt würde mich aber mal etwas interessieren: Wofür brauchst du das? Ich meine bisher ist es ja lediglich ein dynamisches Einbinden der Attribut-Werte. Das mag vllt. mal ganz nett sein, jedoch sehe ich da erst ne Notwendigkeit bei größeren Projekten.

    Es passt sich ja auch nicht bei speziellem Inhalt an, also z.B. hat die index-Seite einen anderen Hintergrund als die Seite xyz.
  13. Autor dieses Themas

    webdesignerin

    Kostenloser Webspace von webdesignerin

    webdesignerin hat kostenlosen Webspace.

    15:24, 2.5.2009
    Hallo

    @kochmarkus: Danke! :thumb: Hast mir sehr geholfen. ;-)

    Das mit dem Hintergrund wollte ich, neben den Variablen, eigentlich auch die ganze Zeit schon wissen, aber keiner - bis auf Dich - hatte es verstanden. :biggrin:


    @werktags: Ich finde es ist egal ob "großes" oder kleines "Projekt". Wichtig ist für mich eine schnelle Verwaltung und Bearbeitung/Änderung meiner Webseiten. Und das dynamische PHP Menü und die style.css.php bieten sich da sehr an. ;-)


    werktags schrieb:
    Es passt sich ja auch nicht bei speziellem Inhalt an, also z.B. hat die index-Seite einen anderen Hintergrund als die Seite xyz.


    Häh? Was meinst Du denn damit? Die CSS sorgt doch GERADE dafür, dass sich der style durchgehen ändert und leicht verwalten lässt! das musst Du mir mal erklären... :nosmile:


    LG
    Webdesignerin :angel:

    Beitrag zuletzt geändert: 2.5.2009 15:26:00 von webdesignerin

  14. w******s

    15:39, 2.5.2009
    webdesignerin schrieb:
    werktags schrieb:
    Es passt sich ja auch nicht bei speziellem Inhalt an, also z.B. hat die index-Seite einen anderen Hintergrund als die Seite xyz.


    Häh? Was meinst Du denn damit? Die CSS sorgt doch GERADE dafür, dass sich der style durchgehen ändert und leicht verwalten lässt! das musst Du mir mal erklären... :nosmile:
    Es wäre doch denkbar, dass je nachdem auf welcher Seite man sich befindet ein anderer Hintergrund angezeigt wird. Demnach würde man überprüfen, auf welcher Seite man sich befindet und mit einer if-Struktur das ganze dynamisch gestalten. Da ich zu wenig PHP-Kenntnisse besitze kann ich das nur erahnen.
    Ich mach mal ein Beispiel wie ich mir das Vorstellen würde, und jemand der gut PHP kann, müsste es verbessern:
    index.php:
    <!-- Irgendwo hier steht dann z.b: -->
<?php $seite = 'index'; ?>
    seite2.php:
    <?php $seite = 'seite2'; ?>
    dann würde in der style.css.php stehen:
    <?php if ($seite == 'index') {
    $background: #000; }; ?>

<?php if ($seite == 'seite2') {
    $background: #ccc; }; ?>
    Nur weiß ich jetzt nicht, wie das mit der Variablenübergabe ist. Es könnte sein, dass dies so nicht möglich ist und vllt. nur über ein Cookie zu realisieren ist.

    Edit: Ganz so einfach geht es nicht. Jedoch kann man mit Sessions arbeiten und dann klappt das! :tongue:

    Beitrag zuletzt geändert: 2.5.2009 16:27:11 von werktags
  15. Autor dieses Themas

    webdesignerin

    Kostenloser Webspace von webdesignerin

    webdesignerin hat kostenlosen Webspace.

    16:30, 2.5.2009
    werktags schrieb:
    Es wäre doch denkbar, dass je nachdem auf welcher Seite man sich befindet ein anderer Hintergrund angezeigt wird.


    Wieso sollte man das tun? :eek:

    Eine der goldenen Webdesigner-Regeln lauet: Niemals den Besucher durch unnötige Designänderungen verwirren.

    Es ist ganz wichtig, dass auf der Seite immer dasselbe Design ist, keiner tut sich 10 verschiedene und vor allem unterschiedliche Designs auf einer Webseite auf 10 Seiten verteilt, an.

    Was ganz Anderes allerdings ist, was auf der von mir genannten Seite auch erkennbar war, das Design je nach Anlass (Datum) oder Zeit (Uhrzeit/Jahreszeit) vorsichtig anzupassen (werde ich sicher auch auf meinen Webseiten machen). Der Wiedererkennungseffekt darf nicht verschwinden. ;-)

    LG
    Webdesignerin :angel:

  16. w******s

    16:53, 2.5.2009
    webdesignerin schrieb: Wieso sollte man das tun? :eek:
    Eine der goldenen Webdesigner-Regeln lauet: Niemals den Besucher durch unnötige Designänderungen verwirren.
    Es ist ganz wichtig, dass auf der Seite immer dasselbe Design ist, keiner tut sich 10 verschiedene und vor allem unterschiedliche Designs auf einer Webseite auf 10 Seiten verteilt, an.
    Wo haste den diese Regeln gefunden?:biggrin:
    Nunja, dann klär ich dich mal auf. Deine Regel ist ja gar nicht mal so schlecht. Jedoch habe ich nie behauptet, dass ich eine komplett andere CSS-Formatierung möchte, geschweige denn den Hintergrund auch wirklich ändern möchte. Das war nämlich ein Beispiel.
    Es ist wichtig, dass gewisse Richtlinien eingehalten werden, die heute als üblich erachtet werden. So findet sich die Suche meist rechts oben und das Logo links oben. Zu viel Änderungen sind natürlich schon verwirrend. Aber durch geschicktes einsetzen kann man nette Effekte erzielen oder noch mehr die "Usability" verbessern. Ein schönes Beispiel wäre ein Bild im "header", welches sich ändert.
    webdesignerin schrieb: Was ganz Anderes allerdings ist, was auf der von mir genannten Seite auch erkennbar war, das Design je nach Anlass (Datum) oder Zeit (Uhrzeit/Jahreszeit) vorsichtig anzupassen (werde ich sicher auch auf meinen Webseiten machen). Der Wiedererkennungseffekt darf nicht verschwinden. ;-)
    Das nennst du dann gut. Oh! Das ist bei einem privaten Blog beispielsweise gerade noch vertretbar, aber ansonsten ist es echt nicht annehmbar. Zudem wenn du schon zeitlich den Hintergrund verändern willst, dann kannste auch nichts gegen eine seitenweise Veränderung des Hintergrunds haben. Das ist widersprüchlich. Beide Sachen sind gewissermaßen schlecht!

    Eine wesentlich interessantere Frage ist immer noch nicht gut beantwortet. Dein CSS mit PHP bleibt meines Erachtens unnötig, da die Ersetzen-Funktion des Editors dasselbe Problem fast genauso schnell löst. Erst wenn du wie ich gezeigt habe, CSS-Formatierungen dynamisch anpasst, wird es sinnvoll.

  17. e********l

    10:25, 4.5.2009
    Also, wenn du wirklich viele verschiedene Hintergrundbilder hast und die auf den jeweiligen Unterseiten wild verstreut sind lohnt es sich unter Umständen wirklich die CSS Datei mit den Hintergrundbildern dynamisch zu erzeugen. Allerdings nur, wenn sich die Bilder auf den jeweiligen Seiten stark unterscheiden. Wenn es nur ein zwei Bilder sind kann man die eigentlich getrost beim ersten Mal mitladen lassen und hat die dann im Browser Cache. Der Otto-Normalnutzer hat eh seinen Cache an und wird sich dann über die gestiegene Geschwindigkeit nach dem ersten laden erfreuen können.

    Alternativ könnte man das oder die Hintergrundbilder direkt im HTML Template dynamisch einbinden und im CSS die Hauptgrafiken laden lassen. So spart man sich einmalig alle großen Bilder zu laden.

    Irgendwo in der Mitte zwischen diesen und jenem und dort hinten ist der ideale Weg. ;)

    @css: Es ist egal ob du nun "background" oder "background-image" etc schreibst. "background" stellt die Kurzform für alle mit background beginnenden CSS Attribute dar. Wenn du also background schreibst kannst du hintereinander weg inhaltlich "background-image, background-color, background-repeat, background-position" hineinschreiben.
  18. Autor dieses Themas

    webdesignerin

    Kostenloser Webspace von webdesignerin

    webdesignerin hat kostenlosen Webspace.

    10:09, 23.5.2009
    HI zusammen :wave:

    Thema hat sich erledigt - hab es hinnbekomen. :biggrin:

    Danke für Eure Posts. :thumb:

    @ Mod: Thread kann geschlossen werden. ;-)


    LG
    Webdesignerin :angel:

  19. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

Login zum Webhosting ohne Werbung!

Hast Du schon kostenlosen Webspace oder bist Du auf der Suche nach WordPress-Hosting mit Staging-Funktion und wp-cli? Jetzt günstige Prepaid Domains registrieren!