Woah, this site is loaded with colorful information. From a designer’s point of view I would suggest to remove the text in the background (that reads “John D. Ryan Squadron” and “UTSA”) so it won’t be too overwhelming and drawing the attention away from the actual content.
Now to the actual question. The first thing you need to ask yourself is: What will my site be about and how should I structure the information I provide. By “structure the information” I mean how it should be laid out in the plain HTML at first. Don’t think about how your site will/should look like in the end yet!
If you’ve sorted the HTML properly you will have no problems styling this content then (with CSS) to look like you intended - or totally different (without changing the HTML).
The important keyword is semantics
. Use div
isions to divide your page logically into different sections: header, content, footer. Those thee sections are all enclosed in one container div. Then in the header goes the page/company/organization name or title (as <h1> element) and the navigation. The content section gets the content which will again be divided into different sections. Basically you have a three column layout so that makes three main sections in the content. And those
sections are again divided into different sub sections (if necessary), and so on, and so forth… You see where I’m going?
The footer gets the copyright info or the navigation again (at least a “to top” link).
Only after you’ve sorted that out you can start styling the content - and only those elements you’ve got there (no additional empty elements to add a background image or whatever) - with CSS (putting the images that serve a purely stylistic purpose as background images into your HTML elements). Your layout is quite advanced, though, and for a CSS beginner it might not be the easiest way to go.
Look at the CSS Zen Garden
to see how the pros are doing it and making on and the same HTML page look totally different. And also check out Bon Rouge’s website
for a three column CSS layout.