Css Height issue

**wog** · 05-07-08, 08:42 PM

Hey guys, im an old member but changed my name....

anyways... i have got a friends website here that im current doing for him, first time im using CSS.

I have a problem, i want the website's height to always be the screen height, as in, i dont want the very right scroll bar to appear as its all contained within the window,
im having problems in doing it...

ill post up the CSS here, see if you can help me, thanks guys

Code:

body {
	background-color: #000000;
	text-align: center;
	margin: 0px auto;
	font-family: tahoma;
	font-size: 11px;
}
#container {
	width: 700px;
	height:500px;
	margin: 0px auto;
	text-align: left;
}
#header {
	width: 660px;
	height: 39px;
	padding: 20px;
	background-image: url(images/header2.jpg);
	background-repeat: repeat-x;
	text-decoration: none;
	color: #000000;
}
	#header a {
		align: centre;
		padding-left: 50px;
		padding-right: 50px;
		color: #fff;
		font-weight: bold;
		text-decoration: none;
	}
		#header a:hover {
			text-decoration: underline;
		}
#hnav {
	width: 700px;
	background: url(images/navigation-bg.jpg) repeat-x;
	height: 25px;
	padding-top: 7px;
}
	#hnav a {
		align: centre;
		padding-left: 50px;
		padding-right: 50px;
		color: #fff;
		font-weight: bold;
		text-decoration: none;
	}
		#hnav a:hover {
			text-decoration: underline;
		}

#content {
	width: 699px;
	height: 600px;
	background-color: #FFFFFF;
	#border: 1px solid #484848;
	float: left;

}
	#content .header {
	background: url(images/content-header-bg.jpg) repeat-x;
	#height: 19px;
	width: auto;
	text-align: center;
	#border: 1px solid #454545;
	padding-top: 4px;
	padding-left: 10px;
	padding-right: 10px;
	font-weight: bold;
	text-decoration: none;
		
	}
	#content .text {
	#border-left: 2px solid #454545;
	#border-right: 1px solid #454545;
	#border-bottom: 1px solid #454545;
	width: 678px;
	height: 600;
	padding: 10px;
	overflow: auto;
	background-color: #FFFFFF;
	background-attachment: fixed;
	background-image: url(images/navona-back.jpg);
	background-repeat: repeat-x;
	background-position: center;
	}
#footer {
	width: 690px;
	background: url(images/footer-bg.jpg) repeat-x;
	height: 23px;
	padding: 5px;
	#margin-top: 2px;
	color: #cbcbcb;
	font-size: 12px;
}
.end {
	clear: both;
}

i know its a mess...

also, im having problems with IE its playing up, if you want the whole site, just write here and ill post it up

thanks heaps guys if your able to hlep

and thiank you for reading

**PhillTheQuad** · 05-07-08, 08:52 PM

wats url

**wog** · 05-07-08, 09:51 PM

ive just uploaded it to my test thingy

Piazza Navona

hopefully ill get the passwords and permissions for the actual site...

note: not all pages have been updated yet

**wog** · 05-07-08, 09:52 PM

by the way, ill remove hte site on sunday, as i dont want it up on that host for too long

**PhillTheQuad** · 06-07-08, 10:32 AM

#container {
width: 700px;
height:500px;
just try changing the height in different areas
till u find it.
use a copy of the file too.

**wog** · 06-07-08, 10:56 AM

i had it like that, with a set height, although i built the site with a laptop, as soon as i tested it on the desktop, it was TINY
i dont mind the width, as thats all i need in it, its just the height thats anoying

**PunX0r** · 06-07-08, 01:35 PM

Bit rusty on my css skills, but cant u set it to a % rather then a pixel size?

**wog** · 07-07-08, 09:40 PM

yeah, when i use the % the background image doesnt fully show....

oh well... dont matter, its alright for now... .i jsut increased the whole height of the doc, so that with the lappy u gotta scroll down to view the whole page...

now the next thing, in IE it looks really weird, any fixes or is it just stupid microsoft?

thanks heaps for your help guys

much appreciated

LinkBacks (?) LinkBack to this Thread: http://www.austech.info/web-site-design-development/8207-css-height-issue.html
Posted By	For	Type	Date
Web Site Design & Development [Archive] - Austech	This thread	Refback	27-07-08 07:07 PM

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

05-07-08, 08:52 PM	#2 (permalink)
PhillTheQuad Quadmeister iTrader: (7) Join Date: Jan 2008 Location: nelson bay Posts: 618 Spent time on board: 2 Weeks, 4 Days and 10:46:49	wats url

05-07-08, 09:51 PM	#3 (permalink)
wog Junior Member iTrader: (0) Join Date: Jun 2008 Posts: 18 Spent time on board: 5:25:29	ive just uploaded it to my test thingy Piazza Navona hopefully ill get the passwords and permissions for the actual site... note: not all pages have been updated yet

05-07-08, 09:52 PM	#4 (permalink)
wog Junior Member iTrader: (0) Join Date: Jun 2008 Posts: 18 Spent time on board: 5:25:29	by the way, ill remove hte site on sunday, as i dont want it up on that host for too long

06-07-08, 10:32 AM	#5 (permalink)
PhillTheQuad Quadmeister iTrader: (7) Join Date: Jan 2008 Location: nelson bay Posts: 618 Spent time on board: 2 Weeks, 4 Days and 10:46:49	#container { width: 700px; height:500px; just try changing the height in different areas till u find it. use a copy of the file too.

06-07-08, 10:56 AM	#6 (permalink)
wog Junior Member iTrader: (0) Join Date: Jun 2008 Posts: 18 Spent time on board: 5:25:29	i had it like that, with a set height, although i built the site with a laptop, as soon as i tested it on the desktop, it was TINY i dont mind the width, as thats all i need in it, its just the height thats anoying

06-07-08, 01:35 PM	#7 (permalink)
PunX0r Premium Member iTrader: (1) Join Date: Jan 2008 Location: Tha Gong Posts: 286 Spent time on board: 1 Week, 5 Days and 10:15:31	Bit rusty on my css skills, but cant u set it to a % rather then a pixel size?

07-07-08, 09:40 PM	#8 (permalink)
wog Junior Member iTrader: (0) Join Date: Jun 2008 Posts: 18 Spent time on board: 5:25:29	yeah, when i use the % the background image doesnt fully show.... oh well... dont matter, its alright for now... .i jsut increased the whole height of the doc, so that with the lappy u gotta scroll down to view the whole page... now the next thing, in IE it looks really weird, any fixes or is it just stupid microsoft? thanks heaps for your help guys much appreciated

Sponsored Links

Sponsored Links