So ive spent my christmas break (well some of it) coding my portfolio, once it was done i felt like coding more...lol so i decided to make my own wordpress blog theme to match my portfolio.

 

Anyway just looking for some feedback so i can fix it up a little bit, you can access both from the links in my signature.

 

thanks.

it looks good, but doesn't seem to work too well in Firefox (2.something)

 

The right hand of the homepage has buttons overlayed over the text, and the text itself flows outside of the box.

 

made a few changes with the stylesheet to fix and change in my browser:

body { 
background-color:#bbbbbb;
margin-top:0px;
padding-top:0px;
}
#background {
width:904px;
height:882px;
margin:0 auto;
}
#background #bird { 
background-image:url(Images/bird-and-flourishes.png);
background-repeat:no-repeat;
width:772px;
height:365px;
margin:0 auto;
margin-top:5px;
}
#background #blue_under { 
background-image:url(Images/under-blue.png);
background-repeat:no-repeat;
width:905px;
height:580px;
margin:0 auto;
margin-top:-138px;
}
#background #bottom_flourish { 
background-image:url(Images/bottom-flourishes.png);
background-repeat:no-repeat;
width:775px;
height:220px;
margin:0 auto;
margin-top:-150px;
}
#container { 
width:685px;
height:687px;
margin:0 auto;
margin-top:-756px;
padding-right:20px;
}
#header {
background-image:url(Images/header.png);
background-repeat:no-repeat;
width:700px;
height:250px;
margin:0 auto;
margin-top:38px;
}
#header_stuff {
background-image:url(Images/header_stuff.png);
width:470px;
height:225px;
margin-left:33px;
}
#content { 
background-image:url(Images/content.png);
background-repeat:no-repeat;
width:700px;
height:440px;
margin:0 auto;
margin-top:-12px;
}
#content #contain { 
width:700px;
height:420px;
padding-top:25px;
}
#content #stuff { 
background-image:url(Images/inner-content.png);
background-repeat:no-repeat;
width:700px;
height:440px;
margin:0 auto;
}
#content #welcome {
width:285px;
height:143px;
margin-left:50px;
padding-top:33px;
}
#welcome p {
font-family:PillGothicSixHundredmg-Regular, Arial, sans-serif;
font-size:12pt;
color:#245f91;
}
#welcome h1 {
font-family:PillGothicSixHundredmg-Regular, Arial, sans-serif;
font-size:14pt;
color:#a2a2a2;
margin-bottom:-15px;
}
#content #motivation { 
width:285px;
height:143px;
float:right;
margin-right:50px;
margin-top:-143px;
}
#motivation p {
font-family:PillGothicSixHundredmg-Regular, Arial, sans-serif;
font-size:12pt;
color:#245f91;
}
#motivation h1 {
font-family:PillGothicSixHundredmg-Regular, Arial, sans-serif;
font-size:14pt;
color:#a2a2a2;
margin-bottom:-15px;
}
#content #tools {
width:285px;
height:143px;
float:left;
margin-left:50px;
padding-top:14px;
}
#tools p {
font-family:PillGothicSixHundredmg-Regular, Arial, sans-serif;
font-size:12pt;
color:#245f91;
}
#tools h1 {
font-family:PillGothicSixHundredmg-Regular, Arial, sans-serif;
font-size:14pt;
color:#a2a2a2;
margin-bottom:-15px;
}
#nav_container {
width:212px;
height:90px;
margin:0 auto;
margin-top:-490px;
}
#nav #home {
background-image:url(Images/home.png);
background-repeat:no-repeat;
width:115px;
height:53px;
}
#nav #portfolio {
background-image:url(Images/portfolio.png);
background-repeat:no-repeat;
width:115px;
height:60px;
margin-top:-2px;
}
#nav #services { 
background-image:url(Images/services.png);
background-repeat:no-repeat;
width:115px;
height:53px;
float:right;
margin-top:-251px;
margin-right:-15px;
}
#nav #contact {
background-image:url(Images/contact.png);
background-repeat:no-repeat;
width:115px;
height:60px;
float:right;
margin-top:-200px;
margin-right:-15px;
}
#footer_container {
width:270px;
height:58px;
margin:0 auto;
margin-top:385px;
}
#footer {
text-align:center;
font-size:12px;
font-family:PillGothicSixHundredmg-Regular, Arial, sans-serif;
color:#194071;
}

h1 { font-family: Trebuchet MS !important; font-size: 15pt!important; }
p { font-size: 10pt!important; }

yeah I get the same - the navigation break in Firefox...other comments...

 

1. Navigation - fix it

2. Navigation - have all the buttons the same colour for the off state and then use the secondary colour as an on state. You have no indication with the navigation which section you're in

3. Radio buttons on the contact page overlap the Feedback text - but this might be getting pushed down by the broken nav

4. The first word in your header is difficult to decipher - I can't figure out what is says and then can only guess that it's 'Lastcrime' as that is what is in your footer text.

5. SOme of your swirls look really pixelated/jaggy as if you've cut them out form a white background - try vectormagic to vectorise them so that you can shrink them down with less distortion.

6. Repeat your navigation as text links in the footer.

7. Make better thumbnails for your portfolio. the current ones take ages to load as they're just shrunk down versions of the larger image and this also makes them difficult to distinguish...none of them make me want to click to see more. An interesting detail from each design would be better and more enticing.

8. Validated your code as you have a lot of errors.

Severely flawed in IE6.

lots of work to do then...

Yeah i no lol i have to fix it up for ie, i need to find some time first. Thanks for the feedback Eskymo exactly what i was looking for, as for the blue swirls (that look pixely / jageddy) i was trying to give them a warn out look.

 

phppenguin - How are you able to edit the stylesheet and view it again? I've always wondered but im not sure how..

if you get the web developer toolbar for Firefox you can edit the CSS live and see the results as you edit - it's a very useful tool when helping people out and tryingto solve css issues.

Yah i had that before but i wiped my computer and forgot about it, i never knew you could do it with that. Thanks for the info, it will be very helpfull.

i didn't know you could do it either until someone pointed it out to me on the forums a few months ago!