I decided this morning it was time for a change - firstly because i've only recently made the transition from tables to css design, secondly cause my old site is really rather out dated and old (despite containing a custom built blog) and thirdly cause i wanted to experiment with css positioning specifically centralising regions on the browser. Let me know what you think, what the load time is like. Obviously i'm working on the design of the site at the moment (hence the links don't work) not the text content so obviously bare that in mind. So what do you think of my first proper CSS design? http://www.michaelthorn.co.uk/redesign Be brutal!
Looking at the code, it's a good effort. Tips? Make better use of short-hands and inheritance: body { margin: 0; padding: 0; background: url(../images/bg.gif); text-align: center; font: 12px Arial, Helvetica, sans-serif; } /*Font Elements*/ h1 { font-weight: bold; color: #9C834D; margin: 0; letter-spacing: 2px; } p { color: #9C834D; text-align: justify; line-height: 20px; margin: 0.5em 0; } /*Links*/ a { text-decoration: none; color: #9C834D; border-bottom: 1px solid #9C834D; } a:hover { border-bottom-style: dotted; } a:active { color: #3283B0; border-bottom: 1px dotted #999; } /*Layers*/ #container { margin: 0 auto; width: 808px; text-align: left; } #content { background: url(../images/backgroundcontainer.gif); padding: 20px 75px 20px 70px; } #footer { background: url(../images/footer.jpeg) no-repeat; padding: 7px 75px 0 70px; height: 100px; font-size: 10px; color: #9C834D; } Code (markup):
Thanks i've also just worked out about the float property hence the bottom of the box now over laps beyond the pale horizontal band and doesnt move either when you resize the browser. Tried it with margin sizes initially - although found padding works better... take it thats the best method?