[RESOLVED] [HTML/CSS] Images in table row
Basically, what I need is a table row/cell to make up a heading using images.
I have 4 images per heading. One for the background, that can be repeated. One for the left edge that should sit OVER the background image. One for the title itself that should also be positioned over the background. And one for the right edge. The whole thing should have 100% width.
This:
Code:
td align=top height=23 width="100%" style="background-image: url(xxxxxxxx);">
<img src="xxxxx" style="left: 0px; top: 0px;" />
<img src="xxxxx" style="top: 5px; left: 29px;"/>
<img src="xxxxx" style="right: 0px; top: 0px; "/>
</td>
Does not work. The background appears, but the whole cell has a 1 px border around it, plus it is too tall. The images are all exactly 23 px tall but the cell renders at 27px tall. The background image appears to be UNDER the border, so that the bottom of it is 1 px above the bottom of the other two images.
Plus, my 4th image is not right-aligned. I suspect this is due to my rather large lack of knowledge of CSS. It's a little hard to describe as I am unable to post a picture of it.
Any ideas on how to fix?
Re: [HTML/CSS] Images in table row
You need to set the border width to 0px to make it transparent. Also I suspect that your table's Cellpadding and cellspacing are not set to 0px either thus rendering the row height taller then your 23px's. ;)
Re: [HTML/CSS] Images in table row
have you tried setting the cellspacing and cellpadding properties of the table to zero? and of course having border property as 0?
well i hope i understood it correct :D
Re: [HTML/CSS] Images in table row
oops sorry RB didn't see your post there ;) I type really slow :cry:
Re: [HTML/CSS] Images in table row
Its ok. :)
Who's RB? RhinoBull? :D
Re: [HTML/CSS] Images in table row
borders and frames were off.
Setting cellpadding and cellspacing to 0 got rid of the border.
Now it is still 2/3 pixels taller than the images. I have made the height value smaller and it makes no difference.
Also, the right image is not right-aligned :)
Re: [HTML/CSS] Images in table row
I noticed that your placing the middle pix 5 px below the others. Could this be causing the extra height? Try placing it at zero just for the fun of it.
Re: [HTML/CSS] Images in table row
Quote:
Originally Posted by RobDog888
I noticed that your placing the middle pix 5 px below the others. Could this be causing the extra height? Try placing it at zero just for the fun of it.
Altering the "top" value seems to make no difference. It was 5 becaues the middle image was a smaller one, but then I made them all the same height and forgot to fix it. Still too tall though.
Re: [HTML/CSS] Images in table row
Quote:
Originally Posted by RobDog888
Its ok. :)
Who's RB? RhinoBull? :D
OOOOPSS sorry RDDDD
Re: [HTML/CSS] Images in table row
Without seeing its effects its hard to try to come up with anything else. I also hate HTML thats why I dont really do too many website projects.
Re: [HTML/CSS] Images in table row
Firstly you need to get rid of all that alignment rubbish from the HTML and do this:
HTML Code:
<td class="col">
<img class="img1" src="xxxxx" style="left: 0px; top: 0px;" />
<img class="img2" src="xxxxx" style="top: 5px; left: 29px;"/>
<img class="img3" src="xxxxx" style="right: 0px; top: 0px; "/>
<div class="clear"></div>
</td>
In the header part of your HTML inside style tags, have this:
Code:
.col {
background-image: url(xxxxxxxx);
border: 0px;
padding: 0px;
}
.col .img1 {
float: left;
}
.col .img1 {
float: center;
}
.col .img2 {
float: right;
}
.col .clear {
clear: both;
visibility: hidden;
}
Remember also the <tr> element will have a padding too, so you might need to remove that. Let us know if that works - if not I will have a go at replicating my end, if you supply me with a blank image of the appropriate size ;)
Re: [HTML/CSS] Images in table row
Its Super Amoeba to the rescue, AKA: VisualAd :thumb:
Re: [HTML/CSS] Images in table row
I have to use the rubbish, because my HTML code is inserted within the document. I don't have access to the header.
I can upload blank coloured images of the size I've been using if you want, give me a sec.
Re: [HTML/CSS] Images in table row
Use the style attribute then. ;)
Re: [HTML/CSS] Images in table row
Right it's almost there, but now it's going on to two lines for some reason.
i.e. the background picture is repeating twice (vertically), and the right-hand picture (the one with float:right;) is on the second line. Apart from that it's fine.
Here's my current cell code.
Code:
<td style="background-image: url(xxxxxxxxxx); border: 0px; padding: 0px;">
<img src="xxxx" style="float: left;" />
<img src="xxxx" />
<img src="xxxx" style="float: right;" />
</td>
Re: [HTML/CSS] Images in table row
If I remove style="float: right;" from the last image, then it goes onto one line, but the row is a few pixels too tall. And obviously the image is in the wrong place. If the attribute is present, then the row is double height and the image on the bottom half of the row. Adding "top: 0px;" makes no difference.
I'm really confused :(
Re: [HTML/CSS] Images in table row
Put the middle image last, like i've done here:
http://adam.codedv.com/test.html
Re: [HTML/CSS] Images in table row
OMG, as if that makes the difference. Stupid HTML :rolleyes:
Thanks Adam, and Rob and Oceane :)
Re: [RESOLVED] [HTML/CSS] Images in table row
Does that mean you solved it or gave up? :P
Re: [RESOLVED] [HTML/CSS] Images in table row
Putting the middle image last made it work, it looks great :)