Page layout driving me crazy (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets and Accessibility



Message

SimonCleaver -> Page layout driving me crazy (9/30/2005 11:45:39)

Hi wonder if anyone would mind helping.
I have used CSS for a page layout and my index page is driving me nuts.
If you have a look at www.homesinspain.ltd.uk you will see my opening page (it is in fact a slightly different layout from the rest of the pages).

My problem was the bottom "footer bar". It wouldn't stretch across the full page because I had used a table in this opening page (actually only on this page primarily to help with the photos layout)

So I have made a copy that stretched the footer properly at www.homesinspain.ltd.uk/index_copy.html but this messes up my right-hand "sidebar". (Viewed in IE the sidebar moves down the page, viewed in Firefox i have a big white gap between the photos on the left)

Can anyone give me a pointers how to correct this - or even a better solution entirely for laying out my pages?

Also, how would I change my css so that the right-hand "sidebar" would always exand or contract so that it meets the footer?
My css file is at www.homesinspain.ltd.uk/site.css

Many thanks for any help offered



Tailslide -> RE: Page layout driving me crazy (9/30/2005 11:58:43)

quote:

ORIGINAL: SimonCleaver
Also, how would I change my css so that the right-hand "sidebar" would always exand or contract so that it meets the footer?
My css file is at www.homesinspain.ltd.uk/site.css

Many thanks for any help offered


Hi Simon

The easiest way would be to use "faux columns" technique. Apply a very thin background image to the wrap div which has the white background for the main text bit and a red section for the red column - then just repeat it vertically as the wrap background image - it will extend the full length of the wrap div and look like a solid red column.



SimonCleaver -> RE: Page layout driving me crazy (9/30/2005 12:03:19)

Thanks a lot [;)] I'l give it a go.

Ok works great thanks, but now my Index page is really weird?

I just cant get my head around what is wrong with the layout - I think the tables are messing it up somehow, but how?



SimonCleaver -> RE: Page layout driving me crazy (9/30/2005 12:31:09)

Ok this is really weird - If i add another </div> at the bottom (that if I count them up shouln'd be there), it now displays fine in IE but not Firefox.
So that anyone who is reading this can tell what the hell I'm talking about (not sure if i do now) I have left a copy of the dodgy Index page at www.homesinspain.ltd.uk/indexbad.html

Thanks



Tailslide -> RE: Page layout driving me crazy (9/30/2005 14:12:21)

Just had a really quick look - looks like you haven't closed the wrap div - but as I say just a really quick look. Usually a good way of figuring out this stuff is to stick it through the W3C Validator - it'll pick up on any unclosed divs etc.



SimonCleaver -> RE: Page layout driving me crazy (10/2/2005 12:28:57)

Thanks.
I seem to have solved it by adding "overflow: auto;" to my wrap (I think it is a Mozilla bug) and enlarging my #wrap div width by 5 pixels.

Another weird thing now though is in Firefox only I get extra scroll bars pop up on this page only:
http://www.homesinspain.ltd.uk/whyhis.htm
Weirder and weirder. Maybe my whole CSS is out of whack!
Anyone have any ideas?
Many thanks



jaybee -> RE: Page layout driving me crazy (10/3/2005 18:57:14)

quote:

in Firefox only I get extra scroll bars pop up on this page only:
http://www.homesinspain.ltd.uk/whyhis.htm
Weirder and weirder. Maybe my whole CSS is out of whack!
Anyone have any ideas?


overflow: auto;

Text is rendered slightly differently in all browsers. FF is saying the text is a bit too big for the box so it's put a scroll bar in for you.



SimonCleaver -> RE: Page layout driving me crazy (10/4/2005 6:33:35)

Thanks Jaybee,
If I delete the "text autoflow" from my css file then all may pages display ok except index.html. This displays without the background image?
I created a background image so that the red right hand bar looks like it extends down to the footer (my background image is exactly 750 pixels across, although I have now changed my #wrap to 755 pixels, because before when it was 750 pixels, the sidebar would be rendered down the page after the #body).
I am a totally confused to be honest.
Does anyone now of a "simpler" css template that I could copy, that would give me 2 columns and a hear and footer? Or have a look at my exisiting css and maybe suggest a tweak
Many thanks for any help



jaybee -> RE: Page layout driving me crazy (10/4/2005 8:26:34)

Well there are some nice layouts at Stu Nichols site
http://www.cssplay.co.uk/layouts/index.html

and others at
http://glish.com/css/
http://www.bluerobot.com/web/layouts/

There is also a layout generator at
http://www.csscreator.com/version2/pagelayout.php

with all of them check them out at full size and reduce the page to 800x600 to make sure they shrink nicely.



SimonCleaver -> RE: Page layout driving me crazy (10/4/2005 11:02:33)

Many thanks jaybee



SimonCleaver -> Ooops (10/5/2005 12:36:16)

Sorry if the links above no longer work - but I got in such a mess I replaced my web with a back up and this overwrote the original[:)]




jaybee -> RE: Ooops (10/5/2005 14:53:07)

Ooops



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.078125