Door
mireille grinszpan
op 19-03-2015 15:07
gewijzigd op 19-03-2015 15:08
1.914 views
Hallo,
Ik probeer met os-commerce een winkel te bouwen.
In de header heb ik een schilderijlijst geplaatst, waarin een dia show afspeelt.
Echter als de resolutie wordt veranderd, speelt de diashow zich buiten de schilderijlijst af.
Wat moet ik aan het volgende toevoegen, zodat de diashow in iedere resolutie in de schilderijlijst blijft?
:
<div>
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" text="#000000">
<meta charset=utf-8 />
<title>Slider</title>
<style>
#s {list-style:none;position:relative;padding:0;overflow:hidden;width:312px;height:250px}
#s li{position:absolute;_opacity:0}
</style>
<body onload="
// fade (uncomment wanneer je dit wilt gebruiken)
a=s.children,b=a.length,c=d=0,!function e(){with(a[c++%b].style)g=opacity=0,zIndex=d++,!function f(){(opacity=g+=.1)<1&&setTimeout(f,15)}();setTimeout(e,2e3)}()
// slide top (uncomment wanneer je dit wilt gebruiken)
//a=s.children,b=a.length,c=d=0,!function e(){with(a[c++%b].style)g=0,!function f(){((top=g++)<250&&setTimeout(f,5))||(top=0,zIndex=d-=3)}();setTimeout(e,2e3)}()
">
<ul id="s">
<li><img src="http://www.europe-anne.eu/images/gallerij/gold black and white set.jpg">
<li style="z-index:-1;"><img src="http://www.europe-anne.eu/images/gallerij/plaid and stripes.jpg">
<li style="z-index:-2;"><img src="http://www.europe-anne.eu/images/gallerij/cherrys and horses.jpg">
<li style="z-index:-3;"><img src="http://www.europe-anne.eu/images/gallerij/white and pink.jpg">
<li style="z-index:-4;"><img src="http://www.europe-anne.eu/images/gallerij/pussycats.jpg">
<li style="z-index:-5;"><img src="http://www.europe-anne.eu/images/gallerij/poison green.jpg">
<li style="z-index:-6;"><img src="http://www.europe-anne.eu/images/gallerij/pink streeps and flowers.jpg">
<li style="z-index:-7;"><img src="http://www.europe-anne.eu/images/gallerij/pink eye.jpg">
<li style="z-index:-8;"><img src="http://www.europe-anne.eu/images/gallerij/pastel set.jpg">
<li style="z-index:-9;"><img src="http://www.europe-anne.eu/images/gallerij/helvecita.jpg">
<li style="z-index:-10;"><img src="http://www.europe-anne.eu/images/gallerij/goldfish.jpg">
<li style="z-index:-11;"><img src="http://www.europe-anne.eu/images/gallerij/garfield.jpg">
<li style="z-index:-12;"><img src="http://www.europe-anne.eu/images/gallerij/delfts blue.jpg">
<li style="z-index:-13;"><img src="http://www.europe-anne.eu/images/gallerij/colorfull streeps and patterns.jpg">
<li style="z-index:-14;"><img src="http://www.europe-anne.eu/images/gallerij/cars.jpg">
<li style="z-index:-15;"><img src="http://www.europe-anne.eu/images/gallerij/amsterdam.jpg">
<li style="z-index:-16;"><img src="http://www.europe-anne.eu/images/gallerij/black hot.jpg">
<li style="z-index:-17;"><img src="http://www.europe-anne.eu/images/gallerij/coolcat.jpg">
</body>
</html>
</div>
Een beetje slordige code
- Inderdaad <div> hoort niet om je html-tags
- 2 <title> tags?
- 2 <body> tags?
- 2 <meta> types?
Vervang de 1e <meta> met <meta charset=utf-8 /> en laat de 2e <meta> weg. dit hoort tussen je <head>
Verder is het stylen van de background color en font color in je <body> tag een beetje ouderwets en kan je dit beter met css stylen
Ik heb de div-jes verwijderd, maar dan staat de hele boel door de war.
Verder heb ik <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
vervangen met <meta charset=utf-8 />
De pagina veranderd hierdoor niet, maar als ik de resolutie verander valt de diashow weer buiten de schilderijlijst.
Wat u bedoeld met de tweede tag weg laten begrijp ik niet, sorry.
Het is 10 jaar geleden dat ik een website gebouwd heb en alles is zooo veranderd.
Ik ben vrij ver gekomen met os-commerce, maar ik heb nog een lijstje waar ik echt niet uit kom.
o.a dit probleem dus.
Zouden jullie even kunnen kijken naar mijn website en de code in mijn header pagina hieronder willen veranderen zodat de diashow in de schilderijlijst blijft, ongeacht de resolutie.
Zeer dankbaar, Mireille.
<html>
<head>
<title>Untitled Document</title>
<meta charset="utf-8">
<style>
body {
background: #FFFFFF;
color: #000000;
}
#s {list-style:none;position:relative;padding:0;overflow:hidden;width:312px;height:250px}
#s li{position:absolute;opacity:0}
</style>
<script>
function voorbeeld(){
// plak hier je javascript functie
}
</script>
</head>
<body onload="voorbeeld()">
blabla rest van je pagina
</body>
</html>
edit: Hierdoor zal je script niet gaan werken maar dit is wel de juiste manier van programmeren en zitten er niet onnodig veel html tags in.
Het is een php pagina.
Ik zal hem hier nog even posten.
Het gaat om het stukje vanaf style tot de laatste .jpg
te zien op www.europe-anne.eu
Hoe blijven de foto's in de schilderijlijst met andere beeldafmetingen?
Verdiep je eerst eens in de structuur van een HTML-pagina. Regel 13 t/m 18 en regel 26 t/m 29 staan sowieso op de verkeerde plek. Verder mist er een <head> en </head> tag waarbinnen je <title>, metatags en styles en <script>-tags staan.
