Need page to grow vertically

berraf · #1 Dec 16th, 2006, 08:02

I have built a site with css with layers but I don´t know how to make the mainwindow grow vertically and automatically move the foot down.

You can see the page here http://www.apologetik.org

This is the code:

Code: Select all

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
</head>

<body>
  <div class="top" id="top"></div>
  <div class="meny" id="meny">
  </div>

  <div class="main">
</div>

  <div class="fot">
</div></div>

  <div class="nyheter">
  </div>

  <div class="huvud"></div>
</body>
</html>

This is the stylesheet:

Code: Select all

.top {
    position:absolute;
    left:50px;     top:42px;     width:800px;     height:20px;
    z-index:1;
    background-color: #990000;
    border-left-width: 3px; border-left-style: solid;     border-left-color: #990000;
}
.meny {
    position:absolute;
    left:50px;     top:292px;    width:800px;    height:25px;
    z-index:2;
    border-left-width: 3px;    border-left-style: solid;    border-left-color: #990000;
    background-color: #FFFFFF;
}
.main {
    position:absolute;
    left:50px;    top:317px;    width:563px;    height:346px;
    z-index:3;
    border-left-width: 3px;    border-left-style: solid;    border-left-color: #990000;
    background-color: #FFFFFF;
    text-align: justify;    vertical-align: top;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;    display: block;
    overflow: scroll;
    padding: 20px;
}
.fot {
    position:absolute;
    left:50px;    top:693px;    width:800px;    height:20px;
    z-index:5;
    background-color: #990000;
    border-left-width: 3px;    border-left-style: solid;    border-left-color: #990000;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 9px;
    color: #FFFFFF;
    text-align: center;
    padding-top: 2px;
}
body {
    background-color: #999999;
}
.nyheter {
    position:absolute;
    left:656px;    top:317px;    width:177px;    height:367px;
    z-index:4;
    background-color: #CCCCCC;
    overflow: auto;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    padding: 10px;
}
h2 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
}

.huvud {
    position:absolute;
    left:50px;
    top:62px;
    width:800px;
    height:230px;
    z-index:7;
    background-image: url(images/henrik1.jpg);
    border-left-width: 3px;
    border-left-style: solid;
    border-left-color: #990000;
    visibility: default;
}

Thankz for any help and regards from BerraF

cheataweb · #2 Dec 16th, 2006, 09:36

this code works, all you need to do is add a call to the function "vertGrow()" with the new position of the foot in the parenthesis

Code: Select all

<html>
<head>
<style>
.top {
    position:absolute;
    left:50px;     top:42px;     width:800px;     height:20px;
    z-index:1;
    background-color: #990000;
    border-left-width: 3px; border-left-style: solid;     border-left-color: #990000;
}
.meny {
    position:absolute;
    left:50px;     top:292px;    width:800px;    height:25px;
    z-index:2;
    border-left-width: 3px;    border-left-style: solid;    border-left-color: #990000;
    background-color: #FFFFFF;
}
.main {
    position:absolute;
    left:50px;    top:317px;    width:563px;    height:346px;
    z-index:3;
    border-left-width: 3px;    border-left-style: solid;    border-left-color: #990000;
    background-color: #FFFFFF;
    text-align: justify;    vertical-align: top;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;    display: block;
    overflow: scroll;
    padding: 20px;
}
.fot {
    position:absolute;
    left:50px;    top:693px;    width:800px;    height:20px;
    z-index:5;
    background-color: #990000;
    border-left-width: 3px;    border-left-style: solid;    border-left-color: #990000;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 9px;
    color: #FFFFFF;
    text-align: center;
    padding-top: 2px;
}
body {
    background-color: #999999;
}
.nyheter {
    position:absolute;
    left:656px;    top:317px;    width:177px;    height:367px;
    z-index:4;
    background-color: #CCCCCC;
    overflow: auto;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    padding: 10px;
}
h2 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
}

.huvud {
    position:absolute;
    left:50px;
    top:62px;
    width:800px;
    height:230px;
    z-index:7;
    background-image: url(images/henrik1.jpg);
    border-left-width: 3px;
    border-left-style: solid;
    border-left-color: #990000;
    visibility: default;
}
</style>
<script language="javascript">
//function vertGrow that moves the page down
function vertGrow(fotPos){
	//moving the 'fot' down to the value you have already chose
	document.getElementById("fot").style.top = fotPos;
	//making 'nyheter' grow to fit the new position of the 'fot'
	hei = fotPos - 693;
	hei2 = hei + 367;
	document.getElementById("nyheter").style.height = hei2;
}

</script>
</head>

<body>
<div class="top" id="top">

</div>

<div class="meny" id="meny">

</div>

<div class="fot" id="fot">

</div>

<div class="nyheter" id="nyheter">

</div>

<div class="huvud">
</div>


</body>
</html>

Ryan Fait · #3 Dec 16th, 2006, 10:22

Yikes, that's a lot of code.

I'm working on a sticky footer article. It's better than anything I've seen out there! Give me a day or two and I'll have it done!

berraf · #4 Dec 16th, 2006, 10:45

Quote:

Originally Posted by ryanfait

I'm working on a sticky footer article. It's better than anything I've seen out there! Give me a day or two and I'll have it done!

I´ll gladly wait

ukgeoff · #5 Dec 16th, 2006, 10:55

Also have a look at the template system available from the stcky in the css forum.

That has a header, a central section with three columns and a footer. Which ever of the three columns is the longest, the footer will move down to allow for it.

cheataweb · #6 Dec 16th, 2006, 15:10

didn't mean to post all that code this is the only stuff that i added to the original code

Code: Select all

<script language="javascript">
function vertGrow(fotPos){
	document.getElementById("fot").style.top = fotPos;
	hei = fotPos - 693;
	hei2 = hei + 367;
	document.getElementById("nyheter").style.height = hei2;
}

</script>

i used this in one of my earlier sites and it worked a treat for me.

ukgeoff · #7 Dec 16th, 2006, 17:26

You should not be using JavaScript to achieve these ends. If JavaScript is disabled for any reason, your design is stuffed.

Ryan Fait · #8 Dec 16th, 2006, 23:18

I agree that JavaScript shouldn't be used here. It will look messy in most browsers if the window is resized, too.

LinkBacks (?) LinkBack to this Thread: http://webforumz.com/web-page-design/10953-need-page-to-grow-vertically.htm
Posted By	For	Type	Date
PHP Web Statistik 2.1.04	This thread	Refback	Jan 18th, 2007 09:56

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Page does not stay vertically centered in IE using CSS	needhelppls	Web Page Design	10	Jan 28th, 2008 23:56
vertically center text	alexgeek	Web Page Design	2	Aug 14th, 2007 12:47
Rotating vertically	grizzlyman	Starting Out	2	Apr 7th, 2007 19:46
cell won't align to top vertically	CSpoon	Web Page Design	12	Oct 4th, 2006 00:22
centering vertically	benbacardi	Web Page Design	17	May 27th, 2004 13:51

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Need page to grow vertically