WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > Browser Compatibility > [SOLVED] Entire page is too tall. Div height doesn't work.

Reply
  Thread Tools Display Modes
Old 4th November 09, 08:46 PM   #1
Akeru
WLC Member
 
Join Date: Nov 2009
Posts: 7
Default Entire page is too tall. Div height doesn't work.

Hi! I've run into a problem.

I've got a page I'm working on with lots of positioned <div>s, and my problem is the page is about twice as tall as the layout itself. You can scroll down for a whole screen or two of "white space" depending on resolution. I've tried setting the height of the main container div, which didn't work. I've also tried setting the height of the <body> and <html> tags, which I'm not even sure you can do.

The problem is my page it way too tall and I can't figure out how to fix it.

Should I post the HTML and CSS code for y'all?

P.S. I'm self taught in HTML and CSS. I can use them, but I'm probably doing it wrong. I fiddle with stuff until it works, but I'm stumped on this one.

Thanks for the help.
Akeru is offline   Reply With Quote
Old 5th November 09, 12:19 AM   #2
meesa
WLC Mod
 
meesa's Avatar
 
Join Date: Jul 2009
Location: Milky Way Galaxy
Posts: 3,715
Default Re: Entire page is too tall. Div height doesn't work.

Please post a link. Of if you don't have it online, then your HTML and CSS. Preferably the link.

Also, you may want to validate your pages.
HTML: http://validator.w3.org
CSS: http://jigsaw.w3.org/css-validator
__________________
Praise be to the Lord God for the ability to learn, the capability to analyze, and the time to help users on this forum.
meesa is offline   Reply With Quote
Old 5th November 09, 03:18 AM   #3
Akeru
WLC Member
 
Join Date: Nov 2009
Posts: 7
Default Re: Entire page is too tall. Div height doesn't work.

Thanks for the links to the validators. I had around 35 errors. Anyway, still have the height problem. I'll .rar my site and upload it to mediafire.

Thanks for your response!

Here's the .rar
http://www.mediafire.com/file/otzgk0vmzzr/OMO Clan.rar

<fake signature removed>

Last edited by chrishirst; 5th November 09 at 09:26 AM.
Akeru is offline   Reply With Quote
Old 5th November 09, 05:59 AM   #4
meesa
WLC Mod
 
meesa's Avatar
 
Join Date: Jul 2009
Location: Milky Way Galaxy
Posts: 3,715
Default Re: Entire page is too tall. Div height doesn't work.

Could you just post you HTML and CSS? I don't like just downloading things (Security precaution)
When I said if you have it online, I meant as in it was a live website.

Nonetheless, your HTML and CSS will do.
__________________
Praise be to the Lord God for the ability to learn, the capability to analyze, and the time to help users on this forum.
meesa is offline   Reply With Quote
Old 5th November 09, 10:20 PM   #5
Akeru
WLC Member
 
Join Date: Nov 2009
Posts: 7
Default Re: Entire page is too tall. Div height doesn't work.

Okay, I can do that. I'll just post the raw code. I figured images might be important to the layout because that's what most of it is built around.

Code:
<!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" xml:lang="en" lang="en">
<head>
<!-- Minus AutoDato -->
<title>]Clan oMo[.net</title>
<META NAME="Generator" CONTENT="Stone's WebWriter 3.5">
<link rel="stylesheet" type="text/css" href="main.css"></link>
</head>
<body height="800">
<div align="center" id="main">

<div id="header">
<a href="index.html"><img src="images/OMOclan_01.png" alt="image"></img></a>
</div>


<div id="navigation">
	<div id="links">
	<a>Link</a><br/>
	<a>Link</a><br/>
	<a>Link</a><br/>
	<a>Link</a><br/>
	<a>Link</a><br/>

	</div>
</div>


<div id="boxone">
	<div class="avatar">
	<img border="0" src="images.jpg" alt="image"></img>
	</div>
	<div class="title">
	Rock Anthem for Saving the World
	</div>

	<div class="bodytext">
	Testing testing one two three. What will happen nobody knows! 	Testing testing one two three. What will happen nobody knows! 	Testing testing one two three. What will happen nobody knows! 	Testing testing one two three. What will happen nobody knows! 	Testing testing one two three. What will happen nobody knows! 	Testing testing one two three. What will happen nobody knows! 	Testing testing one two three. What will happen nobody knows! 	Testing testing one two three. What will happen nobody knows! 	Testing testing one two three. What will happen nobody knows! 
	</div>
</div>
<div id="boxtwo">
	<div class="avatar">
	<img border="0" src="images.jpg" alt="image"></img>
	</div>
	<div class="title">
	Rock Anthem for Saving the World
	</div>

	<div class="bodytext">
	Testing testing one two three. What will happen nobody knows! 	Testing testing one two three. What will happen nobody knows! 	Testing testing one two three. What will happen nobody knows! 	Testing testing one two three. What will happen nobody knows! 	Testing testing one two three. What will happen nobody knows! 	Testing testing one two three. What will happen nobody knows! 	Testing testing one two three. What will happen nobody knows! 	Testing testing one two three. What will happen nobody knows! 	Testing testing one two three. What will happen nobody knows! 
	</div>

</div>

<div id="login" align="left"> <br /><br />
<span id="logtxt"><a>Login</a>/<a>Register</a></span>
</div>

<div id="chatbox" align="left"><br /><br /><br /><br />

<span id="chat">Chatbox goes here! :U</span>
</div>

	<div id="affiliates">

	</div>
<div id="footer">

</div>

</div>
</body>
</html>
Code:
#main{
color:#000000;
height:800px;
}

