Column Designs With CSS.
So CSS makes layouts easier than they were with tables – there's not really much debate about that. One of the reasons many people stuck with tables for so long (and, in fact, still stick with tables to this day) is that it can be difficult to create column-based designs using CSS. Since there are so many websites that essentially consist of a middle column of content surrounded by left and right columns containing navigation and ads, this was considered to be unacceptable.
The Power of Float.
Really, though, CSS columns aren't that difficult to produce once you understand how CSS float rules work. Float allows you to say that some parts of your content should 'float' next to other parts, instead of being displayed one after the next (that is, underneath each other).
Despite all the fear of column layouts in CSS, it's quite simple. Basically, the first thing to do is to divide your content from your navigation using the div tag, like this:
Note that the divs must be in this order – left, right, centre – because otherwise one column might end up underneath another in a way you don't expect. Ordering things logically as left, centre, then right, for example, will cause your right column to end up under the centre one.
Anyway, the next step is to write the CSS for those IDs you just set up. Are you ready for the CSS that's made old-style HTML developers run in fear for about five years now? It looks like this:
#left-nav { float: left; width: 20%; }
#right-nav { float: right; width: 20%; }
Obviously you can adjust the widths depending on how wide you want your left and right columns to be (you can choose whether to set the widths as percentages or in pixels). And that's it! You've set up a successful three-column layout.
Then, though, the problems come – they might seem small, but they're big enough to drive anyone who works on CSS column layouts nuts. Luckily, however, they can be solved with a little lateral thinking.
The Background Problem.
If you want your left and right columns to be have a different background colour to the centre one, you're in for a problem. In most browsers, your columns are only considered to extend downwards as far as the text in them does, which means that the bottoms of your columns won't line up.
What's the way around this? The best answer is to make your columns fixed-width (meaning that you specify their width in pixels, eg. 'width: 100px;'). Once you've done that, you can create one-pixel-high image that includes the colours you want for the columns, and make it the background image, tiling it using 'background: repeat;'.
The only problem left to solve at this point is that fixed-width columns can look strange if you leave them spaced as they are. The solution is to specify a fixed width for your document's body, and then set the left and right margins to 'auto' – this will centre the page on the screen.
The Header and Footer Problem.
Another problem? Well, yes. If you want to display a header or footer separately from the page's columns, CSS can give you a little trouble – sure, you can add them to the middle column, but that would require you to add extra space to the navigation columns at the top, and make sure they didn't reach down further than the main content text at the bottom. It quickly becomes painful to work with.
The solution to this lies in a little-known CSS rule called 'clear'. The clear rule means that you don't want anything to be floating around the tag you apply it to. It has three possible settings: left, right and both.
In this case, you want to add your header and footer before and after the other divs, like this:
Then you want to add this CSS to what you've got already:
header, footer { clear: both; }
That tells the browser that you don't want anything floating on either the left or the right of your header or footer: you want them clear of everything. You might also like to add text-align: center, so they appear in the middle of the page. And that's it! What was all the fuss about, eh?
Web Design
Registering Your Users By Stealth.
Printing And Sending: The Two Things Users Want To Do.
The 5 Principles Of Effective Navigation.
Web Design
... the fact if you made a sitemap for the sake of having one. By highlighting the importance of having a well constructed sitemap, you will be able to tailor your own sitemap to suit your own needs. 1) Navigation purposes A sitemap literally acts as a map of your site. If your visitors browses your site ...
Photoshop: A Graphic Designer's Dream.
... even in the established media: Photoshop can produce output so real-looking that even experts have trouble spotting it. Photoshop's Big Drawback. There's not much argument, though, that Photoshop is extremely expensive: it costs well over $500. Worse, your $500 gets you a restrictive license that only ...
What Do You Want Your Website To Do?
... there to get you work. These kinds of websites can be effective, although you should realise that you're more likely to get some work because of a site that people find useful than because of one that's just about you. The Brochure Website. They're often-mocked in web design, but they're not really that ...
Uploading Your Website With FTP.
... easily between computers, intended to allow computers with different operating systems to exchange files without users needing to worry about the different file systems they use. Compared to HTTP, transfers over FTP are very reliable, meaning that your upload will not just fail without telling you, and ...
Opening A Web Shop With E-Commerce Software.
... difference? In my experience, very little. If you want to make a good profit from your website, then, you should really be looking at the free e-commerce solutions, or alternatively writing your own. It's madness to pay thousands for e-commerce software when you can get software custom-built for your ...