Main Page Slideshow has too much space on top and bottom [Sitemap]

arifkhan

Jul-02-2008, 03:22 PM

Hi,

My slide show on the main page is working, but there seems to be too much space between top and bottom of the pics.

I tried playing with the numbers in SM.flash.insertSlideshow(750, 750....). But it just resizes the pics, but still keeps a spacing between the edges of my pic and the header/footer.

If you take a quick look at my main page: http://www.arifkhan.ca you will see what I am talking about.

What I need it to do is look nice and tight like this one:
http://mikelane.smugmug.com/

Also, here is my code in the bio:
<html>
<div align=center>
********>
var ssConfig = {
AlbumID: '5312463',
newWindow: 'false',
transparent: 'true',
showLogo: 'false',
showThumbs: 'false',
showButtons: 'false',
crossFadeSpeed: '1000'
};

SM.flash.insertSlideshow(750, 750, ssConfig, 'transparent');
</********
</div>
</html>

Any help would be most appreciated!

Thanks,

-Arif

Allen

Jul-02-2008, 03:28 PM

Hi,

My slide show on the main page is working, but there seems to be too much space between top and bottom of the pics.

I tried playing with the numbers in SM.flash.insertSlideshow(750, 750....). But it just resizes the pics, but still keeps a spacing between the edges of my pic and the header/footer.

If you take a quick look at my main page: http://www.arifkhan.ca you will see what I am talking about.

What I need it to do is look nice and tight like this one:
http://mikelane.smugmug.com/

Also, here is my code in the bio:
<html>
<div align=center>
********>
var ssConfig = {
AlbumID: '5312463',
newWindow: 'false',
transparent: 'true',
showLogo: 'false',
showThumbs: 'false',
showButtons: 'false',
crossFadeSpeed: '1000'
};

SM.flash.insertSlideshow(750, 750, ssConfig, 'transparent');
</********
</div>
</html>

Any help would be most appreciated!

Thanks,

-Arif
Try this size in your script. width, height The box is only 750 wide and 720
is about the max width without increasing the parent container widths.

SM.flash.insertSlideshow(720, 400, ssConfig, 'transparent');

arifkhan

Jul-02-2008, 05:55 PM

Thanks for your suggestion Allen.

720,400 does look better, but still not quite where it needs to be. There is still lots of empty space. I wonder how the other person did it on their site. Maybe a different set of code altogether?

Do you have any other suggestions?

Thanks again!

-Arif

Highsee3

Jul-02-2008, 10:13 PM

Thanks for your suggestion Allen.

720,400 does look better, but still not quite where it needs to be. There is still lots of empty space. I wonder how the other person did it on their site. Maybe a different set of code altogether?

Do you have any other suggestions?

Thanks again!

-Arif

You may have to adjust the margins of your nav bar, bio box or footer. If they have margins, they could be pushing away from the slideshow if that makes any sense.

For example, if your navbar has a 10px margin and your bio box has a 20px margin, then you would see a 30px space.

Try a negative margin for the bio box

/* control the bottom margin of the slideshow */
#bioBox {
margin-bottom: -20px;
}

I'm no expert, so don't be surprised if that doesn't work

Allen

Jul-03-2008, 05:23 AM

Thanks for your suggestion Allen.

720,400 does look better, but still not quite where it needs to be. There is still lots of empty space. I wonder how the other person did it on their site. Maybe a different set of code altogether?

Do you have any other suggestions?

Thanks again!

-Arif
Try this in your CSS

#bioBox .boxBottom {margin-top: -30px;}
.loggedIn #bioBox .boxBottom {margin-top: 0px;}

arifkhan

Jul-03-2008, 09:09 AM

Allen and Highsee, both of you guys rock! You guys nailed it! That was the fix.

I had to play around with the exact number a bit (as expected), but in the end, both your advices worked out!

Solution:
- Resized the slide image to 750,750
- #bioBox {margin-bottom: -140px;}
- #bioBox {margin-top: -160px;}

the margin numbers seem a little crazy, but in the end, that got the look that I wanted!

Once again, thank you guys so much! :)

BTW, I am noticing that in IE, its spot on....but in Firefox and Safari, the slideshow is about 5-10px to the right. (something that I may need to look at in my non-IE browser portion of my nav bar code perhaps?)

Allen

Jul-03-2008, 10:12 AM

Allen and Highsee, both of you guys rock! You guys nailed it! That was the fix.

I had to play around with the exact number a bit (as expected), but in the end, both your advices worked out!

Solution:
- Resized the slide image to 750,750
- #bioBox {margin-bottom: -140px;}
- #bioBox {margin-top: -160px;}

the margin numbers seem a little crazy, but in the end, that got the look that I wanted!

Once again, thank you guys so much! :)

BTW, I am noticing that in IE, its spot on....but in Firefox and Safari, the slideshow is about 5-10px to the right. (something that I may need to look at in my non-IE browser portion of my nav bar code perhaps?)
Try 720x720, the box is only 750 wide.

arifkhan

Jul-03-2008, 09:30 PM

Try 720x720, the box is only 750 wide.

I tried that. What happens is that the slide show gets narrow (by 30), but still pushes out to the right. You just can't notice it as easily since it hasn't "stepped out" of the banner's right side alignment/margin. But really, the 750, 750 gets me the right look that I am striving for...at least on Internet Explorer.

Its strange that things show up perfectly on IE, but not the other browsers.

Oh so close!! Just off by 30 px! Am I sounding too picky here? :(

Allen

Jul-03-2008, 09:35 PM

I tried that. What happens is that the slide show gets narrow (by 30), but still pushes out to the right. You just can't notice it as easily since it hasn't "stepped out" of the banner's right side alignment/margin. But really, the 750, 750 gets me the right look that I am striving for...at least on Internet Explorer.

Its strange that things show up perfectly on IE, but not the other browsers.

Oh so close!! Just off by 30 px! Am I sounding too picky here? :(
Try this in CSS, increases parent container widths.

.homepage,
#bioBox {
margin: 0 auto;
width: 780px;
}

Play with the width, it has to be about 20px bigger the the show.