Problem med ul-menu.

7 svar · 482 visningar · startad av Okkido 24 maj 2004

OkkidoMedlem sedan maj 20007 492 inlägg

Frågan24 maj 2004 13:32#1

Hejsan.

Har suttit och läst igenom all information jag kan hitta om <ul> listor och göra en meny av det med hjälp av css, men utan någon framgång.

Det jag försöker göra med <ul> är detta (tabellversion för att kunna visa):
http://www.okkido.net/menu/menu.html

Nån som har någon minut över och kan hjälpa mig?

Tack på förhand!

FraggelMedlem sedan sep. 2003301 inlägg

24 maj 2004 13:37#2

Vad är det du vill åstadkomma ???

OkkidoMedlem sedan maj 20007 492 inlägg

24 maj 2004 13:45#3

Re: Problem med ul-menu.

Okkido skrev:

Det jag försöker göra med <ul> är detta (tabellversion för att kunna visa):
http://www.okkido.net/menu/menu.html

Framgick det inte tydligt nog?

Web-TorMedlem sedan nov. 200013 890 inlägg

24 maj 2004 13:55#4

Har inte så mycket tid att testa nu men räcker det inte med att ändra <table> till <ul> och <td> till <li> och sedan lägga till display:inline; i <li>-classerna?

nitro2k01Medlem sedan aug. 20039 340 inlägg

24 maj 2004 13:58#5

Nej! Vill du använda lu/li-taggar till menyn och behålla effekterna? Eller vill du bara lägga länkarna i en lista?

FraggelMedlem sedan sep. 2003301 inlägg

24 maj 2004 14:14#6

Re: Re: Problem med ul-menu.

Okkido skrev:

Framgick det inte tydligt nog?

Nej ...

InsiderMedlem sedan jan. 2000978 inlägg

24 maj 2004 14:25#7

http://css.maxdesign.com.au/listamatic/horizontal03.htm
http://css.maxdesign.com.au/listamatic/horizontal26.htm

dectgapMedlem sedan sep. 20021 655 inlägg

24 maj 2004 17:41#8

Listamatic, som Insider länkar till, är alldeles underbar.
På sajten finns mycket bra tips och färdiga lösningar.

Vad det gäller din meny:

<style type="text/css">
#meny {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#meny li {
    float: left;
}

#meny a {
    display: block;
    float: left;
    border-left: 1px solid #336;
    text-decoration: none;
    color: #fff;
    height: 18px;
    padding: 4px;
    cursor: hand;
    text-align: center;
    font: bold 11px arial, tahoma, verdana; 
    background: url([url]http://www.okkido.net/menu/images/top-menu-bg.gif[/url]);
}

#meny a:hover {
    background: url([url]http://www.okkido.net/menu/images/top-menu-bg-hl.gif[/url]);
}
</style>

...

<ul id="meny">
    <li><a href="default.asp?page=main">START</a></li>
    <li><a href="default.asp?page=main">PROGRAM</a></li>
    <li><a href="default.asp?page=main">BOKNING</a></li>
    <li><a href="default.asp?page=main">SCHEMA</a></li>
    <li><a href="default.asp?page=main">PRISER</a></li>
    <li><a href="default.asp?page=main">PERSONAL</a></li>
    <li><a href="default.asp?page=main">BYGGNADEN</a></li>
    <li><a href="default.asp?page=main">BILDER</a></li>
    <li><a href="default.asp?page=main">SEV&Auml;RDHETER</a></li>
    <li><a href="default.asp?page=main">G&Auml;STBOK</a></li>
    <li><a href="default.asp?page=main">KONTAKT</a></li>
</ul>