Jump to content

Archived

This topic is now archived and is closed to further replies.

quintinm

Customising a heading tag

Recommended Posts

quintinm

Morning, hope you are well.

 

Can GetMeWebDesign or anyone else help?

 

I want to customise a heading tag with a block of color behind the text that is just surrounding the text not spanning the full width of the column, but just around the text

A border underneath the h3 tab would however span the full width of the column.

 

This is what i have so far - is there a simpler way to code it?

I have attached a screengrab - http://screencast.com/t/EZbBBEfJWlLk

and the code i am using.

Html:
<h3>Contact details:</h3>
<hr class="h3-underline">

CSS:
.hentry h3,
.pl-nextbox h3 {
font-size: 14px;
background-color: #33b3d3;
padding: 5px 20px 4px 15px;
color: #fff;
text-transform: uppercase;
letter-spacing: 3px;
display:inline;
}

Thanks in advance, have a great day.

Share this post


Link to post
Share on other sites
Danny

Hi,

 

The simplest way is for you to create a class such as:

 

.header-block {add your styling here...}

 

Then assign the class to any elements you want including header tags, For example:

 

<h3 class="header-block">...</h3>

<h2 class="header-block">...</h2>

<h1 class="header-block">...</h1>


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
quintinm

Hi Danny.

 

The issue is i want to have a color behind the text and a horizontal line the same color as the color behind the text, but the line needs to span the full width of the column etc.

 

As far as i can see, the only way to do that is to have the h3 display "inline" so the background color doesn't span the full width but only behind the text.

 

I think i have it sorted though - just wondered if there was a simpler way than the one i had.

.h3-underline {width:100%; border-bottom:1px solid #33b3d3; padding-bottom:3px;}
h3 {
font-size: 14px;
background-color: #33b3d3;
padding: 5px 20px 4px 15px;
color: #fff;
text-transform: uppercase;
margin:0px;
display:inline;
}



<div class="h3-underline"><h3>Contact details</h3></div>

Thank you.

Share this post


Link to post
Share on other sites
Danny

Yeah I know that, because a Header tag like a p tag is a full width element. So as far as I can see your code is fine. Another way would be to use a header tag with custom class and the same to a <hr> tag.

 

<h2 class="header-block">...</h2>

<hr class="header-rule">

 

http://css-tricks.com/examples/hrs/


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

×