Styling links - Houston there is a problem
public
group: Zen Task Force
criscom - Tue, 2008-07-01 13:33
Hi folks,
I have built a site for a ngo. It is still on the testserver. You can view it at http://www.einstern.eu
Somehow styling the links does not work and it seems as if I am at the end of my tether.
I am referring to the sublinks of primary links as can seen on the testsite. Klick on About in the horizontal menu at the top of the page. Then a link called Organs appears. I need to style this link, i.e. add some padding and background. But I have no idea which code to use.
Here's the html:
And I need to style this part of it:
Any suggestions?
Thanks
Chris
Sitewide tags: css primary links
Just being very specific in
Just being very specific in your CSS doesn't work?
li.expanded ul.menu li.leaf a.active {
add stuff here
}
Thanks, yoroy. This does not
Thanks, yoroy. This does not work, though.
The cascade looks like this:
li class="expanded active-trail" a href="
/about-international-council-national-youth-policy"
title="About ICNYP" class="active" About us /a
ul class="menu"
li class="leaf last" a href="/icnyp" title="Subtitle 1" Organs /a /li /ul /li
I have tried the following css for this:
li.expanded active-trail ul.menu li.leaf last a {
padding-top: 20px;
}
maybe the problem are the spaces?
link is swallowed
the sublink disappears when i add too much padding. here's the call:
block-menu-primary-links ul.menu li.expanded ul.menu li.leaf /* Styles the sublinks in the navbar */
{
padding: 5px 0 0 0;
}
if I add 10px padding at the top the link disappears in the header... strange
Issue resolved
block-menu-primary-links ul.menu li.expanded ul.menu li.leaf /* Styles the sublinks in the navbar */
{
padding: 4px 0 0 0;
}
block-menu-primary-links ul.menu li.expanded ul.menu li.leaf a {
}
I had to change the height of the navbar as well:
/** navbar **/
#navbar
{
float: left;
width: 100%;
margin-top: -272px;
_margin-top: 0px;
margin-left: 0;
margin-right: -100%; /* Negative value of #navbar's width + left margin. /
padding: 0; / DO NOT CHANGE. Add padding or margin to #navbar-inner. /
height: 5.6em; / The navbar can have any arbritrary height. We picked one
that is twice the line-height pluse 1em: 2 x 1.3 + 1 = 3.6
Set this to the same value as the margin-top below. */
}
.with-navbar #content,
.with-navbar #sidebar-left,
.with-navbar #sidebar-right
{
margin-top: 5.6em; /* Set this to the same value as the navbar height above. */
}
Thanks for showing the direction