How to incorporate links over images?

Nirina

Hey to all smart cookies in this category!

So i would like to know how to incorporate a link to another website in my header at the message board i admin.. I'm not entirely sure how to do this (i got bumped up to Admin lately) and it is my current layout we're using. But we'd like to link to our official site and twitter page but eh, i dunno how?!

what i'd like to do is something like this;



so as you can see, the large area on the right is kinda blank and i'd like to add two buttons/links for our other sites.
Also if it helps the type of msg board is vBulletin and our template code is HTML/tables...any ideas?

Liam Byrne

Easiest way to do it is using image maps

http://www.javascriptkit.com/howto/imagemap.shtml

p

Assuming you know some basic HTML & CSS, another approach would be to use absolute positioning.

Here's some rough code. It's hard to know without seeing your code.

HTML:
[HTML]<div id="header-container">
<img src="hilaryduffheader.jpg" />
<a href="" id="twitter-button"><img src="twitterbutton.jpg" /></a>
<a href="" id="links-button"><img src="linksbutton.jpg" /></a>
</div>[/HTML]

CSS:

#header-container {
   width: 600px;
   height: 200px;
   position: relative; /* this line is the important bit, as the links will be positioned relative to this div */
}

#twitter-button {
   position: absolute;
   top: 20px;
   right: 20px;
}

#links-button {
   position: absolute;
   top: 220px;
   right: 20px;
}

Nirina

Ok, so this is the code we have for the header, its in Talbles form so that's why i don't think the Div code will work?

<!-- logo -->
<br>
<a name="top"></a>
<table width="965px" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td class="headerwrap"><table width="965" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td class="headerdeco"> </td>
</tr>
</table></td>
</tr>
<tr><td>
<!-- /logo -->

<!-- content table -->
$spacer_open

$_phpinclude_output

<!-- AdCode -->

<br><center>
<script src="http://www.fanfusion.org/ads1/ad728x90.js"></script></center&gt;

<!-- /AdCode -->

Nirina

ok, if anyone's able to reply please do!!

so i went with my insticints and have managed to get this so far;
http://oh-hilaryboards.com/?styleid=6


So i have tried to figure out why i can't move the two link buttons over to the right. i have fiddled with different values for the "right: XX px;" part but everytime i change its value it does nothing. it just stays in its one place! also, i can't get the two links to be one above another, rather than beside another.

please help

Rockn

You have .header-container, .twitter-button, .links-button instead of #header-container, #twitter-button, #links-button. That's why it's not working.

If you're using id="twitter-button" it's #twitter-button, using class="twitter-button" it's .twitter-button

Nirina

i'm sorry, i don't really follow that. could you show me what you mean with more code??

Liam Byrne

Nirina wrote: »

i'm sorry, i don't really follow that. could you show me what you mean with more code??

You've preceded the <style> entries with a dot:

[b].[/b]header-container {

This will only act on items that have a class of "header-container".

For them to influence items that have an id of "header-container", they should be preceded with a hash symbol:

[b]#[/b]header-container {

Nirina

ohh okies! thanks very much for helping me