100% Height Divs

It is rare that I need to have a div fill the whole height of the window, but in my SN Project Website I thought that this would look rather nice, the problem is that if you just put "height: 100%; " in the css it does not work. This is because all parent divs must also have 100% height set, which makes sense after you finally are told this fact. So in order for you to have a 100% height div, you must first set the html and body to 100% then all other parent divs as well. See example below...

html, body
{
   height: 100%;
}

div.content...
{
   height: 100%;
   min-height: 600px; /* I like 600 you can use any number */

}

UPDATE: You should also set a min height for your content divs, this will allow the page to stop only being 100% height and get smaller and scroll when the page size is reduced below that number.

Also, it makes the process a lot simpler to only use cascading inclosing divs, avoid any buggy fancy positioning, because this may break things. I am happy with the results, and to my supprise it worked with no issues in Saffari, Camino/FFox and IE 7.

Rounded Corners

A big trend with web design right now is rounded corners on most rectangles. This is understandable, because when I am doing woodwork I smooth the edges, it just gives it a much more finished look, compared to rough or pointy edges. Not to mention in an artistic sense it both keeps the users eye path from moving around as much and helps the page as a whole blend. Corners tend to point in a direction or cause a UI element to stand out. Of course this is all contingent on how the page is designed.

Still I have done rounded corners for other sites with a brute force method, with separate positioning for both Firefox/Safari & IE7 because they rarely are the same. It looked good, but was annoying to implement, and that was only two corners, four would be much worse. Luckily there are now some options that make the job much easier. However there seems to be a big debate on what is the better method to use. One is raw css positioning like I had done, more work, but the benefit is low load times, just what the corner images need. The other way is with javascript I found Nifty Cube, a very simple and easy to use javascript engine that does all the work for you. The problem is that it loads after the page, and takes a small chuck of the users processing to run. This was not that big a lose so I was happy with the results.

Check it out if you need round corners, still not perfect, in the fact that it only does solid colors, however the only issue I have had is that it draws the corners across the top and bottom, so you need to pad divs by about 10px for it to work out.

CSS Layouts

Now that I have started my internship/summer job redoing the Prescott Brokerage Website I have remembered just how much a pain it is to start a new CSS layout from scratch, not that it is not fun to get the elements positioned properly, but but when you are working, it is not professionally to spend several hours getting a basic template built when there are plenty of resources online. Luckily there are sites like Free-CSS that have a huge number of free CSS layouts that make the job so much easier.

Now when I am taking about CSS layouts I am not taking about the already finished ones, those are finished CSS templates, I am talking about the blank ones that simply have the placement all set to go. You should be able to do your own designs! You guys know who I am referring to... ^_^

How to use a post photo in css

This a test to see how can get an image uploaded and use it in the css for the blog.

I want to see what is a good way to get images on the blogger server and then use them for my site layout.

Update: Although I could not find a good way to upload photos for use in the website layout, I figured that because Blogger lets you upload photos in posts, you could then use the address to that picture in anything hosted from the same server.

Well it worked, the photo in this post is now also used in the main css, and looks quite good. This is a goofy way of doing it, so I will be avoiding this method if possible, but for now it works. There must be a better way, I probably just overlooked it.