Welcome to WebmasterWorld Guest from 54.196.232.162

Forum Moderators: not2easy

Message Too Old, No Replies

How to set Heading with the bottom border to the end

     
9:11 pm on Jan 1, 2013 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Oct 25, 2006
posts: 995
votes: 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?
10:55 pm on Jan 1, 2013 (gmt 0)

Junior Member

10+ Year Member

joined:May 28, 2003
posts:198
votes: 4


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.
3:45 am on Jan 2, 2013 (gmt 0)

Senior Member from US 

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

joined:Apr 9, 2011
posts:12709
votes: 244


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.
10:59 am on Jan 2, 2013 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Oct 25, 2006
posts: 995
votes: 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.
3:42 pm on Jan 2, 2013 (gmt 0)

Junior Member

10+ Year Member

joined:May 28, 2003
posts:198
votes: 4


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.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members