0

I've been having trouble setting up my html and css to mimic this picture, . Any tips on how to set it up so it's Line, Text, Line all on the same vertical line?

user1830833
  • 151
  • 1
  • 2
  • 10
  • 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) – Dryden Long Feb 27 '14 at 18:30

1 Answers1

1

Use :before/:after and top positioning

EDIT

See the latest updated JSFiddle.

I added:

*,
*:before,
*:after
{
    position: relative;
}
.line:after
{
    position: absolute;
    top: 49px;
    left: 0;
    content: "";
    height: 1px;
    width: 100%;
    background-color: blue;
}
.line h3
{
    z-index: 1;
    display: block;
    width: 300px;
    margin-left: auto;
    margin-right: auto;
    background-color: #d1d1d1;
}

And around your h3's in your HTML I added <div class="line"></div>

For example:

<div class="line">
    <h3><span style='color: #ff6c00;'>About</span> Me</h3>
</div>

AGAIN Change the top of .line to the amount you need, along with the background-color :)

Community
  • 1
  • 1
Douglas Denhartog
  • 2,036
  • 1
  • 16
  • 23
  • Thx for the fast response. I applied what you suggested and I got the line, however, it doesn't show on top of the div's background color. http://tinypic.com/view.php?pic=2iqd0xt&s=8#.Uw-OQfldVcg I tried setting different z-indexes to no help, it either shows on top of everything including the text or behind the div as shown in the pic – user1830833 Feb 27 '14 at 19:12