styles.css und random image

ArachnoVobicA · #1 (**permalink**) 25.03.2010, 23:42

Hiho,

bin neu hier und bringe gleich mal ein Problem mit,
das mir Kopfzerbrechen bereitet, entweder es geht
überhaupt nicht, wie ich mir das vorstelle oder ich
steh auf dem Schlauch.

PHP-Code:


			
img, div { behavior: url(iepngfix.htc) }



body {

     font:                0.9em/1.6em helvetica, arial, sans;

     color:            #134;

     background: white url(resources/top_bg.png) top repeat-x;

     margin:            0;

}



p {

     margin:            0;

}



/* general links */

a {

     color:                        #0074B0;

     text-decoration:    none;

}

a:hover {

     text-decoration:    underline;

}



/* lists */

ul {

    color:                #888;

    list-style:                square;

    padding:                    0 0 0 10px;

    margin:                        0 0 0 10px;

}



/* general headings */

h1,h2,h3 {

     font-weight:            normal;

     padding:                    0;

     margin:                        0;

     color:                        #0074B0;

}

h1 {

     font-size:                2em;

}

h2 {

     font-size:                1.6em;

}

h3 {

     font-size:                1.2em;

}



/* overall container */

#container {

    width:            1040px;

    margin:            0 auto;

}



/* top nav */

#nav {

    height:            38px;

    padding:        4px 40px 0 40px;

    backround:    #A3C13A;

}

#nav ul {

     padding:        0;

     list-style:    none;

     margin:            0 0 0 0;

}

#nav li {

     margin:            0;

     padding:        0;

     display:        inline;

}

#nav a {

  display:        block;

    color:            white;

  width:            107px;

  height:            31px;

  text-align:    center;

  float:            left;

  padding-top:7px;

  text-decoration:    none;

  margin:            0 5px 0 0;

}

#nav li a:hover {

  background:    white url(resources/tab_hover.gif);

  color:            #016533;

}

#nav li.selected a {

  background:    white url(resources/tab.gif);

  color:            #016533;

  text-decoration:    none;

}





/* header with logo */

#header {

     height:            150px;

     background:    url(resources/header_bg.png);

}

#logo {

     float:            left;

     padding:        30px 0 0 80px;

}

#slogan {

     float:            right;

     padding:        50px 80px 0 0;

     text-align:    right;

}

#slogan h1 {

     font-size:    1.8em;

     color:            #BBBBBB;

}

#slogan p {

     color:            #6ACCFF;

     font-size:    1.8em;

     margin:            10px 0 0 0;

}

#slogan span {

     font-size:    0.7em;

     color:            #ccc;

}



/* banner with images */

#banner {

     height:            200px;

}

#banner h1 {

  text-align:        center;

  font-size:        1.6em;

  font-weight:    normal;

  padding-top:    18px;

  color:                #769818;

}



/* the large image panels */

.panel {

     width:                360px;

     height:                200px;

     background:        url(resources/image1.jpg) center no-repeat;

}

#image_1 {

     float:            left;

     width:            360px;

     border-right:4px solid white;

}

#image_2 {

     float:            left;

     width:            312px;

     overflow:        hidden;

}

#image_2 .panel {

    background-image:    url(resources/image2.jpg);

    width:            320px;

}

#image_2 .panel h1 {

 color:                #894C25;

}



#image_3 {

     float:            left;

     width:            360px;

     border-left:4px solid white;

}

#image_3 .panel {

    background-image:    url(resources/image3.jpg);

}

#image_3 .panel h1 {

  color:            #BD081A;

}

#left_cheek {

     width:            41px;

     height:            200px;

    background:    url(resources/left_cheek.png);

    position:        absolute;

}

#right_cheek {

     width:            41px;

     height:            200px;

    background:    url(resources/right_cheek.png);

    position:        absolute;

    margin-left:320px;

}



/* main content area */

#content_container {

     background:    url(resources/content_bg.gif);

     padding:        15px 0 0 60px;

    clear:        both;

}





/* sidebar */

#sidebar {

     background:        url(resources/logo2.png) bottom center no-repeat;

float:            left;

    width:            302px;

}

#sidebar h2 {

     background:    url(resources/side_head.gif);

     height:            27px;

    padding:        15px 0 5px 10px;

    margin:            0 0 4px 0;

}

.box {

     background:    #E8F7FE url(resources/box_bottom.gif) bottom left no-repeat;

}

/* news headlines */

ul.news {

     margin:            0;

     padding:            0;

     list-style:    none;

}

ul.news li {

    margin:            0;

    padding:            0;

    font-size:        0.9em;

    clear:            both;

}

span.date {

    margin:            0;

    padding:            0;

     color:             #0074B0;

     display:            block;

     width:            60px;

     height:            30px;

     float:            left;

     font-family:    trebuchet ms;

     font-size:        1.2em;

}

ul.news li a {

    margin:                0;

     display:                block;

     text-decoration:    none;

     padding:                2px;

     color:                #457;

    padding:                5px;

    border-bottom:        2px solid white;

}

ul.news li a:hover  {

    background:            #AEE3FF;

    text-decoration:    none;

}



/* body copy area */

#content {

     background:        url(resources/logo.png) top left no-repeat;

     width:            585px;

     float:            left;

     padding:        15px 0 0 30px;

}

#content h1, #content h2, #content h3, #content p {

     margin:            0 0 15px 0;

}

#content h1, #content h2, #content h3 {

  color:            #A3C13A;

}







/* footer */

