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

    [CSS] horizontal navlist met 2 ‘lists’ horizontaal

    Hallo allemaal,

    Ik wilde een horizontale list maken met images en uiteindelijk kwam ik op deze tutorial. Dit zit er aardig uit en werkt prima bij mij. Maar nu wil ik 2 navigatielijnen maken (dus onder de eerste lijn nog een tweede lijn met menu knoppen). Heeft iemand enig idee hoe ik dan de css hierop moet aanpassen? Ik heb zelf wel het een en ander geprobeerd maar tevergeefs.

    Alvast bedankt, Ad

    p.s. als noodoplossing kan ik natuurlijk twee aparte ul’s maken, maar dat heb ik liever niet natuurlijk
    p.s.2 ik maak geen gebruik van de ‘roll-over’

    Bijdrager
    MMarijn

    Ik zou gewoon 2 ul’s maken, of zou je duidelijker kunnen maken wat je daarop tegen hebt? Mij lijkt dat niet echt een probleem, hoor.

    Bijdrager
    addyboy
    ”MMarijn”

    Ik zou gewoon 2 ul’s maken, of zou je duidelijker kunnen maken wat je daarop tegen hebt? Mij lijkt dat niet echt een probleem, hoor.

    ja ik heb er nu ook uiteindelijk maar 2 ul’s van gemaakt.. dat werkt wel:)

    Bijdrager
    computer space

    Wil je het menu straks eens posten?
    Op onderstaande site zit ook zo’n menu, maar die is nog niet helemaal correct omdat degene van wie ik die opzet heb geleend divs meerdere keren heeft gebruikt. Dat mag eigenlijk niet, maar werkt vooralsnog wel.

    Bijdrager
    addyboy

    XHTML:
    [code:1:8f4667ca6f]<ul id="navigation">
    <li id="donate" title="Donate!"><a href="#">Donate</a></li>
    <li id="whydonate" title="Why Donate?"><a href="#">Why Donate?</a> </li>
    <li id="whatsinit" title="What’s In It For Me?"><a href="#">What’s in it for me?</a></li>
    <li id="about" title="About Me"><a href="#">About Me</a> </li>
    </ul>[/code:1:8f4667ca6f]

    CSS:
    [code:1:8f4667ca6f]ul#navigation {
    list-style-type: none;
    padding: 0;
    margin: 0;
    top: 0px;
    left: 0px;
    width: 650px;
    height: 41px;
    background: #5C8AB8 url(../images/menuhover.png) no-repeat;
    }
    ul#navigation li {
    padding: 0;
    margin: 0;
    display: block;
    float: left;
    text-indent: -9999px;
    }

    ul#navigation li a {
    display: block;
    height: 41px;
    background: url(../images/menu.png) no-repeat;
    }

    ul#navigation li a:hover {
    display: block;
    background-image: url(../images/menuhover.png);
    }
    li#donate a {
    width: 98px;
    }

    li#whydonate a {
    width: 172px;
    }

    li#whydonate a:link,
    li#whydonate a:visited,
    li#whydonate a:hover {
    background-position: -98px 0px;
    }

    li#whatsinit a {
    width: 230px;
    }

    li#whatsinit a:link,
    li#whatsinit a:visited,
    li#whatsinit a:hover {
    background-position: -270px 0px;
    }

    li#about a {
    width: 150px;
    }

    li#about a:link,
    li#about a:visited,
    li#about a:hover {
    background-position: -500px 0px;
    }[/code:1:8f4667ca6f]

    En het plaatje wat ik gebruik is 650 x 41 px.

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.