[RESOLVED] Images beside my comic page

[Mitani]

I'm ever so slowly editing parts of the template I chose to use. I like it and don't wish to switch to another. I'm hitting some roadbumps and would like some help.

I want to be able to put buttons linking to a friend's site by the side. I just can't seem to position the button, and that's before I add the linkage.

This is the current code up to the comments area and below (they all work for me and the changes I made)

Spoiler! :

<script language="JavaScript">

var dir = "http://www.smackjeeves.com/templates/its_raining_outside/images/";
var pic_unselected = "ratings1.png";
var pic_selected = "ratings2.png";

// "Buffers" the image to the browser
document.write('<img style="display: none" src="' + dir + pic_unselected + '" />');
document.write('<img style="display: none" src="' + dir + pic_selected + '" />');

<!-- BEGIN switch_user_has_voted -->
var default_rating = {switch_user_has_voted.RATING};
var rate_it_pic = "http://www.smackjeeves.com/templates/default/images/your-rating-2.gif";
<!-- END switch_user_has_voted -->
<!-- BEGIN switch_user_hasnt_voted -->
var default_rating = 0;
var rate_it_pic = "http://www.smackjeeves.com/templates/default/images/rate-it.gif";
<!-- END switch_user_hasnt_voted -->

function build_vote()
{
document.write('<img id="text" src="' + rate_it_pic + '" /><ul>');
for (n = 1; n<= 5; n++)
{
if (n <= default_rating)
{
default_pic = pic_selected;
} else {
default_pic = pic_unselected;
}

document.write('<li><a href="#" onClick="vote(' + n + '); return false;" onMouseOver="rateover(' + n + ');" onMouseOut="rateover(default_rating);"><img src="' + dir + default_pic + '" name="star_' + n + '"></a></li>');
}
document.write('</ul>');
}

function rateover(star_num)
{

for (n = 1; n <= 5; n++)
{
if (n <= star_num)
{
da_code = 'document.star_' + n + '.src="' + dir + pic_selected + '"';
} else {
da_code = 'document.star_' + n + '.src="' + dir + pic_unselected + '"';
}

eval(da_code);
}
}

function vote(rating)
{
var new_window = window.open("/ratecomic.php?cid={COMIC_ID}&rating=" + rating, "sj_ratecomic", "height=300, width=400");
new_window.focus();
}

</script>



<div align="center"><h2 class="comic-title">{COMIC_TITLE}</h2></div>

<h1 class="comic-date-header">{COMIC_POST_DATE}</h1>

<table id="comic-container" width="500"><tr><td>

<div id="comic-header">

<div id="rating">

<img src="http://www.smackjeeves.com/templates/default/images/avg-rating.gif" alt="Average Rating:"> <b>{AVERAGE_RATING}</b>

</div>

<div id="rate">

<script language="JavaScript">build_vote();</script>

</div>


<!-- BEGIN comic_image -->
<div style="text-align: center">
{comic_image.FORMATTED}
</div>
<!-- END comic_image -->
<!-- BEGIN switch_no_comic_image -->
<img src="http://www.smackjeeves.com/images/image_na.gif" width="600" height="400">
<!-- END switch_no_comic_image -->



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

<div align="center">{SHARE_THIS_COMIC}</div>

<div class="comicnav">

<a href="{NAV_FIRST}"><img src="http://www.smackjeeves.com/templates/its_raining_outside/images/firsta.png" alt="&lt;&lt; First" /></a>
<a href="{NAV_PREV}"><img src="http://www.smackjeeves.com/templates/its_raining_outside/images/previous.png" alt="&lt; Previous" /></a>

{JUMPBOX_FORMATTED}

<a href="{NAV_NEXT}"><img src="http://www.smackjeeves.com/templates/its_raining_outside/images/nexty.png" alt="Next >" /></a>
<a href="{NAV_LAST}"><img src="http://www.smackjeeves.com/templates/its_raining_outside/images/lastl.png" alt="Most Recent >>" /></a>

</div>

<table id="comments_container"><tr><td>

Later On I will be trying to put ads up on the site and I was hoping to know how to place everything by then. Please be aware I am totally new to HTML editing, so even if this is something stupidly simple to do...I still don't know and I would love to know where to put the codes for images.

Ideally I want the buttons to the LEFT and this is one of the images. They should easily fit beside the comic pages as that's what I requested size wise.

Spoiler! :

<a href="http://s255.photobucket.com/albums/hh153/Nolascana/?action=view&current=cornu120x60.jpg" target="_blank"><img src="http://i255.photobucket.com/albums/hh153/Nolascana/cornu120x60.jpg" border="0" alt="Photobucket"></a>

[Mitani]

Sorry but I am going to bump this. If what I have put is insufficient then please do tell me what else I need to supply.

The Comic in question is the on hiatus http://bjd-badlyphotographed.smackjeeves.com

Thanks in advance to anyone who responds. I don't check back every day but I will try and keep an eye on this topic.

[trenton_dawn]

This is a solution I developed for someone else with the same problem: under Overall Layout, try adding the following code right under the line @import url("http://www.smackjeeves.com/templates/its_raining_outside/style.css");

Code: Select all

.sidebar
{
background-color: #fff;
position:absolute;
left:20px;
top:30px;
height: 100px;
width: 100px;
border-style:solid;
border-width:5px;
border-color:#000;
}

Then, add this code at the beginning of your Comic Page:

Code: Select all

<div class="sidebar">

</div>

and put the images in there. Obviously, you'll need to adjust my numbers, but try it out and it should work.

[Mitani]

OMG THANKS!!

It needs quite a bit of tweaking to get it where I want it, but besides that it works. Thank you so much ^^

[trenton_dawn]

Glad I could help. We seem to have let you slip between the cracks the first time around--sorry about that.

[Mitani]

It's ok, I didn't want to be a mither so I left the question, by the time I remembered to check back I hadn't realised it had been over a month.

Gosh its been far too long the comic has been on Hiatus xD I really must catch up on it soon.