#footer {

     background:        #A3C13A;

     border-top:        1px solid #4C6200;

    padding:            10px;

    font-size:        0.75em;

    color:                white;

}

#footer .inner {

     width:                980px;

     margin:                0 auto;

     text-align:        center;

}

#footer .inner .column {

    width:                300px;

    border-right:    1px solid white;

    padding:            0 10px 0 10px;

    float:                left;

}

#footer .inner .column.last {

    border:                0;

}

#footer ul {

     margin:                0;

     padding:            0;

     list-style:        none;

}

#footer a {

     color:                white;

}

Ich möchte, zufallsbilder an folgenden Stellen im Bereich /* the large image panels */:
background: url(resources/image1.jpg) center no-repeat;
background-image: url(resources/image2.jpg);
background-image: url(resources/image3.jpg);
also z.B. anstelle von "image1.jpg" soll aus einem Ordner ein
zufälliges Bild ausgewählt und angezeigt werden, bei reload dann
wieder ein anderes usw.

Ist das durch irgend einen Codeschnippsel in der styles.css überhaupt
machbar?

MfG
Micha

regloh · #2 (**permalink**) 26.03.2010, 15:46

Hallo,

soetwas habe ich zwar auch noch nie gemacht, würde aber wiefolgt ansetzen (obs elegantere Methoden gibt, ist natürlich eine andere Frage

)

Über CSS allein lässt sich soetwas nicht lösen, da hier keine Zufallszahl oder ähnliches generiert werden kann.

Ich würde eine class ".panel" erstellen, die nur die Dimensionsangaben enthält. Für die Hintergrundbilder würde ich mehrere IDs verwenden. Z.B. #panel1 - #panel5. Jeder ID gibst du ein anderes Hintergrundbild.

Mittels PHP erzeugst du im HTML-Teil nun eine Zufallszahl im Bereich von 1-5. Dem betreffendem Element weist du zum Einen die Klasse "panel" zu und die ID "panel" + die generierte Zufallszahl. Sollte klappen.

Ganz andere Herangehensweisen sind natürlich auch denkbar.

mfg

ArachnoVobicA · #3 (**permalink**) 26.03.2010, 15:54

Hiho,

danke schonmal soweit.
Hatte mir das doch einfacher vorgestellt.
Wäre es denn möglich anstelle des background-image
über die css eine Flash Diashow einzubinden, sprich eine .swf Datei?

MfG
Micha

regloh · #4 (**permalink**) 26.03.2010, 16:50

Das ist doch nicht kompliziert. Einfachstes PHP. Du hast wahrscheinlich falsche Vorstellungen von CSS.

Flash kannst du via HTML einbinden. Davon rate ich aber ab. Es ist nicht notwendig und erfordert zusätzliche Plugins beim User > Thema "Barrierearmut/-freiheit".

Alternativ könntest du die Bilder auch direkt via <img> im HTML-Teil deklarieren, sofern sie zum Inhalt gehören. Ein Banner oben auf der Seite z.B. könnte man auch als Inhalt sehen. Somit könntest du auch direkt die Dateinamen ansprechen und mittels Zufallszahl per PHP einbinden.

ArachnoVobicA · #5 (**permalink**) 26.03.2010, 23:44

Hiho,

momentan ist es halt so, das ich nur das css ändern muss
um auf allen seiten der Homepage diese Image Panels zu ändern.
Mit PHP etc. müsste ich jetzt alle Seiten umschreiben.
Dachte es gäbe evtl. eine einfache Lösung die sich in der styles.css
realisieren ließe.

MfG
Micha

Walter IT-Services · #6 (**permalink**) 27.03.2010, 13:19

Du könntest die CSS-Datei mit PHP generieren.
Dann könntest du das Backgroundbild dynamisch austauschen.

regloh · #7 (**permalink**) 27.03.2010, 15:11

Zitat:

Zitat von Walter IT-Services

Du könntest die CSS-Datei mit PHP generieren.
Dann könntest du das Backgroundbild dynamisch austauschen.

Meinst du nicht, dass das um einiges aufwendiger als mein Vorschlag wäre? Natürlich macht deine Lösung einges mehr her

Aber wenn er schon meinen Vorschlag als zu umständlich ansieht.

Walter IT-Services · #8 (**permalink**) 27.03.2010, 15:14

Er meinte, dass er viele Dateien ändern muss, wenn er auf deine Weise macht.
Bei meinem Vorschlag muss er höchstens eine Datei erstellen und seine CSS-Datei anpassen.

regloh · #9 (**permalink**) 27.03.2010, 18:28

Oh - ich hatte seinen letzten Beitrag garnicht gelesen.

Ich weiß ja nicht, wie seine Dokumentenstruktur aussieht und wo genau die Panels im HTML-Gerüst liegen. Dann ist die alternative Methode natürlich auch angebracht.

ArachnoVobicA · #10 (**permalink**) 27.03.2010, 23:06

Hiho,

am besten ich zeig euch mal die Seite, evtl. wirds
dann ersichtlich:
Homepage

Die drei Spinnenbilder sind die 3 Panels.

@Walter
könntest du deinen Vorschlag evtl. näher erläutern.

MfG
Micha

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
mouseover problem	Basti82	Javascript & Ajax	0	13.10.2008 14:17
CSS Hack	dalmidog	CSS	1	28.03.2008 17:32
Imagemap Zugriff bei einer Gallery	Sarah14	Javascript & Ajax	3	12.11.2007 14:06
Bildergalerie preload und Co.	Sarah14	Javascript & Ajax	12	05.11.2007 09:10