Could I get advice, critisms, or pointers?

[dmbutler]

Hi all,

I have just found this site, and may I comment on what a fabulous resource it is!

I have just completed my personal website, http://www.darrellbutler.co.uk which (hopefully!) is going to act as a platform to showcase projects that I work on.

Would it be possible to get some hints, tips or advice on it’s appearance, HTML and CSS structure. As this is a result of 6 months scrubbing up on web design and my first attempt at anything web orientated, I would greatly appreciate any advice on where I could improve (especially with the code side of things) as I am sure I haven’t got it all right!

Many thanks to you all in advance.

Darrell. :D

Here’s my CSS

Code:

* {
margin: 0;
padding: 0;
}
body {
background-image: url(pictures/grid.png);
background-repeat: repeat;
}
a:link {
text-decoration: none;
}
h1 {
font-size: 0.6em;
color: #00A0C6;
text-transform: uppercase;
font-family: Georgia, “Times New Roman”, Times, serif;
padding-top: 10px;
padding-left: 3px;
font-weight: normal;
letter-spacing: 0.1em;
padding-bottom: 5px;
}
h2 {
font-size: 0.65em;
}
h2 a {
text-transform: uppercase;
font-weight: normal;
height: 15px;
margin-left: 5px;
padding-left: 25px;
background-image: url(pictures/rss.png);
background-repeat: no-repeat;
font-family: Georgia, “Times New Roman”, Times, serif;
float: left;
margin-top: 5px;
padding-top: 5px;
color: #000000;
text-decoration: none;
}
h2 a:hover {
color: #00A0C6;
}
h3 {
font-size: 1em;
font-weight: normal;
}
h3 a {
font-size: 1em;
color: #000000;
text-decoration: none;
}
h3 a:hover {
color: #00A0C6;
}
p {
font-family: Georgia, “Times New Roman”, Times, serif;
font-size: 0.65em;
padding-left: 3px;
color: #383834;
line-height: 160%;
padding-right: 3px;
padding-bottom: 10px;
}
p a:link {
color: #00A0C6;
}
p a:hover {
background-color: #000000;
color: #FFFFFF;
}
p a:visited {
color: #999999;
text-decoration: none;
}
.image {
height: 220px;
width: 760px;
margin-right: auto;
margin-left: auto;
clear: both;
}
#wrapper {
background-color: #FFFFFF;
height: 100%;
width: 770px;
margin-right: auto;
margin-left: auto;
border-top: 1px solid #333333;
border-right: 5px solid #333333;
border-bottom: 5px solid #333333;
border-left: 5px solid #333333;
position: relative;
}
#newsTitle {
background-image: url(pictures/news.png);
background-repeat: no-repeat;
}
#recentProjects ul {
list-style-type: none;
}
#recentProjects li {
}
#recentProjects a {
font-family: Georgia, “Times New Roman”, Times, serif;
font-size: 0.65em;
color: #00A0C6;
padding-left: 5px;
background-color: #000000;
padding-top: 5px;
padding-bottom: 5px;
display: block;
margin-bottom: 2px;
margin-top: 2px;
}
#recentProjects a:hover {
background-color: #333333;
color: #CCCCCC;
}
#headerWrapper {
width: 760px;
margin-left: auto;
background-color: #FFFFFF;
margin-right: auto;
height: 168px;
position: relative;
}
#header {
height: 148px;
width: 760px;
background-image: url(pictures/header.png);
background-repeat: no-repeat;
left: 245px;
top: 1px;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #000000;
background-color: #FFFFFF;
margin-right: auto;
margin-left: auto;
margin-bottom: 2px;
}
#headerThankyou {
height: 148px;
width: 760px;
background-image: url(pictures/thankyou.png);
background-repeat: no-repeat;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #CCCCCC;
background-color: #FFFFFF;
margin-right: auto;
margin-left: auto;
margin-bottom: 2px;
}
#workHeader {
height: 148px;
width: 760px;
background-image: url(pictures/workHeader.jpg);
background-repeat: no-repeat;
left: 245px;
top: 1px;
margin-bottom: 2px;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #CCCCCC;
background-color: #FFFFFF;
}
#menu {
margin-right: auto;
margin-left: 5px;
width: 50%;
float: left;
}
#menu ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#menu li {
float: left;
}
#menu a {
color: #000000;
font-family: Georgia, “Times New Roman”, Times, serif;
font-size: 0.65em;
text-transform: uppercase;
display: block;
width: auto;
padding-bottom: 5px;
float: left;
letter-spacing: 0.1em;
padding-top: 5px;
text-align: left;
margin-right: 20px;
padding-right: 3px;
padding-left: 3px;
}
#menu a:hover {
text-decoration: none;
color: #FFFFFF;
background-color: #00A0C6;
}
.textWrapper {
width: 760px;
margin-right: auto;
margin-left: auto;
margin-top: 10px;
}
.columnWrapper {
width: 760px;
margin-right: auto;
margin-left: auto;
}
.divider {
height: 44px;
width: 755px;
margin-right: auto;
margin-left: auto;
border-top-width: 1px;
border-top-style: dotted;
border-top-color: #333333;
clear: both;
font-family: Georgia, “Times New Roman”, Times, serif;
font-size: 0.65em;
color: #000000;
text-align: right;
text-transform: uppercase;
padding-top: 6px;
padding-right: 5px;
}
#arcTopDiv {
height: 5px;
margin-top: 10px;
}
.fieldset {
width: 376px;
float: left;
border: 1px dotted #000000;
}
.submit {
background-color: #00A0C6;
font-family: Georgia, “Times New Roman”, Times, serif;
font-size: 10px;
color: #FFFFFF;
padding: 2px;
margin-bottom: 8px;
}
.textfield {
background-color: #E5E5E5;
width: 340px;
border: 1px solid #CCCCCC;
font-family: Georgia, “Times New Roman”, Times, serif;
font-size: 10px;
color: #000000;
padding: 5px;
overflow: auto;
}
.legend {
font-family: Georgia, “Times New Roman”, Times, serif;
color: #00A0C6;
text-transform: uppercase;
font-size: 10px;
padding-right: 8px;
background-color: #FFFFFF;
padding-left: 8px;
}
#stuff {
background-image: url(pictures/stuff.png);
background-repeat: no-repeat;
}
#column1 {
float: left;
padding-right: 5px;
}
#links ul li {
font-family: Georgia, “Times New Roman”, Times, serif;
font-size: 0.65em;
color: #000000;
line-height: 2em;
list-style-type: none;
padding-left: 15px;
width: 190px;
display: block;
margin-left: 5px;
background-image: url(pictures/arrow.png);
background-repeat: no-repeat;
background-position: left center;
}
#links {
padding-bottom: 10px;
float: left;
height: 200px;
}
#links li a {
color: #000000;
}
#links li a:hover {
color: #00A0C6;
}
#links a:visited {
color: #000000;
text-decoration: none;
}
#footer {
height: 40px;
width: 760px;
margin-right: auto;
margin-left: auto;
border-top-width: 1px;
border-top-style: dotted;
border-top-color: #000000;
clear: both;
padding-top: 10px;
}
#twitter {
display: block;
}
#twitter_div {
width: 380px;
float: right;
background-color: #E5E5E5;
border: 1px solid #CCCCCC;
}
#twitter_div ul {
font-family: Georgia, “Times New Roman”, Times, serif;
color: #333333;
font-size: 10px;
line-height: 160%;
font-style: italic;
list-style-type: none;
padding: 10px;
}
#twitter_div a {
color: #00A0C6;
}
#twitter_div a:hover {
color: #FFFFFF;
background-color: #000000;
}
.spacer {
height: 10px;
width: 100%;
margin-right: auto;
margin-left: auto;
clear: both;

}
#column2 {
float: left;
}
#intro {
border-top-style: none;
background-color: #E9E9E9;
margin-top: 10px;
width: 760px;
margin-right: auto;
margin-left: auto;
height: 200px;
}
#news {
background-color: #E9E9E9;
background-repeat: no-repeat;
margin-bottom: 5px;
background-image: url(pictures/fixpert.jpg);
}
#acorn {
background-image: url(pictures/acorn.jpg);
background-repeat: no-repeat;
margin-top: 10px;
}
#divAcorn {
background-image: url(pictures/acorn.jpg);
}
#divValue {
background-image: url(pictures/value.jpg);
}
#divWall {
background-image: url(pictures/wonderwalls.jpg);
}
#divWallspread {
background-image: url(pictures/wallSpreads.jpg);
background-repeat: no-repeat;
}
#divGregg {
background-image: url(pictures/gregg.jpg);
}
#divFascino {
background-image: url(pictures/fascino.jpg);
}
#divKscope {
background-image: url(pictures/webKscope.jpg);
}
#acornText {
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #CCCCCC;
}
#cwt {
background-color: #D6D6D6;
height: 25px;
}
#wonderwalls {
height: 25px;
}
#work1 {
height: 220px;
width: 760px;
margin-top: 5px;
margin-right: auto;
margin-left: auto;
}
#work {
background-image: url(pictures/work.png);
background-repeat: no-repeat;
}
#kscope {
background-image: url(pictures/Kscope.jpg);
background-repeat: no-repeat;
}
#info {
background-image: url(pictures/moi.png);
background-repeat: no-repeat;
margin-top: 5px;
}
.columns {
width: 49%;
float: left;
padding-right: 5px;
}
.column {
width: 755px;
margin-right: auto;
margin-left: auto;
padding-right: 5px;
}
.label {
}
.formfield {
background-color: #E5E5E5;
display: block;
width: 340px;
border: 1px solid #CCCCCC;
padding: 3px;
font-family: Georgia, “Times New Roman”, Times, serif;
font-size: 10px;
color: #000000;
}
#form {
width: 380px;
padding-right: 0px;
float: right;
}
#form p {
text-transform: uppercase;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
}
#divider a {
}
#divider a:hover {
color: #00A0C6;
text-decoration: underline;
}

