Redsigning site with an open source template

[jonbey]

Hello

I am still rather new to "web design". I have built a site based on an free template that I found a while ago, but as the website that provided it has ceased to exist, I can no longer get any advice on changes, so I decided it was time to look for a new template. I found a nice open source template, and have started a basic redesign using this.

Although it looks neater (in my opinion) does it go well with the theme? I can obviously change all the colours at some point, and sort out the side bars (which are thinner than the current template). And get rid of the title hover over underline. And update the menu. And sort out the footer. I have really just started tonight!

New template (in the making): http://www.motleyhealth.com/template.html

Click on any menu link to see what the current design is like.

Let me know what you think! I notice that this is an active forum, so I hope to see plenty of advice when I log on tomorrow night,

Cheers

Jon.

 

[zkiller]

i am not sure if your new template is displaying as it should in firefox. your google ad blocks are to wide and the header doesn't span the complete width of the white background making it look sort of out of place. also, i am not really sure how i feel about the new menu's. while i like the idea, i don't like how uneven in height each menu item is.

but as you said, you still have a lot of work to do, so maybe you are already in the process of addressing each of those issues.

good luck.

 

[jonbey]

Hi,

I am indeed getting there. I have altered the CSS to this:

I managed to sort it out with this:

#content {
position:absolute;
line-height:1.5em;
padding:0pt;
clear:left;
text-align:left;
margin-left:160px;
margin-right:auto;
max-width:590px;
min-width:590px;
}

#leftside {
float:left;
padding: 0px 10px 0px 0px;
width:150px;
}

#extras {
float:right;
padding: 0px 0px 0px 10px;
width: 205px;
}

Basically it sets the size of the left and right (extras) columns, and fixes the width of the content too, and sets a left margin for the content page equal to the leftside width. Seems to do the trick, although not extensively tested yet.

Now increasing the width of the photo header.

The actual menu items are really there for testing purposes, there will only be one menu item on the top left side. Also the horizontal menu will change too, but that will come later.

Test site with updated CSS:
http://www.motleyhealth.com/test.html (I wanted to test a separate CSS file and different content)

 

[zkiller]

looks better already. i would set a margin of about 15px between the horizontal menu and the content area though. right now your heading is touching the menu.

 

[jonbey]

I have just noticed some bigger problems. Just took a look in IE, and it is all over the place.