Reputation: 132570

Styling a heading using CSS

I have a page where I am displaying subheadings styles like this:

enter image description here

This looks fine until the text to be displayed exceeds a single line, when it looks like this:

enter image description here

What I would like to get is this:

enter image description here

i.e. the height of the decorative orange rectangle at the left should vary according to the height of the text.

Because we have a requirement that the decorative rectangle can be any colour, it is not done using an image. This is what we currently render:

<div class="header">
<div class="decor">&nbsp;</div>
<h3>Text goes here</h3>
</div>

Is there a way I can style this using CSS to get the desired look? I'm happy to change the HTML used too. My restrictions are:

It must be possible for us to set the rectangle to any colour via CSS.
The heading text can vary, so we cannot apply specific hard-coded heights to specific headings via their IDs, it needs to work automatically.

Upvotes: 1

Answers (3)

Reputation: 1210

You can do something like this, http://jsfiddle.net/5SaCt/ . Set the left border to any color you want. HTML

<div id="content">
    1,2,3,4 <br/>
    5,6,7,8
</div>

CSS

#content {
    border-left:5px solid orange;
    padding:5px;
    width:500px;
    height:auto;
}

OUTPUT:

Upvotes: 2

Reputation: 8981

CSS

h3{
    border-left:5px solid #F1592A;
     background-color:#EEEEEE;
    padding:2px;

}

Upvotes: 3

Reputation: 16777

I don't recommend using   for styling (and keeping space is styling).

Padding is used to create inner element-spacing. And that's what you need.

Try adding the following CSS styling:

h3 {
   padding-left: 10px; /* You can change this number */
}

You can create the left "decoration" by adding a border:

h3 {
   padding-left: 10px; /* You can change this number */
   border-left: 3px solid orange; /* You can change the color and width */
}

Upvotes: 2