Get APLawrence.com by RSSYUI Grid Builder for custom sites
2009/01/10OK, I know: most bloggers want nothing to do with writing HTML. Most would rather use something simple like Wordpress and concentrate on their blogging. That's fine, but..
Earlier today I visited a blog where the owner mentioned that he'd like to put something in a sidebar but it wouldn't fit and he had no idea how to fix it. Of course he could hire a Wordpress expert to help him with that if he really wanted it badly enough.
But honestly, writing your own pages isn't that hard. It probably isn't all that hard to tweak Wordpress either but for those of you us who like holding the reins, writing HTMl from scratch is a crucial skill. We can control every aspect of our site and never have to say "I'd like to, but.."
What is a little hard is CSS columns. The basics are easy enough, but when you get into wanting to do more tricky things, understanding absolute vs. relative positioning can give you a headache.
Enter Yahoo Grids and their wonderful Grid Builder Tool.
I've used The Yahoo! User Interface Library (YUI) for a while now. Recently I wanted to add a right hand column to my pages. I did it first by just adding a "div" with a "float:right" tag, which is easy and will work, but that requires you to output the html for the right hand column before putting out the main text. That means that browsers like Lynx see all that junk before your actual text. Broken browsers will have similar problems, and slow loading connections will have to wait for the sidebar to load before seeing your text. If you have Javascript in the sidebar that needs to access another site, it may hang or be delayed, further delaying your text from appearing. For all these reasons, you really want your text to come before your sidebars.
The Grid Builder makes this easy. To create this layout, I chose a body size of 974px, a left sidebar of 160px and then set the Row selector to "2 column (75/25)":
The resulting code is easy to understand:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>YUI Base Page</title> <link rel="stylesheet" href="http://yui.yahooapis.com/2.5.1/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css"> </head> <body> <div id="doc4" class="yui-t1"> <div id="hd"><h1>YUI: CSS Grid Builder</h1></div> <div id="bd"> <div id="yui-main"> <div class="yui-b"><div class="yui-ge"> <div class="yui-u first"> <!-- YOUR DATA GOES HERE --> </div> <div class="yui-u"> <!-- YOUR DATA GOES HERE --> </div> </div> </div> </div> <div class="yui-b"><!-- YOUR NAVIGATION GOES HERE --></div> </div> <div id="ft">Footer is here.</div> </div> </body> </html>
I modified that slightly for my needs here, but that's the basic template. You just stick your stuff into the appropriate places and you have a nice three column layout where the text loads before the sidebars.
Have you tried Searching this site?
Unix/Linux/Mac OS X support by phone, email or on-site: Support Rates
This is a Unix/Linux resource website. It contains technical articles about Unix, Linux and general computing related subjects, opinion, news, help files, how-to's, tutorials and more. We appreciate comments and article submissions.
Many of the products and books I review are things I purchased for my own use. Some were given to me specifically for the purpose of reviewing them. I resell or can earn commissions from the sale of some of these items. Links within these pages may be affiliate links that pay me for referring you to them. That's mostly insignificant amounts of money; whenever it is not I have made my relationship plain. I also may own stock in companies mentioned here. If you have any question, please do feel free to contact me.
Specific links that take you to pages that allow you to purchase the item I reviewed are very likely to pay me a commission. Many of the books I review were given to me by the publishers specifically for the purpose of writing a review. These gifts and referral fees do not affect my opinions; I often give bad reviews anyway.
We use Google third-party advertising companies to serve ads when you visit our website. These companies may use information (not including your name, address, email address, or telephone number) about your visits to this and other websites in order to provide advertisements about goods and services of interest to you. If you would like more information about this practice and to know your choices about not having this information used by these companies, click here.
I sell and support
Kerio Mail server
Click here to add your comments
Sat Jan 10 22:18:47 2009: Subject: TonyLawrence
By the way, that right sidebar is "broken" in older IE browsers. It's fine in IE8, but not before that.
I don't care.
I'm sick of adding bloat to my pages because Microsoft programmers couldn't create an unbroken browser. I'm just not doing it any more: if you are visiting here with an old IE version and it messes up for you, I DO NOT CARE. Use a better browser: Opera, Safari, Firefox.. there are plenty to choose from. Or upgrade to IE8 if you must use Microsoft.
Or put up with it. Or go somewhere else. I just do not care any more.
Wed Feb 18 22:16:50 2009: Subject: anonymous
Why is your right sidebar broken pre IE8? The YUI Grid should work in IE7 and IE6. There is one little tweak that needs ot be more documented, and I think that may be why your sidebar isn't working. To deal with an odd rounding issue in IE7 and IE6, you need to as a 1px border to the left and right of "bd".
Could that have been why IE <8 was breaking?
Thu Feb 19 12:36:43 2009: Subject: TonyLawrence
Could be - I appreciate the tip and will try it as soon as I get over this stupid flu I've had for two days.
Thu Feb 19 12:45:55 2009: Subject: TonyLawrence
BTW, do you mean that "bd" needs a 1px border or that and enclosing div needs that?
If "bd" itself needs it, you'd think they would have fixed that by now?
Thu Feb 19 12:56:11 2009: Subject: TonyLawrence
I see: http://www.nabble.com/Bug-in-YUI-Grid-Builder-code--td18421779.html
I've added a 1px border - going to test now..
Don't miss responses! Subscribe to Comments by RSS or by Email
Click here to add your comments
If you want a picture to show with your comment, go get a Gravatar
Take Control of Fonts in Leopard