Page 1 of 1

help - menu seems to indent

Posted: Sun 8. Jan 2006, 04:41
by odeniyi
using NAV_LIST_SETLEVEL as below...

{NAV_LIST_SETLEVEL::0:0:0:1:tstcss}


and in frontend.css (default css) .....

#tstcss_ul {

list-style-type: none;
text-align: left;
padding-top: 40px;

}

#tstcss_ul li {
padding-bottom: 10px;
padding-top: 10px;
border-bottom: 1px dashed #5E747F;
margin: 0px;

}


The menu indents or appears as if right justified or left padding ..??. I want the menu without any indentation.

thanks for any help.....

Posted: Sun 8. Jan 2006, 10:05
by flip-flop

Posted: Sun 8. Jan 2006, 10:35
by odeniyi
Hi Fli-flop,

Thanks.

I understand the example but it doesn't help my case.

I didn't think it would be difficult to display a simple menu without indenting it using NAV_LIST_SETLEVEL.

The code that gets generated is:-

<div id="left">am i indented?<div id="tstcss">
<ul id="tstcss_ul">
<li><a href="index.php">home</a></li>
<li><a href="index.php?fairtrade_products">Fairtrade products</a></li>
<li><a href="index.php?id=7,0,0,1,0,0">Our Mission</a></li>
<li><a href="index.php?id=6,0,0,1,0,0">RBWM Fairtarde Directory</a></li>
<li><a href="index.php?schools">Fairtrade & schools</a></li>
<li><a href="index.php?events">Events</a></li>
<li><a href="index.php?id=5,0,0,1,0,0">Steering committee</a></li>
</ul>
</div></div>

The text "am i indented?" isn't indented but the menu is. definitions for tstcss are as above. Including "float: left" in the tstcss_ul li doesn't work either.

any ideas?

thanks,

Posted: Sun 8. Jan 2006, 11:32
by odeniyi
OK solved.

I needed "margin: 0;" in the ul class......

Oh the wonders of CSS!

Posted: Sun 8. Jan 2006, 11:39
by flip-flop
Hi,

Code: Select all

/************** CSS vertikale navi 5 */
#nav_vert5_ul {
   border: 0;
   margin: 0;
   padding: 0;
   list-style-type: none;
   text-align: left;
   font: bold 11px, verdana, lucida, sans-serif;
}

#nav_vert5_ul li a {
   width: 130px;
   height: 11px;
   border: 0 0 0 0;
   border-top: 1px dashed #5E747F;
   margin: 4px 30px 4px 10px;
   padding: 1px 10px 1px 0;
   color: #000000;
   text-decoration: none;
   display: block;
   text-align: left;
   font: bold 11px/11px "Verdana", "Verdana", verdana, lucida, sans-serif;
}

#nav_vert5_ul li a:hover {
   color: #0000FF;
   text-decoration: none;
   font-weight: bold;
   margin: 4px 30px 4px 10px;
   padding: 1px 10px 1px 0;
   border-top: 1px dashed #5E747F;
}

#nav_vert5_ul li a#nav_vert5_active,
#nav_vert5_ul li a#nav_vert5_last,
#nav_vert5_ul li a#nav_vert5_first,
#nav_vert5 li a#nav_vert5_active_link,
#nav_vert5 li a#nav_vert5_home_active_link {
   color: #000055;
   text-decoration: none;
   font-weight: bold;
   margin: 4px 30px 4px 10px;
   padding: 1px 10px 1px 0;
   border-top: 1px dashed #5E747F;
}
/*************** END CSS vertikale navi 5 */
substitution all nav_vert5 to yours.
Play around with margin, padding and font.

Thats it.

Gruß Knut

Posted: Sun 8. Jan 2006, 14:01
by odeniyi
thanks - what a credit you are to this forum! :)