Hello!
I have this problem:
When I try to change old Joomla’s boring graphics, new images (icons in Joomla’s contact form) are turn to be misaligned one against another.
In other words, I want to know how to move PNG image a little left or right to achieve the desired effect on a page.
I do have a Joomla module that can help me with custom CSS for a sigle page, but I don’t know what CSS code to input. And also I don’t know whether HTML code also needs to be updated.
Any ideas?
We need to see it in its entirety. With Firebug we can then quite easily analyze matters. Do you have the site online, and if not: can you put it online?
You can still see the Joomla’s original icons there. 4 of them, actually. So when I change the image of those, how I could move then them left or right, so then would position themselves nicely?
That also depends on the new images, particularly their size. Can you replace the old for the new?
It looks to me like the HTML presently allows 40px for the width of the images. You might wish to add {text-align:center} to the first <td>, or you might not. If center alignment is not satisfactory, then add a little {margin-left:} to each [foreground] image to tweak it’s horizontal position. You cannot move them to the left. You can increase the width of that first column to something more than 40px, in which case the text will actually move to the right instead.
Outlines added around table and table-cells make them easy to visualize without affecting their dimensions.
You need to learn how to use CSS to replace the antiquated attributes.
valign=“top” could be written as CSS {vertical-align:top}
Hope this helps.
Frank S I replaced the images, so now you can see them not aligned right. I’ll try another trick to see what I can do.
ronpat Thanks, but in order for me to implement what you say, you’d have to explain to me exactly in a step by step fashion what should be done. Otherwise, it’s in vain, 'cos I simply don’t know how to do it.
P.S. Hmm, it’s funny, but I seem to solve the problem by adding some extra transparent space on the left side of the lower icon.
Okay, I’ll just leave it for now and I would do the same with the rest.
Thanks anyhow!