PDA

View Full Version : Slidshow Alignment?


guy
Nov-30-2007, 05:23 AM
Ok, still having lots of fun with all this stuff! I put a scaled down version of the slide show in my bio & it works fine. I made is smaller by just changing the numbers in this line from 600 to 200:

createSWF(200,200, oParams, "transparent");

Was that the best way to do it?

Now is it possible to move the slideshow from the center of the bio box to the left or right so that I can put some text on the other side? I tried an <ALIGN> tag but that didn't seem to do anything! I know just enought HTML to be dangerous!!

Thanks.
guy.smugmug.com

Allen
Nov-30-2007, 06:00 AM
Ok, still having lots of fun with all this stuff! I put a scaled down version of the slide show in my bio & it works fine. I made is smaller by just changing the numbers in this line from 600 to 200:

createSWF(200,200, oParams, "transparent");

Was that the best way to do it?

Now is it possible to move the slideshow from the center of the bio box to the left or right so that I can put some text on the other side? I tried an <ALIGN> tag but that didn't seem to do anything! I know just enought HTML to be dangerous!!

Thanks.
guy.smugmug.com
Try this.
Replace you bio html with this.

<html>
<div id="bioText">
xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx
xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx
xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx
xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx
xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx
xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx
</div>
<div id="bioShow">
<script>
var oParams = new Object;
oParams.AlbumID = "3211619";
oParams.newWindow = 'false';
oParams.transparent = "true";
oParams.splash = "http://www.smugmug.com/img/ria/ShizamSlides/smugmug_black.png";
oParams.showLogo = "false";
oParams.showThumbs = "false";
oParams.showButtons = 'true';
oParams.crossFadeSpeed = '350';
createSWF(300,300, oParams, "transparent");
</script>
</div>
</html>

Add this to your CSS. Play with the positioning to align everything.

#bioText {
position: relative;
top: 20px;
left: 20px;
width: 300px;
text-align: left;
}

#bioShow {
position: relative;
top: -125px;
left: 180px;
margin-bottom: -100px;
}

Does this photo (http://www.photosbyat.com/gallery/1657424#81139239) look familar on Lake Ashi?

guy
Dec-01-2007, 06:25 AM
Thanks again Allen

That worked like a charm :D.

Would that be this boat! http://guy.smugmug.com/gallery/3211619#177424760

Look like you had very similar weather to us!

Cheers.

guy
Dec-01-2007, 08:00 AM
Looks good in Firefox, but I always forget that some people still use IE!!

It's messed up in IE the text is half way under the slideshow.

Any ideas?
Thanks.

Allen
Dec-01-2007, 09:00 AM
Looks good in Firefox, but I always forget that some people still use IE!!

It's messed up in IE the text is half way under the slideshow.

Any ideas?
Thanks.
Remove the first one and edit the left in 2nd. The first one is centering the text.


#userBio {
text-align: center;
}

#bioShow {
position: relative;
top: -125px;
left: 380px;
margin-bottom: -100px;
}

guy
Dec-01-2007, 01:35 PM
Thanks Allen,

From what I can see it seems to be working in both now.

The only other thing I noticed was that if there are not enough lines of text the slide show jumps out the top of the bio box. I fixed this with a few <BR> tags.

ありがとございます。。