5 berichten aan het bekijken - 1 tot 5 (van in totaal 5)
  • Q:

    Bijdrager
    One Less Thing

    Jpg knopjes in css menu

    Ik ben bezig met een site waarvan ik nog niks online heb staan maar wat ik wil is niet moeilijk voor te stellen lijkt me.

    Ik wil een knoppen balkje maken van laten we zeggen 500 pixels van links naar rechts. Dit balkje wordt opgebouwd door 5 losse jpg bestandjes. Voor elk van deze jpg’s (knopjes) heb ik ander jpg bestandje dat moet verschijnen wanneer de bezoeker met de muis over het ‘inactive’ knopjes gaat.

    Ik heb geexperimenteerd met een css menu dat je op deze volgende link kunt vinden:

    http://www.html-site.nl/horizontaal_menu.php

    Opzich werkt deze mooi. Temeer omdat je niet teveel hoeft te kliederen met javascript. Maar wanneer je met een uit jpg’s opgebouwde menu balk wilt werken gaat dat niet op omdat je anders de inactive knop steeds door de zelfde jpg laat overschrijven.

    Voor de volledigheid: het is niet mijn bedoeling om een knopje als een soort achtergrond plaatje te gebruiken zodat je er een wisselde tekst er over heen kunt zetten. Want elk knopje ziet er een beetje anders uit ook de textuele vormgeving.

    Ik weet niet zeker maar mijn gevoel zegt dat ik het moet zoeken in een tab menu maar daar heb ik nou niet echt een goed voorbeeld van kunnen vinden. Wie kan mij op weg helpden met een stukje werkende code?


    Bijdrager
    danielpunt

    Je zou ook aan elke li een aparte id kunnen mee geven (<li id=”home”>home</li>) en dan in CSS li#home { background: url(home.jpg); ) kunnen doen


    Bijdrager
    rvanheukelum

    Bijdrager
    Kyokushinkai

    Bedoel je zoiets?

    button.jpg

    html
    [code:1:3367183b2d]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html>
    <head>
    <title>menu</title>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="StyleSheet" href="stylesheet.css" type="text/css" media="screen" />

    </head>
    <body>

    <div id="menu">

    <a href="#" id="button1"></a>
    <a href="#" id="button2"></a>
    <a href="#" id="button3"></a>
    <a href="#" id="button4"></a>
    <a href="#" id="button5"></a>

    </div>

    </body>
    </html>[/code:1:3367183b2d]

    css
    [code:1:3367183b2d]* {
    margin: 0px;
    padding: 0px;
    }

    body {
    font: normal 11px Helvetica, Arial, Verdana;
    }

    #menu {
    width: 510px;
    height: 20px;
    }

    #menu a {
    display: block;
    width: 100px;
    height: 20px;
    float: left;
    }

    #menu a:hover {
    background-position: 0px -20px;
    }

    #button1 { background-image: url(button.jpg); }
    #button2 { background-image: url(button.jpg); }
    #button3 { background-image: url(button.jpg); }
    #button4 { background-image: url(button.jpg); }
    #button5 { background-image: url(button.jpg); }[/code:1:3367183b2d]


    Bijdrager
    One Less Thing

    tnx…Kyokushinkai..

    ik denk dat ik hier wel mee verder kan … heel erg bedankt.

5 berichten aan het bekijken - 1 tot 5 (van in totaal 5)

Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.