Chappers Posted July 5, 2006 Share Posted July 5, 2006 HiCan't get to grips with this seemingly simple problem! I'll see if I can explain it so my madness makes some sense. Bear with me, coding (even just HTML) isn't my strong point.I've set out a webpage so that there is a middle section giving the appearance of a sheet of paper on the page, within which is the content of the page. So basically it's one long column of background colour, then a few images to give borders to the middle section, then another long column.To get the top of this worked out I've got this code:[code]<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"><table width="100%" align="center" cellspacing="0" cellpadding="0" border="0"><tr><td colspan="5"> </td></tr><tr><td class="columns" width="18%"></td><td class="layout-top-left"></td><td class="layout-top-middle"></td><td class="layout-top-right"></td><td class="columns" width="18%"></td></tr><tr><td class="columns" width="18%"></td><td class="layout-left-side"></td><td align="center" bgcolor="#FFFFFF"><!-- CONTENT START--><table width="100%" align="center" cellspacing="0" cellpadding="8" border="0"><tr><td>CONTENT</td></tr></table><!-- CONTENT END --></td><td class="layout-right-side"></td><td class="columns" width="18%"></td></tr><tr><td class="columns" width="18%"></td><td class="layout-bottom-left"></td><td class="layout-bottom-middle"></td><td class="layout-bottom-right"></td><td class="columns" width="18%"></td></tr></table></body>[/code]Where columns create the left and right main columns of background colour, and the layouts are two corner images and one center image which repeats horizontally to fill the whole column between corner images. The classes are in a CSS file as:[code]td.columns{background-image: url(/images/layout/columns.gif);background-repeat: repeat;}td.layout-top-left{background-image: url(/images/layout/top-left.gif);background-repeat: no-repeat;height: 12px;width: 12px;}td.layout-top-middle{background-image: url(/images/layout/top-middle.gif);background-repeat: repeat-x;height: 12px;}[/code]and so on for them all.I wanted to add a coloured bar 16 pixels high to run along the 'piece of paper' to act as a separator for a logo I planned to add later. So I created a left image, center image to repeat horizontally, and right image to end the bar. I then did entries into the CSS file in the same manner as above and added the HTML to this section:[code]<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"><table width="100%" align="center" cellspacing="0" cellpadding="0" border="0" bordercolor="#000000"><tr><td colspan="5"> </td></tr><tr><td class="columns" width="18%"></td><td class="layout-top-left"></td><td class="layout-top-middle"></td><td class="layout-top-right"></td><td class="columns" width="18%"></td></tr><tr><td class="columns" width="18%"></td><td class="layout-left-side"></td><td align="center" bgcolor="#FFFFFF"><table width="100%" align="center" cellspacing="0" cellpadding="0" border="0"><tr><td class="layout-bar-left"></td><td class="layout-bar-middle"></td><td class="layout-bar-right"></td></tr></table><br><!-- CONTENT START--><table width="100%" align="center" cellspacing="0" cellpadding="8" border="0">[/code]with all the rest of the code unaltered beneath this too. But the middle section is not showing (layout-bar-middle) even though the code in the CSS file is the same as for the other middle section of the 'paper' border, set to background-repeat: repeat-x. However, if I turn the table border on to "1" for the table containing the red bar sections, it shows and repeats as it should do, with the only trouble being the gaps between the edge images due to the border! Otherwise, it just shows the left edge image in its correct position, a blank space going halfway along the table, then the right edge image, which is therefore nowhere near where it should be (end of TD).What have I done wrong? Why does it work with the other layout which makes the 'paper' borders?Thanks for any help,James Quote Link to comment Share on other sites More sharing options...
bobleny Posted July 5, 2006 Share Posted July 5, 2006 lol <table width="100%" align="center" cellspacing="0" cellpadding="0" border="0" bordercolor="#000000">If there’s no border, then there is no bordercolor!That of course is not your problem. I would like to see what’s happening. So, if you could provide a link to the page? Quote Link to comment Share on other sites More sharing options...
Chappers Posted July 5, 2006 Author Share Posted July 5, 2006 Thanks for your reply.[quote]lol <table width="100%" align="center" cellspacing="0" cellpadding="0" border="0" bordercolor="#000000">If there’s no border, then there is no bordercolor![/quote]Umm, not sure why you find a perceived mistake by a confessed amateur as funny, but there is a reason I've placed a bordercolor there even though the border is off: when building a page, I like to have the border on for some parts so that I can see exactly what I'm doing, and where I may have made a mistake in the layout of the cells. I find a black thin border easier to work with than the default light-grey one. The border is set on and off depending on what I'm doing at the time. When a page is finished I 'clean' the code up.Incidentally, you'll notice that the same code is repeated in the top and bottom boxes, albeit for the bit of extra code in the bottom box, which handles the red bar I am referring to. If you look, the top box does not have the [i]bordercolor[/i] present, yet the bottom one does for the same table. This is because when I pasted the top lot of code, I had the presence of mind to pre-empt someone ridiculing the bordercolor with border turned off, and wanted to avoid needing to explain myself, so deleted it. However, I forgot to remove it when pasting the same code into the bottom box. ;)Anyway, here is the website link:[url=http://jamesqb.xlphp.net/index.php]http://jamesqb.xlphp.net/index.php[/url]You'll see two little red images at the top of the white window... these are the left and right ends to what should be a long red banner. The center section, which should consist of a 1x16 pixel image repeating along the length of the column, is not showing at all. The long red banner beneath is to show what happens when the border is turned on for that table. I'm sure I'm doing something silly, or not allowable/normal in HTML.Thanks again for your reply.James Quote Link to comment Share on other sites More sharing options...
bobleny Posted July 5, 2006 Share Posted July 5, 2006 Sorry, didn't mean to rag on you. I understand, what you mean. At the top I noticed that it says, "<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">".Now, because it says that, you should use that to validate you html page. I did it for you and it says you have 13 errors. I think if you use the W3C validation thingy and fix those errors, it might work! If not, we will help you fix it! If you go through the validation, and don't know how to fix the error we will help you!Before you do this, though, I recommend that you put "<!-- -->" Around your javascripts so that the html valuator doesn’t alert on that.http://validator.w3.org/ Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.