Glen Pitt-Pladdy :: BlogThe perils of CSS | |||
In the process of building this blog, I keep hitting my head against CSS. It is a while since I did any programming, and particularly web programming, and it isn't as enjoyable as it once was. Trying to be smartI decided to be really smart do a table-less layout with xhtml and css for the blog engine. Effectively this means that everything sits in <div> tags and the CSS tells the browser where to put what. Sounds good - no messing with trying to get all the bits to line up in tables etc. Trouble is that it didn't work as easily as I expected. The curse of marginsThe first problem that I hit was that the various blocks didn't fit together and all had gaps at the top. After hours of messing with Firebug and DOM Inspector, I finally realised that objects have a margin at the top which overlaps with the top of a <div> box, and prevents the box from fitting snugly with the box above. After that eureka moment, I re-defined the CSS for the problem elements, and everything looked fine again. Shrinking boxesThen I moved on to the blog index / archive pages...... That should have been simple enough, but once again things just didn't fit together. The shorter column simply didn't have background for the full height for the section. After a bit of research it seems to be a common problem. Fancy that! Solutions There are all sorts of ugly methods, but it turns out that apart from going back to a table based layout (I was very tempted), a neat trick is to leave the <div>'s be, but make them transparent. This takes care of setting the container size nicely. Then, to get a background, put an position:absolute <div> underneath the column. A neat blog about this is Ed Elliot's. BottomlessUsing Ed's tricks plus a bit of messing with padding, I now have neat looking columns, but on pages where the content is short the footer is no longer stuck to the bottom of the page. Not done any reasearch yet - too busy with the contact code. Anyone have any suggestions? Why?It seems to me that having a set of equal height columns in a page is completely fundamental in designing pages. Why are we in this situation where we can't do the basics without resorting to all manner of acrobatics. While searching for solutions, I came across loads of pages which where precisely about this problem. I certainly hope that CSS3 has an off-the-shelf mechanism for doing this. |
|||
Disclaimer: This is a load of random thoughts, ideas and other nonsense and is not intended to be taken seriously. I have no idea what I am doing with most of this so if you are stupid and naive enough to believe any of it, it is your own fault and you can live with the consequences. More importantly this blog may contain substances such as humor which have not yet been approved for human (or machine) consumption and could seriously damage your health if taken seriously. If you still feel the need to litigate (or whatever other legal nonsense people have dreamed up now), then please address all complaints and other stupidity to yourself as you clearly "don't get it".
Copyright Glen Pitt-Pladdy 2008-2023
|
Comments: