Help with HTML/CSS code.

Pulse · 1 Dec 2006 at 18:18

Hope someone can help with these problems,

1. I have a gap at the top of a webpage that i want to get rid of; so that the very top of the actual website is touching the top of the window its displayed in. <sorted>

and 2. is it possible to have a variable height on the middle section of a webpage that goes from top to bottom of the window its in?

ie. it has a Title, a middle section that 'stretches' when the display window's height is increased or decreased and then a sort of footer(that doesnt change height)

toString · 1 Dec 2006 at 18:28

I think you should post some code...

Pulse · 1 Dec 2006 at 18:36

Code:

body { background: #000000; }

img { display: block; } /*to fix the gap with IE and Firefox*/

#Whole {margin-left: auto;
margin-right: auto;
width: 587px;}

#buttons {background-image:url(images/Buttons.jpg);
height:50px;}

#links {text-align:center;
position: relative;
top: 12px;
left: 230px;
width: 336px;}

#Main {padding-top: 20px;
width: 587px;
height: auto;
background-color:#797979}

that ok?

Augmented · 1 Dec 2006 at 18:41

Pulse said:
1. I have a gap at the top of a webpage that i want to get rid of; so that the very top of the actual website is touching the top of the window its displayed in.

Code:

body {
margin: 0;}

Pulse · 1 Dec 2006 at 18:46

Augmented said:
Code:

body { margin: 0;}

thanks

Mr_L · 1 Dec 2006 at 19:16

Pulse said:
2. is it possible to have a variable height on the middle section of a webpage that goes from top to bottom of the window its in?

ie. it has a Title, a middle section that 'stretches' when the display window's height is increased or decreased and then a sort of footer(that doesnt change height)

This is what you want, I think. CSS Layout: 100% Height

Pulse · 1 Dec 2006 at 19:18

Mr_L said:
This is what you want, I think. CSS Layout: 100% Height

YES!

edit: erm, need some help applying it

edit: edit: amended code but still not working :confused:

Code:

body { background: #000000;
margin: 0;
padding:0;
height:100%; }

img { display: block; } /*to fix the gap with IE and Firefox*/

#Whole {position:relative;
height:auto !important;
min-height:100%;
height:100%;
margin:0 auto;
width: 587px;

}

#buttons {background-image:url(images/Buttons.jpg);
height:50px;}

#links {text-align:center;
	position: relative;
	top: 12px;
	left: 230px;
	width: 336px;
}

#Main {padding-top: 20px;
width: 587px;
background-color:#797979;
padding-bottom: 20px;}

#Footer {background-image:url(images/footer.jpg);
height:22px;
bottom:0;
margin:0;}


#Picture{border: 2px solid #FF9600;}

#Picture:hover {border: 2px solid #FFF;}

#links a { text-decoration: none; color: #fff;}

#links a:hover { text-decoration: none; color: #ff9900;}