Geplaatst En ik loop helemaal vast..
Ik moet een 'Doodle' maken.. In principe simpel, heb het hele plaatje enz, maar ik loop vast op 1 ding, en ik kom er gewoon niet uit...
Het bestaat uit 1 afbeelding, van 400px hoog. Er is hiervan maar 200px te zien, wat ook de bedoeling is. Bovenste deel van de afbeelding is namelijk de doodle die je als eerste moet zien. Daarna moet met een hover de afbeelding naar boven verplaatsen, en daar gaat het mis. Ik krijg het ABSOLUUT niet voor elkaar. Door middel van filmpjes en tutorials kom ik niet verder, en in onze 'reader' (daar staan opdrachten in, en uitleg) staan dan weer linkjes naar die filmpjes, en verder eigenlijk geen uitleg. Vandaag geen les, dus een docent kan ik het niet vragen, en mijn klasgenootjes kunnen me ook niet veel verder helpen..
Gaat om deze afbeelding;
Bovenste helft is dus te zien, en bij een 'mouse over' zou het onderste deel van de afbeelding naar boven moeten schieten, zodat alleen het onderste deel te zien is...
Dit is mijn code;
- Code
<body>
<ul id="nav">
<li id="nav-1">
<a href="#"><div id="img"></div></a>
</li>
</ul>
</body>
En dit mijn CSS;
- Code
@charset "utf-8";
/* CSS Document */
#img{
margin:0px;
margin-bottom:400px;
width:801px;
height:200px;
background-image:url(doodle/naamloos-1.jpg);
}
#nav{
margin:0px;
padding:0px;
width:801px;
height:200px;
}
*nav li{
margin:0px;
padding:0px;
list-style-type:none;
display:inline;
height:200px;
text-align:center;
float:left;
line-height:200px;
}
*nav a{
display:block;
height:200px;
}
*nav a:hover{
background-position:bottom 200;
}
*nav-1{
width:800px;
}
*nav-1 a:hover{
background-position:bottom 0;
}
Wie kan mij alsjeblieft helpen... Het is vast iets heel kleins, of heel simpels, maar ik weet ECHT niet wat ik nou moet doen, om het af te maken..
...