homepage Welcome to WebmasterWorld Guest from 54.198.224.121
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Website
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

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




msg:4532391
 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




msg:4532407
 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




msg:4532421
 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




msg:4532488
 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




msg:4532522
 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.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved