Home » Groups » Zen Task Force

Styling links - Houston there is a problem

Submitted by criscom-gdo on 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:

configure
edit menu

And I need to style this part of it:

Any suggestions?
Thanks
Chris

Groups:
Zen Task Force
Login to post comments

Just being very specific in

yoroy's picture
yoroy - Tue, 2008-07-01 14:46

Just being very specific in your CSS doesn't work?

li.expanded ul.menu li.leaf a.active {
add stuff here
}


Login to post comments

Thanks, yoroy. This does not

criscom-gdo - Tue, 2008-07-01 15:06

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?


Login to post comments

link is swallowed

criscom-gdo - Tue, 2008-07-01 16:09

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


Login to post comments

Issue resolved

criscom-gdo - Tue, 2008-07-01 16:26

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 {

background-image: none;
background-color: bisque;

}

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


Login to post comments