Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

Plaatje over plaatje

Anoniem
Mr.nuub
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:

    [img:af8967325f]http://img152.imageshack.us/img152/9215/naamloosij2.th.jpg[/img:af8967325f]

    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 cssplay.co.uk
    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

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