Internal Server Error
what the voices in my head tell me to write
Tuesday, November 29, 2005
Work has been a bit of a drag lately and we have been busy at home. Soon to be a bigger home as well ;)
But I thought I would share this little nugget of CSS that I dreamed up while converting some really bad old table layouts.
The layout was something really bad from about 1999. A coloured top logo and menu area streching the width of the window. The usual left hand menu all nicely coloured in and a block of colour across the bottom. A final little touch was a small "curved corner" at the top of the main content. As it was done with a table whenever the content ended the color stopped on the left hand side and the bottom.
Up until now I would have put in the stripe on the left with a background image and done the top with a background for the top and bottom. Of course with this old table layout I couldnt do that as the strip would have carried on past the footer.
So... I scratched my head and then the solution came to me. Just use the
borderof the <div> containing the main content... set it to the right values for the top bottom and left and 0 on the right. Use a little messing around with min-height and height to make sure its always longer than the menu on the left. I even put the little corner as a background image on the same div and its automagically lined up. Absolutely position the top and side content and make sure you set its
z-indexso you can see it. All done :)
Permanent link and Comments posted by Rob Cornelius @ Tuesday, November 29, 2005