Footnote:
ArkiePrince
Semi-Retired
See Blog


Valid XHTML 1.0
Valid CSS

CSS Header Template

with php include - tableless layout

This CSS header (or footer) generator will make a header template without using tables. This CSS Style Sheet template maker outputs code for the style sheet and for the header section of a webpage - website. Again the header template does NOT use a table layout!

By changing form input values to generate various headers, it's possible to learn a lot about using css to eliminate table layouts. Then by using php includes (as shown on other pages at this website), the resulting page(s) will all have the same heading. Therefore, changing one file (such as header.php) will automatically change the header on ALL pages. In fact, a header may be all that is needed for a full page template - depending on taste :)

Summary: This code maker will generate a header template that can be used on your website (typically by using a php include as shown in the other template generators on this web site). Additional hints for using this generator are shown at the bottom of the page. Or just click the generator button to get started (btw: hints - such as using the enter key are shown at the bottom of the template generator form.

Header or Footer
Template Input:

#header (box)

{ height:%; background:; margin:; padding:; }
Note: To remove Top Section - remove the 'on' :


#leftbar (top n bottom)

{ float:; width:%; height:px; background: ; text-align: ; }


#rightbar (top n bottom)

{ float:; width:%; height:px; background: ; text-align: ; }


#bar (middle)

{ width:%; background: ; }


a:

{ font-family:; font-size:px; background-color:; color:; font-weight:; vertical-align:; }


a:hover

{ font-family:; font-size:px; background-color:; color:; }



Optional Images & Links:

VIP: To enter an alternate image, you must include the full URL i.e. the URL needs the: "http://www......." part along with the image name ("/image.jpg") at the end. See default for Top curve for an example.


Top Curve Image

Full URL:;
width:;     height:;    


First Image (middle bar)

Full URL:;     width:;     height:;     align:;


Second Image (middle bar)

Full URL:;     width:;     height:;     align:;


Third Image (middle bar)

Full URL:;     width:;     height:;     align:;


Bottom Curve Image

Full URL:;     width:;     height:;    


Text Link Examples

Link URL:;     Screen Text:;    


Link Button Example

Link URL:;
Button Image URL:;     width:;     height:;    



Hints: