[ Date Index ][
Thread Index ]
[ <= Previous by date /
thread ]
[ Next by date /
thread => ]
On Monday 12 Jan 2004 7:36 pm, Neil Williams wrote:
On Monday 12 Jan 2004 1:31 am, David Johnson wrote: Take a look at this image: images/welcomeTOPover.gif View it on it's own and it's got a yellow border - is that intentional? It becomes a problem because your version of the welcome banner is ever so slightly larger than the original. If you remove the yellow bar from the image, you should find the banner is easier to control.
If you actually copy that yellow bar into another image (select, copy, paste as new from Gimp), you can have the nice border on the right edge. You can also add position:absolute;top:0;left:0 to this <div> and you won't need all that =0 gubbins in BODY in CSS either.
<div style="width:760px;border:0;margin:0;padding:0px;background-color:#000099;"<a href="index.php"><img src="images/welcomelogo.gif" alt="WelcomeLogo"></a> <a href="accomm1.php" onmouseover="document.accom.src='images/accomodationTOPover.gif'" onmouseout="document.accom.src='images/accomodationTOP.gif'"><img src="images/accomodationTOP.gif" id="image1" name="accom" alt="Holiday homes to suit all pockets"></a> <a href="entertain1.php" onmouseover="document.entertain.src='images/entertainmentTOPover.gif'" onmouseout="document.entertain.src='images/entertainmentTOP.gif'"><img src="images/entertainmentTOP.gif" id="image2" name="entertain" alt="Check out this season's entertainment"></a> <a href="funpools1.php" onmouseover="document.pools.src='images/funpoolsTOPover.gif'" onmouseout="document.pools.src='images/funpoolsTOP.gif'"><img src="images/funpoolsTOP.gif" id="image3" name="pools" alt="The super Tropicana Fun Pools"></a> <a href="facilities1.php" onmouseover="document.fac.src='images/parkfacilitiesTOPover.gif'" onmouseout="document.fac.src='images/parkfacilitiesTOP.gif'"><img src="images/parkfacilitiesTOP.gif" id="image4" name="fac" alt="Shopping and Recreation at Welcome"></a> <a href="around1.php" onmouseover="document.around.src='images/aroundaboutTOPover.gif'" onmouseout="document.around.src='images/aroundaboutTOP.gif'"><img src="images/aroundaboutTOP.gif" id="image5" name="around" alt="A host of Local Attractions"></a> <a href="brochure.php" onmouseover="document.broc.src='images/welcomeTOPover.gif'" onmouseout="document.broc.src='images/welcomeTOP.gif'"><img src="images/welcomeTOP.gif" id="image6" name="broc" alt="Request a brochure"></a>
</div> <div style="position:absolute;top:0;left:755px;"><img src="images/endbar.png" alt="bar"></div> <img src="images/wavyline.gif" alt="line"> instead of ending with:
<br/> <img src="images/wavyline.gif" alt="line"> </div>
Note how the endbar.png (I tend to change GIF->PNG) is positioned to overlap the <div> above by 5 pixels. This is to encompass the graduation within the blue.
Use that to completely replace the table AND change the brochure image to remove the yellow bar - just turn it background blue.
or cut it off the image completely. (Remember to adjust the image width in the #image6 id in CSS.) email me off list if you'd like me to send the three images and the complete HTML to you by reply. You can use the same principle to get rid of that nasty second table too - tables are for DATA (W3C decision). BTW. You could do with a dummy index.html file in http://home.david-web.co.uk/wfhp/images/ PS, doing it this way makes it at least half-presentable in text browsers too. -- Neil Williams ============= http://www.codehelp.co.uk/ http://www.dclug.org.uk/ http://www.isbn.org.uk/ http://sourceforge.net/projects/isbnsearch/ http://www.biglumber.com/x/web?qs=0x8801094A28BCB3E3
Attachment:
pgp00077.pgp
Description: signature