… and here we go. This is mostly stock code for me in terms of the CSS as all I really had to do was switch out the font faces and play around with the paddings a bit.
http://www.cutcodedown.com/for_others/rockarena/template.html
As with all my examples the directory:
http://www.cutcodedown.com/for_others/rockarena
Is unlocked for easy access to the bits and pieces. Valid XHTML 1.0 Strict, Valid CSS 2.1, tested working 100% in IE 5.5, 6, 7 & 8, Opera 9.6 and 10.53, FF 2 and 3.6, and the latest flavors each of Safari and Chrome - including a mix of handheld font (72dpi), ‘standard/small’ 96 dpi and of course the 120dpi/large fonts I run native. I’m very thorough on TESTING - the browsers are free, you can run them on anything if you have a spare copy of XP lying around to install on Sun VirtualBox (also free). If you’re thinking web development SERIOUS, you’ll want to be doing that too. (and IEtester is too buggy for my tastes).
First follow along in the markup:
Strict doctype - you’ll notice I break it into two lines. I usually try to follow an old OLD [b]OLD[/]b programming convention called the 76 character rule - if a line is going to be more than 76 characters in your code, manually break it up for clarity. You’ll notice I do that on CODE but not on CDATA (like in the paragraphs).
You’ll also notice I break up most every tag that has multiple properties into multiple indented lines. This is just for clarity so at a glance I can see what attributes are declared instead of trying to scan through one long continuous line that may or may not wrap. I’m not saying you should or have to format this way, it’s just a gentle suggestion for keeping it clean and clear.
In the HTML tag I declare the language encoding. I ALWAYS start out with this baseline in the markup since the final version should have all this stuff anyways. Same goes for the Content-Language meta. It seems silly to have to specify the language so many times, but between the WCAG and the XHTML spec - they say to do all of them… I do it.
The CSS LINK you’ll see I have called the CSS file ‘screen.css’ and added the MEDIA attribute to it. It’s a good idea when you have complex layouts to NOT send the screen formatting to the printer… Mind you many (but not all) browsers override the ALL stylesheet anyways and ignore print.css, but for those who have it; use it. I left in the examples for including print and handheld but commented them out. Employ at your liesure. Usually my print.CSS declares all the font sizes in pt, sets my page wrapper to 7.5"/90pt wide (half inch off a standard 8.5"), hide things the user doesn’t need printed like the menu, and show a plain text or inverse monochrome line-art of the header. How you want to handle it is your call, I just always have this in my default starting template.
Moving down you’ll notice I stuff </head><body> and </body></html> together on single lines. This is because no content should ever go in-between these in the first place, so I like to remind myself and others of that. (especially given how often I’ve seen people mangle code I gave them by doing so!)
I renamed “wrapper” to “pageWrapper” since it’s wrapping the whole page. I often have a whole bunch of different wrappers like contentWrapper on fluid/semifluid layouts, or borderFirstWrapper / borderSecondWrapper on my image based borders… Verbosity is NEVER a bad thing in coding.
You’ll see in the H1 I put the “De Kelle” part in a SMALL tag. This is a presentational hook so that images off we can try to position and color the text to at least RESEMBLE the logo image. Have a look at the page using the web developer toolbar for FF or in Opera with view > images > no images, and see what I mean.
The empty span is there for our image to go into which will hide said text images on.
On the menu I call it mainMenu - I like full meaningful descriptions and to me the ‘nav’ most people use is just a little vague, as is the word ‘navigation’ - EVERY link on a page is navigation.
I added a .current class to the first LI, you’ll want to move that depending on what page you are on. You can either do the ‘nested class’ approach to that - which I dislike because it’s so much CSS, or the way I do it with the class using server side scripting like PHP or ASP.
The nested spans are there to draw the right side of our rounded tab corners.
I named the wrapping div #fauxColumns since you cannot rely on borders between floats to draw the full height. That thin line I end up using an image to pull off… It’s not pretty, but it works. We’ll also be using it to float-wrap so when/if you add a footer it will actually appear AFTER the columns.
Since you went content first and fixed width, I didn’t get too complex on the column code and pretty much kept what you had, simply renaming them to something a bit more meaningful. I usually avoid saying ‘left’ and ‘right’ in my code becuase in some future reskin or if I end up deploying in a RTL language those could end up switched. Right and Left are appearance, and appearance doesn’t belong in the markup - even as classnames.
From there it’s just closing out all the div.
I’m gonna break now, don’t remember how big sitepoint’s post limit is - I’ll write up the CSS explanation next which is where the real magic happens.
could have something to do with your issues. Kinda ties one hand behind your back on development doesn’t it? (well, I suppose with VM’s not so much anymore since you can at least run XP in a Window)
