PDA

View Full Version : Picture Align HTML

dudeking
March 12th, 2006, 08:24 PM
Hi just spent the weekend making a site taking the p*** out of my mates.
Had a few problems on this page though.
http://www.jobsagoodun.ltd.uk/mervin/fun.htm
Any one know how I can get rid of the space between the images?
Thanks for and help.
Dudeking:D

Heres the HTML:-

<html>
<head>
<title>
Mervin Fan Site - Games
</title>
<LINK REL=stylesheet HREF="style.css" TYPE="text/css">
</head>
<center>
<body>
<table>
<tr>
<td colspan="2" class="title1">
Merv's Fun Box
</td>
</tr>
<tr>
<td class="link1" valign="top">
<a href="index.htm">
Home
</a>
<br>
<br>
<a href="pic.htm">
Pictures
</a>
<br>
<br>
<a href="http://www.a-free-guestbook.com/guestbook.php?username=dudeking">
Guest Book
</a>
<br>
<br>
<a href="fun.htm">
Fun
</a>
<br>
<br>
<a href="link.htm">
Links
</a>
</td>
<td cellpadding="0" class="title2">
<div class="linkp">
<a href="javascript:void(0)" onmouseover="image1.src='merv1.jpg';"
onmouseout="image1.src='fra1.jpg';">
<img name="image1" border="0" vspace="0px" hspace="0px" src="fra1.jpg">
</a>
<a href="javascript:void(0)" onmouseover="image2.src='merv2.jpg';"
onmouseout="image2.src='fra2.jpg';">
<img name="image2" border="0" vspace="0px" hspace="0px" src="fra2.jpg">
</a>
<br>
<a href="javascript:void(0)" onmouseover="image3.src='merv3.jpg';"
onmouseout="image3.src='fra3.jpg';">
<img name="image3" border="0" vspace="0px" hspace="0px" src="fra3.jpg">
</a>
<a href="javascript:void(0)" onmouseover="image4.src='merv4.jpg';"
onmouseout="image4.src='fra4.jpg';">
<img name="image4" border="0" vspace="0px" hspace="0px" src="fra4.jpg">
</a>
<br>
<br>
Which Head Is Bigger?
</div>
</td>
</tr>
</table>
</body>
</center>
</html>
dudeking
March 12th, 2006, 08:36 PM
I have just looked and there are no gaps in Internet Explorer, Only In Firefox.
degsy
March 12th, 2006, 08:36 PM
Some of the white is in your image
http://www.jobsagoodun.ltd.uk/mervin/fra3.jpg

you haven't cropped it correctly.
dudeking
March 12th, 2006, 09:05 PM
I know there not croped correctly not realy bothered about that.
Ill crop the images again tomorrow when the script works.
But the pictures in firefox have about a 5/10px gap between the images.
Its not there in internet explorer.
30111987
March 13th, 2006, 08:11 AM
this is a complete guess
try putting a bit in your css for the image class

as in
img {
border: 0px;
margin: 0px;
padding: 0px;
}

it could be a problem with ff, it has a tendency to force a 3px gap in annoying places (still better than ies css handling tho)
dudeking
March 13th, 2006, 04:25 PM
Thanks 30111987, (http://www.cybertechhelp.com/forums/member.php?u=4416)
Ill try that now, I always find that FF handles CSS better than IE.

Ill post back in a bin and told you how I got on.

Also If I get two pictures the same size what is the best way to crop them into 4 quaters?
As you can see from my attempt using photoshops crop tool really didnt work:D
dudeking
March 13th, 2006, 04:46 PM
Unfortunatly it didnt work:(

Look at the attatchment.
Cant work it out.

Thanks any way 30111987 (http://www.cybertechhelp.com/forums/member.php?u=4416):D:D
rockboy
March 13th, 2006, 08:38 PM
You should recrop the images to make the mouseout/mouseover images the same size.

Put the images in a 2x2 table instead of using line breaks and character spacing to align them.

Each table row should have images the same height and each column should have images the same width. Instead of doing that you might be able to use valign and align in the td cells to overcome the image size differences. Align the cell contents to the center of the table. (e.g. row 1 cell 1 to the bottom right, cell 2 to the bottom left. row 2 cell 1 to the top right, cell 2 to the top left.)

I really doubt you'll get good results without proper image cropping though.
Murf
March 13th, 2006, 08:48 PM
Try using "Layers" 4 of them, one for each pix. Then you can move the layer around to match the lines up.
Decay
March 14th, 2006, 03:27 AM
The problem is html says it doesn't care about white spaces but IT DOES .. ... remove all white spaces... like so...

<td><a href="javascript:void(0)" onmouseover="this.src='merv1.jpg';" onmouseout="this.src='fra1.jpg';"><img name="image1" src="fun_files/fra1.jpg" border="0"></a><a href="javascript:void(0)" onmouseover="this.src='merv2.jpg';" onmouseout="this.src='fra2.jpg';"><img name="image2" src="fun_files/fra2.jpg" border="0"></a><br/><a href="javascript:void(0)" onmouseover="this.src='merv3.jpg';" onmouseout="this.src='fra3.jpg';"><img name="image3" src="fun_files/fra3.jpg" border="0"></a><a href="javascript:void(0)" onmouseover="this.src='merv4.jpg';" onmouseout="this.src='fra4.jpg';"><img name="image4" src="fun_files/fra4.jpg" border="0"></a></td>