Styling a list as tabs with a background overflowing into content

Question

I couldn't think of any better way to name this question, but I'll explain.

I have a mediawiki website with a background pattern (like parchment) behind the articles. At the top of each article I want to have tabs like wikipedia does (with page | talk | edit etc links).

The problem is, the tabs should seamlessly fit with the article's background and I can't figure out if this is actually possible.

The way I was trying to do it was positioning the list inside the actual content div and give the <li> items a transparent background, but as far as I can see there's no way to color the rest of the <ul>'s background black without affecting the <li>'s in there.

Anyone have an idea?

Answer 1

That's indeed not possible. I'd give the li elements a thick black border on left and right sides instead.

Answer 2

You could have the <ul> outside of the content <div> and use a the background-position CSS property to position the background on the content <div> and move it up the height of the <ul>. Something like the following (note this is untested, just trying to give you a general idea):

<style>
  #links {
    background-image: url('/images/myawesomebackground.png');
    height: 20px;
  }

  #content {
    background-image: url('/images/myawesomebackground.png');
    background-position: 0px 20px;
  }
</style>

<ul id='links'>
  <li>Link 1</li>
  <li>Link 2</li>
</ul>

<div id='content'>
 Stuff goes here...
</div>