HTML Help Please?

Buchanan0204

Buchanan0204

Buchanan0204

Soldato
Joined
10 Jun 2010
Posts
5,158
Location
Scotland
I'm trying to add an image/button to my forum. I have no idea how to link an image to the homepage location.

I managed to do it with a twitter button, however this was easy as it gave me the code to copy and paste... and I guessed where to paste it in the Overall_header.

I now need to do my own code and I'm completely lost. I'm sure it's easy for anyone who knows HTML.

Here is where it needs to fit into.
------------------------------------------

<!-- IF S_BOARD_DISABLED and S_USER_LOGGED_IN and (U_MCP or U_ACP) -->
<div class="pm-notify-new"><div class="pm-notify-header">{L_INFORMATION}</div>{L_BOARD_DISABLED}</div>
<!-- ENDIF -->
<a href="http://twitter.com/kilmarnockjudo"><img src="http://www.twitterbuttons.com/upload/images/19ca38bec0nt1.png" title="By: www.mobilecomputerclinic.com" alt="By: mobilecomputerclinic.com" width="259" height="88" /></a>

<table width="100%" cellspacing="0">
<tr>
<td class="gensmall">
<!-- IF S_USER_LOGGED_IN -->{LAST_VISIT_DATE}<br /><!-- ENDIF -->
<!-- IF S_DISPLAY_SEARCH --><a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a> | <a href="{U_SEARCH_ACTIVE_TOPICS}">{L_SEARCH_ACTIVE_TOPICS}</a><!-- ENDIF -->
</td>
<td class="gensmall" align="{S_CONTENT_FLOW_END}">
{CURRENT_TIME}<br />
<!-- IF S_DISPLAY_SEARCH and S_USER_LOGGED_IN --><a href="{U_SEARCH_UNREAD}">{L_SEARCH_UNREAD}</a> | <a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a> | <a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><!-- ENDIF -->

</td>
</tr>
</table>

<!-- INCLUDE breadcrumbs.html -->

<br />
------------------------------------------------------

You can see where the twitter button fits. I would like to get the image on the other side of the bar. I have photoshopped the image onto a snip of the site to give you an idea.





Any help would be excellent and I thank you in advance.

P.S. I would settle for it anywhere on the top half of the page... Location isn't really important.
 
Code: 
<!-- IF S_BOARD_DISABLED and S_USER_LOGGED_IN and (U_MCP or U_ACP) -->
<div class="pm-notify-new"><div class="pm-notify-header">{L_INFORMATION}</div>{L_BOARD_DISABLED}</div>
<!-- ENDIF -->
<a href="http://twitter.com/kilmarnockjudo"><img src="http://www.twitterbuttons.com/upload/images/19ca38bec0nt1.png" title="By: www.mobilecomputerclinic.com" alt="By: mobilecomputerclinic.com" width="259" height="88" /></a>


[COLOR="Red"]<img src="http://imageshack.us/photo/my-images/84/kjfsign3.png     ( or link to image ) alt="Logo" />
[/COLOR]

<table width="100%" cellspacing="0">
<tr>
<td class="gensmall">
<!-- IF S_USER_LOGGED_IN -->{LAST_VISIT_DATE}<br /><!-- ENDIF -->
<!-- IF S_DISPLAY_SEARCH --><a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED} </a> | <a href="{U_SEARCH_ACTIVE_TOPICS}">{L_SEARCH_ACTIVE_T OPICS}</a><!-- ENDIF -->
</td>
<td class="gensmall" align="{S_CONTENT_FLOW_END}">
{CURRENT_TIME}<br />
<!-- IF S_DISPLAY_SEARCH and S_USER_LOGGED_IN --><a href="{U_SEARCH_UNREAD}">{L_SEARCH_UNREAD}</a> | <a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a> | <a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><!-- ENDIF -->

</td>
</tr>
</table>

<!-- INCLUDE breadcrumbs.html -->

<br />

see what happens with that
 
All you need to do is encapsulate an image within a hyperlink tag.

Code: 
<a href="www.mywebsite.com"><img src="images/myImage.jpg" alt="My Image"></a>

Never look at code as an overall thing, break it down and you will find it much easier.

Look at the first part, this declares a hyperlink and the location the user will be sent when they click on it.
Code: 
<a href="www.mywebsite.com">

Next you want to show an image. Use the 'img' tag and fill in the file path for the image in the 'src' parameter, and then fill in the real world name for the image in 'alt' (alt isn't technically needed, but it's good practice to use it for SEO etc).
Code: 
<img src="images/myImage.jpg" alt="My Image" />

Finally you need to close the hyperlink with:
Code: 
</a>
This will complete the encapsulation of the image within the hyperlink, anything between the <a ...> and </a> will link to the location defined in the <a ...>.

If you need any more info then have a look here: http://www.w3schools.com/html5/tag_a.asp
 
Thanks very much. I'm off to try that. Will that align it to the right hand side of the screen?

Is it best to have the image on the web server or host it on image shack?
 
Buchanan0204 said:
Thanks very much. I'm off to try that. Will that align it to the right hand side of the screen?

Is it best to have the image on the web server or host it on image shack?
Click to expand...

No it won't align it. If you want to do that in the markup you need to use an inline style. Otherwise add a rule to your stylesheet.

Best to host it on your server.
 
OK!

Hooray to me. I managed to get it on. I ended up adding in the size tag as well to adjust it to fit (pleased with myself :D)

However. It wont link to the homepage. It comes up with

www.mywebsite.com/forum/www.mywebsite.com

No idea how to fix it.

Would it also be possible to move the twitter logo over to the right hand side of the page? As it looks a little silly next to the sign.

Cheers for all your help so far. You really have been excellent!
 
gord said:
No it won't align it. If you want to do that in the markup you need to use an inline style. Otherwise add a rule to your stylesheet.

Best to host it on your server.
Click to expand...

I never seen this post before I added my last one. Thanks for that. I have it hosted on the server in the images folder. I figured it would be best, since it was only a small file.

Any chance you could show me what an inline style is? So I can copy and paste.

After this I'm seriously considering getting myself an HTML book. It's so what embarrassing not knowing this.
 
Well that was simple haha. Thanks for that guys. Suppose it's only easy when you know the answer.

I've googled for the inline tag, but can't seem to find anything or where to enter it? Any chance you could offer me one last bit of help?


Edit: Another problem has arisen. When trying to replace the twitter button with another. It's stretching it out to be the same size as the sign post. It has it's own size pixel tag thing. Any ideas why it would resize it out of it's own good will :(

Edit: sorted the above. Played about with the size and it some how auto corrected itself. I have also discovered I was putting the "align=right" into the wrong part of the code and it wouldn't work. It's now fixed. However it's pushing the image to to align at the top. I would like it centralised like the sign.

if you visit. www.kilmarnockjudo.com/forum You can see what I mean
 
Last edited:
OK....!!

This is my last post in this thread lol. I promise. That's me finally finished it. I'm glad I wasn't spoon fed at the end, was interesting working it out on my own.

Thanks very much to all the people who helped me. Very much appreciated. I would have still be sat here yet trying to work it out.

Cheers again.
 
You must log in or register to reply here.
Back
Top Bottom