Afternoon people,

 

Just trying to create a simple line to seperate a heading from a paragraph, just to space things out a bit.

 

Something like the neon green lines on this site http://neon-velo.com/#overview

 

I have a feeling it could be a value of a Border property, but have not yet found it.

 

Any ideas guys?

 

Thanks.

 

 

This should do it:

 

p.s. add width as necessary!

hr {
    display:block;
    height:1px;
    border:0;   	
    border-top:1px solid #eeeeee; /* YOUR COLOR HERE */
    margin:1em 0;
    padding:0;
}

Thanks Lyndsey

or you can create an empty <div> with height 1px!

toolinfy . com / hrwithcss

 

(Sorry I'm new - I'm not allowed to post "real" links yet...)

This:

 

 

This should do it:

 

p.s. add width as necessary!

hr {
    display:block;
    height:1px;
    border:0;   	
    border-top:1px solid #eeeeee; /* YOUR COLOR HERE */
    margin:1em 0;
    padding:0;
}

 

adding an extra div would work but is unsemantic.

 

if you do need a div to add something such as a background image to the border then just use the css psuedo :after to add in the additional element without screwing with the html source.

The :after pseudo is realy nice to inject markup for layout purposes. It's also used a lot to clear floats. Unfortunately it's not supported by IE7 and below.

EDIT: I would use the hr tag recomended by Robert and Lyndsey

Edited May 7, 201313 yr by Nillervision

Lucky for me I decided to ditch developing for IE7

 

I use :after and :before all the time, especially useful for adding css triangles to things like tooltips etc. It's just a shame you can only add the two.

I wish there was a selector like:

 

.className:after[1] { .... }

.className:after[2] { .... }

.className:after[3] { .... }

.className:after[4] { .... }

 

I know it wouldn't be needed so often but cases do prop up where you end up having to add extra divs or spans that are only used for styling and this would solve that.

It's been proposed, but I doubt it'll see the light of day

www[dot]w3[dot]org/TR/css3-content/#nesting

Lucky for me I decided to ditch developing for IE7

Nice, no IE7 worries. How do you persuade your clients?

I tell them that a very limited number of people now use IE7 and it wouldn't be worth the extra cost to them to get me to make their website IE7 compatable.

 

I can also mention that Google have dropped support for IE7 on Gmail and Google Docs so theres not much point in the extra expense to support it.

 

Plus the sooner this browser is dead and buried the better for all of us designers / developers.

Good arguments Robert. I'll keep them in mind. Here in DK there is unfortunately a lot of public institutions like libraries comunity centers ect. that still are using IE7 because they are managed by some Win NT / 2000 security sytems. It's not many machines but they serve a lot of users. I guess Sweden is ahead in that department.

Well actually I haven't really been looking for clients so much in Sweden, I'm looking to get employed with an agency once I have my personnumer. I'm just doing odd small projects sourced from contacts I have abroad. I wouldn't be surprised if I do have to support IE7 again if I am working for an agency :/