need some help with css layout

kgpixels

I’m redoing my site at the moment and need some assistance with CSS layout and Div Tags.

I’ve just the new home page up at the moment.

I’ve centred the banner using auto left and right margins and then put all the other divs inside the banner div and positioned them using absolute.

What I want to do is hang a bottom banner, that is also centered, of the columns in the centre. Either that or just float it to the bottom always.

How can I do this? As of yet I can’t figure it out!

Any help appreciated. . .

p

Check out this tutorial.
http://css.maxdesign.com.au/floatutorial/

Specifically this bit:
http://css.maxdesign.com.au/floatutorial/tutorial0811.htm

You need to put in a dic for the footer, after the left & right column and then use th CSS code clear: both; to make sure that it is under everything else.

kgpixels

thanks p

I'm only getting to this now.

I've placed <div id="footer">Content for id "footer" Goes Here</div> after where col1 and col2 are ok.

#footer {
height: 100px;
width: 800px;
border: thin solid #000000;
clear:both;
}

Do I need to float col1 and col2 also?

S.M.B.

You're better off changing the layout of your site to mimic the layout in the tutorial p posted rather than sticking with the absolute positioning method you are currently using.

Bob_Harris

I'd advise against using absolute positioning on everything.

I've looked at your source, stripped it down to the essentials with minimal styling to show how to achieve what (I think) you want.

Two solutions, one where the footer sticks to the bottom of the page until pushed down by content, and one where the footer moves up and down depending how much content there is on the page.

The sticky footer solution (http://www.cssstickyfooter.com/) requires that you set all margins and padding to be initially 0px, and you have to manually add them to each element as you go along.

Take a look at the layout without the sticky footer first as it is easier to understand.

kgpixels

Thanks guys, I'm almost there. .

http://www.mahonfarmhouse.com/new/

I just need to move everything below the banner over, so that its in line with it, and centered on the page. What is best way to do this?

Also i'd like to put some vertical space between the columms. Should I just use placement for this?

Liam Byrne

kgpixels wrote: »

Thanks guys, I'm almost there. .

http://www.mahonfarmhouse.com/new/

I just need to move everything below the banner over, so that its in line with it, and centered on the page. What is best way to do this?

Also i'd like to put some vertical space between the columms. Should I just use placement for this?

To centre the content, set the body CSS to text-align:center, and then enclose all 3 columns in another div, setting its width appropriately and its left and right margins to "auto"

For the vertical space between the columns, set the left-margin and right-margin of the centre column.

daymobrew

I often start my layouts using the Yahoo! UI Grid Builder.
Or you can look the Blueprint or 960gs css frameworks.

kgpixels

Bob_Harris wrote: »

I'd advise against using absolute positioning on everything.

I've looked at your source, stripped it down to the essentials with minimal styling to show how to achieve what (I think) you want.

Two solutions, one where the footer sticks to the bottom of the page until pushed down by content, and one where the footer moves up and down depending how much content there is on the page.

The sticky footer solution (http://www.cssstickyfooter.com/) requires that you set all margins and padding to be initially 0px, and you have to manually add them to each element as you go along.

Take a look at the layout without the sticky footer first as it is easier to understand.

This one has done the trick! Thanks Bob

Liam Byrne

kgpixels wrote: »

This one has done the trick! Thanks Bob

If it has, then I presume that you haven't uploaded it yet ?

Not working in Google Chrome.

kgpixels

Liam Byrne wrote: »

If it has, then I presume that you haven't uploaded it yet ?

Not working in Google Chrome.

Burning the midnight oil last night, didn't get a chance to upload it Here it is

Thanks again for all the inputs.

Liam Byrne

Cool! Was just afraid in case you'd managed an IE-only centre mechanism!

Couple of small things :

1) Some typos - e.g. "Appartments"
2) I'd use a non-serif font
3) I'd increase the line-height to make the paragraphs less cluttered
4) Don't forget to set the page title
5) If possible, factor in some header tags so that there's some semantic markup for Google to pick up on.....you're currently using <span class="heading">Fishing in Co. Monaghan</span> which is simply treated as more text

Other than that, looking pretty good.