Myspace Layout

I like tools that enable people to do things themselves (instead of asking me).
You too can edit your own myspace layout.

Hacking a more tasteful myspace (mike industries)

mikeindustries myspace profile

bignoob profile hack 1

bignoob profile hack 2

Sketch as part of the web Design process

d.Construct take it to a whole new level

Grids

Grid System for Layout
1. determine the layout size (based on which screen resolution you choose for web design)
2. choose a ratio:

• 1:3
• 2:1
• 1:1.1.618 (Golden Section)

3. Convert the ratio you choose to percentages



Subtraction's Grid Computing and Design

Google BluePrint
-- sample website
-- demonstration of the grid
-- demonstration of the typography
-- quick tutorial

Reading List
Five simple steps to designing grid systems
best articles and resources on the subject
Thinking Outside the Grid
grid background image
Grid Computing
Grid-based design: Part 2, Designing blog theme templates
Fracturing / Abstracting the Grid

2 columns in CSS

The Basic Layout Classes

The DOCTYPE has to be correct for this to work.

.contentContainer {
margin:0 auto;
width:800px;
}
.contentL {
float:left;
width:400px;
}
.contentR {
float:right;
width:400px;
}

The widths are very sensitive properties

content L width + content R width must be < = "contentContainer". Any padding or margin applied will disrupt their side-by-side balance so be careful.

Let Me Clear My Float

You will need to "push down" the div that follows the "contentContainer" div with this CSS property:

.following-div {
clear:both;
}

Backgrounds can cause trouble too

If you run into problems with background colors/images not showing up (in Firefox) of your "contentContainer" div, you can add one of these classes:

.contentContainer {
float: left;
}

or


.floatfix {
clear: both;
}

insert < br class="floatfix" > before the "contentContainer" 's closing div tag

Anatomy of the Layout

¿ Porque Container? Because

Resources

Simple 2 column CSS layout
Webmaster World Forum

Further Research

http://www.glish.com/css/9.asp

http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/

http://www.neuroticweb.com/recursos/2-columns-layout/

http://css-discuss.incutio.com/?page=TwoColumnLayouts

http://realworldstyle.com/2col.html

http://wellstyled.com/css-2col-fluid-layout.html

http://www.bigbaer.com/css_tutorials/two-column-header-footer.htm

http://www.maxdesign.com.au/presentation/page_layouts/

--- http://css.maxdesign.com.au/floatutorial/tutorial0809.htm

Why I should visit del.icio.us more...

Free British TV: http://www.vanityfair.com/ontheweb/features/2007/03/piratebay200703

70's Hair Ads: http://meathaus.com/2007/02/06/hairstyle-names-from-1970s-ebony-ad/

There's something to this simple layout: http://www.themorningnews.org/archives/new_york_new_york/the_morning_news_guide_to_urban_etiquette_new_york_city.php

I read this after I found out that my digital camera is broken: http://gizmodo.com/gadgets/feature/horseshoes-and-hand-grenades-joel-johnson-returnsto-spank-us-all-for-supporting-crap-236310.php
I will not purchase another digital camera but instead borrow all my friend's cameras that they don't use but HAD TO BUY!