1 reply [Last post]
Vikizion
Offline
newbie
Last seen: 16 years 36 weeks ago
Joined: 2004-02-17
Posts: 1
Points: 0

Here is the site I am having a problem with. Let me warn you now, this only seems to work right on IE 6 so far.

http://www.barnettharley.com/x/BoN/index.html
http://www.barnettharley.com/x/BoN/alliance.css

Basically, I've framed the site up using DIVs for image placements, background repetitions, and width/height adjustments. It's pretty clean that way... and everything works fine except for the vertical scaling of the two side borders around the main content area.

The two borders to the left and right should always continue downward with the content, staying flush with the bottom edge of the window. As you can see, if you scroll down any, they cut off about the height of your original viewing area of the page.. they don't continue downward. Here is the code out of that .css file specifically relating to those two borders:

///////////////////////////////////////////////////////////////////////

div.border_left {
position: absolute;
left: 128px;
bottom: 0%;
background-image: url(border_left.jpg);
background-repeat: repeat-y;
width: 82px;
height: 100%;
z-index: -2;
}

div.border_right {
position: absolute;
right: 35px;
bottom: 0%;
background-image: url(border_right.jpg);
background-repeat: repeat-y;
width: 85px;
height: 100%;
z-index: -2;
}

div.right_bg {
position: absolute;
right: 0px;
bottom: 0%;
background-image: url(right_bg.jpg);
background-repeat: repeat-y;
width: 35px;
height: 100%;
z-index: -2;
}

div.left_bg {
position: absolute;
left: 0px;
bottom: 0%;
background-image: url(left_bg.jpg);
background-repeat: repeat-y;
width: 128px;
height: 100%;
z-index: -2;
}

///////////////////////////////////////////////////////////////////////

As you can see, I have the width of the divs set to the width of the images properly, which works out fine. They are hugging the appropriate borders, left/right etc, SHOULD be hugging the bottom border of the page, due to bottom: 0% .. at least I thought it should. No matter if I align them to the top and have them repeat from there, or from the bottom up, they never keep repeating past the initial view area of the page.. as you can probably see once you load the page.

And further yet.. if you minimize, then resize again, with the area which was cut off still on your screen, it will have fixed itself - it will have rendered the previously missing borders for you.

A perfect example of what I am trying to achieve is here: http://www.battle.net/war3/

Notice the continual vertical scaling of the page, along with the horizontal scaling when you adjust the size of your window.

GFraizer, the coder of the site, used all sorts of Java, tables, CSS, and such, to achieve this on a variety of browsers. I am working for only newer, more mainstream browsers. I was hoping I could do this with CSS, really.

I need some help with this, if any of you have any ideas. They would be greatly appreciated!

I need some help with this, if any of you have any ideas. They would be greatly appreciated!

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 16 years 49 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

Problem with vertical DIV issues.

Have a look at my last post in this thread http://www.csscreator.com/css-node/1165

The idea would be to make the background images part of the content div or dictated in length by the content div.

Regards
Day

The only way to learn is to do it yourself