One Column Fixed Width Layout Only div Used for Layout Horizontal Navigation Menu • Inline & Background Graphics

One Column Fixed Width Layout Only div Used for Layout Horizontal Navigation Menu • Inline & Background Graphics

 

This is a basic example of a one column fixed width HTML layout with page navigation.

Only the div element is used for layout. This means the newer HTML5 semantic versions of the div tag such as section, article, nav, header, footer are not used. This approach makes the layout natively supported in Internet Explorer versions 6, 7 and 8.

This is a good starting point for students learning CSS who are very new to web technology. Two pages, the Home and the About pages, are completed.

Two pages, the Home and the About pages, are completed.

Sample Console Output

Source Code

This is the home.html file. It the top page for the web site. The top page would be named index.html when the file does not contain server side scripting code.

This is the about.html file. With static pages that a lot of HTML needs to be replicated on each page. The page navigation is one example. And even with the page navigation, you have small differences. For example if you want to make the loaded page navigation button to become inactive.

This is the site.css style sheet. Making the style sheet external to the documents, the documents can share the style selectors. Changing a property or style then impacts all the pages.

 

Get Skills to Work on Websites in 30 Days

Start today with easy to learn courses that quicky build your website skills!

Assets

user_female_100x100.png

user_female_100x100.png

Used in the home.html file.

Download
user_male_100x95.png

user_male_100x95.png

Used in the about.html file.

Download


header_background_gray_800x213.jpg

header_background_gray_800x213.jpg

Used in the site.css file.

Download