LAUNCH: Kings Of A&R
Monday, March 20th, 2006 by MR
It’s a real pleasure to finally unveil this site since Colin, Matto, and I worked so hard on it. Kings Of A&R is the music industry weblog to read if you want to learn about new bands, are a part of a band yourself, or are a record executive looking for the next big thing. Dean Cramer and crew have been running KOAR for awhile now, and he and his site are recognized as industry experts when talking about up and coming bands trying to make it big. It’s read by thousands of music industry big whigs everyday, so it was a great honor to be able to work on this site.
A Little Something New
My personal goal for all work that I produce is to either learn something brand new, or use a new technique that I’ve been sitting on for awhile. For the KOAR design, that little something was partially a dirtier-looking design, but mainly the usage of a typeface I’ve been dying to use for awhile now called Base 02. Base 02 is a typeface that I downloaded awhile ago (I can’t believe this beauty is free!) that produces the most amazingly dirty letters and words you’ve ever seen. Pair this typeface up with Cameron Moll’s brilliant introduction to faux weathering and you have a seriously cool combo for getting your grunge on.
Base 02 has this amazing, vectorized splatter look that must have taken the StereoType people a long time to produce. I highly recommend checking out some of their other font experiments as well since they’re all pretty badass.
Background Images Rule Them All
I’ve always said that you can produce complicated-looking sites fairly easily through the smart usage of overlapping background images, and this KOAR design is a great example of that. I have a main container element that holds all three columns, and this container background image repeating down vertically to give it the column look. At the top of each column, you’ll notice some graphical articulation that’s not part of this repeating background image, so to get that effect, I simply gave each column its own background image (not repeated, just on the top) that overlapped the container bg. The images I used: left, center, and right.
I floated all three columns, then had the footer clear the three columns which gave the container element a height. One of the major hassles that newer CSS coders face is the concept that the browser doesn’t know what the height of your floated elements are unless you specify them. If you have a block with two floated columns in it, that container block will not have an actual height and will not show your background image. To give the container block a height, underneath your two columns you can drop a footer and have it clear: both;, and then that’ll drop the rendering engine back in normal mode, and automatically make the container element 1) have a height, and 2) repeat a background image vertically. Keep the floated columns and the footer all within the same container element, and you’ll be good to go.
A big thanks goes out to WordPress (& 9rules) super genius Colin Devroe for hacking together a WP theme from my XHTML/CSS prototypes. He always amazes me.
Reader Comments
9 Responses to “LAUNCH: Kings Of A&R”
Actually, there is a way to give a container of floats height without specifying it - I ran across this a few months ago on Quirksmode and have been giving quite a bit of use since. Just give the container overflow: auto or hidden and a set width, e.g.
#container {
width: 950px;
overflow: hidden;
}
Obviously, the big caveat with this one is that you have to know the width you want in px or ems or percentage. The Quirksmode article is at wp-content/themes/koar/style.css
And nice find on Base 02 - wish I’d had that one a few months ago before I graduated from RIT.
March 21st, 2006 at 11:38 am
NO!!! Base 02 was going to be the font I used for my redesign. Now I have to find something else. =) It is a great font. KOAR looks good too.
March 21st, 2006 at 1:55 pm
Aaah, welcome to the wonders of Base02. I’ve used it on a few projects, the latest being gonecksgo.com. It’s just a great font.
Nice job on KOAR.
March 21st, 2006 at 3:48 pm
Nice redesign, Mike. And good tip too. Discovered that one a couple of months ago. I’ll have to compare the results with Rob’s overflow tip.
March 21st, 2006 at 4:26 pm
Mike,
This probably isn’t the place tp ask, but I’m gonna ask my question anyway. Background first: I’ve been trying to master the two column-and-a-footer within a container layout for quite sometime, with varying success. My most recent project is just such an attempt. First problem: Let’s say I have my two columns, one of which is a sidebar that will be floated to the left side of the page and the other is my main content div which will be floated to the left next to the sidebar. When I coded that in the CSS style sheet originally, my main content div ended being pushed down in the page way lower than the height of the sidebar (I had to end up using Absolute Positioning just to get it to place correctly..). What would make it do that? Did I maybe float the main content div in the wrong direction?
Second: After floating both of my div’s all I would have to do to the footer is code it to clear:both and it will appear at the bottom of the container div taking on it’s width? I’ve been having problems mastering how to code the footer, that’s why I asked. Sorry for the long post, hope you can help out….
V.
March 21st, 2006 at 5:16 pm
Hey Viper-
A couple things that might be causing that weirdness:
- The individual columns (plus their margins!) might be adding up to be too wide for the parent container. I’d suggest killing the margins on the columns and slapping a bright background color on there just to make sure you know precisely where the columns end.
- Where you stick the div’s in your HTML actually matters. If you have the sidebar first in your code, and then the content column, I’d suggest flipping them around in the HTML to see if it makes a difference.
- Instead of floating both left, maybe float one left and the other right, just to see what happens. Combine this with my first point about adding a background color to see right where the columns end and it should help you out a bit.
For the footer, what I normally do is drop an actual width on the footer div just to make sure that it’s spanning the full container. When I test my layouts, I normally put a width and a height on it (something like 25px high does the trick) and then add a background color so I can see exactly where it is. So the typical footer code would look like this:
#footer {
width: 780px;
height: 30px;
clear: both;
background: #f00; /* Deep red */ }
If all that fails, feel free to just email me with some code and I’m sure I can fix it up in a jiffy ;)
March 21st, 2006 at 5:26 pm
Mike,
Thanks man. I really appreciate the help. I’m going to try the tips out this week and I’ll let you know how it goes.
March 21st, 2006 at 10:31 pm
Nice design, great work!
March 22nd, 2006 at 8:46 pm
Nice redesign of KOAR. It’s visually refreshing and clean. I find the site much easier to read. I am a graphic artist and appreciate you giving us the behind the scenes of how you set the site up. I’ll have to visit your site more often.
March 24th, 2006 at 3:08 pm
Add Your Comment
Comments are moderated because spam's not tolerated.
