...

View Full Version : Loooooooooong web page



pikminman
10-21-2009, 09:15 PM
Hello all!

This is my first time posting here. I'm developing a site for some window company and I've run into a spot of trouble. I'm wondering if anyone here could help me. In Firefox and Chrome, my webpage shows up really really long. i.e. there is lots of whitespace after the webpage. Oddly, this doesn't happen in IE.

Here's the code. I tested it and you can see the problem with just 2 files; index.html and style.css

index.html:

<!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>
<title>Royal Windows</title>
<LINK href = "style.css" rel = "stylesheet" type = "text/css"/>
<LINK REL="SHORTCUT ICON" HREF="images/favicon.ico"/>
</head>

<body>


<div class = "container">
<div class = logo><img src = "images/logo.PNG" alt = "Royal Windows" width = "70" height = "70"/><h1>Royal Windows</h1><br/><img src = "images/line.jpg" class = "line"/></div>

<div class = "padding2">
</div>

<div class = "linkbox">
<div class = "rollover">
<table border = "0" height = "65%" width = "100%">
<tr><td>&nbsp;&nbsp;&nbsp;<a href = "index.html">Home</a></td></tr>
<tr><td>&nbsp;&nbsp;&nbsp;<a href = "about.html">About</a></td></tr>
<tr><td>&nbsp;&nbsp;&nbsp;<a href = "info.html">Information</a></td></tr>
<tr><td>&nbsp;&nbsp;&nbsp;<a href = "products.html">Products</a></td></tr>
<tr><td>&nbsp;&nbsp;&nbsp;<a href = "gallery.html">Gallery</a></td></tr>
<tr><td>&nbsp;&nbsp;&nbsp;<a href = "legal.html">Legal</a></td></tr>
<tr><td>&nbsp;&nbsp;&nbsp;<a href = "contact.html">Contact</a></td></tr>
</table>
</div>
</div>


<div class = "padding1">
</div>



<div class = "infobox">
<br/>
<b>Royal Windows</b> has been supplying the Trade with Quality Windows and doors since 1989.<br/><br/>Royal Windows currently employ 23 staff in total in a production and sales capacity. This dedicated team pride themselves on manufacturing windows and doors to the Highest Standards backed up by Exceptional Customer Service. <br/><br/><b>Tel:</b> 1890 907 445<br/><b>Mobile:</b> 086 8513849
</div>
<div class = "slideshow">
<object>
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="slideshow_as2.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#222222" />
<embed src="slideshow_as2.swf" quality="high" bgcolor="#222222" width = "100%" height = "100%" name="slideshow_as2" allowScriptAccess="sameDomain" type = "application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</div>
<div class = "bottom">
<table width = "760px">
<tr>
<td align = "left">
Copyrightę 2009 Royal Windows, all rights reserved.
</td>
<td align = "right">
Website design: <a href = "mailto:darajavaherian@gmail.com" class = "mailink"><img src = "images/names.bmp" border = "0"/></a><br/>
</td>
</tr>
</table>
</div>
<table class = "profbox1">
<tr>
<td align = "center">
<img src = "images/logo1.png">
</td>
<td align = "center">
<img src = "images/logo2.bmp">
</td>
<td align = "center">
<img src = "images/logo3.bmp">
</td>
<td align = "center">
<img src = "images/logo4.bmp">
</td>
<td align = "center">
<img src = "images/logo5.bmp">
</td>
<td align = "center">
<img src = "images/logo6.bmp">
</td>
</tr>
</table>
</div>

<br/><br/>
</body>

</html>

style.css

body{
font-family: sans-serif;
text-align: center;
background-image: url("images/path-to-stripe.png");
}

.logo{
position: relative;
top: -5px;
height: 75px;
}

.line{
position: absolute;
height: 1px;
width: 600px;
top: 70px;
}

.bottom{
position: absolute;
top: 505px;
width: 100%;
font-size: 10px;
background-color: #0a0a0a;
}

.bottom2{
position: absolute;
top: 1505px;
width: 100%;
font-size: 10px;
background-color: #0a0a0a;
}

