South Park Mac vs PC

This is the wit and guile that we love. Raise a glass to huber7, everyone.

Back in action!

www.graveidea.com has been inactive for quite some time now, but today I'm proud to announce we're back in business.

the site has a complete facelift, and the blog no has a date newer than december 2006, so that's encouraging.

at this point, the blog will keep it's face as a hub of worthwhile things regarding web design and the cool things people are working on.

stay tuned, folks. we might post something *you* might dig. 

~cheers~

Fully Centered Webpage With Bits of CSS in the Middle

Yes. It’s done, and has been for a while now, I just have never seen anyone post anything about it. I took my cues, originally, from the CSS Zen Garden, but I improved upon their code a bit – or, rather, I increased its scope.

But first, a bit of history. Remember when we were forced to use tables if we wanted to have a webpage that was smaller than the browser window fit centered on the page? If you wanted to use CSS you could, in the beginning, just simply do the math and add the appropriate “margin-left” and make it appear centered. However, that would only work on whatever screen resolution you were designing and testing in (or for) – hardly a solution when it comes to making a site that everyone and their parents can see.

So the hunt began to find an appropriate tool to horizontally center a web page with CSS.

There was the seemingly tried and true method like this:

#Content {
width: 500px;
margin: 0px auto;
}

This would automatically place any div identified as "Content" in the middle of the page, horizontally, with a left and right margin set to "auto" and a top and bottom margin set to "0px". But there was trouble, as this wouldn’t show correctly in most even all browsers.

So the boys at CSS Zen Garden stumbled upon the following. A technique that utilizes negative margins:

First, the CSS:

body {
margin: 0 0 0 0;
padding: 0 0 0 0;
}

#container {
position: absolute;
width: 500px;
left: 50%;
margin-left: -250px;
}

So what's this do? Let’s take it step-by-step. If one were to create a div identified as 'container', it would be positioned at the start at the top left of the page, set as 500px wide, and then its left edge would be positioned 50% in from the left edge of the browser window, then with the 'margin-left' object added, it would then be thrown back left by 50%, but since it's given a numeric value of exactly one half of the container’s width, it is now made fluid. You can see, if you try to resize the browser window, the container div will remain perfectly centered between the left and right edges of the browser window, unless you make the browser window smaller than the container div, and then you’ll get the dreaded horizontal scrollbars.

For the sake of this exercise, I will add a little more to the container id so that it will be seen with the html that appears just below.

#container {
position: absolute;
width: 500px;
left: 50%;
margin-left: -250px;
border: solid 1px #000;
height: 400px;
}

Here's the html to which this css would apply *carrots removed*:

html
body
div id="container" /div
/body
/html

Simple enough, right? Once you plug this html and the CSS into the appropriate areas, you’ll get a 500px by 400px white box with a black border that is horizontally centered at the top of your browser window.

What if you want it to be vertically centered? Glad you asked, my friend.
Here’s where the scope broadens, but it’s not a tough solution by any means. It is simple this: apply the horizontal technique vertically.

Here’s how it’s done:

#container {
position: absolute;
width: 500px;
left: 50%;
margin-left: -250px;
border: solid 1px #000;
height: 400px;
top: 50%;
margin-top: -200px;
}

See how it’s translated from horizontal to vertical.

And that’s how it's done! You get a perfectly vertical and horizontal web page inside a browser window.

Let me know if you have any questions, or see a flaw in the design.
Good luck, duckies...

[The IE7 Revolution: An Oxymoron in Terms]

So the big hype this week is the mention that Microsoft has released it's final version of Internet Explorer 7 to the public. It's supposed to break the mold for web browsing and help solidify IE's hold on the web browsing market, as well as make IE a better, strong, faster browser.

Everyone who's totally excited about this, step forward!
Not so fast everyone...

Read Robert Vamosi's full writeup at Cnet.com
_____________________________________________________

Current Firefox Widget of Choice: IE View
Current Band of Choice: Stereo Lab
Current Favorite Website Layout: Lost In Translation - Official Movie Site

We're out.
|GI|

[starting anew]

Well, along with this blog, some great changes are happening to the gr@veidea website. we're redesigning the sit altogether to showcase client sites and design work.

After completing our first fashion website, we've picked up a second project for a t-shirt company out of Lawrence, KS. The site should be up and running by the end of the year. You'll see more info about that here.

Current Firefox Widget of Choice: Magic Password Generator
Current Band of Choice: Joshua Radin
Current Favorite Website Layout: Azztek Services

We're out.
|GI|