Member Avatar for webdi

Hey,

I would welcome some advice here. I'm developing my first Drupal site and I am using Zen as my starter theme and creating a sub-theme.

I've got my navigation set up in the second (right) sidebar. I would like all of the inactive navigation links to have the same background and the active navigation link to have a different background. It's the active background that I am having trouble with.

The site can be seen here http://tandemlifecoaching.com.

I'm close, but not quite there. I've edited the html-reset.css document with the following.

ul.menu li.leaf a.active-trail {
background-image:url('');
margin-left:-114px; padding:27px 100px 29px 50px;
}

I'm unable to define a size for my background image behind my navigation text link. I've tried height and width defined by pixels and height and width defined by percent. I've tried background-size, but all browsers aren't playing nicely with that property. The padding that I added is not ideal as this shows the background width dependent upon the size of my actual text link, so the shorter links show less of the button than the longer links. I'm sure there's an easy solution out there, I just haven't found it yet.

I'd welcome any suggestions and thank you in advance for your help!

  • 2 Contributors
  • 2 Replies
  • 267 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by webdi

Dani AI

Generated

Short version: was right — the background looked wrong because the link element was only as wide as its text. The robust ways to fix this are (A) put the background on the LI and give the LI a fixed height/width, or (B) make the A fill the LI (display:block; height:100%) and give the A the background. Both approaches avoid brittle negative margins and make the active “button” match across short and long labels.

Example — background on the LI (simple, predictable):

ul.menu li {
  width: 220px;
  height: 44px;
}
ul.menu li a {
  display: block;
  height: 100%;
  line-height: 44px; /* vertical centering */
  padding: 0 16px;
  text-decoration: none;
}
ul.menu li.active-trail {
  background: url('/sites/all/themes/yourtheme/images/nav-active.png') left center no-repeat;
}

Example — background on the A (if you need the LI to be flexible):

ul.menu li a {
  display: block;
  padding: 12px 18px;
  background: url('/sites/all/themes/yourtheme/images/nav-mid.png') repeat-x left center;
}
ul.menu li a.active-trail {
  background-image: url('/sites/all/themes/yourtheme/images/nav-active.png');
}

Troubleshooting tips: inspect the rendered HTML to see whether Drupal/Zen puts the active class on the LI or the A and target that element. If width/height rules don’t apply, check selector specificity and that your subtheme CSS loads after Zen (and clear Drupal cache / disable CSS aggregation while developing). For scalable designs, use a repeating middle slice (repeat-x) or CSS gradients instead of fixed images; for multiple states use a sprite and change background-position.

Recommended Answers

All 2 Replies

Member Avatar for Dandello

Define the height and width of your li element instead.

Member Avatar for webdi

Define the height and width of your li element instead.

Ah yes, of course! Works perfectly. Thanks for your help. Sometimes after looking at something so long, we don't see clearly!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.