Problem with the size of the page

kaashaas · 02-11-2011, 02:56 PM

Hi everyone, I'm not an very experienced web designer and I need a little help, I've a very simple site now but there's one problem I can't solve:
My page is a lot longer than all the objects on the site. I've only used simple html and css code:

index.htm:

Code:

<html>
<head>
<link rel="stylesheet" type="text/css" href="topnav.css">
<body>

<center>
<div class='img' id='img1'>
</div>
<table id='topnav'><tr><td>
<a href='index.htm' class='topnav'><b>Home<b></a>
</table>
<div id='img2'>
</div>
<div id='img3'>
</div>
<table id='lnav'><tr id='lnav'><td id='lnav'>
<a href='index.htm' class='lnav'><b>></b>Home</a>
</table>
</center>

topnav.css:

Code:

#img1
{
background: #BBFFBB;

width: 700px;

height: 90px;

margin: 0 px;

padding: 0 px;

border: 3px solid #DDFFDD;

-moz-border-radius: 15px;

-webkit-border-radius: 15px;

border-radius: 15px;

behavior: url(border-radius.htc)

}

#topnav
{
position:relative;
width:700px;
}

a.topnav:link
{
color: ;
text-decoration: none;
font-family:"Arial", Arial, Arial;
font-weight: bold;
font-size:20px;
}

a.topnav:visited
{
color: ;
text-decoration: none;
font-family:"Arial", Arial, Arial;
font-weight: bold;
font-size:20px;
}

a.topnav:hover
{
color: ;
text-decoration: none;
font-family:"Arial", Arial, Arial;
font-weight: bold;
font-size:20px;
}

a.topnav:active
{
color: ;
text-decoration: none;
font-family:"Arial", Arial, Arial;
font-weight: bold;
font-size:20px;
}

#img2
{
background: #DDFFDD;

width: 95%;

height: 2px;

margin: 0 px;

padding: 0 px;
Position: relative;
}

#img3
{
background: #DDFFDD;

width: 2px;

height: 500px;

margin: 0 px;

padding: 0 px;
Position: relative;
right:280px;
border: 1px solid black;
}

#lnav
{
position: relative;
bottom:500px;
right:373px;
width:180px;
height:500px;
vertical-align: top;
border: 1px solid black;
}

a.lnav:link
{
color: ;
text-decoration: none;
font-family:"Arial", Arial, Arial;
font-size:14px;
}

a.lnav:visited
{
color: ;
text-decoration: none;
font-family:"Arial", Arial, Arial;
font-size:14px;
}

a.lnav:hover
{
color: ;
text-decoration: none;
font-family:"Arial", Arial, Arial;
font-size:14px;
}

a.lnav:active
{
color: ;
text-decoration: none;
font-family:"Arial", Arial, Arial;
font-size:14px;
}

I really hope you guys can help me out!
Thanks a lot.

Excavator · 02-11-2011, 03:08 PM

Hello kaashaas,
I'm not sure what you mean. Your #lanav tables have a height specified at 500px. You should not be using tables for this.

See the links about validation in my signature line. There are some very basic errors found by both validators that need fixed. You should also have a look at the link about tables there.