2 replies [Last post]
chevalier
Offline
newbie
Last seen: 16 years 41 weeks ago
Timezone: GMT+1
Joined: 2004-07-04
Posts: 2
Points: 0

The table version looks like http://www.exit.szm.com.

I've been trying to convert it to CSS-defined DIVs for the sake of being up to date and safe, but it won't work for background containers.

Basically, there are nine different tiles from which the background is assembled:

NW N NE

W M E

SW S SE

All border squares hold background only. In the table layout, I had to use  's there, but 100% was really 100%.

In the CSS version, only the header and the footer work normally. The West and East borders won't go all the way down no matter what.

I guess putting DIV's in table cells would get rid of spaces showing, but I'd rather convert it fully to CSS and drop the tables.

In the first case (http://www.exit.szm.com/example.html), height:100% means 100% viewport height. In the the second one (http://www.exit.szm.com/example2.html), 100% height is calculated prior to addition of floats. The floats take space et voila: 100% is no longer 100% and it never goes all the way down.

If those were some small tiles, I could even go for fixed positioning, but 64 pixels + padding off each edge is too much.

The only thing I can do with CSS on my own is:

HEADER L M R
INSIDE or E I I
FOOTER F D G
T D H
L T
E

Absolute, fixed, floating, whatever. Just not what I want.

I wouldn't like to change the layout. I simply hate the nowadays fashionable portal layout whereby all pages look the same to me, which is like PHP nuke. Even if they aren't made with PHP nuke, they look like PHP nuke. I so loved my tables Sad

Any idea how to make it go all the way down?

My current idea is getting the height of the actual content holder with floats added and then resizing the floats through JavaScript. However, I would prefer to avoid making crucial parts of layout depend on JavaScript.

The CSS file: http://www.exit.szm.com/style2.css.

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 17 years 13 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

100% height background container column problem (Solved!)

Just as a simple layout you could do something like this ~

http://stunicholls.myby.co.uk/cssforum/chevalier/index.html

The left and right images are placed in two 'container divs as background images. These divs (outer and inner) will grow with the content.

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk

chevalier
Offline
newbie
Last seen: 16 years 41 weeks ago
Timezone: GMT+1
Joined: 2004-07-04
Posts: 2
Points: 0

100% height background container column problem (Solved!)

Thanks! I did it on my own a couple of minutes ago. I'll be uploading it soon, so people will be able to see how it works.

Going to check your link now.

<Edit> links updated - the example.html one is the CSS one. In the beginning, Netscape hated it, but when I removed the header_lol object ( Laughing out loud ) and replaced it with padding-top of equal value in the foreground DIV it worked.

I was quite desperate, so I put the West border as background repeated y from left top. On that I put interior with the East border as the background repeated y and margin-left:64. On interior, I put inner interior with the middle tile as normal background with margin-right:64 so as not to cover the West border. The header is absolute, so it will do fine (needed for Netscape or it would show a large white gap), the footer is all right as well.

Sorry to have bothered you Sad I wouldn't think about that until a guy I know showed me another site where they fake columns - some 5*800 background showing from beneath the middle block's margins. I then fought "heck, why wouldn't I do the same in two steps - one for the left, one for the right. Nested DIVs with proper padding and margins did the job like tables with nulled borders and spacing. Perhaps DIVs aren't that bad Wink

The inside still sucks, but I have whole night to format it. And no spaces showing anymore... bliss Smile

</edit>