Top-Themen

AppleEntwicklungHardwareInternetLinuxMicrosoftMultimediaNetzwerkeOff TopicSicherheitSonstige SystemeVirtualisierungWeiterbildungZusammenarbeit

Aktuelle Themen

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, 5978 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 ;)

Mit freundlichen Grüßen 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?

Mit freundlichen Grüßen Alucard7
Bitte warten ..
Neuester Wissensbeitrag
Ähnliche Inhalte
Outlook & Mail
Outlook 2016 - Briefpapier Bilder werden nicht angezeigt (6)

Frage von Markowitsch zum Thema Outlook & Mail ...

Batch & Shell
gelöst Batch ausgabe zeilenweise stat spaltenweise ausgeben (4)

Frage von sugram zum Thema Batch & Shell ...

Heiß diskutierte Inhalte
LAN, WAN, Wireless
FritzBox, zwei Server, verschiedene Netze (18)

Frage von DavidGl zum Thema LAN, WAN, Wireless ...

Windows Netzwerk
Windows 10 RDP geht nicht (18)

Frage von Fiasko zum Thema Windows Netzwerk ...

Windows Server
Outlook Verbindungsversuch mit Exchange (15)

Frage von xbast1x zum Thema Windows Server ...