We help IT Professionals succeed at work.

Joomla - HTML coding

raulmonda asked
Medium Priority
Last Modified: 2012-05-12
hi experrts,

New in Joomla, HTML, etc , im working on a small project. In the "sample.jpg " you can see how it looks like. I want to add few images (like the icon for PADI) in the left side of the page, with links leading to other sites. Ive managed to do that with the PADI icon, but it is working only in IE9. In Chrome or Mozilla it doesnt works. I attached the Template files (html and css). In html file i added line 27 responsible for the icon and link. If somebody can help me in this matter it'll be be highly appreciated.
Thank you in advance.
Watch Question

Keith BrownAWS System Administrator

Ok, first off, somewhat strange to give a file with php code a .html extension

Also, when you say it does't work, what exactly do you mean? Are things not appearing, are they not appearing in the right place, or what?

I really see no reason why you couldn't add more image links on the side.


Hi Hellmark,

The template was generated with Artisteer2. I dont know why the file has that extension.
I mean when i hover over the picture the cursor doesnt transform in "hand" and nothing happen if i click (the redirect is not working, only in IE9).
Jesse MatlockUX Engineer

Try adding:

 to our style on that padi image...
something like:

  <a href="http://www.padi.com" target="_blank"><img alt="" src="/images/padi.png" style="margin-left: 70px; margin-top: 300px; float: left; width: 79px; height: 105px; display:block;" /></a>

Open in new window

UX Engineer
Hey Raul,.. also, as I look at the style of this image, I see some issues you might run into.. it would be better to give this image a class name, and then control it in your CSS sheet.. and instead of floating it left, use absolute positioning to control where it shows on the page, or else when it displays on a larger screen,.. the image is in the wrong place.

Here is some CSS so can add to your stylesheet now
(note: be sure to ADD the 'padi' class to the image, as I show below,.. and then add the CSS below that to your CSS sheet)
<a href="http://www.padi.com" target="_blank"><img class="padi" src="/images/padi.png" /></a>

Open in new window

#art-main a img.padi {
	margin: 0px; 
	width: 79px; 
	height: 105px;
	display: block;
	position: absolute;
	left: 50%;
	z-index: 111;
	margin-left: -600px;
	top: 300px;

Open in new window

That will make sure the image displays to the left side of the main page, no matter how big or small the screen..


Hi Cloud9manager,

Thank you for solution. Even better than i expected.
Works perfect.
Thank you again.
Jesse MatlockUX Engineer

Anytime.. glad I was able to help!

Explore More ContentExplore courses, solutions, and other research materials related to this topic.