Tag Archives: css

css, web design

The Holy Grail – 3 column, fluid, content first template with header and footer

Ok, maybe not the Holy Grail – Indiana Jones was not involved.  But still a neat template.  It’s a simple, fluid design.  In the source, which is what the search engines see, the order goes content, left navigation, right, header, and then footer.  So they get a good feel of your site as well as the links to go through it – if you use the left area for internal navigation.  It re-sizes up to 2 text increases with no failure in both IE and Mozilla – I have to start testing in Opera soon – and will fill the browser window in each – slight glitch in IE where sometimes right will drop down the pop back up for a second, I blame Microsoft.

Left and right will cover 20% of the available space and – for those of you bad at math – content the other 60%.  The header is 100px tall – I may update this to 10em to make more fluid later on – and the wrapper holding the 3 main divs has a 100px padding.  Changing both will expand the header and push the content down.  I also found a neat trick to position things at the bottom of the window.  I may also move the footer down to whichever is further down – the bottom of the browser window or the bottom of the content.  That may be tricky though and I wanted to get this out for now.  I should have a 2 column one out soon – if you wanted to convert this one simply delete the left or right, add the 20% to either or both of the ones left and change the margin-left if need be.

I also have not had time to add graphics to anything.  Between work – I work on a major companies family of job boards – and some recent job opportunities that have sprung up, I have been straight out.  I’m hoping to rectify this soon.

Random Tidbit: Two interesting space happenings.  One is Voyager 1 is about to leave the solar system.  Pretty impressive that something that old is still going strong.  Also, after almost kicking Pluto out of the ‘family’ the tide has changed and they’re thinking of adding 3 new planets to the solar system – nothing as cool as Uranus though.  I’m almost willing to bet 10 bucks Google will buy one of them.  They buy everything else that’s new (2.0) – not that that’s a bad thing.

css, web design

Royalty Free Photos and Palette Generator

So lately I’ve been searching for a little inspiration and I’ve found two tools that when used together are very interesting.  One is Free Stock Photography.  They have tons of high resolution, royalty free images that are interesting as potential backgrounds.  Even just cutting a small portion of some of the landscapes and using them to create a pattern might be interesting.

The problem is when you find an image, figuring out what color scheme to use to best fit the images you have or get from the site.  Well, I found a nice Color Palette Generator that takes in a 600px or less image and gives you a matching palette.  Pretty neat.  I’m hoping to use this to generate some template sites very soon.

That’s all for now.  Been pretty busy at work and updating my site when I get home.  Hopefully I’ll have something to show soon.

Random Tidbit: If you haven’t checked out del.icio.us yet, do it.   Basically, it’s a social bookmarking site.  Meaning you can bookmark neat sites you find and share them with your network of friends.  In addition, it allows you to organize them with tags.  If you’re like me, and most designers, you have a large number of local bookmarks – at work, on your various computers – and no real cohesion.  This allows you to import them from your browser and save them all on there.  So you can have access to your entire bookmark collection and organize them very simply so that you can easily find what you are looking for.  I keep a great deal of mine private, but I’m going to start changing that as I go through mine in the next few weeks.  Feel free to check out my public ones – and send me a network invite if you want.  At the very least, use it.  It’ll save you a lot of time and it’s a cool site to boot.

css, web design

Designer’s Block

So I mentioned the other day that I’m trying to design a horizontal main style sheet for my site.  I got the idea from the CSS Zen Garden and specifically the pret-a-porter design.  I’ve seen several other ones like that but that one is the most interesting.  It’s not the type of design you usually see online, it’s more of a print based design – and in fact that’s where he got the idea for his from.  But widescreen monitors have taken off on laptops (which is what I usually program on, especially since my desktop problems) so I thought it was viable.  Plus, since you’re using absolute positioning it’s challenging and different them my other designs.

The problem is that I also wanted to use some drop shadowed graphics to try and create depth – a good example being Zunflower.  I think the combination of the two elements would be a striking addition to my portfolio.

The problem?  My seeming inability to get Photoshop to do what I want it to do.  Everytime I tried to create the graphics the other day it was fine until I tried to save for the web and use it on my template.  Then everything broke down – specifically the drop shadow went ‘wonky’ (a highly technical term, look it up).  After several tries I finally gave up.  In talking with a graphic designer friend he suggested I try adding the background to the graphic, but I’m still not sure how that would help.

So now, stuck on this, I’ve spent the last few days ineffectively trying to get back to the design.  I have managed to do a few other odds and ends around the site, but most of those haven’t made it off my local platform and onto the web.  I’ve hit a virtual wall.

I’m hoping the freedom of the weekend will help and get some creative juices flowing, motivating me to get some work done.  I would like to get that finalize so I can get some templates cranked out.  I would like to offer them on some open source sites soon – I’d love to see others use my work.  But only time will tell.

Random Tidbit: It was awesome seeing Big Papi crank a ‘homah’ on the Indians to win it the other night.  I knew the minute he came up the game was over.  In Beantown we spell clutch B-i-g-P-a-p-i.  Hopefully this season will finally convince people that regardless of him not playing the field he should be the MVP (as he should have been last year).  Winning games – with your glove or bat – is winning games.  Period.  It was also good to see Tom Brady stand up for his teammate Deion Branch.  I have faith in Belichick, but come on, he’s a top 5 receiver and he’s making something like $1.5M this year.  We ask so much of them, we gotta give a little back.