8 berichten aan het bekijken - 1 tot 8 (van in totaal 8)
  • Q:
    Bijdrager
    suriflavour

    [Html/Css] menu balk

    Hallo,

    We moeten voor school een (simpele) website bouwen, dit moet met html/css. (geen programma’s gewoon in teksteditor).
    Nu wil ik een menu balk maken, dit omdat we door moeten linken naar klasgenootjes (4x) en 1 voor mezelf, en dan de Home knop.

    Nu heb ik al een balk gemaakt, één voor als je hem gewoon ziet(blauw), één balk voor als je je muis erop houdt(donkerder blauw) en één als je er op klikt(donkerst blauw).

    Het is voor offline gebruik.
    Hoe kan ik dat het beste doen?
    Moet ik de balkjes los knippen (dus dat elke knop een apart plaatje is), of moet ik dit anders doen?

    Of kan ik de 3 gekleurde balken zo instellen, zodat hij het weet dat als je op de letters Home klikt, dat hij dan naar home moet gaan?(hoe stel ik dan in dat hij onderscheid maakt tussen, gewoon zien, muis erop en klikken?)

    Mocht het onduidelijk zijn hoor ik het wel!

    Dit is de CSS code voor de menu bar, ik heb geen idee of het klopt/hoe ik hem dan zo instel dat hij werkt…
    En ik wete ook niet welk gedeelte er zorgt voor het veranderen van de kleur bij muisover/opklikken etc.
    (waarschijnlijk dan doen van, “Button home” (bij normaal) en dan “Button Home donkerder” en “Button Home Donkerst” (en dan een Link plaatsen bij button Home Donkerst??)

    #button { margin: 0; padding: 0; }
    #button a { display: block; background: url(ButtonHome.png) no-repeat; width: 200px; height: 0px !important; height /**/:72px; padding: 72px 0 0 0; overflow: hidden; }
    #button a:hover { background: url(ButtonHome.png) no-repeat; width: 200px; height: 0px !important; height /**/:72px; padding: 72px 0 0 0; overflow: hidden; }

    Bijdrager
    Zeekomkommer

    Je hebt 2 opties:

    1. Het effect met plaatjes verzorgen, zoals je er nu al mee bezig bent. Je moet de plaatjes dan inderdaad allemaal losknippen. In photoshop kan dit makkelijk door slices te maken en dan voor save for web te kiezen. Met CSS of Javascript regel je de weergave van de verschillende plaatjes bij de verschillende acties.

    2. Het effect met CSS opmaak en gewone tekst verzorgen. Je gebruikt dan geen plaatjes voor de knoppen, maar gewoon tekst met een leuk kleurtje. Die kleurtjes kan je in CSS dan makkelijk laten veranderen bij verschillende acties.

    Optie 2 is makkelijker maar biedt natuurlijk minder mogelijkheden qua opmaak.

    Bijdrager
    aerosoul

    zoiets?
    [code:1:e5149e4b1b]
    #menu {
    width:100%;
    background:#2082f0;
    position:absolute;
    top:0;
    }

    #menu a {
    display:block;
    padding:10px;
    border-right:1px solid white;
    color:#fff;
    font-family:arial;
    text-decoration:none;
    }

    #menu a:hover {
    background:#1b5ba4;
    }

    <div id="menu">

    <a href="home">home</a>
    <a href="jij">jij</a>
    <a href="vriend1">vriend1</a>
    <a href="vriend2">vriend2</a>
    <a href="vriend3">vriend3</a>

    </div>
    [/code:1:e5149e4b1b]

    Bijdrager
    Rub3n

    Leren ze je dit niet op school voor je het moet uitvoeren?

    Ik snap die scholen van tegenwoordig niet!

    Bijdrager
    suriflavour

    Nee!
    Ze gaan er vanuit dat je gewoon een site maakt a la een achtergrond plaatje, met daarop de links, en een beetje leuke lettertypes enzo, en als je zelf meer wilt moet je dat zelf uit vogelen…

    En daarbij mak je weer geen gebruik maken van programma’s als Dreamweaver…
    Komt ook omdat de niveau verschillen onwijs ver uit elkaar liggen, vandaar de alleen “basis” uitleg…

    Bijdrager
    aerosoul

    ach, geen gebruik maken van programma’s als dreamweaver vind ik heel goed hoor. Wat een troep is dat. Leer het maar lekker zelf typen dan weet je in ieder geval wat wanneer en hoe werkt. Dreamweaver maakt over het algemeen toch alleen maar smerige html.

    Bijdrager
    suriflavour
    ”aerosoul”

    zoiets?
    [code:1:d0f1edb6cc]
    #menu {
    width:100%;
    background:#2082f0;
    position:absolute;
    top:0;
    }

    #menu a {
    display:block;
    padding:10px;
    border-right:1px solid white;
    color:#fff;
    font-family:arial;
    text-decoration:none;
    }

    #menu a:hover {
    background:#1b5ba4;
    }

    <div id="menu">

    <a href="home">home</a>
    <a href="jij">jij</a>
    <a href="vriend1">vriend1</a>
    <a href="vriend2">vriend2</a>
    <a href="vriend3">vriend3</a>

    </div>
    [/code:1:d0f1edb6cc]

    Wow!
    De basis is inderdaad die!
    Alleen dan heb ik een (ik heb ze nu af, dus de namen die ik nu geef zijn de definitieve namen)
    Buttonhomelicht.png, Buttonhomedonker.png (beide met de tekst home erop, bij vriend 1 is het dan de naam van vriend 1 etc.)
    Hoe zou ik die Plaatjes zo kunnen linken, in plaats van de blauwe vlakjes dus?

    Het zal wel heel simpel zijn, maar ik “spreek” de taal niet 9zoals ze dat leuk zeggen:-P

    Iniedergeval heb je me al een heel eind de goede richting op geholpen! :wink:
    Thanks allemaal

    Bijdrager
    essiw

    ik wil graag helpen, ben aardig goed in CSS maar snap niet wat je wilt creëren, kan iemand me dit beter uitleggen?

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

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