CODEWITHSUNDEEP
csshtmlheaderstyling
hotshots
hotshots

Reputation: 113

CSS header styling

Just wondering how to style a header like the attached image. Was thinking of using two divs, the left for the text and the right for the horizontal repeating image. Problem is I need the right div's width to change with respect to different header lengths.

Any help would be appreciated!

header image

Upvotes: 0

Views: 7784

Answers (3)

Alfred
Alfred

Reputation: 21386

You can do that in simple;

.header{
    width:100%;
    height:20px;
    background:url('http://jsfiddle.net/favicon.png') repeat;
}
.header span{
    background-color:#FFF;
    display:inline-block;
    height: 20px;
}

<div class="header"><span class="title">Header Text</span></div>

You can include this in various pages and the title space re-size accordingly.

Here is a working Live Demo

Upvotes: 1

Dipak
Dipak

Reputation: 12190

Use left and right DIVs with respective width and then to the right div use text-align: right; property so that the content loaded in right div will remain to right and increase to left depending on the size of content

<div class="header">
  <div class="left"></div>
  <div class="right"></div>
</div>

.header{overflow: hidden;} //Considering width: 1000px;
.left{float: left; width: 100px;}
.right{float: right; width: 900px; text-align: right;}

Upvotes: 1

Mark
Mark

Reputation: 6855

you could do it with just a <h1> tag for semantic reasons, and ad a background-image to it. With padding-right you now can control the amount of how many times it should repeat itself and filling up the needed space.

Upvotes: 0

Related Questions