Shooting in the dark- Web Design for Real Estate DC

admin — Fri, 30 Oct 2009 15:02:51 +0000

As designers we are often faced with not enough of three elements, time, money, and or info. Time can sometime be overcome with Redbull and coffee. Money can be over come by just giving it away for free. Info and or client direction can only be overcome by shooting things into the dark, or as my fellow designers say “throwing sh@#$t at the walls and seeing what sticks.” Mark Center was an umbrella company who owns and operates multiple apartments outside DC and wanted to start branding the properties as one. The old site was short throw from horrible and for some reason they liked the utilitarian quality of it. All of us in the design shop thought it was horrible and yet we weren’t given a lot of freedom to divorce from it.

Here is the old Mark Center Advantage Design:

: Old Site Design of Mark Center Advantage

So here is the SH#$@T we threw at the walls.

CSS doesn’t make the world go round but it does shape it.

admin — Tue, 26 Aug 2008 12:54:47 +0000

So I have come a across many articles on the web about css and some of it I just wonder where people first found out they could do these things. But the more I have worked the web the more I haven’t been surprized or even informed about something I didn’t already know. But here are some good tips for anyone who is doing CSS to make there lives easier.

Reset browser defaults then reset the browser font size

All browsers act differently as we designers all know and moan about. So here is a bit of code to atleast get the browser more to a blank state before you even start dealing with the quirks of IE-Firefox-Safari love triangle of doom.

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,
blockquote,th,td {margin:0; padding:0; }
table { border-collapse:collapse; border-spacing:0; }
fieldset,img { border:0; }
address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
ol,ul { list-style:none; }
caption,th { text-align:left; }
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
q:before,q:after { content:”; }
abbr,acronym { border:0; }

To reset the browser font size to about 10 pixels using a % it is close to 62.5%, or you can say 10pt whatever makes your more comfotable.

html {font-size: 62.5%;} or html {font-size: 10px;}

This is a good font size to work with, as you can then use em units. For example,

at 12 pixels and

at 20 pixels? Then write…

p {font-size: 1.2em;} or just 12pt
h1 {font-size: 2em;} or just 20pt

Design centered horizontally (fixed width)

div#containerHolder{text-align:center;}

div#container {margin: 0 auto; text-align:left}

Footer hooked to browser bottom or “Sticky Footer”

You then need to apply a bit of CSS:

html{height: 100%;}
body{height: 100%;}
#nonFooter{position: relative; min-height: 100%;}
* html #nonFooter{ height: 100%; }
#content{ padding-bottom: 9em; }
#footer{ position: relative; margin-top: -7.5em;}

Multiple classes applied to one element

Then there is something I didn’t know, and I am amazed that it is the simple stupid things that I never seem to learn. It is sad for me because tricks like this could save me a whole bunch of time over the years I have been using CSS

This is not so much useful code, as more of a useful feature most people overlook within CSS selectors. Any element you apply classes to, can have as many classes as you like. For example:

.red {color: red;}
.bold {font-weight: strong;}

We can apply both of these to a paragraph if wanted, by doing the following:

This text will be red yet also bold!

Anyways Here are some really nice treats of CSS.

Matt Watier » CSS Crafting