3

Possible Duplicate:
How can I make a fieldset legend-style “background line” on heading text?

On a certain page my client wants me to make a small widget with lines coming off of either side of the headers. Is there a simple way I can make these red headers with just css?

headers with bars

Community
  • 1
  • 1
davidscolgan
  • 7,508
  • 9
  • 59
  • 78
  • @ThomasClayson: What has he tried? Has he done anything but ask SO to solve his problem? – Marcin Feb 13 '12 at 15:36
  • 1
    This is definitely a duplicate question. There are a bunch of answers here, including two of my own: http://stackoverflow.com/q/5985009/405015. – thirtydot Feb 13 '12 at 15:41
  • Yep, guess I didn't search hard enough. Thanks. – davidscolgan Feb 13 '12 at 15:48
  • @dvcolgan: I added [a no-image solution](http://stackoverflow.com/a/9264245/94197) to the marked duplicate, if you're still interested. – Andy E Feb 13 '12 at 16:51

2 Answers2

1

Off the top of my head and untested... You could put a border bottom on the header, then have a <span> inside the header which contains the text, put a background colour of white on the span and move it down a few pixels to cover up part of the border

position: relative;
bottom: -10px;

Edit: You would need to set a text-align: center; on the header, and ensure it does not have an overflow: hidden; on it!

Probocop
  • 10,346
  • 28
  • 85
  • 115
1

You can create a one pixel wide image that has the height that the header is supposed to be, and then make all pixels in the image white except for one red one in the middle. You can then use CSS to set that as the background image for the enclosing element repeated on the x-axis. That will appear to be a red line across the screen. You can enclose the text in a div and set that background color to white so the line does not appear behind the text.

Vincent Ramdhanie
  • 102,349
  • 23
  • 137
  • 192
  • 2
    You could just make a 1px square image colored red, as long as you set it to vertical center and no-repeat in the css. :) – Thomas Clayson Feb 13 '12 at 17:06