Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

Plaatje over plaatje

2 antwoorden
  • Hallo allemaal, ik heb weer een vraag, ik wil een menu button over m'n menu lijn/plaatje zeg maar... (de home op de grijze balk) (hopelijk is er wel een andere manier dan z-index aangezien dat positioneren mij niet zo licht...) Zou iemand mij dit kunnen uitleggen? voorbeeld: [URL=http://img152.imageshack.us/my.php?image=naamloosij2.jpg][img:af8967325f]http://img152.imageshack.us/img152/9215/naamloosij2.th.jpg[/img:af8967325f][/URL] index.html: [code:1:af8967325f]<html> <head> <LINK REL="stylesheet" HREF="opmaak.css" TYPE="text/css"> </head> <body> <div id="container"> <div id="header"></div> <div id="menu"><img border="0" src="images/button.png"></div> <div id="content"></div> </div> </body> </html>[/code:1:af8967325f] opmaak.css: [code:1:af8967325f]#container { width: 827px; height: 900px; margin-left: auto; margin-right: auto; } #header { width: 827px; height: 141px; background-image: url("images/banner.png") } #menu { width: 150px; height: 300px; }[/code:1:af8967325f]
  • Dan maak je gewoon een menu dat dat plaatje als achtergrond heeft, hoef je helemaal niets te positioneren, je moet dan alleen een horizontaal menu te maken met een "unsorted list". Hier een (iets aangepast) voorbeeld van [url=http://www.cssplay.co.uk/menus/pointer.html]cssplay.co.uk[/url] html:[code:1:ed26676785]<ul class="menu"> <li> <a href="#nogo"><span>Tab One</span></a> </li> <li> <a href="#nogo"><span>Tab Two</span></a> </li> <li> <a href="#nogo"><span>Tab Three</span></a> </li> <li> <a href="#nogo"><span>Tab Four</span></a> </li> </ul>[/code:1:ed26676785]CSS:[code:1:ed26676785].menu { padding:0; margin:0; list-style-type:none; white-space:nowrap; } .menu li { float:left; min-width:100px; } .menu a { position:relative; display:block; text-decoration:none; min-width:100px; float:left; } * html .menu a { width:100px; } .menu a span { display:block; color:#000; background:#c4c4c4; border:1px solid #fff; border-width:2px 1px; text-align:center; padding:4px 16px; cursor:pointer; } * html .menu a span { width:100px; cursor:hand; w\idth:66px; } .menu a:hover { background:#fff; } .menu a:hover span { color:#fff; background:#08c; }[/code:1:ed26676785]Je zet dan het plaatje als achtergrond van de ul, geeft een hoeveelheid left margin en past verder nog wat dingen in de css aan aan je wensen, zoals kleuren en maten.

Beantwoord deze vraag

Weet jij het antwoord op deze vraag? Registreer of meld je aan met je account

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.