#header{
}

#navigation{
background-image:url('images/OMOclan_02.png');
width:313px;
height:229px;
margin:0px;
border:0px;
position:relative;
left:-345px;
}

#links{
font-family:Courier New;
font-size:16px;
color:#000;
position:relative;
left:50px;
top:50px;
}

#boxone{
z-index: 2;
background-image:url('images/OMOclan_03.png');
font-family:Trebuchet MS;
font-size:12px;
height:75px;
width:376px;
margin:0px;
border:0px;
position:relative;
top:-229px;
}

#boxtwo{
z-index: 2;
background-image:url('images/OMOclan_03.png');
font-family:Trebuchet MS;
font-size:12px;
height:75px;
width:376px;
margin:0px;
border:0px;
position:relative;
top:-44px;
}

.bodytext{
z-index: 1;
font-family:Trebuchet MS;
background-image:url('images/stretching.png');
margin:0px;
border:0px;
padding:0px;
position:relative;
top:-20px;
font-size:12px;
padding:10px;
}

.avatar{
z-index: 3;
background-color:#333333;
height:64px;
width:75px;
position:relative;
left:-144px;
top:3px;
}

.title{
font-family:Courier New;
font-size:12px;
font-weight: bold;
color:#ffffff;
position:relative;
top:-40px;
left:20px;
}

#login{
background-image:url('images/OMOclan_04.png');
width:311px;
height:90px;
margin:0px;
border:0px;
position:relative;
left:343px;
top:-379px;
}

#chatbox{
background-image:url('images/OMOclan_05.png');
width:311px;
height:356px;
margin:0px;
border:0px;
position:relative;
left:343px;
top:-379px;
}

#chat{
position:relative;
height:100%;
left:20px;
top:70px;
}

#logtxt{
position:relative;
height:100%;
left:30px;
top:15px;
font-family:Courier New;
font-size:16px;
color:#000;
}

#affiliates{
background-image:url('images/OMOclan_07.png');
width:311px;
height:217px;
margin:0px;
border:0px;
position:relative;
left:-344px;
top:-596px;
}

#footer{
background-image:url('images/OMOclan_09.png');
margin:0px;
border:0px;
height:199px;
width:1000px;
position:relative;
top:-596px;
}


body{
background-image:url('images/Background.png');
}

img{
border:0;
}

a{
color:#09AE00;
font-family:trebuchet MS;
text-decoration:underline;
}

a:hover{
color:#00FF00;
}

input{
position:relative;
left:10px;
}

There ya go. Also, if you have any general advice about web design, I'm all ears. I feel like my methods aren't the most efficient.

Thanks for the help.
Akeru is offline   Reply With Quote
Old 5th November 09, 11:06 PM   #6
meesa
WLC Mod
 
meesa's Avatar
 
Join Date: Jul 2009
Location: Milky Way Galaxy
Posts: 3,715
Default Re: Entire page is too tall. Div height doesn't work.

Here is the modified HTML

Code:
<!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" xml:lang="en" lang="en">
<head>
<!-- Minus AutoDato -->
<title>]Clan oMo[.net</title>
<meta name="Generator" content="Stone's WebWriter 3.5" />
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
Anything after that wasn't touched.

Then with CSS, I just added

Code:
body{
overflow:hidden;
margin:0;
padding:0;
}
I'm also going to point out a few flaws.

Images should be
<img src="" alt="" />

BR's should be
<br /> (Note the space)

Don't use align="" instead use CSS for it. Give the DIV a set width, then give it a margin left-right of auto. You can also display it as inline, and skip the setting width; this may cause layout problems.
__________________
Praise be to the Lord God for the ability to learn, the capability to analyze, and the time to help users on this forum.
meesa is offline   Reply With Quote
Old 6th November 09, 12:29 AM   #7
Akeru
WLC Member
 
Join Date: Nov 2009
Posts: 7
Default Re: Entire page is too tall. Div height doesn't work.

Thank you so much for fixing the height problem, and for your tips. I appreciate the help!

Edit:

Actually, how can I center the whole page with CSS? I only found "text-align", which centers the text but not the whole page. I suppose I could just use the align="" or the <center> tag because it works, but I don't want to use depreciated or invalid HTML.

No big deal, but what'd be the best way to do this?
Akeru is offline   Reply With Quote
Old 6th November 09, 02:02 AM   #8
meesa
WLC Mod
 
meesa's Avatar
 
Join Date: Jul 2009
Location: Milky Way Galaxy
Posts: 3,715
Default Re: Entire page is too tall. Div height doesn't work.

The best way is to give your #main a set width (I believe you have it set to 800px) and then set it's margin to auto.
__________________
Praise be to the Lord God for the ability to learn, the capability to analyze, and the time to help users on this forum.
meesa is offline   Reply With Quote
Old 6th November 09, 03:05 AM   #9
Akeru
WLC Member
 
Join Date: Nov 2009
Posts: 7
Default Re: Entire page is too tall. Div height doesn't work.

Okay, thanks for your help!
Akeru is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 06:48 AM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.