The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

How to get two pictures to align side by side?

3 posters

Go down

Solved How to get two pictures to align side by side?

Post by jarn April 16th 2014, 12:11 am

Does anyone know how to get two pictures to align side by side for this widget? My code is.

Code:

Everything looks good except the two images seem to be stacking on top of each other. I need them to be side by side. How to get two pictures to align side by side? D5i2fD2
avatar
jarn
Forumember

Posts : 80
Reputation : 1
Language : English

http://cwentertainment.forummotion.com/

Back to top Go down

Solved Re: How to get two pictures to align side by side?

Post by Pizza Boi April 17th 2014, 8:37 am

Hi Very Happy

You can declare an ID for the bottom picture and then you can style it with a position code such as:

Code:
#this example {
  position: relative or absolute;
  top: 18px;
  right: 10px;
}

My estimation might be off so please adjust it to your liking. Phone view and PC view aren't exactly the same...

Regards,
Pizza Boi
Pizza Boi
Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

Back to top Go down

Solved Re: How to get two pictures to align side by side?

Post by jarn April 17th 2014, 7:28 pm

I got the two pictures to align side by side, but the hover doesn't work anymore.

Code:
<img id="showperson" style="border: 0px solid black; width: 152px; height: 232px;" src="http://i.imgur.com/e5jPp9q.png" align="middle" border="0" /> <script type="<img id=" showperson"="" style="border: 0px solid black; width: 152px; height: 232px;" src="http://i.imgur.com/e5jPp9q.png" align="middle" border="0"> <script type="text/javascript">
<!--
// copyright 1998 Idocs, Inc. http://www.idocs.com/tags/
// Distribute this script freely, but please keep this
// notice with the code.

// var image information object
var mloi=new Object();

// set the image for swapping
function setswap()
{
if (! document.images)return;
var imgInfo=new Object();
imgInfo.defaultImg = new Image();
imgInfo.defaultImg.src = document.images[arguments[0]].src;
imgInfo.opts = new Object();
for (var i=1; i < arguments.length; i=i+2)
 {
 imgInfo.opts[arguments[i]]=new Image();
 imgInfo.opts[arguments[i]].src = arguments[i+1];
 }
mloi[arguments[0]] = imgInfo;
}

// set up the link for swapping
function swap(link,imgName,optName)
{
if (! document.images)return;
if (! link.swapReady)
 {
 link.imgName    = imgName;
 link.onmouseout = swapBack;
 link.swapReady  = true;
 }
document.images[imgName].src=mloi[imgName].opts[optName].src;
}

function swapBack()
 {document.images[this.imgName].src=mloi[this.imgName].defaultImg.src}

//-->
</script> <script type="text/javascript">
setswap("showperson",
'elroy',
'http://i.imgur.com/aiB3oPE.png',
'michel',
'http://i.imgur.com/8kZW6gt.png');
//
</script><br />
<p style="text-align:center">
   <strong><span style="text-decoration: underline; font-size:10px;">Administrators</span></strong>
</p><br />
<div style="position: relative; left: 30px;">
    <a onmouseover="swap(this,'showperson','elroy')" href="http://wamidnight.forumotion.co.uk/u1"><img alt="Owner" style="position: relative; border: 0px black solid; height: 82px; width: 42px float: left; right: 2px;" src="http://i.imgur.com/JOqyhN5.png" align="left" border="0" /></a><a onmouseover="swap(this,'showperson','michel')" href="http://wamidnight.forumotion.co.uk/u36"><img alt="Owner" style="position: relative; border: 0px black solid; height: 82px; width: 42px; float: left; left: 2px;" src="http://i.imgur.com/RiOn4Uc.png" align="left" border="0" /></a>
</div><br />

That is the new code.
avatar
jarn
Forumember

Posts : 80
Reputation : 1
Language : English

http://cwentertainment.forummotion.com/

Back to top Go down

Solved Re: How to get two pictures to align side by side?

Post by Pizza Boi April 17th 2014, 8:27 pm

Hi Very Happy

In the beginning of the code where it says: <script type="<img src.. Please delete the script type portion and then declare </img> after tje image code. You actually mixed it a bit wrong Smile.

Anyway, if that doesn't work, Imma try to look at it this Saturday as I cannot access a Pc by today.

Regards,
Pizza Boi
Pizza Boi
Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

Back to top Go down

Solved Re: How to get two pictures to align side by side?

Post by jarn April 19th 2014, 2:58 am

That worked. Thanks! Solved!
avatar
jarn
Forumember

Posts : 80
Reputation : 1
Language : English

http://cwentertainment.forummotion.com/

Back to top Go down

Solved Re: How to get two pictures to align side by side?

Post by Ange Tuteur April 19th 2014, 3:44 am

Topic solved and archived
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum