HTML Forum

**jlite** · 02-16-2010, 02:44 PM

I am a novice designer who has designed this site for my father. I have a grey background at the top that I need reduced in size by half in order to raise my main area shifted up higher. Here is an screenshot of my webpage.

The coding I have for the top area is:

<BODY onLoad="MM_preloadImages('images/menu1_1.gif')">
<table cellspacing="0" cellpadding="0" style="width:100%; height:100%">
<tr>
<td style="width:50%; height:100%; background-image:url(images/left_repeat.gif); background-repeat:repeat; background-position:right top"></td>
<td style="width:730px; height:100%; background-image:url(images/top.gif); background-repeat:no-repeat">
<table cellspacing="0" cellpadding="0" style="height:100%; width:729px">
<tr>
<td style="width:729px; height:89px"></td>
</tr>
<tr>

I'm not sure if I put up info of the coding. I really would appreciate your help. This has me stumped.

The next step is to reduce some of the grey from both sides but I would like to start with the top.

Thanks again

**vangogh** · 02-16-2010, 11:39 PM

I'm not sure that you've posted all your code so the issue may be in something you haven't posted, but I think the issue is likely with this line of code:

<td style="width:729px; height:89px"></td>

Try reducing the height to something less than 89px and see if that helps. Try 45px since you want to reduce the space by about half.

**jlite** · 02-16-2010, 11:58 PM

Thanks for responding. That is what I thought initially and changed it to 45px previously, but this was the result.

**oasmat** · 02-17-2010, 10:55 AM

Try putting this in between the head tag.

<style type="text/css">

</style>

If this doesn't work place a link to the site.

**vangogh** · 02-17-2010, 02:58 PM

Changing to 45px did work then, but only on part of the site. There might be another line of code similar to the one you changed that's also set for 89px or if not then the problem is something else in the code.

The problem on this end is I don't think we're seeing the rest of the code. If this page is online or if you could put it somewhere online could you provide a link to it? That will be the easiest way for us to see what might be wrong and offer a solution.

If there's no way to have the page online at the moment could you post all of your code so we could see the rest?

**jlite** · 02-17-2010, 05:20 PM

Thanks, I really appreciate your help. Here is the page online.

**jlite** · 12:09 PM

Here is more coding:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE></TITLE>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<LINK HREF="style.css" TYPE="text/css" REL="stylesheet">




<script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<style type="text/css">
<!--
.style2 {font-size: 17px; color: #771412; font-family: Verdana, Arial, Helvetica, sans-serif;}
.style3 {color: #771412}
-->
</style></HEAD>
<BODY onLoad="MM_preloadImages('images/menu1_1.gif')">
<table  cellspacing="0" cellpadding="0" style="width:100%; height:100%">
  <tr>
    <td  style="width:50%; height:100%; background-image:url(images/left_repeat.gif); background-repeat:repeat; background-position:right top"></td>
    <td  style="width:730px; height:100%; background-image:url(images/top.gif); background-repeat:no-repeat">
        <table  cellspacing="0" cellpadding="0" style="height:100%; width:729px">
          <tr>
            <td  style="width:729px; height:89px"></td>
          </tr>
           <tr>
            <td  style="width:729px; height:544px; background-image:url(images/left_shad.gif); background-repeat:repeat-y">
            
                <table  cellspacing="0" cellpadding="0" style="">
                  <tr>
                    <td  style="width:729px; height:544px; background-image:url(images/right_shad.gif); background-repeat:repeat-y; background-position:right top">
                        <table  cellspacing="0" cellpadding="0">
                          <tr>
                            <td  style="width:729px; height:537px">
                                <table  cellspacing="0" cellpadding="0">
                                  <tr>
                                    <td  style="width:6px; height:537px"></td>
                                    <td  style="width:717px; height:537px">
                                        <table  cellspacing="0" cellpadding="0">
                                          <tr>
                                            <td  style="width:717px; height:3px"></td>
                                          </tr>
                                          <tr>
                                            <td  style="width:717px; height:531px">
                                                <table  cellspacing="0" cellpadding="0">
                                                  <tr>
                                                    <td  style="width:180px; height:531px; background-image:url(images/red_bg_repeat.jpg); background-repeat:repeat-y">
                                                        <table  cellspacing="0" cellpadding="0">
                                                          <tr>
                                                            <td  style="width:172px; height:182px">
                                                                <br style="line-height:51px">
                                                                <a href="index-1.html"><img src="http://www.webmaster-talk.com/images/cpname.gif" alt="" border="0" style="margin-left:5px"></a>                                                            </td>
                                                          </tr>
                                                          <tr>

**vangogh** · 02-19-2010, 07:31 PM

The link helped. Before I give you the solution the main problem is really the overall code. I realize you're a novice and it looks like you're using DreamWeaver. Understand the main problem is the structure of your html is far too complex. The page could have been developed with about 1/5th the code you're using.

I'm not saying that to be mean, but I want to drive you to learn more so that you will be able to develop a page like this with much less code.

Ok ready for the solution. You do have to reduce the height of of that one table cell like I mentioned above. The reason it wasn't working is because your image (top.gif) is too big. You'll have to also reduce the height of that image. You should be able to make it the same height as whatever you set that one table cell height to be.

Let me know if that works.

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!