Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Page inexplicably long

Status
Not open for further replies.
ID10T16

ID10T16

Technical User
Sep 22, 2000
160
US
I have a mix of a single column table with a few rows with one primary row that contains the content. I am using quite a few divs to stack elements (mainly images) the way I need. I have all of the divs aligned relative to their position in the table. My problem is that the page gets very long, very quick. It extends down way past the content. It almost seems that the page is twice as long as it needs to be, like there is a phantom of each element that is making the page long.

This is my first time to attempt a design like this, so I know I'm either doing something inefficiently, or I've simply neglected to do something basic.

Here's my code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<SCRIPT language=Javascript>
var nav;
home_over=new Image(69,32);
home_over.src="homec.png";
home_out=new Image(69,32);
home_out.src="home.png";
about_us_over=new Image(99,32);
about_us_over.src="about_usc.png";
about_us_out=new Image(99,32);
about_us_out.src="about_us.png";
worship_over=new Image(88,36);
worship_over.src="worshipc.png";
worship_out=new Image(88,36);
worship_out.src="worship.png";
ministries_over=new Image(105,32);
ministries_over.src="ministriesc.png";
ministries_out=new Image(105,32);
ministries_out.src="ministries.png";
recovery_over=new Image(96,36);
recovery_over.src="recoveryc.png";
recovery_out=new Image(96,36);
recovery_out.src="recovery.png";
support_over=new Image(89,36);
support_over.src="supportc.png";
support_out=new Image(89,36);
support_out.src="support.png";
</SCRIPT>


<style type="text/css">

#dropmenudiv{
position:absolute;
background-color: #888888;
border:1px solid black;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:1;

}

#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
color:#000000
}

#dropmenudiv a:hover{
background-color: #C8C8C8;
color:#FFFFFF
}


#dropmenudiv2{
position:absolute;
background-color: #888888;
border:1px solid black;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:10;
}

#dropmenudiv2 a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
color:#000000
}

#dropmenudiv2 a:hover{
background-color: #C8C8C8;
color:#FFFFFF
}

#calendar{;
padding-top: 15px;
padding-left: 0px;
font:bold 12px Verdana;
line-height:18px;
z-index:2;
}

#calendar a{
padding-left: 15px;
display: block;
text-indent: 3px;
text-decoration: none;
font-weight: bold;
color:#000000
}

#calendar a:hover{
color:#FFFFFF
}

. H3{
font-size: large;
font:bold Verdana;
word-spacing: 1px;
line-height:1px;
font-weight: bold;
color:#000000
}
</style>

<script type="text/javascript" src="menu_script.js">
</script>
<script type="text/javascript" src="menu_script2.js">
</script>
<script>
//Necessary for the Alpha Transparency of .png bg images (is not my own script)
var bgsleight = function() {

function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}

function fnLoadPngs() {
var rslt = navigator.appVersion.match(/MSIE (\d+\.\d+)/, '');
var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);
for (var i = document.all.length - 1, obj = null; (obj = document.all); i--) {
if (itsAllGood && obj.currentStyle.backgroundImage.match(/\.png/i) != null) {
fnFixPng(obj);
obj.attachEvent("onpropertychange", fnPropertyChanged);
}
}
}

function fnPropertyChanged() {
if (window.event.propertyName == "style.backgroundImage") {
var el = window.event.srcElement;
if (!el.currentStyle.backgroundImage.match(/x\.gif/i)) {
var bg = el.currentStyle.backgroundImage;
var src = bg.substring(5,bg.length-2);
el.filters.item(0).src = src;
el.style.backgroundImage = "url(x.gif)";
}
}
}

function fnFixPng(obj) {
var bg = obj.currentStyle.backgroundImage;
var src = bg.substring(5,bg.length-2);
obj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='scale')";
obj.style.backgroundImage = "url(x.gif)";
}




return {

init: function() {

if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent) {
addLoadEvent(fnLoadPngs);
}

}
}

}();

bgsleight.init();
</script>
</head>

<SCRIPT>
//allows me to maintain alpha transparency for .png images while doing image rollovers. (is my own)
function hover(nav)
{
{
document.images[nav].style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+nav+"c.png', sizingMethod='scale')";
}
}

function out(nav)
{
{
document.images[nav].style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+nav+".png', sizingMethod='scale')";
}
}
</SCRIPT>

