homepage Welcome to WebmasterWorld Guest from 54.163.139.36
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
How to set Heading with the bottom border to the end
toplisek

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4532389 posted 9:11 pm on Jan 1, 2013 (gmt 0)

How to set Heading with the bottom border to the end as sample CSS:
#my_h4 h4 {
display: inline;
border-bottom: 1px solid #000000;
color: #000000;
font-family: Sans-serif;
font-size: 14px;
font-style: normal;
font-weight: bold;
padding: 0 0 10px;
}

Border at the bottom should expand according to box around H3 not text limitation of H4. Is this possible to achieve?

 

Paul_o_b

10+ Year Member



 
Msg#: 4532389 posted 10:55 pm on Jan 1, 2013 (gmt 0)

You have made the h4 an inline element so that means it is only as long as the content that it holds. A border on an inline element will only match the content.

If you want the border to go full with of the container then set the element to display:block instead.

Note that you can't set vertical margins on inline elements and that vertical padding will not increase the height of the line but spill out over other elements.

lucy24

WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



 
Msg#: 4532389 posted 3:45 am on Jan 2, 2013 (gmt 0)

Border at the bottom should expand according to box around H3 not text limitation of H4.

Is there more than one h4 involved? Or rather: are there more h4s than h3s? It kinda sounds as if what you want is not a separate h4 at all, but something like <span class = "subhead"> attached to the preceding h3. The padding and border will then be properties of the h3, while the subhead only carries those properties that are different from the main h3.

toplisek

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4532389 posted 10:59 am on Jan 2, 2013 (gmt 0)

I have issue that image should be on the right like float:right;
and heading on the left top part. Inline settings eliminates break rule for heading.

Paul_o_b

10+ Year Member



 
Msg#: 4532389 posted 3:42 pm on Jan 2, 2013 (gmt 0)

It's still unclear what you require exactly I'm afraid.

If the reason you made the header inline so that it will stay on the same line as the floated right image then instead leave the header as display:block but float the right image first in the html and the header will stay to the side on the same line.

You will then need to use margin-right on the header to keep clear of the image otherwise the border will run behind the image also.

Not sure if that was what you were saying though as you mention h4 and h3 in the same sentence which was confusing.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved