1 reply [Last post]
Franzie
Offline
newbie
Last seen: 12 years 42 weeks ago
Joined: 2007-02-23
Posts: 1
Points: 0

Hello all,

No indeed , i'm not a specialist and many things have been written on the issue already. Nevertheless, i have not found what I'm looking for. I'm building a site, all divs absolutely positioned. I want the site to be suitable for different resolutions and adapt to browser resizing. Horizonatally I have managed fine with three absolute positioned divs, defining it with right: 0px or left: 0px. When resizing form large to small and the other way around it just adjusts like liquid very nice. But... I have a div that contains text. Left and right on the page some shade column should appear UNDER ANY CIRCUMSTANCES cover the whole height (defined by the lenght of text). I i define divs absolutely positioned and set the height on auto or 100% it will only fill the the screen, scrolling down one can see that the rest of the column is missing. It drives me crazy, how can i handle this? This is the html:

Untitled Document

some long long text... fill in yourself.

and this is the css :

#links { margin: 0px; padding: 0px; width: 390px; overflow: hidden; position: absolute; visibility: visible; z-index: 0; left: 0px; top: 0px; background-image:url(images/adroit_r1_c1.jpg); height: 56px; }

#rechts {
margin: 0px;
padding: 0px;
width: 260px;
overflow: hidden;
position: absolute;
z-index: 2;
right: 0px;
top: 0px;
visibility: visible;
background-image:url(images/adroit_r1_c4.jpg);
height: 56px;

}
#mid {
margin: 0px;
padding: 0px;
width: auto;
overflow: hidden;
position: absolute;
z-index: 1;
left: 390px;
top: 0px;
right: 56px;
visibility: visible;
background-image:url(images/mid.jpg);
background-repeat:repeat-x;
height: 56px;

}

#linksgeel {
margin: 0px;
padding: 0px;
width: 48px;
overflow: hidden;
position: absolute;
z-index: 2;
left: 0px;
top: 56px;
visibility: visible;
background-image:url(images/linksgeel.jpg);
height: 172px;
}

#midgeel {
margin: 0px;
padding: 0px;
width: auto;
overflow: hidden;
position: absolute;
z-index: 1;
left: 48px;
top: 56px;
right:624px;
visibility: visible;
background-image:url(images/midgeel.jpg);
height: 172px;
}

#flash {
margin: 0px;
padding: 0px;
width: 624px;
overflow: hidden;
position: absolute;
z-index: 0;
right: 12px;
top: 56px;
visibility: visible;
height: 152px;

}

#schr {
margin: 0px;
padding: 0px;
width: 12px;
overflow: hidden;
position: absolute;
z-index: 2;
right: 0px;
top: 56px;
visibility: visible;
background-image:url(images/schaduwrechts.jpg);
background-repeat:repeat-y;
height: 172px;

}

#balklinks {
margin: 0px;
padding: 0px;
width:16px;
overflow: hidden;
position: absolute;
z-index: 3;
left: 0px;
top: 208px;
visibility: visible;
background-image:url(images/balklinks.jpg);
height: 21px;
}

#balkmid {
margin: 0px;
padding: 0px;
width: auto;
overflow: hidden;
position: absolute;
z-index: 4;
left:16px;
top: 208px;
right: 148px;
visibility: visible;
background-image:url(images/balkmid.jpg);
background-repeat:repeat-x;
height: 21px;
}

#balkrechts {
margin: 0px;
padding: 0px;
width: 148px;
overflow: hidden;
position: absolute;
z-index: 5;
right: 0px;
top: 208px;
visibility: visible;
background-image:url(images/balkrechts.jpg);
height: 21px;
}

#tekstlinks {
margin: 0px;
padding: 0px;
width: 13px;
overflow: hidden;
position: absolute;
visibility: visible;
z-index: 4;
left: 0px;
top: 0px;
background-image:url(images/schaduwlinks.jpg);
background-repeat:repeat-y;
height: 100%;

}

#tekstacht {
margin: 0px;
padding: 0px;
width: auto;
overflow: hidden;
position: absolute;
z-index: 3;
left: 13px;
right: 12px;
top: 229px;
visibility: visible;
background-image:url(images/achtergrond.jpg);
background-repeat:repeat-x;
height: 100%;

}
#tekstrechts {
margin: 0px;
padding: 0px;
width: 12px;
overflow: hidden;
position: absolute;
z-index:4;
right: 0px;
top:0px;
visibility: visible;
height: 100%;
background-image: url(images/schaduwrechts.jpg);
background-repeat:repeat-y;

}

#tekst {
margin: 15px;
padding: 0px;
width: auto;
overflow: visible;
position: absolute;
z-index: 4;
left: 12px;
right: 13px;
bottom: 0px;
top: 230px;
visibility: visible;
height: auto;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
font-style:normal;
color: #DFDFDF;
text-align: justify;

}
.body {

margin: 0px;
padding: 0px;
width: auto;
overflow: auto;
position: absolute;
z-index: 0;
visibility: visible;
left:0px;
right: 0px;
background-color:#989898;
height: 100%
}

anyone any idea how to pull it of ?

kind regards

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 5 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

I applied background colour

I applied background colour to your divs. It looks awful. And using absolute positioning is (sorry to be blunt) - daft.

What you want is a full width page with some sort of border left and right of everything.

The header appears to be three rows.

Row 1 split into three bits: approx 40% 35% 25%
Row 2 split into three bits: approx 5% 30% 65%
Row 3 split into two bits: approx 80% 20%

Main body with surrounding graphic border, all the way round, inside the outer page border. This part gets bigger wit content.

Footer, One bit with different side borders to page, but extenfing directly under those page borders.

Do I have this right?

Trevor