Spacing problems

a) Hmm, wrap that paragraph with <p> tag and adjust its padding.

c) add display: block; to the #whatever a, omit left and right margin, control distance between them by padding left and right, or specify width.

I READ THE QUESTION too fast, adjust my answer, here goes
add display: block;
omit top and bottom margin
adjust top and bottom padding

b) Are the boxes inside #maincontent? Take them out.

b) well I created another container for them which is within maincontent, I need them to be above the footer, which is why I stuck them in a seperate container called bottomcontainer and placed it before the footer. How would I place it otherwise?

Your main container and middle container seem to have nothing to do with your layout?

b) #bottomcontainer and #footer currently within #maincontent, right?
<div id="maincontent">

<div id="bottomcontainer"></div>
<div id="footer"></div>

</div>

Restructure above to become like the following

<div id="maincontent"></div>
<div id="bottomcontainer"></div>
<div id="footer"></div>

a) I think I’ve done it, let me know if it’s right.
b) I don’t quite follow – I’ve made the changes in my CSS, but within the index.php I don’t understand what I would do there, what abou the bits and pieces that are inbetween?

so:

<div id=”maincontainer”>contains everything</div>
<div id=”middlecontainer”>contains the two floats at the top</div>
<div id="maincontent">post data etc</div>
<div id="bottomcontainer">contains the bottom two floats</div>
<div id="footer">footer information</div>

The footer has the last two divs in it. When I placed the bottomcontainer in the index.php I think it broke it but I can’t remember.

I’m still not sure what your restructure is asking me to do. Do you want me to place all three divs as above in the index.php file, including the footer?

c) Again I haven’t quite got it, it looks better than before but not quite. I’m not sure how to fatten out the hovers so they fill the block and don’t leave a white space at the top and bottom. Should I used borders as well within the hover?

I’m trying to do what I’m doing with C) but in the float with the menu, again I can’t get the white space to fill, I’m also wondering how I’d fatten the thing out so that the menus are more evenly spread out.

Thanks in advance

b) Don’t mix this up. You have #maincontainer and #maincontent. And I’m suggesting that #bottomcontainer and #footer is to be outside #maincontent, instead of inside currently if I’m not mistaken; they’ll be still inside #maincontainer

c)
#nav a:link, #nav a:visited {
float: left;
color: #000;
letter-spacing: 1px;
text-transform: uppercase;
padding: 3px 5px 2px 5px;
}

don’t mess with a:hover as far as padding/display/position, just background/color and the like

Thanks alphaoide, I think that solves all three issues – now I don’t suppose you know a solution with regards to the menu?

What menu and what about it? It’s not that I don’t see it; I just don’t want to make assumptions. ??

the menu in the second box top right, above the main post and below the header. With regards to it, what do I need to add/change/remove the make that menu fit the box so that when rolled over the upper part is highlighted, and the same for below? IF that makes sense?

First set the margin of ul#nav to zero to remove the top gap.
The gap below exists because you don’t have enough list item cover the whole box. Solutions would be to add more list item and/or adjust the height of list item link so that they will cover the whole box.

ok nearly done.

I’ve added a sixth item to the menu, and removed the 0 margin and adjusted the height, adding more height in some ways makes the menu closed but it then shifts everything below several pixels down. You’ll note that 4-5px gap on the last time. I would like to remove the border on the last time, so that it doesn’t overlap and double up. Is there anything else I can do to make it look right ( I still haven’t viewed in IE…) or is this the best I will get?

Thanks in advance

Ok I have another problem

1) in IE there is a blue bar across the top two floats which shifts them down. Is that a padding issue? Where would I fix that?

2) with regards to the menu, I might be complicating things, but I also need to remove the final border and for it to expand in that bottom space.

So what if I do this:

Create an image and then create a seperate id for the final item, which would cover the border (I think) and then create another image of the rollover cover?

Or I can create an image for each item, and then add the borders in the image itself, and then a rollover image for the colour?

What do you think? I’ll have to try it as I don’t know if it will work.