Top-Themen

AppleEntwicklungHardwareInternetLinuxMicrosoftMultimediaNetzwerkeOff TopicSicherheitSonstige SystemeVirtualisierungWeiterbildungZusammenarbeit

Aktuelle Themen (A bis Z)

Administrator.de FeedbackApache ServerAppleAssemblerAudioAusbildungAuslandBackupBasicBatch & ShellBenchmarksBibliotheken & ToolkitsBlogsCloud-DiensteClusterCMSCPU, RAM, MainboardsCSSC und C++DatenbankenDatenschutzDebianDigitiales FernsehenDNSDrucker und ScannerDSL, VDSLE-BooksE-BusinessE-MailEntwicklungErkennung und -AbwehrExchange ServerFestplatten, SSD, RaidFirewallFlatratesGoogle AndroidGrafikGrafikkarten & MonitoreGroupwareHardwareHosting & HousingHTMLHumor (lol)Hyper-VIconsIDE & EditorenInformationsdiensteInstallationInstant MessagingInternetInternet DomäneniOSISDN & AnaloganschlüsseiTunesJavaJavaScriptKiXtartKVMLAN, WAN, WirelessLinuxLinux DesktopLinux NetzwerkLinux ToolsLinux UserverwaltungLizenzierungMac OS XMicrosoftMicrosoft OfficeMikroTik RouterOSMonitoringMultimediaMultimedia & ZubehörNetzwerkeNetzwerkgrundlagenNetzwerkmanagementNetzwerkprotokolleNotebook & ZubehörNovell NetwareOff TopicOpenOffice, LibreOfficeOutlook & MailPapierkorbPascal und DelphiPeripheriegerätePerlPHPPythonRechtliche FragenRedHat, CentOS, FedoraRouter & RoutingSambaSAN, NAS, DASSchriftartenSchulung & TrainingSEOServerServer-HardwareSicherheitSicherheits-ToolsSicherheitsgrundlagenSolarisSonstige SystemeSoziale NetzwerkeSpeicherkartenStudentenjobs & PraktikumSuche ProjektpartnerSuseSwitche und HubsTipps & TricksTK-Netze & GeräteUbuntuUMTS, EDGE & GPRSUtilitiesVB for ApplicationsVerschlüsselung & ZertifikateVideo & StreamingViren und TrojanerVirtualisierungVisual StudioVmwareVoice over IPWebbrowserWebentwicklungWeiterbildungWindows 7Windows 8Windows 10Windows InstallationWindows MobileWindows NetzwerkWindows ServerWindows SystemdateienWindows ToolsWindows UpdateWindows UserverwaltungWindows VistaWindows XPXenserverXMLZusammenarbeit
GELÖST

CSS random bilder ausgeben

Frage Entwicklung CSS

Mitglied: Alucard7

Alucard7 (Level 1) - Jetzt verbinden

05.09.2010 um 21:58 Uhr, 6153 Aufrufe, 7 Kommentare

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
Mitglied: dog
05.09.2010 um 22:28 Uhr
Nein, mit CSS geht das nicht.
Entweder du nimmst JS oder PHP.
Bitte warten ..
Mitglied: Alucard7
05.09.2010 um 22:40 Uhr
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?
Bitte warten ..
Mitglied: dog
05.09.2010 um 22:55 Uhr
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.
Bitte warten ..
Mitglied: Alucard7
05.09.2010 um 23:10 Uhr
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.
Bitte warten ..
Mitglied: dog
05.09.2010 um 23:24 Uhr
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.
Bitte warten ..
Mitglied: Alucard7
05.09.2010 um 23:37 Uhr
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
Bitte warten ..
Mitglied: Alucard7
11.09.2010 um 15:21 Uhr
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
Bitte warten ..
Ähnliche Inhalte
CSS
CSS Background-image erscheint einfach nicht (3)

Frage von MyApps2GO.de zum Thema CSS ...

CSS
gelöst Silbentrennung in CSS (1)

Frage von honeybee zum Thema CSS ...

Entwicklung
gelöst IOS WebApp lädt CSS nicht mit (2)

Frage von maddig zum Thema Entwicklung ...

CSS
gelöst CSS: Menü ein- und ausblenden (6)

Frage von honeybee zum Thema CSS ...

Neue Wissensbeiträge
Viren und Trojaner

Link: Neues Botnetz über IoT-Geräte

Information von certifiedit.net zum Thema Viren und Trojaner ...

Ubuntu

Ubuntu 17.10 steht zum Download bereit

(3)

Information von Frank zum Thema Ubuntu ...

Datenschutz

Autofahrer-Pranger - Bewertungsportal illegal

(8)

Information von BassFishFox zum Thema Datenschutz ...

Windows 10

Neues Win10 Funktionsupdate verbuggt RemoteApp

(8)

Information von thomasreischer zum Thema Windows 10 ...

Heiß diskutierte Inhalte
Router & Routing
Externe IP von innen erreichbar machen (15)

Frage von Windows10Gegner zum Thema Router & Routing ...

Windows Installation
Windows 10 neu installieren (12)

Frage von imebro zum Thema Windows Installation ...

Windows Server
Frage zu Server Rack (11)

Frage von rainergugus zum Thema Windows Server ...