4

The effect I'm talking about

Hey!

I want to create a effect like in the image above. The width of those lines need to be dynamic, so they adjust to the text in the middle. I tried it with a table:

            <table>
                <tr>
                    <td><hr /></td>
                    <td><p>The 20th of</p></td>
                    <td><hr /></td>
                </tr>
            </table>

But the lines don't just fill up the space like I expected it. How can I fix this? Is there a better approach than using a table?

Edit: Just noticed the typo in the image. Please just ignore it.

dislick
  • 667
  • 1
  • 7
  • 25
  • 1
    possible duplicate of [css technique for a horizontal line with words in the middle](http://stackoverflow.com/questions/5214127/css-technique-for-a-horizontal-line-with-words-in-the-middle) and http://stackoverflow.com/questions/2812770/add-centered-text-to-the-middle-of-a-hr-like-line – j08691 Feb 20 '13 at 17:13
  • This comment has the perfect solution for my case: http://stackoverflow.com/a/14731123/1309907 – dislick Feb 20 '13 at 17:37

1 Answers1

0

The easiest way is probably to make the line a background image, and then put another HTML element in front of it to contain the text:

<div class='linebehind'>
    <span class='text'>The 20th of</span>
</div>

<style>
.linebehind {
    background: url('imageWithLine.gif') repeat-x;
    text-align: center;
}
.text {
    display: inline-block;
    background: white; /* or whatever colour the background of the line image is */
    padding: 0 5px;
}
</style>

Note: this code probably isn't perfect, but it should be more or less what you're looking for with a bit of tweaking.

starowere
  • 113
  • 4
DiMono
  • 3,308
  • 2
  • 19
  • 40
  • Tried that out too, but I have multiple backgrounds, I can't just set it to a color. Thanks anyway! – dislick Feb 20 '13 at 17:29