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.
Hints:
- After you finalize your design, just copy n paste the code. Paste the headstyle.css code between the <head> and </head> section (or use an external style sheet as described on the bottom of the generated page). Then paste the header.php code at the top of the <body> section.
- Change input and then review the 'generated' code - to learn as you go. There are a lot of possiblities with all the variables.
- Changing the image 'width' of the top and bottom curve image will change the slope. Or replacing these small images with a another shape (such as triangle) will change the 'step'. The curve section has transparent in top half and aqua in the other i.e. the background colors shows in the top half (you'll have to use graphic editor if you want to change the bottom section).
- Removing an image URL will remove the image from that section. The middle section has 3 images - side x side which all can be removed (or not). I.E. Remove all text from the Full URL box will remove that image
- To enter your own images you MUST use the full path to the image - including the 'http://' and the image name. e.g. http://www.domainname.com/images/picname.jpg
- Removing the 'Optional Link' for the text links will remove all the text link code
- Removing the URL to the button link will remove the example button link
- Use more professional images and conservative colors for a more professional look.
- Summary: There are just too many variable combinations to cover them all here - just take out or change them and view the results to find the 'perfect' design - be creative and have fun :)
- BTW: Here are: Browser Colors by name and Color Schemes that work.
Header