<body background="bg.gif" style="background-repeat:repeat">
<center>
<table width="800" height="100%" hspace="0" vspace="0" border="0" cellpadding="0" cellspacing="0" style=" vertical-align:top"><tr><td colspan="10" background="main_top.png" style="background-repeat:no-repeat; background-position:center; ">&nbsp;</td></tr><tr align="left">
<td background="main.png" align="left" style="background-repeat:repeat-y;background-position:center; vertical-align:middle;">
<div id="body" style="background-color:#FFFFFF;width:550px;display:block;position:relative;top:250px;left:215px;z-index:1;">
<h1><center>Test</center></h1><br />
</div>
<div style="width:316px;height:115px;display:inline-block;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='logo.png');position:relative;z-index:20">
<img style="filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);" src="logo.png" width="316" height="115" border="0" align="left" alt="" />
</div>
<div style="width:634px;height:45px;display:inline-block;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='menu_bar.png');position:relative;top:-22px;left:55px;z-index:10">
<img style="filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);" src="menu_bar.png" width="634" height="45" border="0" align="left" alt="" />
</div>
<!-- Add Changes for Opera Via PHP switch -->
<div style="width:634px;height:45px;display:inline-block;position:relative;top:-59px;left:94px;z-index:11">
<a href=# onMouseover="hover('home');hidemenu()" onMouseout="out('home');">
<img style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='home.png',
sizingMethod='scale');" src="transparent.gif" width="69" height="32" border="0" align="left" alt="Home" id='home' /></a>
<a href='#' onMouseover="dropdownmenu(this, event, menu1, '150px', 0, -19, 'about_us');over('about_us')" onMouseout="delayhidemenu('about_us');">
<img style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src='about_us.png',
sizingMethod='scale');" src="transparent.gif" width="99" height="32" border="0" align="left" id='about_us' alt="About Calvary Baptist Church" />
</a>
<a href='#' onMouseover="dropdownmenu(this, event, menu2, '170px', 0, -23, 'worship')" onMouseout="delayhidemenu('worship')">
<img style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='worship.png',
sizingMethod='scale');" src="transparent.gif" width="88" height="36" border="0" id='worship' align="left" alt="Worship Options" />
</a>
<a href='#' onMouseover="dropdownmenu(this, event, menu3, '160px', 0, -19, 'ministries')" onMouseout="delayhidemenu('ministries')">
<img style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='ministries.png',
sizingMethod='scale');" src="transparent.gif" width="105" height="32" border="0" id='ministries' align="left" alt="Ministry Options" />
</a>
<a href='#' onMouseover="dropdownmenu(this, event, menu5, '150px', 0, -23, 'recovery')" onMouseout="delayhidemenu('recovery')">
<img style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='recovery.png',
sizingMethod='scale');" src="transparent.gif" width="96" height="36" border="0" id='recovery' align="left" alt="Calvary's Recovery Program for those in need" />
</a>
<a href='#' onMouseover="dropdownmenu(this, event, menu6, '150px', -25, -23, 'support')" onMouseout="delayhidemenu('support')">
<img style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='support.png',
sizingMethod='scale');" src="transparent.gif" width="89" height="36" border="0" id='support' align="left" alt="Calvary's Support Program" /></a>
</div>
<div style="height:400px;z-index:1;vertical-align:middle">
<div style="width:222px;height:429px;display:block;position:relative;top:-30px;left:-50px;z-index:1;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='events_bg.png')">
<img border="0" id="events_bg" src="transparent.gif" width="222" height"429" />
</div>
<div style="width:230px;height:65px;display:block;position:relative;top:-480px;left:-40px;z-index:1;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='upcoming_events.png')">
<img border="0" id="events_title" src="transparent.gif" width="230" height"65" />
</div>
<div style="width:123px;height:137px;display:block;position:relative;top:-465px;left:-5px;z-index:1;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='guest_image.png')">
<img border="0" id="guest_image" src="transparent.gif" width="123" height"137" />
</div>
<div style="width:214px;height:45px;display:block;position:relative;top:-635px;left:-47px;z-index:1;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='guest_name.png')">
<img border="0" id="guest_name" src="transparent.gif" width="214" height"45" />
</div>
<div style="width:230px;height:65px;display:block;position:relative;top:-515px;left:-70px;z-index:1;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='events_calendar.png')">
<img border="0" id="events_calendar_title" src="transparent.gif" width="230" height"65" style="float:left" />
</div>
<div align="left" id="calendar" style="width:224px;height:187px;display:block;position:relative;top:-515px;left:-15px;z-index:1;background-image:url(calendar_bg.png);background-repeat:no-repeat;">
<center><div style="font-size:medium;">October, 2006</div><br /></center>
<a href=#>This is a link test</a><br />
</div>
</div>
</td>
</tr><tr><td background="main_bottom.png" align="center" style="background-repeat:no-repeat; background-position:center;vertical-align:bottom;"><div style="height:60px;width:840px">Copyright Info</div></td></tr></table>
</center>
</body>
</html>