[Rob MacKay]

hey :) Welcome to the site :D

Firstly – nice work! I like it, and your design work is nice too :)

What I could see which would improve what you have done is using jQuery for the animated accordian and page scrolling – its alot smoother than your current JS, it seems a little forced.

Also the Accordian has a close bar, which is strange, I kinda just want to click on the same bar again for it to close…

Design wise the only other thing that caught my eye was your logo… now being the innocent young boy that I am, it made me giggle. I recently read an article on accidental logo designs that look like something else… and yours kinda looks like something else to me LOL err, lets just say, to avoid poluting the childrens minds, it dosnt look like a "d" "b" :S

that could just be my mind though! :P

Code wise:

Thinks like Doc said – you dont need your spacer div. I would take out the menu div too and just style the UL like you would the div. a DIV and UL are both block elements, you can style them the same, so you have kinda got an extra div where its not needed… lots of little things like that tbh – but its no biggy really, just better practice.

SEO side of things, your H1 tag I would use instead of the header div – h1-h6 are also block elements like divs and can be styled as such. Your site head is the most important header, so I would use it up there. You should also include the site header in text, then set the property "text-indent:-9999px" so as to hide it from view. Google will still read it within the H1 tag, and obviously see it as the most important header. Then use H2 for your news items or whatever you need.

I hope that made sense… :)

[dmbutler]

Thank you guys, very much. I will take a look through all your suggestions and will get them implemented.

Maybe upon reflection, my logo does look a little.. well, you know! Damn my initials, maybe it’s worth revisiting this too!

Darrell. :D

[Rob MacKay]

"dmbutler" wrote:

Maybe upon reflection, my logo does look a little.. well, you know! Damn my initials, maybe it’s worth revisiting this too!

LOL sorry :S yea I just saw, and well lol If you think you can get away with it… :D go with it :) I just have a dirty mind :P

[Author]

Posts