Webdesign, chapter eight: CSS media query (fixing chapter 6 !)

I just wanted to post a quick entry about the chapter 6 that I kinda screwed up.
In the mean time I have remade the layout that I had wanted to use for my website using float instead of fixed position. I do think that it should work using fixed position, but it apparently does not.
Mainly we just have 2 lines that give us the 2 column layout that we would like to have:
div.sidebar-left-outter {float: left; width: 15%; height: 100%; }
div.main-outter {float: right; width: 85%; height: 100%; }

And then in the media query CSS file we have the following block of code:
@media screen and (max-width: 799px) {
div.main-outter, div.sidebar-left-outter {float: none; width: auto; height: auto; margin: 0 auto;}
}

So mainly we're just clearing the float to make text not float around our 2 columns (which it never does, which is why I think it's a misapplication of the float property, but many people recommend doing it this way), then we set the width to auto, which tells the browser to use all the available space. Obviously we can't have 100% height on both elements that both use 100% width, since then we could only see one of them, and we set the margins to 0.

Webdesign, chapter seven: CSS media query part 2

Ever since i wrote the last blog entry I've been wondering how we can have a layout for internet explorer (who to this day doesn't get media queries) than for the browsers who understand media queries.
Now we have made a beautiful layout that changes from a standard 2 column layout to a 1 column layout depending on how wide the browser window is, and there's no way to tell internet explorer what to do without the risk of screwing it all up.... well obviously there is. Actually there are a few ways, but i didn't really like any of them, so eventually I came up with my own.
So for that we just take advantage of the fact that IE doesn't get the media queries.
We just include the basic CSS file first like so:
<link rel=stylesheet href="include/body.css" type="text/css">
<link rel=stylesheet href="include/print.css" type="text/css" media="print">
and then ! below the basic CSS file (so that it's closer to the content, and therefore overwrites the basic CSS if neeeded:
<script>
@import url('include/queries.css') screen and (min-width: 1px);
</script>

Now we have a basic style for our website in case the browser doesn't get media queries yet, and we can have a nice layout for everyone who uses a decent browser (whole thing visible on my homepage).

Webdesign, chapter six: CSS media query

I think I have a new pet peeve. There are way too many designers who put specific dimensions on their websites/blogs/etc. Even the default blogger theme has a set width in pixels. Most designs on the CSS Zen Garden have a width in pixels. Now obviously they want their stuff to look good, and I have to respect that. However, I don't really think it looks good when viewed on a monitor that isn't the specific single one that they used to make the design. You can't even make your design for the "most popular" monitor in use today since there are so many different sizes and even aspect ratios that it just doesn't make sense. Yet still, A LOT, of websites use dimensions in pixels rather than percentages.
Now that I'm done with my rant.... We can't really just make our content width and sidebar width use percentages instead of pixels and be happy with it. In the best case we will have a few users that will see a scrollbar on the navigation while not having very much room to see the content, in the worst case our site isn't usable at all for some people. Also when someone wants to print out our page because of the excellent content we have, they're probably not interested in seeing what links you have on the left there.
With that I give you CSS media types (not usable in Internet Explorer until version 9 comes out).
You can define CSS media types in 3 different ways (seems like anything in CSS has 3 different ways of doing it):
When loading a separate CSS file as we have been doing it:
<link rel="stylesheet" href="style.css" type="text/css" media="screen">,
The @media rule:
@media screen { p {color: blue;}}
The @import rule:
@import url("style.css") screen;

Now obviously we're making a new style sheet for the print media type with dark text on white background, in case we're not already having that as our standard style sheet.
But, and even more importantly, now we can use CSS 3 media queries to see how wide the user's screen is, and, if necessary, put the navigation below the content:
In our print style sheet we change the three lines below:
div.sidebar-left {display: none;}
body {color: #000; background-color: #fff; font-size: 100%}
h1 {text-align: center; margin: 0;}

we also took out the div.main code since we only have the 2 columns and if we don't give it any style information it will just inherit the styles from the body which is what we want right now. (note I actually changed the sidebar class to sidebar-left !)

Now we just have to change the style sheet for the screen a bit by putting in a few media queries:
For now I just appended the following to my style sheet:
@media screen and (max-width: 600px) {
div.main {position: fixed; top: 0%; left: 0%; width: 100%; height: auto;}
div.sidebar-left {position: static; width: 100%;}
}

The whole thing is visible here. It's quite interesting to see what happens when you resize the window (changing width to less than 600 pixels).

Now as i said before, the Internet Explorer can not handle media queries and neither can older browsers. The first part of that last sentence is important, older browsers are obviously less and less of a problem as we go forward, all of the talk about having your browser up to date so you don't get hacked and the media attention it has received lately has obviously helped that situation along a bit. Either way for now we have a style sheet that includes the styles that we want and we just hope that everyone using a browser that can't handle media queries has at least 601 pixel wide monitors.