I appreciate any help, CONSTRUCTIVE criticism, and suggestions anyone can offer.
 
Sort by date Sort by votes
I discovered something...

When I highlight some of the relatively positioned <div><img/></div> elements, I can see the highlight in 2 places. The actual image is highlighted, but there is a highlight of what seems like nothing, but is the same size as the image, that appears down the page some. I am at a complete loss as to what I've done/not done to create this odd situation.

I hope this can help someone figure out what is going on. I don't have this posted online yet, but if need be I will temporarily post it so ya'll can see what is going on.
 
Upvote 0 Downvote
I've tried absolute positioning, but when viewed under different resolutions, it totally kills the layout.

However, it is very likely that I just don't know how to utilize positioning correctly, and therefore am up for ANY suggestions.

Here is a little more info about what I'm doing.

I have a background image that is a column more or less that needs to be centered. Also, this column needs to be able to grow along with the content. Currently I have a table with a top row with the top border image, a middle row with a repeating background image, and a bottom row with the bottom border.

This table is centered so no matter what resolution, it should look the same. I have then put all of the elements inside the table and relatively positioned them, so that the look will remain constant regardless of resolution.

Alot of the images are overlapping each other for a nice visual effect, but it seems the effect comes at a rendering nightmare.

hope this helps. Thanks again for all your help, and thank you BillyRay for your quick response.
 
Upvote 0 Downvote
First of all, ditch the table for the layout. You don't need it and there are much more suitable approaches.

Secondly, I'd suggest drawing the layout that you want on a bit of paper. This will show you all the different sections you need and will make it clearer once you come to design the page.

Finally, once you've created the design on paper, have a look about for some sample layouts that match yours. There are lots of already built templates that you can use and simply drop the relevant content into them. Have a look at as a starting point.


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.
 
Upvote 0 Downvote
Here's the image I have drawn up of what I'm trying to do.


Also, I have a couple questions:

1. If I position elements absolutely, but say have them inside of a table, will they be positioned versus the window or the table?

2. The reason I am using the table is because as far as I know, a table is the best way to have a repeating background so that the cell can grow with the content. Is there another way?
 
Upvote 0 Downvote
Ok, here it is, given that the design looks mostly fixed, I will explain what I see in this fixed design:

1. Checkered background on body.
2. Main container div centered and as wide as the grey area AND all the things that hang over the grey area. Proper background applied to this element. Use padding to push contents within the grey area.
3. Top menu div with an unordered list for a menu.
4. Floated left side with Upcoming Events and Events Calendar, which is probably a <h1> element for the title and whatever you need to use for text.
5. A clearing element at the bottom of the floats if need be.

None of it requires any positioning, it is just normal flow and floats. That is what I would go with.
 
Upvote 0 Downvote
Thank you for your help Vrag. After learning a little more about what I was doing, I managed a fix. I didn't realize just how much the flow of the content had to do with the relative positioning. So far I have placed the items in more suitable locations in the code, and was able to eliminate the problem. It may not be the most efficient method, but it is working.
Thank you again.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
205
lmcate
lmcate
pendle666
  • Locked
  • Question
Inserting same line of text of every web page - &quot;link&quot; insert? 1
Replies
6
Views
220
ChrisHirst
ChrisHirst
craigward
  • Locked
  • Question
Change IIS7 Default landing page
Replies
1
Views
125
feherke
feherke
tyutghf
  • Locked
  • Question
Slight page curl effect
Replies
3
Views
217
ChrisHirst
ChrisHirst
southbeach
  • Locked
  • Question
Rapid landing page development / templating 3
Replies
14
Views
430
southbeach
southbeach

Part and Inventory Search

Sponsor

Back
Top