Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „[CSS] Zufallsgrafik in CSS einbauen“

Nabend,

ich binde meinen Header per css ein. Nun nöchte ich aber, dass der Header nach jedem neuladen der seite wechselt. Javascripts habe ich einige gefundne aber was ist in einer CSS?

->
Damit hats iwie nicht geklappt.


Gruß
 

Top_Gun

Aktives Mitglied

AW: [CSS] Zufallsgrafik in CSS einbauen

Das von dir genannte ist ein PHP-Skript
Wo hast du das getestet? Unterstützt deine Testumgebung PHP?

Letztlich hast du nur die Möglichkeit das mit einem Skript zu realisieren. Hierbei ist es egal ob server- oder clientseitig. Ich würde dir zu einer serverseitigen Lösung raten...
 
AW: [CSS] Zufallsgrafik in CSS einbauen

@Top_Gun:

Hab die CSS in eine PHP umbennant, die Codes eingefügt, in der HTML den Link zur CSS angepasst. Aber nichts passiert. Er lädt die CSS nicht.

Ich teste auf einem Server mit PHP.
 

jackprince

xHTML & CSS Junkie

AW: [CSS] Zufallsgrafik in CSS einbauen

Eine PHP wird nicht wie eine CSS eingebunden ... es wäre hilfreich den Code zu sehen.

Grundsätzlich wird es aber darauf hinauslaufen das du alle HTML Dokumente in PHP
Dateien änderst und das script inkuldierst dann an den entsprechenden Stellen
eine entsprechende Funktion aufrust die dir wiederrum deine Zufallswerte zurückgibt.
 
W

waterwebdesign

Guest

AW: [CSS] Zufallsgrafik in CSS einbauen

Den Ausgangscode und deine neue Datei.
 

Top_Gun

Aktives Mitglied

AW: [CSS] Zufallsgrafik in CSS einbauen

Eine PHP wird nicht wie eine CSS eingebunden ...
Doch in diesem Fall schon. Die PHP simuliert eine CSS so wie diese

eine RSS/XML simuliert.
Das ganze lässt sich sogar auf andere Format zB Bilder ausweiten...

Zum eigentlichen Thema:
Der Quelltext von der style.php und wie du sie in die eigentliche Seite eingebunden hast, wären tatsächlich sehr hilfreich...

Aber nachdem ich mir das "Tutorial" nochmal angeschaut habe, muss ich sagen, dass das ziemlich schlecht ist vor allem für Leute die noch nicht so viel Ahnung von PHP haben, und ich ahne wo das Problem liegt. Versuch doch mal mit dem Code (das Blau markierte anpassen):
Code:
<?php
header("content-type: text/css");

$new[1] = "[COLOR=Blue]header0.jpg[/COLOR]";
$new[2] = "[COLOR=Blue]header1.jpg[/COLOR]";
$new[3] = "[COLOR=Blue]header2.jpg[/COLOR]";
$new[4] = "[COLOR=Blue]header3.jpg[/COLOR]";

$zufall = rand(1,4);

print("[COLOR=Blue]#id[/COLOR] { background: url([COLOR=Blue]images[/COLOR]/".$new[$zufall].") no-repeat; }");

?>
 
P

psren

Guest

AW: [CSS] Zufallsgrafik in CSS einbauen

PHP:
print("#id { background: url(images/".$new[$zufall].") no-repeat; }");
das problem wird wohl sein, dass die # vor id in php ein zeichen ist, nachdem eigendlich ein kommentar o.Ä. folgt... d.h. der code wird nicht berücksichtigt...
 
AW: [CSS] Zufallsgrafik in CSS einbauen

Also hier aus die CSS wo der Header im Moment eingebunden wird:

PHP:
div#banner
{
	height: 255px;
	background: url('./images/header/1_w.jpg') no-repeat;
	margin: 0 0 10px 0;
	clear: both;
}




Die Style.php hab ich glaub ich eh Falsch gemacht:

Code:
‹?php
header("content-type: text/css");
?›

‹?php
$new[1] = "/images/header/1.jpg";
$new[2] = "./images/header/2.jpg";
$new[3] = "http://www.psd-tutorials.de/modules/Forum/images/header/3.jpg";
$zufall = rand(1,3);
?›

body
{
	background: #122530 url('./images/background.jpg') repeat-x;
	text-align: center;
	font: 12px Tahoma, Arial, Hevetica, Sans-serif;
}

(......)


div#banner
{
	height: 255px;
	background: url('./images/header') no-repeat;
	margin: 0 0 10px 0;
	clear: both;
}

Ansonste hier die CSS's
 

sokie

Mod | Web

AW: [CSS] Zufallsgrafik in CSS einbauen

PHP:
print("#id { background: url(images/".$new[$zufall].") no-repeat; }");
das problem wird wohl sein, dass die # vor id in php ein zeichen ist, nachdem eigendlich ein kommentar o.Ä. folgt... d.h. der code wird nicht berücksichtigt...

das lässt sich ja umgehen wenn man das php nach der definition erts einmal beendet, und dann normalen Text ausgibt:

