Basic xhtml/css models ?

Question

Hi,

I need to produce a very simple website (no dynamic-content, 2-columns, header&footer) and I have a basic knowledge of xhtml/css/php.

So I could probably come with something from scratch, but it would probably won't work in "all" browsers.

I've done some googling, but it's difficult for me to evaluate the quality of the "free templates" advertized all over the place.

So is there any web developer here that has good references or even such models/templates ?

edit : I did take a look at Joomla, but it was really overkill, so if your answer is a CMS, it should be one very different from Joomla.

Answer 1

You should probably invest in a CMS, perhaps something like wordpress. Over time you'll find that it's easier to maintain than a straight static site.

There's also the benefit of a large theme library that's plug and play.

http://wordpress.org/extend/themes/

Answer 2

Short Answer:

Take a look at the Faux Columns trick, and then you can generalize that to three columns too.

Long Answer

If you're really into the idea of learning to do this yourself, make sure you know the difference between inline elements and block level elements. Once you know the difference, and can identify some inline HTML elements and block level HTML elements off the top of your head, check out the display CSS property, and ensure you never do anything like this:

<!-- monumental fail -->
<a href="#">
    <div style="height:200px;width:200px;">
        They wanted the anchor to have height/width
        And didn't realize that a `display:block` CSS property
        would allow the anchor element a height/width
    </div>
</a>

I'd also suggest developing a solid backwards-and-forwards understanding of the CSS properties float and clear, as well as the relationship between float and margin and overflow-y. Take this example and start changing the values of those three properties and see what happens:

<div style="background:yellow;overflow-y:hidden;">
    <div style="width:100px;float:left;">
        Left Column
    </div>
    <div style="height:500px;margin-left:101px;background:blue;">
        Main Column
    </div>
</div>

... once you understand that take a look at the Faux Columns trick, and then you can generalize that to three columns too.

If you then take it all a step further and start playing with CSS positioning...

<div style="border:2px solid black;margin:50px;border:2 px solid yellow;height:1500px;width:500px;">
    <div style="height:50px;border:2px solid red;position:absolute;top:0px;">
        Absolute; Top (take note that its parent element is statically positioned...)
    </div>
    <div style="border:2px solid blue;position:relative;left:100px;height:200px;padding-top:50px;">
        Relative; see how it's just offset from where it is normally?
        <div style="height:50px;border:2px solid red;position:absolute;top:0px;">
            Absolute; Top (take note that its parent element is NOT statically positioned hence why it's not in the same place as the last absolutely positioned div)
        </div>
    </div>
    <div style="height:50px;border:2px solid green;position:fixed;bottom:0px;">
        Fixed; bottom (even there when you scroll)
    </div>
</div>

... then I think you can step up from "basic knowledge of CSS" to "proficient."

Answer 3

As a starting point for a static non CMS Website I'd recommend to look into one of several CSS Frameworks available. You can find a list here. They usually address cross browser compatibility and multicolumn layouts. Most of them come with useful templates which you can easily customize and you do not have to build up a page from scratch. My favorite is YAML (Yet Another Multicolumn Layout) CSS.