h1{
position: relative;
top: -89px;
left: 100px;
font-size: 45px;
font-weight: 100;
color: ivory;
}
.linkbox{
position: relative;
top: -430px;
width: 130px;
height: 430px;
background-image: url('images/grad.PNG');
font-size: 13px;
}

.profbox1{
position: relative;
top: -1700px;
width: 100%;
border: 0;
}

.profbox2{
position: relative;
top: -1430px;
width: 100%;
border: 0;
}

.linkbox2{
position: relative;
top: -1440px;
width: 130px;
height: 1440px;
background-image: url('images/grad.PNG');
font-size: 13px;
}

.infobox{
position: relative;
top: -1290px;
left: 580px;
background-image: url('images/grad1.PNG');
width: 160px;
height: 420px;
font-size: 11px;
color: #777777;
padding-left: 10px;
padding-bottom: 5px;
padding-top: 5px;
padding-right: 10px;
}

.padding1{
position: relative;
top: -860px;
left: 300px;
width: 50%;
height: 430px;
}
.container{
position: relative;
text-align: left;
margin:0 auto;
width: 760px;
height: 524px;
}


.padding2{
position: relative;
top: 0px;
left:14%;
width: 40%;
height: 430px;
}

.about{
position: relative;
top: 1px;
left: 130px;
padding-left: 7px;
padding-right: 7px;
padding-top: 1px;
background-color: #151515;
color: #aaaaaa;
width: 616px;
height: 1440px;
}

.slideshow{
position: relative;
top: -1720px;
left: 130px;
background-color: #f7f7f7;
width: 450px;
height: 430px;
}

a:link{
font-family: sans-serif;
font-size: 16;
color: #999999;
text-decoration: none;
}

a:visited{
font-family: sans-serif;
color: #999999;
text-decoration: none;
font-size: 16;
}

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

.mailink:link{
font-family: sans-serif;
font-size: 10;
color: black;
text-decoration: none;
}

td{
color: #777777;
font-size: 10;
font-family: sans-serif;
}

.rollover td {
width: 173px;
height: 25px;
background: transparent url(images/grad2.PNG) no-repeat;
color: e0e0e0;
}

.rollover td:hover {
background-position: -175px 0;
color: e0e0e0;
}

jolly_nikki
10-21-2009, 10:57 PM
I removed the div tag with class padding1 and padding2


<!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>
<title>Royal Windows</title>
<LINK href = "style.css" rel = "stylesheet" type = "text/css"/>
<LINK REL="SHORTCUT ICON" HREF="images/favicon.ico"/>
</head>

<body>


<div class = "container">
<div class = "logo"><img src = "images/logo.PNG" alt = "Royal Windows" width = "70" height = "70"/><h1>Royal Windows</h1><br/><img src = "images/line.jpg" class = "line"/></div>
<div class = "linkbox">
<div class = "rollover">
<table border = "0" height = "65%" width = "100%">
<tr><td>&nbsp;&nbsp;&nbsp;<a href = "index.html">Home</a></td></tr>
<tr><td>&nbsp;&nbsp;&nbsp;<a href = "about.html">About</a></td></tr>
<tr><td>&nbsp;&nbsp;&nbsp;<a href = "info.html">Information</a></td></tr>
<tr><td>&nbsp;&nbsp;&nbsp;<a href = "products.html">Products</a></td></tr>
<tr><td>&nbsp;&nbsp;&nbsp;<a href = "gallery.html">Gallery</a></td></tr>
<tr><td>&nbsp;&nbsp;&nbsp;<a href = "legal.html">Legal</a></td></tr>
<tr><td>&nbsp;&nbsp;&nbsp;<a href = "contact.html">Contact</a></td></tr>
</table>
</div>
</div>

<div class = "infobox">