Code:
[COLOR=#000000][COLOR=#007700][/COLOR][COLOR=#0000BB]background[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]url[/COLOR][COLOR=#007700]([/COLOR][COLOR=#DD0000]'./images/header/<? echo [/COLOR][/COLOR]$new[$zufall] ?>[COLOR=#000000][COLOR=#DD0000]'[/COLOR][COLOR=#007700]) [/COLOR][COLOR=#0000BB]no[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]repeat[/COLOR][COLOR=#007700];[/COLOR][/COLOR]

das Tutorial () ist an der Stelle nicht nur schlecht, sondern fehlerhaft, weil diese Ausgabe einfach ganz unterschlagen wird.
 
AW: [CSS] Zufallsgrafik in CSS einbauen

Könnte jmd. meine CSS mit dem Script verändern, dass es klappt?

Wäre super. Ich schaffs mit der PHP-Sache nicht. :uhm:

HTML:
/**
 * SD 2008
 * 
 */



body
{
	background: #122530 url('./images/background.jpg') repeat-x;
	text-align: center;
	font: 12px Tahoma, Arial, Hevetica, Sans-serif;
}

a,a:visited
{
	color: #1e3f51;
}
a:hover
{
	text-decoration: underline;
}

a img,a:visited img
{
	border: 0;
}


/**
 * Allgemein
 */

div#container
{
	width: 873px;
	margin: 0 auto 0 auto;
	text-align: left;
	word-wrap: break-word;
}


/**
 * Banner/Nav
 */
div#banner
{
	height: 255px;
	background: url('./images/header/1_w.jpg') no-repeat;
	margin: 0 0 10px 0;
	clear: both;
}

div#nav
{
	background: url('./images/nav_bg.png') no-repeat;
	height: 35px;
	margin: 1px 0px 0px 2px;
	width: 582px;
	overflow: hidden;
	float
	display: inline;
}

	div#nav a
	{
		color: #ffffff;
		font: bold 10px Tahoma, Arial, Hevetica, Sans-serif;
		text-decoration: none;
		height: 12px;
		display: block;
		float: left;
		padding: 11px 7px 11px 7px;
		text-transform: uppercase;
		margin: 1px 0 0 0;
	}
	
	div#nav a:hover
	{
		background: url('./images/nav_hover.jpg') repeat-x;
	}


/**
 * Col.
 */
div.col1,div.col2
{
	float: left;
}

div.col1
{
	width: 190px;
}

div.col2
{
	width: 479px;
	margin: 0 7px 0 7px;
}


/**
 * Box Elemente
 */
div.box
{
	margin: 0 0 10px 0;
}

div.box h1
{
	height: 29px;
	color: #ffffff;
	font: 15px 'Trebuchet MS', Tahoma, Arial, Helvetica, Sans-serif;
	padding: 6px 0 0 10px;
	margin: 0;
	border-bottom: 1px solid #112735;
}

	div.col2 div.box h1
	{
		cursor: auto;
	}

	div.col1 div.box h1
	{
		background: url('./images/col1_head.jpg') no-repeat;
	}
	
	div.col2 div.box h1
	{
		background: url('./images/col2_head.jpg') no-repeat;
	}


div.box div.bar
{
	height: 23px;
	clear: both;
	background: url('./images/box_foot.jpg') repeat-x;
	color: #d1e3ee;
	font: 11px Tahoma;
}
	
	div.box div.bar span
	{
		height: 23px;
		display: block;
		background: url('./images/box_foot_left.jpg') no-repeat;
		float: left;
		padding: 4px;
	}
	
	div.box div.bar span span
	{
		height: 23px;
		width: 2px;
		background: url('./images/box_foot_right.jpg') top right no-repeat;
		float: right;
		display: block;
		margin: -4px;
	}
	
	div.box div.bar a
	{
		display: block;
		color: #d1e3ee;
		text-decoration: none;
	}
	div.box div.bar a.right
	{
		text-align: right;
	}
	
div.content
{
	margin: 0 2px 0 2px;
	background: #c1dae8 url('./images/body_bg.jpg') repeat-x;
	border: 1px solid #ffffff;
	padding: 10px 0 10px 0;
}

	div.content p
	{
		margin: 0;
		padding: 5px;
	}


/**
 * Listen
 */
ul
{
	margin: 0;
	padding: 0;
	list-style: none;
}

	ul li
	{
		background: url('./images/list_item.jpg') repeat-x;
		border: 1px solid #112735;
		border-top: 0px;
		height: 14px;
		padding: 4px;
	}
	
	ul li a
	{
		display: block;
		text-decoration: none;
		height: 14px;
	}

ul.sponsors li
{
	background: url('./images/list_sponsor.jpg') repeat-x;
	height: 48px;
	padding: 0;
}
	
	ul.sponsors li a
	{
		height: 48px;
	}


/**
 * Footer
 */
div#footer
{
	background: url('./images/footer.jpg') no-repeat;
	height: 36px;
	clear: both;
}

div#footer a
{
	display: block;
	height: 36px;
}

div#footer a span
{
	display: none;
}
 

Top_Gun

Aktives Mitglied

AW: [CSS] Zufallsgrafik in CSS einbauen

das problem wird wohl sein, dass die # vor id in php ein zeichen ist, nachdem eigendlich ein kommentar o.Ä. folgt... d.h. der code wird nicht berücksichtigt...
Hättest du das getestet, hättest du gesehen, dass es funktioniert und es da kein Problem gibt. Im Allgemeinen hast du Recht, allerdings wird und wurde meines Wissens schon immer, eine # innerhalb eines Strings nicht als Kommentarzeichen gewertet...
Man kann sogar /* innerhalb des Strings ausgeben lassen...

Könnte jmd. meine CSS mit dem Script verändern, dass es klappt?
PHP:
<?php
header("content-type: text/css");

$new[1] = "header0.jpg";
$new[2] = "header1.jpg";
$new[3] = "header2.jpg";
$new[4] = "header3.jpg";

$zufall = rand(1,4);

?>

/**
 * SD 2008
 *
 */



body
{
    background: #122530 url('./images/background.jpg') repeat-x;
    text-align: center;
    font: 12px Tahoma, Arial, Hevetica, Sans-serif;
}

a,a:visited
{
    color: #1e3f51;
}
a:hover
{
    text-decoration: underline;
}

a img,a:visited img
{
    border: 0;
}


/**
 * Allgemein
 */

div#container
{
    width: 873px;
    margin: 0 auto 0 auto;
    text-align: left;
    word-wrap: break-word;
}


/**
 * Banner/Nav
 */
div#banner
{
    height: 255px;
<?php print("background: url('./images/header/".$new[$zufall]."') no-repeat;\n"); ?>
    margin: 0 0 10px 0;
    clear: both;
}

div#nav
{
    background: url('./images/nav_bg.png') no-repeat;
    height: 35px;
    margin: 1px 0px 0px 2px;
    width: 582px;
    overflow: hidden;
    float
    display: inline;
}

    div#nav a
    {
        color: #ffffff;
        font: bold 10px Tahoma, Arial, Hevetica, Sans-serif;
        text-decoration: none;
        height: 12px;
        display: block;
        float: left;
        padding: 11px 7px 11px 7px;
        text-transform: uppercase;
        margin: 1px 0 0 0;
    }

    div#nav a:hover
    {
        background: url('./images/nav_hover.jpg') repeat-x;
    }


/**
 * Col.
 */
div.col1,div.col2
{
    float: left;
}

div.col1
{
    width: 190px;
}

div.col2
{
    width: 479px;
    margin: 0 7px 0 7px;
}


/**
 * Box Elemente
 */
div.box
{
    margin: 0 0 10px 0;
}

div.box h1
{
    height: 29px;
    color: #ffffff;
    font: 15px 'Trebuchet MS', Tahoma, Arial, Helvetica, Sans-serif;
    padding: 6px 0 0 10px;
    margin: 0;
    border-bottom: 1px solid #112735;
}

    div.col2 div.box h1
    {
        cursor: auto;
    }

    div.col1 div.box h1
    {
        background: url('./images/col1_head.jpg') no-repeat;
    }

    div.col2 div.box h1
    {
        background: url('./images/col2_head.jpg') no-repeat;
    }


div.box div.bar
{
    height: 23px;
    clear: both;
    background: url('./images/box_foot.jpg') repeat-x;
    color: #d1e3ee;
    font: 11px Tahoma;
}

    div.box div.bar span
    {
        height: 23px;
        display: block;
        background: url('./images/box_foot_left.jpg') no-repeat;
        float: left;
        padding: 4px;
    }

    div.box div.bar span span
    {
        height: 23px;
        width: 2px;
        background: url('./images/box_foot_right.jpg') top right no-repeat;
        float: right;
        display: block;
        margin: -4px;
    }

    div.box div.bar a
    {
        display: block;
        color: #d1e3ee;
        text-decoration: none;
    }
    div.box div.bar a.right
    {
        text-align: right;
    }

div.content
{
    margin: 0 2px 0 2px;
    background: #c1dae8 url('./images/body_bg.jpg') repeat-x;
    border: 1px solid #ffffff;
    padding: 10px 0 10px 0;
}

    div.content p
    {
        margin: 0;
        padding: 5px;
    }


/**
 * Listen
 */
ul
{
    margin: 0;
    padding: 0;
    list-style: none;
}

    ul li
    {
        background: url('./images/list_item.jpg') repeat-x;
        border: 1px solid #112735;
        border-top: 0px;
        height: 14px;
        padding: 4px;
    }

    ul li a
    {
        display: block;
        text-decoration: none;
        height: 14px;
    }

ul.sponsors li
{
    background: url('./images/list_sponsor.jpg') repeat-x;
    height: 48px;
    padding: 0;
}

    ul.sponsors li a
    {
        height: 48px;
    }


/**
 * Footer
 */
div#footer
{
    background: url('./images/footer.jpg') no-repeat;
    height: 36px;
    clear: both;
}

div#footer a
{
    display: block;
    height: 36px;
}

div#footer a span
{
    display: none;
}
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
175.158
Beiträge
2.581.872
Mitglieder
67.225
Neuestes Mitglied
Petra
Oben