A Simple Variable Width Header in CSS

This example is actually simpler than most of what you’ll find on the web, and you need to build on it, but I often want to see a simple, stripped down example, so I thought I’d post it.

I wanted to take existing header and footer graphics and adapt them to a wider page, preferably variable width.  Fortunately, I had graphics available that needed only minimal adaptation to the purpose.  To use this code you need a graphic that has a left portion, a right portion, and a repeatable portion that goes between them.  You can see the original graphic, developed for me by PhotoMD.net, at Energion.com.

To create this page, I removed the text which was originally used with an image map, thus creating the desired header.  In the final design I will include navigational links in text printed over the header and footer rather than actually printed on them.  Then I cut off the left and right sides and a 23 pixel slice of what went between.

Here are the elements, reduced in size:

Energion.com Example Header File
Energion.com Example Header File

The three parts are:

Left Part of Header
Left Part of Header
Right Part of Header
Right Part of Header

And finally, a tiny sliver, which would even be smaller and still work:

Middle Sliver of Header
Middle Sliver of Header

The footer is done in much the same way.  It will probably not be active today, but eventually this code will be the foundation of the them at the Energion.com Biblical Prayer Database.

For now, you can see this at http://prayer.energion.com/variable_width_header.html.

Here’s the CSS:



body {
text-align: center;
min-width: 800px;
max-width: 1240px;
}

div#page {
text-align: left;
}

div#header {
text-align: center;
height: 169px;
margin: 0;
padding: 0;
background-image: url('images/header_middle.png');
height: 169px;
width: 100%;
}

div#header_left {
margin: 0;
padding: 0;
float: left;
background-image: url('images/header_left.png');
background-repeat: no-repeat;
height: 169px;
width: 140px;
display: inline;
}

div#header_right {
margin: 0;
padding: 0;
float: right;
background-image: url('images/header_right.png');
background-repeat: no-repeat;
height: 169px;
width: 336px;
display: inline;
}

div#footer {
text-align: center;
margin: 0;
padding: 0;
background-image: url('images/footer_middle.png');
height: 88px;
width: 100%;
}

div#footer_left {
margin: 0;
padding: 0;
float: left;
background-image: url('images/footer_left.png');
background-repeat: no-repeat;
height: 88px;
width: 113px;
}

div#footer_right {
margin: 0;
padding: 0;
float: right;
background-image: url('images/footer_right.png');
background-repeat: no-repeat;
height: 88px;
width: 203px;
}

H3 {font: 14pt Arial; color: navy}
H2 {font: 18pt Arial; color: navy}
H1 {font: 20pt Arial; color: #dd0033; font-weight: bold}
H4 {font: 12pt Arial; color: navy; font-weight: bold}
.small {font: 8pt Arial; color: navy}
.body {font: 10pt Arial; color: navy}
.note {font: 11pt Arial; color: navy; font-weight: bold}
.note2 {font: 11pt Arial; color: #dd0033; font-weight: bold}
.subhead {font: 14pt Arial; color: navy}
.bigblue {font: 18pt Arial; color: navy}
.bigred {font: 20pt Arial; color: #dd0033; font-weight: bold}

To see the html, please go to demonstration page here and view page source to get the html.

That’s pretty much it! Note that I added the Raw HTML plugin to my WordPress to make posting the example easier.

Similar Posts

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.