Re: [LUG] HTML/CSS Gurus - Help!

[Neil Williams <linux@xxxxxxxxxxxxxx>]

On Monday 12 Jan 2004 1:31 am, David Johnson wrote:
> Hi everyone,
>
> I've been having a major problem with a site I'm re-developing for a
> client. I've spent months trying to fix this one problem and got absolutely
> nowhere, so I'd be *extremely* grateful for any help.

I've got the two HTML versions and the two css files and the initial 
impression is that the original HTML is awful. 
:-)

> If you take a look at http://home.david-web.co.uk/wfhp/ and compare it to
> the original at http://www.welcomefamily.co.uk/, at the top of the page you
> can see that there is some kind of border or spacing between the navigation
> images row of the table and the row below, which is on my version of the
> site, but not on the original.

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.

You should abandon the table layout for presentational reasons - it won't work 
the way you want it to work. Use CSS for the whole job:
(It does work, I've just tested it.)

In style.css
#image1 {border:0px;padding:0 5px 0 4px;margin:0px;width:95px;height:78px;}
#image2 {border:0px;padding:0 5px 0 4px;margin:0px;width:90px;height:78px;}
#image3 {border:0px;padding:0 5px 0 4px;margin:0px;width:80px;height:78px;}
#image4 {border:0px;padding:0 5px 0 4px;margin:0px;width:86px;height:78px;}
#image5 {border:0px;padding:0 5px 0 4px;margin:0px;width:111px;height:78px;}
#image6 {border:0px;padding:0 5px 0 4px;margin:0px;width:78px;height:78px;}

In the HTML (the div style settings can go into the style sheet as a class or 
id - I just did it this way whilst testing.) Always specify a UNIT for CSS 
measurements <> 0.

<div 
style="width:760px;border:0;margin:0;padding:0px;background-color:#000099;">
<a href="index.php"><img src="images/welcomelogo.gif" alt="Welcome Logo"></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>
<br/>
<img src="images/wavyline.gif" alt="line">
</div>

Use that to completely replace the table AND change the brochure image to 
remove the yellow bar - just turn it background blue.

> I've been trying to get rid of it so that everything looks how it should,
> but I just can't no matter what I try. The same problem exists in every

Tables won't do this anymore. To write a valid table you'd need to use 
<colgroup><col></colgroup> with spans and widths and these simply won't give 
you the kind of control you want.


-- 

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: pgp00076.pgp
Description: signature