<b>Royal Windows</b> has been supplying the Trade with Quality Windows and doors since 1989.<br/><br/>Royal Windows currently employ 23 staff in total in a production and sales capacity. This dedicated team pride themselves on manufacturing windows and doors to the Highest Standards backed up by Exceptional Customer Service. <br/><br/><b>Tel:</b> 1890 907 445<br/><b>Mobile:</b> 086 8513849
</div>
<div class = "slideshow">
<object>
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="slideshow_as2.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#222222" />
<embed src="slideshow_as2.swf" quality="high" bgcolor="#222222" width = "100%" height = "100%" name="slideshow_as2" allowScriptAccess="sameDomain" type = "application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</div>
<div class = "bottom">
<table width = "760px">
<tr>
<td align = "left">
Copyrightę 2009 Royal Windows, all rights reserved.
</td>
<td align = "right">
Website design: <a href = "mailto:darajavaherian@gmail.com" class = "mailink"><img src = "images/names.bmp" border = "0"/></a><br/>
</td>
</tr>
</table>
</div>
<table class = "profbox1">
<tr>
<td align = "center">
<img src = "images/logo1.png">
</td>
<td align = "center">
<img src = "images/logo2.bmp">
</td>
<td align = "center">
<img src = "images/logo3.bmp">
</td>
<td align = "center">
<img src = "images/logo4.bmp">
</td>
<td align = "center">
<img src = "images/logo5.bmp">
</td>
<td align = "center">
<img src = "images/logo6.bmp">
</td>
</tr>
</table>
</div>

</body>

</html>

Changed the value of attribute top accordingly


body{
font-family: sans-serif;
text-align: center;
background-image: url("images/path-to-stripe.png");
}

.logo{
position: relative;
top: -5px;
height: 75px;
}

.line{
position: absolute;
height: 1px;
width: 600px;
top: 70px;
}

.bottom{
position: absolute;
top: 505px;
width: 100%;
font-size: 10px;
background-color: #0a0a0a;
}

.bottom2{
position: absolute;
top: 1505px;
width: 100%;
font-size: 10px;
background-color: #0a0a0a;
}

h1{
position: relative;
top: -89px;
left: 100px;
font-size: 45px;
font-weight: 100;
color: ivory;
}
.linkbox{
position: relative;
width: 130px;

background-image: url('images/grad.PNG');
font-size: 13px;
}

.profbox1{
position: relative;
top: -300px;
width: 100%;
border: 0;
}

.profbox2{
position: relative;
top: -1430px;
width: 100%;
border: 0;
}

.linkbox2{
position: relative;
top: -1440px;
width: 130px;
height: 1440px;
background-image: url('images/grad.PNG');
font-size: 13px;
}

.infobox{
position: relative;
top: -130px;
left: 580px;
background-image: url('images/grad1.PNG');
width: 160px;

font-size: 11px;
color: #777777;
padding-left: 10px;
padding-bottom: 5px;
padding-top: 5px;
padding-right: 10px;
}

.padding1{
position: relative;
top: -860px;
left: 300px;
width: 50%;
height: 430px;
}
.container{
position: relative;
text-align: left;
margin:0 auto;
width: 760px;
height: 524px;
}


.padding2{
position: relative;
top: 0px;
left:14%;
width: 40%;
height: 430px;
}

.about{
position: relative;
top: 1px;
left: 130px;
padding-left: 7px;
padding-right: 7px;
padding-top: 1px;
background-color: #151515;
color: #aaaaaa;
width: 616px;
height: 1440px;
}

.slideshow{
position: relative;
top: -340px;
left: 130px;
background-color: #f7f7f7;
width: 450px;
height: 430px;
}

a:link{
font-family: sans-serif;
font-size: 16;
color: #999999;
text-decoration: none;
}

a:visited{
font-family: sans-serif;
color: #999999;
text-decoration: none;
font-size: 16;
}

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

.mailink:link{
font-family: sans-serif;
font-size: 10;
color: black;
text-decoration: none;
}

td{
color: #777777;
font-size: 10;
font-family: sans-serif;
}

.rollover td {
width: 173px;
background: transparent url(images/grad2.PNG) no-repeat;
color: e0e0e0;
}

.rollover td:hover {
background-position: -175px 0;
color: e0e0e0;
}

Hope this helps

oracleguy
10-21-2009, 11:56 PM
Make sure to run your page through the W3C validator, I see some problems in your code that could cause issues later if they aren't already.

You also shouldn't be using tables for layout. Like your menu should be done using an unordered list instead of a table.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum