CSS random bilder ausgeben
Hallo an alle Mitglieder.
Meine Frage ist, ob es möglich ist, einen div-container zu erstellen, der eine Reihe von Bildern enthält, die Zufallsmäßig ausgewählt wurden,
Dieser Container soll wenn möglich an der Seite einer Homepage erstellt werden und nach unten laufen. Dabei sollte er sich auch der gegeben Fenstergröße anpassen, alos nicht darüber hinauslaufen oder zu kurz sein bei verschiedenen Fenstergrößen.
Zur Veranschaulichung habe ich mal die Struktur in ein Bild gefasst und hochgeladen: http://yfrog.com/0thomepagestrukturj
Ich freue mich auf alle Hilfe ;)
mfg Alucard7
Meine Frage ist, ob es möglich ist, einen div-container zu erstellen, der eine Reihe von Bildern enthält, die Zufallsmäßig ausgewählt wurden,
Dieser Container soll wenn möglich an der Seite einer Homepage erstellt werden und nach unten laufen. Dabei sollte er sich auch der gegeben Fenstergröße anpassen, alos nicht darüber hinauslaufen oder zu kurz sein bei verschiedenen Fenstergrößen.
Zur Veranschaulichung habe ich mal die Struktur in ein Bild gefasst und hochgeladen: http://yfrog.com/0thomepagestrukturj
Ich freue mich auf alle Hilfe ;)
mfg Alucard7
Kommentieren
Teilen
Auf Facebook teilen
Auf X (Twitter) teilen
Auf Reddit teilen
Auf Linkedin teilenBitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben
Content-ID: 150383
Url: https://administrator.de/forum/css-random-bilder-ausgeben-150383.html
Ausgedruckt am: 14.05.2025 um 08:05 Uhr
7 Kommentare
Neuester Kommentar
Nein, mit CSS geht das nicht.
Entweder du nimmst JS oder PHP.
Entweder du nimmst JS oder PHP.
Danke für die schnelle Antwort 
Nachdem das geklärt ist, würde ich natürlich gerne erfahren, wie ich das mit php oder js lösen kann?
Ich hatte schon die Lösungsgedanken, die höhe des Fensters mit Js zu ermitteln und in ein hidden-feld zu übergeben zu lassen, jedoch bekomme ich die gewünschte Info nicht rechtzeitig aus dem hidden-feld wieder heraus.
Falls es eine Möglichkeit gibt, diese js-Variable direkt an php zu übergeben, wenn möglich ohne Seite neu zu laden, könnte ich daraus mir mit php und Tabellen die Seitenleiste bauen?
Nachdem das geklärt ist, würde ich natürlich gerne erfahren, wie ich das mit php oder js lösen kann?
Ich hatte schon die Lösungsgedanken, die höhe des Fensters mit Js zu ermitteln und in ein hidden-feld zu übergeben zu lassen, jedoch bekomme ich die gewünschte Info nicht rechtzeitig aus dem hidden-feld wieder heraus.
Falls es eine Möglichkeit gibt, diese js-Variable direkt an php zu übergeben, wenn möglich ohne Seite neu zu laden, könnte ich daraus mir mit php und Tabellen die Seitenleiste bauen?
Ich versteh dich jetzt nicht.
Entweder du benutzt ein sehr langes Bild, dass immer lang genug ist (einen Scrollbalken würde das ja nicht erzeugen)
oder du streckst das Bild, was ziemlich hässlich aussieht und mit reinem CSS gehen sollte.
Entweder du benutzt ein sehr langes Bild, dass immer lang genug ist (einen Scrollbalken würde das ja nicht erzeugen)
oder du streckst das Bild, was ziemlich hässlich aussieht und mit reinem CSS gehen sollte.
Das Problem ist, dass ich verschieden Bilder untereinander ausgeben will, also ganz oben: 1 zufallsbild -> 2. zufallsbild -> ... -> letztes zufallsbild genau ganz unten. Normalerweise würde man bei CSS ein hintergrundbild wählen und mit repeat-y dieses bis zum ende wiederholen lassen.
Leider habe ich schon das Problem, dass ich innerhalb des gesamten div-containers nichtmal den rechten randstreifen-div-container hinkriege, sodass ich weingstens ein zufallsbild ständig wiederholt kriege, irgendwie funktioniert das mit der höhe nicht.
Deshalb versuche ich jetzt die höhe des fensters auszulesen und mit php eine tabelle nach unten wiederhole mit random-bilder als inhalt bis ich zum ende der seite gelange.
Hier ist auch mal meine teststruktur des html.codes:
<body>
</form>
<div id="container">
<div id="header"></div>
<div id="rechter"></div> /* dieser sollte eigentlich den rechten Randstreifen erzeugen, tut er aber nicht */
<div id="menu">
</div>
<div id="contents">
</div>
</div>
</body>
Mein bisheriger CSS-code:
html, body
{
padding: 0;
margin: 0;
font: 85% arial, hevetica, sans-serif;
text-align: center;
color: #505367;
background-color: blue;
}
#container
{
margin: 0;
width: 100%;
text-align: left;
background-color: red;
}
#header
{
height: 50px;
background-color: green;
}
#rechter
{
float: right;
height: 100%;
width: 41px;
background-image:url(schilder/1.jpg);
background-repeat: repeat-y;
background-color: yellow;
}
#contents
{
margin-top: 20px;
margin-right: 60px;
margin-left: 220px;
background-color: aqua;
}
Falls die php Lösung wegfallen solte, würde cih auch eine lösung mit halt nur einem zufallsbild nehmen, hauptsache der sreifen rechts funktioniert.
Leider habe ich schon das Problem, dass ich innerhalb des gesamten div-containers nichtmal den rechten randstreifen-div-container hinkriege, sodass ich weingstens ein zufallsbild ständig wiederholt kriege, irgendwie funktioniert das mit der höhe nicht.
Deshalb versuche ich jetzt die höhe des fensters auszulesen und mit php eine tabelle nach unten wiederhole mit random-bilder als inhalt bis ich zum ende der seite gelange.
Hier ist auch mal meine teststruktur des html.codes:
<body>
</form>
<div id="container">
<div id="header"></div>
<div id="rechter"></div> /* dieser sollte eigentlich den rechten Randstreifen erzeugen, tut er aber nicht */
<div id="menu">
</div>
<div id="contents">
</div>
</div>
</body>
Mein bisheriger CSS-code:
html, body
{
padding: 0;
margin: 0;
font: 85% arial, hevetica, sans-serif;
text-align: center;
color: #505367;
background-color: blue;
}
#container
{
margin: 0;
width: 100%;
text-align: left;
background-color: red;
}
#header
{
height: 50px;
background-color: green;
}
#rechter
{
float: right;
height: 100%;
width: 41px;
background-image:url(schilder/1.jpg);
background-repeat: repeat-y;
background-color: yellow;
}
#contents
{
margin-top: 20px;
margin-right: 60px;
margin-left: 220px;
background-color: aqua;
}
Falls die php Lösung wegfallen solte, würde cih auch eine lösung mit halt nur einem zufallsbild nehmen, hauptsache der sreifen rechts funktioniert.
height: 100%;
Vergiss es. Wäre schön wenn das so ginge, aber das ist bei CSS nicht spezifiziert und läuft so nicht.
Wenn ein Element so hoch sein soll wie der Inhalt der Seite muss es ein Container sein, der eben diesen Inhalt umfasst.
Wenn es einfach immer rechts am Bildschirmrand sein soll muss es
position: absolute sein, dann geht das auch mit der height.
Ja, hab ich auch schon ausprobiert, nur tritt dann das Problem auf, dass sobald die Seite länger als das Browserfenster ist, der balken einfach stehen bleibt und nicht weiter nach unten geht, wie es normalerweise css über hintergrundbilder macht.
Und nochmal ine verständnis frage: worauf genau bezieht sich jetzt die "100%" Angabe einer height-deklaration? Sind das jetzt 100% von der gesamten fensterhöhe, oder 100% des übergeordneten Containers, oder was anderes? Konnte ich bisher irgendwie nciht in Erfahrung bringen xD
Und nochmal ine verständnis frage: worauf genau bezieht sich jetzt die "100%" Angabe einer height-deklaration? Sind das jetzt 100% von der gesamten fensterhöhe, oder 100% des übergeordneten Containers, oder was anderes? Konnte ich bisher irgendwie nciht in Erfahrung bringen xD
Hi, ich hab jetzt selbst die Lösung gefunden, nämlich mit einer CSS-Datei die aber mit .php benannt ist, jedoch als Beginn:
<?php
header('Content-type: text/css');
function rotater()
{
$path='schilder/';
$file = rand(1,70);
$image = $path . $file . '.jpg';
echo $image;
}
hat. Dadurch kann ich die Funktion rotator() im CSS-Code aufrufen und immerhin wird dann ein Zufallsbild ausgegeben untereinander.
Ein weiteres Problem ist jetzt, dass ich die Links im Menu mit Hintergrundbildern versehen will, jedoch kriege ich den Rahmen der a-Element-Links nicht auf die optimale Breite der ul-li-Elemente, da die Links unterschiedlich lang sind. Bei allen Versuchen mit padding und margin, verschieben oder vergrößern die längsten Linkschriften die li-Elemente.
Gibt es nicht irgendeine Einstellung, die die a-Elemente nur so groß werden lässt, wie das li-Element, ohne am prinzipiellen Layout was zu ändern?
mfg Alucard7
<?php
header('Content-type: text/css');
function rotater()
{
$path='schilder/';
$file = rand(1,70);
$image = $path . $file . '.jpg';
echo $image;
}
hat. Dadurch kann ich die Funktion rotator() im CSS-Code aufrufen und immerhin wird dann ein Zufallsbild ausgegeben untereinander.
Ein weiteres Problem ist jetzt, dass ich die Links im Menu mit Hintergrundbildern versehen will, jedoch kriege ich den Rahmen der a-Element-Links nicht auf die optimale Breite der ul-li-Elemente, da die Links unterschiedlich lang sind. Bei allen Versuchen mit padding und margin, verschieben oder vergrößern die längsten Linkschriften die li-Elemente.
Gibt es nicht irgendeine Einstellung, die die a-Elemente nur so groß werden lässt, wie das li-Element, ohne am prinzipiellen Layout was zu ändern?
mfg Alucard7
