Sunday 23rd of January 2005

The almighty sidebar

I started playing around with the sidebar again, I think I’m happy with it now. For the rounded corners I made two gifs with transparency (pngs with alpha channel would have been worlds better, but there is some stupid browser out there that doesn’t support them without a hack), the white color is actually there, while the inside of the gif is the one that is transparent. Generally you do it the other way around, but since I don’t intend to change the background: #fff; of the content div and the sidebar might get new colors and even new boxes, this is much better -I can swap, change or add colors to the sidebar, and still use the same two images for the rounded corners.

I had to use the h3 element to set the top left corner since CSS2 won’t let me set more than one background image per div. While I was poking at it, I also gave the h3 area a different color background and a bottom white border resulting in the titles of each box being separated from their content. The div of the second box (archives) uses the following code for example: background: #b6d638 url(images/box_top.gif) no-repeat top left; while the h3 element states border-bottom: 1px solid #fff; for the white border.

For the bottom left corner I just gave a background image and color to each div like you normally would, resulting in: background: #c0dd5b url(images/box_bottom.gif) no-repeat bottom left; for the same second box (archives).

I embraced the opportunity to play around with the flickr images too, I took out a redundant div and used the same trick flickr itself is using on ther site with the white background, grey border and margin/padding to center the image inside of it. I might play around with their API later, but next thing on the line is the banner.

5 Comments to “The almighty sidebar”

Leave a comment

Line and paragraph breaks are automatic, e-mail addresses are never published, XHTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>

Name (required)

E-mail (required)

Website