'ello!

Who said Drupal is overkill for small, personal websites? I am loving it for every minute I use it! I've just launched it yesterday and there's still content to be migrated from old static html, and new to come, but you can get the idea.

http://www.cellarofrats.com

By the way, the Drupal icon at the bottom left is a variant of the one in Banners section of drupal.org. I'd like to upload it here for all to use (for a black background), but I don't know how...

Also, if someone could drop me a note about fixing some layouts for IE. As you will see, I use two fixed divs (top and bottom black bars) which is a no-no for IE. That I solved (at the expense of some other elements), but I don't know how to fix the broken divs on the Production page.

Anyways, I was making the layout for Firefox (for 1024x768), xhtml and css valid.

Comments

Steven’s picture

You could always use the IE7 hack to make your website compatible... though the performance is not that good. Your site will appear broken at first, then fix itself once loading has completed.
http://dean.edwards.name/IE7/

Nice design, looks fine on Firefox. The only nitpick I have is that the text in the black sections seem to be too dark to read properly.

--
If you have a problem, please search before posting a question.

CoR-1’s picture

Thanks for the IE7 link. I've checked it out and I think I can muster a few hacks for those broken divs. :)

Nitpicked text color corrected. ;)

Again, thanks!

zirafa’s picture

really nice design! how did you get the 4 borders in the blocks on the right?
well done. i'm a big fan of keeping things simple and clear.

CoR-1’s picture

Well, it is not a clean solution, but considering I have only a few blocks with exact layout (fixed, pixel-width), I did a little dirty trick.

For upper borders, I used this on .sidebar h2:

  background-image: url('img/bord_up.gif');
  background-position: top;
  background-repeat: no-repeat;

For bottom borders, I used this on .sidebar .block:

  background-image: url('img/bord_dn.gif');
  background-position: bottom;
  background-repeat: no-repeat;