4 replies to this topic

[piraten2k]

I have done a menulist in CSS with a tutorial as help.

Now I want it to be vertical if it's possible.

:Link: MENU


:CSS CODE:

/* CSS Document */

#menu2 {display:block; height:120px; min-height:120px;}
#menu2 ul {margin:0; padding:0; list-style-type:none;}
#menu2 li {display:block; float:right; margin-right:1px; width:115px; border:1px solid #000;}
#menu2 li.list1t {background:#000 url(1.gif) no-repeat;}
#menu2 li.list2t {background:#000 url(1.gif) no-repeat;}
#menu2 li.list3t {background:#000 url(1.gif) no-repeat;}
#menu2 li.list4t {background:#000 url(1.gif) no-repeat;}
#menu2 a {display:block; width:115px; padding-top:86px; color:#000; text-decoration:none; text-align:center; text-transform:uppercase; color:#fff; font-size:0.8em; font-weight:bold;}

#menu2 a#item1 {background:transparent url(1.gif) -11px -8px no-repeat;}
#menu2 a#item2 {background:transparent url(1.gif) -115px -86px no-repeat;}
#menu2 a#item3 {background:transparent url(1.gif) -115px -86px no-repeat;}
#menu2 a#item4 {background:transparent url(1.gif) -115px -86px no-repeat;}

#menu2 a#item1:hover {background-position:top right; z-index:50; color:#fc0;}
#menu2 a#item2:hover {background-position:top right; z-index:50; color:#0c0;}
#menu2 a#item3:hover {background-position:top right; z-index:50; color:#f00;}
#menu2 a#item4:hover {background-position:top right; z-index:50; color:#0ff;}

:HTML CODE:

<div id="menu2">
<ul>
<li class="list1t"><a id="item1t" href="#nogo" title="Item 1">Item 1</a></li>
<li class="list2t"><a id="item2t" href="#nogo" title="Item 2">Item 2</a></li>
<li class="list3t"><a id="item3t" href="#nogo" title="Item 3">Item 3</a></li>
<li class="list4t"><a id="item4t" href="#nogo" title="Item 4">Item 4</a></li>
</ul>
</div>

Anyone who know what to edit in the CSS code so my listmenu goes vertical instead of horizental?

[Jaymz]

li { display: inline; }

[coolaid]

its more convenient to use

display:block;
float:left;

so that way you can still add a width to the list item

[piraten2k]

coolaid, on Aug 18 2005, 09:39 PM, said:

its more convenient to use

display:block;
float:left;

so that way you can still add a width to the list item

Really thx dude!

[rc69]

you could also just fix the CSS, rather then add more to it

/* CSS Document */

#menu2 {display:block; height:120px; min-height:120px;}
#menu2 ul {margin:0; padding:0; }

That's your first 4 lines of code, i just took list-style-type out of #menu2 ul