Tycoon Talk
Become a Big fish!
The number 1 forum for online business!
Post topics, ask questions, share your knowledge.
Tycoon Talk is part of Freelancer.com - find skilled workers online at a fraction of the cost.

CSS Forum


You are currently viewing our CSS Forum as a guest. Please register to participate.
Login



Reply
how can I create a horizontal line valign with heading?
Old 05-11-2011, 02:29 PM how can I create a horizontal line valign with heading?
Experienced Talker

Posts: 39
Name: Day
Trades: 0
Well I'm looking to create a horizontal line that stops 25px before a heading and start again 25px after a heading like so:




any ideas?
DayliDesign is offline
Reply With Quote
View Public Profile
 
 
Register now for full access!
Old 05-11-2011, 03:32 PM Re: how can I create a horizontal line valign with heading?
lizciz's Avatar
Super Spam Talker

Posts: 807
Name: Mattias Nordahl
Location: Sweden
Trades: 0
Why not use that picture you posted?
Otherwise, three divs with float left and apropriate margins. Make the first and third div have height 1px and some background color.
__________________
Your answers will only be as good as your question. Formulate it well and give all the necessary information.
lizciz is online now
Reply With Quote
View Public Profile Visit lizciz's homepage!
 
Old 05-11-2011, 03:35 PM Re: how can I create a horizontal line valign with heading?
chrishirst's Avatar
Missing! presumed drunk.

Posts: 42,371
Name: Chris Hirst
Location: Blackpool. UK
Trades: 0
Very simple.

hr set at 100%

hn heading with
Code:
 position: relative;
 display: inline;
 padding: 0 25px;
 z-index: 10;
 top: -{heading font size/2};
 margin-bottom: -{same value as top};
HTML Code:
     <div>
     <hr>
     <hn>Design ...</hn>
</div>
__________________
Chris. ->>
Please login or register to view this content. Registration is FREE
<<-

A foolish consistency is the hobgoblin of little minds
Thought for today:- Is SEO the only industry where all the cowboys are Indians?

Last edited by chrishirst; 05-11-2011 at 03:36 PM..
chrishirst is offline
Reply With Quote
View Public Profile Visit chrishirst's homepage!
 
Old 05-11-2011, 06:33 PM Re: how can I create a horizontal line valign with heading?
chrishirst's Avatar
Missing! presumed drunk.

Posts: 42,371
Name: Chris Hirst
Location: Blackpool. UK
Trades: 0
Decided to play with the idea.
http://www.modtalk.co.uk/_site/code/...ading-overlay/
__________________
Chris. ->>
Please login or register to view this content. Registration is FREE
<<-

A foolish consistency is the hobgoblin of little minds
Thought for today:- Is SEO the only industry where all the cowboys are Indians?
chrishirst is offline
Reply With Quote
View Public Profile Visit chrishirst's homepage!
 
Old 05-12-2011, 03:11 AM Re: how can I create a horizontal line valign with heading?
Experienced Talker

Posts: 39
Name: Day
Trades: 0
Quote:
Originally Posted by chrishirst View Post
Very simple.

hr set at 100%

hn heading with
Code:
 position: relative;
 display: inline;
 padding: 0 25px;
 z-index: 10;
 top: -{heading font size/2};
 margin-bottom: -{same value as top};
HTML Code:
     <div>
     <hr>
     <hn>Design ...</hn>
</div>
simple, effective, and clever... Thank you. how do you then center the text however? When I set the display to inline, the text-align is ignored.

EDIT: I was able to center it by setting the containing div's text-align to center. Can you tell me why it works this way but not by setting the heading's text-align center?

Last edited by DayliDesign; 05-12-2011 at 03:37 AM..
DayliDesign is offline
Reply With Quote
View Public Profile
 
Old 05-12-2011, 08:43 AM Re: how can I create a horizontal line valign with heading?
chrishirst's Avatar
Missing! presumed drunk.

Posts: 42,371
Name: Chris Hirst
Location: Blackpool. UK
Trades: 0
With inline elements the width collapses to the size of the contents plus padding, so text align WILL be applied to the heading you cannot see any effect.

A heading is element is a block element by default which would normally be as wide as the parent container, so the text contained has "room" to be to the left, right or centred.
__________________
Chris. ->>
Please login or register to view this content. Registration is FREE
<<-

A foolish consistency is the hobgoblin of little minds
Thought for today:- Is SEO the only industry where all the cowboys are Indians?
chrishirst is offline
Reply With Quote
View Public Profile Visit chrishirst's homepage!
 
Old 05-12-2011, 03:33 PM Re: how can I create a horizontal line valign with heading?
Experienced Talker

Posts: 39
Name: Day
Trades: 0
Very helpful thank you!
DayliDesign is offline
Reply With Quote
View Public Profile
 
Old 05-17-2011, 02:08 PM Re: how can I create a horizontal line valign with heading?
Skilled Talker

Posts: 59
Name: Lisa Forgan
Location: Colorado
Trades: 0
simple yet efficient.
Puddlemut is offline
Reply With Quote
View Public Profile
 
Reply     « Reply to how can I create a horizontal line valign with heading?
 

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off





   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML



Page generated in 1.28483 seconds with 12 queries