CSS Arguments. need a fast fix please

Forum Moderators: not2easy

Message Too Old, No Replies

CSS Arguments. need a fast fix please

JeremyLBass

9:54 am on Apr 11, 2006 (gmt 0)

Hey there all... sorry this is short but i need this quick... and or some type of work around... ok... Can you set something like "height=100% -130px" if so how would one do that? thank you for the help....
jeremy-bass

the container

Code:
.padbcont_32AE27C {position: absolute; left: 50%; margin-left: -312px; width:625px; height:100% }

the top

Code:
.padbcont_32D0C61 { width:625px; height:136px }

the middle

Code:
.padbcont_3A1FA66 { width:625px;}

the bottom

Code:
.padbcont_32D4330 { bottom: 0; width:625px; height:61px }

body

Code:
<body align="center">
<div align="center">
<iframe src="indexITEMS/header.html" frameborder="0" scrolling="no" align="top" height="136px" width="641"></iframe>

<iframe id="_Bodyarea" name="_Bodyarea" src="indexITEMS/body/body_home.html" frameborder="0" scrolling="yes" align="absmiddle" height="100%" width="641"></iframe>

<iframe src="indexITEMS/foot/foot.html" frameborder="0" scrolling="no" align="bottom" height="61px" width="641"></iframe>
</div>
</body>

mihai2u

10:36 am on Apr 11, 2006 (gmt 0)

Insert the 100%-100 px object into another div, and in that div you set a top/bottom margin of x(100 or whatever you want) px.

#container {
top-margin:100px;
height:100%;
}

#contained object {
height:100%;
}

Hope that helps,
Mihai

JeremyLBass

10:52 am on Apr 11, 2006 (gmt 0)

well not really.. i think.. the container is at 100% already... wait are you saying "height:100%-150px;" is ok coding?... if not i'm trying to have a header that sticks at the top in the window and a footer that sticks at the bottom of window... with a middle the scales.. thanks

mihai2u

2:31 pm on Apr 11, 2006 (gmt 0)

You can absolute position the footer... and try these. Hope they work out fine.

#header {
height:100px;
}

#content {
height:100%;
bottom-margin:150px;
}

#footer {
height:150px;
position: absolute;
bottom: 0;
width: 100%;
}

With a height of 100% and a bottom-margin of 150px you will not have any content in the last 150 pixels. That doesn't mean "100% - 150px" is ok.

Good luck,
Mihai

Setek

8:33 am on Apr 13, 2006 (gmt 0)

No, there's no way to do 100% of height, less 130px.

It would be a very handy feature in CSS though :)

For a fudge, you can do something like 89% and hope it's correct at your target browser resolution at maximised.

For a proper fix, you can use javascript to determine viewport height and then set the height of your object to that less 130px.

JeremyLBass

10:06 am on Apr 13, 2006 (gmt 0)

i have found what i am looking for... [cssplay.co.uk...]
this is what i want... to the T.. but i was woundering if you all might help me understand the ways of this best better.... thanks for the help you two :) good day

Setek

11:26 am on Apr 13, 2006 (gmt 0)

Umm, okay :)

So what this dude has done is:

set the content div to
```
position: absolute;
```
- to make use of the top and bottom properties;
set
```
overflow: auto;
```
so any content that spills over will make use of an internal scrollbar;
to overcome the absolute position when you want a fixed-width + centered layout, set
```
left: 50%;
```
of the viewport, and set
```
margin-left: -320px;
```
(which is half of the width of the div#content), voila, centered;
set
```
top: 100px;
```
so the div#content sits 100px from the top of the viewport;
set
```
bottom: 50px;
```
so the div#content sits 50px from the bottom of the viewport aswell; and
stick in all the header stuff above and below it.

That's... pretty cool :) Hope that explained what that person's doing there