Click to See Complete Forum and Search --> : HTML problem


Chris_Evans
05-28-2003, 05:42 PM
Hi there,
I've written a little bit of html ready for the next php script I'm writing, it looks like the following:


<img src="images/topleft.gif" align="left"><img src="images/middlebackground.gif" width="100%" height="200"><img src="images/topright.gif" align="right">


I just wondered if there was anyway of removing the little gap in between the two images?

Chris

jllydgnt
05-28-2003, 05:43 PM
Try setting the border attribute = 0 in each image.

Chris_Evans
05-28-2003, 05:47 PM
Like this?

<img.. border="0">

If so, no luck. :(

Thanks,

Chris

jllydgnt
05-28-2003, 05:53 PM
I think you need to take out the align attribute from each image. If I remember, that is used to control how stuff like text fits around the image, not where the image is layed out on a page. Use a table to control the placement of the image on the page.

Elizabeth
05-28-2003, 06:02 PM
Well, I think the align attribute does affect where the image shows up on the page, but if it were me, I would also use a table to control the placement of the images to make them butt up against each other.

Does that help?

-Elizabeth

stolzyboy
05-28-2003, 06:11 PM
hey Elizabeth

i'm pretty sure jllydgnt has his explanation a little better....

if you do align="center" in a <img> tag, it won't center it on the page, it tells whatever is by the img tag to do

so Elizabeth, you are somewhat correct, but simple

align="left"
align="right"
align="center"

in an <img> tag won't act the same as a <td> alignment

Elizabeth
05-29-2003, 09:44 AM
Correct me if I'm wrong, but img align=center isn't a true function. You can do img align=middle if you want the text to show up at the middle of either side of the img, but img align=right or align=left really will align it on the page (or within a cell or whatever).
If you are concerned about aligning the image around the text, you can use the img align=texttop, etc.

Here's a little more about it. (http://hotwired.lycos.com/webmonkey/teachingtool/image.html)

-Elizabeth

Elizabeth
05-29-2003, 10:55 AM
... regarding the original problem, wouldn't you want to do this:


<table border="0">
<tr>
<td><img src="leftmost image" align="right"></td>
<td><img src="center image"></td>
<td><img src="rightmost image" align="left"></td>
</tr>
</table>
This should make the images appear to be continuous across the row.

-Elizabeth

stolzyboy
05-29-2003, 10:59 AM
and if the td is wide enough so the images don't wrap

you can simple do

<img src=""><img src=""><img src="">

with no align's at all

two other att's you can use are vspace, and hspace, play around with those for spacing above and below the image (in pixels)

goldbug
05-29-2003, 11:00 AM
Perhaps its something not visible in a one-line scope.

Just for fun, try putting an hspace="0" attribute into each of the image tags, see if that helps. (or style="padding: 0px; margin: 0px;")

Also, you've got a width="100%" in the middle image. Some browsers do not like stuff like that, and would always need horizontal scrolling (the image would be 100% of the available width -- say your window width is 500px, if you make the middle image 100%, and the left and right images are 10px, your page would technically be 520px wide).
A different (an my preferred) solution is to use only the left and right images, and in whatever div/table cell you put them in, make the middle image the background.. it will widen (not scale) accordingly.

P.S.:
Please for crissakes, put in the alt="" attribute and title="" if you want a tooltip, and dont forget to close the tag ( ... /> )

Chris_Evans
05-29-2003, 11:45 AM
Hi there,
Thanks for all the info, I created the <td> tags but no luck, then I thought, cell padding/cell spacing = 0 should be in main table (lol - late night) - anyway by doing that it fixed the problem of the images being different sizes in terms of height.

Now I'm back to the main problem of images not joining against each other but I can't find find a way to fix this...

Anyway ideas?

Chris

stolzyboy
05-29-2003, 12:52 PM
this works




<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><img src="images/left_graphic.gif"></td><td><img src="images/middle_graphic.gif"></td><td><img src="images/right_graphic.gif"></td>
</tr>
</table>

Elizabeth
05-29-2003, 01:22 PM
If you're using Netscape, and you have line breaks as I showed you, the gap will show up because in Netscape a space is added for a line break (or at least that's how it used to be). Did you try stolzy's way? Keeping them on the same line could get rid of the gap.

-Elizabeth

Chris_Evans
05-29-2003, 02:13 PM
Hi there,
To give you an idea of what I've done, here's my current html instruction:


<body background="images/background.gif">
<table width="90%" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/topleft.gif" align="left" border="0"></td>
<td width="100%" align="center" background="images/middlebackground.gif"></td>
<td><img src="images/topright.gif" align="right"></td>
</tr>
</table>
</body>


