User login

CSS title tabs with varying width, background images

Oh my... I don't use strong enough curse words to express myself. That CSS was just so, so, so, so, so, so, so much more complicated than it should have been.

It's finally attached.

A very nice graphical tab that expands to fit the line of text, has a left-side graphic bookending one side of the tab, a background behind the text, a right-side graphic leading into a background graphic that runs the width of the block, and finally a closing right-hand graphic on the end of that.

And it's still too fragile (looks bad when compressed), but it works.

Hmm, maybe a min-width in there...

But why did it take so many floats and junk in the first place? CSS expert review welcome.

Comments

Post new comment

The content of this field is kept private and will not be shown publicly.
  • You may post code using <code>...</code> (generic) or <?php ... ?> (highlighted PHP) tags.
  • You can use Markdown syntax to format and style the text. Also see Markdown Extra for tables, footnotes, and more.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <img> <blockquote> <small> <h2> <h3> <h4> <h5> <h6> <sub> <sup> <p> <br> <strike> <table> <tr> <td> <thead> <th> <tbody> <tt> <output>
  • Lines and paragraphs break automatically.

More information about formatting options

By submitting this form, you accept the Mollom privacy policy.