Forums

eXo

Is there a way with css to have a line after my header that ends at the same spot no matter the size of the header?

Header--------------------------------------------

sometekstwithmoretekst--------------------

Fourize

There would be many ways to achieve this, one way @TheLeggett made for another member recently is here... http://theleggett.com/explanations/strikethrough/

Hope he doesn't mind me sharing his stuff.

All you would need to do is set a width to your wrapping div and adjust the border-bottom style on .heading to something like dashed or dotted.

for example...


#content {
    width: 700px;
    padding:18px;
    margin: 0 auto;
}
.heading {
    text-align: left;
    border-bottom: 2px dashed #D5D5D5;
}

TheLeggett

By all means @Fourize :) That's what it's there for!

Not quite sure what sort of effect @eXo is looking for based on that description. Almost seems like a background image would be the easiest solution here.

Fourize

I can only assume @eXo means something like this...

Simple Strikethrough

do excuse me if I'm wrong : )

eXo

Thanks fourize ! :D i was looking for that! ^_^

jimsilverman

i prefer:

<h1><span>Header</span><h1>

...and CSS'ing it similar to how you guys have done.

this way, you don't need to mess around with changing display attributes of elements. plus, i am paranoid of div-itis. but yeah, whatever works.

Fourize

You're welcome eXo!

I'm also paranoid about over-using divs, but is there any real disadvantage other than it containing a few more lines of code?

eXo

Yes but its for a school project so it doesn't matter :p, most of the teachers can't even write CSS

jimsilverman

@fourize - inline-block doesn't behave right in ie7 and lower; it renders as a block element. i'm 99% sure (can't check, i'm on a mac) your dotted line is getting covered up for geriatric internet users.

if you care about ie7 users, best to use either display:inline for the inner div, or simply use an inline element (such as a span) to get the job done.

treehouse : what would you like to learn today?

Forums

Header line