Obviously with <html> etc tags.

The problem is this:

I need the following:

|||

But I get:

| | |

Thanks,

Chris

stolzyboy
05-29-2003, 02:20 PM
keep the td's inline like


<td><img src="images/topleft.gif" align="left" border="0"></td><td width="100%" align="center" background="images/middlebackground.gif"></td><td><img src="images/topright.gif" align="right"></td>

Chris_Evans
05-29-2003, 02:39 PM
No luck. :(

stolzyboy
05-29-2003, 02:41 PM
is your site viewable online anywhere

stolzyboy
05-29-2003, 02:44 PM
use this


<td><img src="images/topleft.gif"></td><td><img src="images/middlebackground.gif"></td><td><img src="images/topright.gif"></td>


and take the width out of the table tab too

Chris_Evans
05-29-2003, 02:55 PM
Hmm.. not viewable yet since I haven't uploaded anything. I have got a current site but just started on this design so not much help on that one, sorry.

All the problem is is a minute :rolleyes: gap between two cells... that's the whole problem. I've removed cellpadding and cellspacing (both now = 0) and although there is a difference it's not quite enough. Just another millimetre or so.

I could give you a screenshot of the problem.

Included now. ;)

Forget the last image since I haven't created it yet. he he. :)

Chris

Chris_Evans
05-29-2003, 02:57 PM
Hmm, forgot to include the image. :rolleyes: :D

You can just about see the gap, there's sort of a line right through the middle. ;)

stolzyboy
05-29-2003, 03:20 PM
did you take out the width and use the code i sent you

i have done this numerous times and with the provided code it works wonderful and there is NO reason it shouldn't, unless your table is too wide, which is why i say take out the width attribute on the table, if the images are in the td's, not backgrounds to the td's they will fill them up and stretch w/o a width being set

Chris_Evans
05-29-2003, 03:24 PM
Did as you said, doesn't fill it though. Just stays at 10x200 pixels.

That's why I set the width to 100% originally, then to background.

Elizabeth
05-29-2003, 03:41 PM
Not really a fix, but what I would do is set your background for the table the same color gray as the background of your images. Then if there is still a gap it will be invisible instead of black.

-Elizabeth

Chris_Evans
05-29-2003, 03:53 PM
He he, true, but then I'd have a grey line between the black area. :| I'm getting annoying now lol

goldbug
05-29-2003, 05:17 PM
As much as it hurts my brain to put in stuff like width="" attributes, I came up with this:

<body bgcolor="#FF0000">
<table width="90%" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="100"><img src="images/topleft.gif" border="0" alt="" /></td>
<td align="center" background="images/middlebackground.gif">&nbsp;</td>
<td width="100"><img src="images/topright.gif" border="0" alt="" /></td>
</tr>
</table>
</body>


Verified in IE6, Mozilla 1.3, Opera 7.

Note: I made the background red for border checking/visibility, and change the widths of the first and last cells to the width of your image, or less (0).

jllydgnt
05-30-2003, 11:32 AM
Originally posted by stolzyboy
this works




<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><img src="images/left_graphic.gif"></td><td><img src="images/middle_graphic.gif"></td><td><img src="images/right_graphic.gif"></td>
</tr>
</table>


WOW! I would never have guessed this post would have gotten this many replies. The above code works great (as does goldbug's)and should have solved his problem. I hope Chris_Evans was able to fix it.

stolzyboy
05-30-2003, 11:36 AM
yeah I am at a loss to what he is doing wrong, but it works in every instance I have used it

jllydgnt
05-30-2003, 11:37 AM
That will work too, but it shouldn't matter. Whitespace will be ignored by the browser.

Chris_Evans
05-30-2003, 12:40 PM
Originally posted by stolzyboy
yeah I am at a loss to what he is doing wrong, but it works in every instance I have used it

Who said I was doing anything wrong? :D

Anyway, this works:


<body bgcolor="#FF0000">
<table width="90%" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="100"><img src="images/topleft.gif" border="0" alt="" /></td>
<td align="center" background="images/middlebackground.gif">&nbsp;</td>
<td width="100"><img src="images/topright.gif" border="0" alt="" /></td>
</tr>
</table>
</body>


I just changed the width to the correct amounts.

Thanks. :)

Chris

stolzyboy
05-30-2003, 12:43 PM
Who said I was doing anything wrong?

obviously you were since it didn't work :) , glad you got it sorted out

Chris_Evans
05-30-2003, 02:00 PM
True lol