Forum Home
PC World Chat
 
Thread ID: 65191 2006-01-10 10:11:00 Problem for the CSS pro's stu161204 (123) PC World Chat
Post ID Timestamp Content User
419855 2006-01-10 10:11:00 Hello CSS Pro's :)

This thread is related to this question: Has any one here made a theme for wordpress??? (pressf1.co.nz)

Since wordpress uses CSS for there themes I thought I might as well ask this question here & I may have some luck:

Here is a sniped of what I posted on the wordpress forums:

I have been trying to get this Blog: www.everyparent.co.nz to look like this site: www.everyparent.co.nz

But I am having some issues

I gave up making my own theme/style as I am running out of time with this project so I have copied the Andreas09 theme/style & things have been going good & this site I found: www.urbangiraffe.com was useful but does not help me here.

Take a look at this site www.everyparent.co.nz & compeer it with this blog: www.everyparent.co.nz

As you can see the right hand nav bar is too far to the right & the main post/content area is just sitting there in the middle & the left hand side is not touching the edge of the screen like the site

Any ideas how I can fix this? 		stu161204 (123)
419856 2006-01-10 10:35:00 Just guessing its a position:relative; missing or similar.

These two pages may help, fix one thing at a time, then retest.
validator.w3.org uild%2Fblog%2Findex.php

jigsaw.w3.org Frebuild%2Fblog%2Fwp-content%2Fthemes%2Fwp-andreas09%2Fstyle.css&usermedium=all 		Rob99 (151)
419857 2006-01-10 10:52:00 You may also want to use Fire fox with Html tidy extention, go through to fix warnings and errors then worry about the layout. Rob99 (151)
419858 2006-01-10 13:12:00 Can you post the CSS for the site you made?

[Edit]: Nevermind. I found it. 		vinref (6194)
419859 2006-01-10 14:02:00 You need to size the left, middle and the right "content" boxes or divs to match the banner at the top. The banner, according to the html, is 385 wide - the 3 divs must add up to this. If you need them to be wider than the banner, you should use the "sliding door" method. And you must float all of the divs left - in your CSS the centre divs floats in the centre (by default - it is not specified in your CSS), and the right box floats right.

You should also be working in percentages for widths. 		vinref (6194)
419860 2006-01-10 20:18:00 body {
text-align:center;
//change to
text-align:left;
}


#container {
text-align:left;
//add
width: 760px;
}


//change and add from the original
#content {
margin: 0;
float: left;
}


Also, other things I noticed (maybe incorrectly, I didn't look too hard) was that your rightbar is 165 or so wide, but then you put 230 wide pictures inside.


You should also be working in percentages for widths.This is good to try and do as much as possible, because it definately saves juggling numbers to get the layout to work. By setting the container to 760px wide, then you can set a lot of things inside to percentages. Even better IMO would be to have a stretch-to-fit design like I thought www.everyparent.co.nz was meant to be.

Something I noticed with percentage based layouts that are mixed with divs and tables. I have noticed divs and tables dont mix well. For example, if you have a xx wide div, and put a 100% wide table inside, the table seems to fill up 100% of the page, and not the div. (This is only an example, it may not be correct as I couldnt quite remember the scenario)

Edit: I didn't test my changes with images, just the html/css, so it still could be mucked up. Just follow vinref's advice then. 		mejobloggs (264)
419861 2006-01-10 22:07:00 You should also be working in percentages for widths.

yeath, I would be, but due to how the banner works, I cant 		stu161204 (123)
419862 2006-01-10 22:11:00 That banner is possible to use with percentage widths, just cut it up a bit. mejobloggs (264)
419863 2006-01-10 23:50:00 codex.wordpress.org Rob99 (151)
419864 2006-01-11 01:10:00 Something I noticed with percentage based layouts that are mixed with divs and tables. I have noticed divs and tables dont mix well. For example, if you have a xx wide div, and put a 100% wide table inside, the table seems to fill up 100% of the page, and not the div. (This is only an example, it may not be correct as I couldnt quite remember the scenario)

Edit: I didn't test my changes with images, just the html/css, so it still could be mucked up. Just follow vinref's advice then.

I have the same fear of div and table mixes, so I did not go too far with fixing up the CSS.

BTW stu, you shouldn't be allowing access to anything that is not meant to be seen by the public. When you finishing fixing things, lock out those directories. 		vinref (6194)
1