PDA

View Full Version : Photoshuffler not very slick? Help!



grahamy84
Sep 16th, 2009, 10:12 AM
Hi, my test site can be viewed here: http://www.caffevinci.com/test_test.html

As you can see, the photoshuffler is not running smoothly at all. It's jilting around a little and when an image fades the bottom of the previous image is left behind for a short while.

Can anyone help me with this problem? (also, is it possible to have the photoshuffler working and have my nav bar overlap it whilst it is going through the slideshow?)

Finally...how do I centre the following: (which can be seen at the bottom of the page, i'd like it to be at the very bottom but in the white area and central, however I'd like the copyright descripton to be alligned on the same line but to the right): Contact Us | Privacy | Site Map | News | Bookmark and Share
ęCaffe Vinci 2009- all rights reserved
VAT (insert Number Here)

SB65
Sep 16th, 2009, 10:51 AM
Photoshuffler issue - it's actually the bottom of the next image that's showing as the image fades. The javascript is setting the background image of the a#photodiv element to the new image and then reducing the opacity of the current image. When it's faded completely the new image is substituted.

Now, if you look in Firebug you can see that the a#photodiv element does not contain the image within it - so you can only see the bottom of the new image as the background (if that makes sense).

I'm not quite sure why this is an <a> tag, as it doesn't link anywhere. I'd suggest making this a div not an a - then #photodiv sort of makes more sense... Then apply width:700px to #photodiv.

I'm not seeing any "jilting" - not exactly sure what you mean by this.

Overlapping nav - yes, you could absolutely position ul#nav on top of the #photonav div.

Your footer stuff - I'd suggest putting all of this within your #footer div for a start. Then apply text-align:center to #footer. You currently have some errors in your markup - unclosed tags - which I think are causing some odd behaviour - fix these first.

grahamy84
Sep 16th, 2009, 10:54 AM
Thanks mate. I'll try and follow your advice. I'm still pretty new to this so not everything makes sense to me :):confused:;)

SB65
Sep 16th, 2009, 10:55 AM
No worries. Post again if anything isn't clear.

grahamy84
Sep 16th, 2009, 11:01 AM
I have made it a div like you said:


<p align="center"><div id="photodiv" class="imagecenter"><img src="images/the_finest_espresso_beans.jpg" name="photoimg" width="700" height="150" id="photoimg"/></div></p>

But how do I align the image/rotator. It's aligned to the left of the page now.

SB65
Sep 16th, 2009, 11:42 AM
First, I'd remove the <p> tags so that the code is just:


<div id="photodiv" class="imagecenter">
<img src="http://www.caffevinci.com/images/the_finest_espresso_beans.jpg" name="photoimg" width="700" height="150" id="photoimg"/>
</div>

then add


#photodiv {width:700px; margin: 0 auto}

to your css. Margin: auto will centre a block item which has a defined width (and in IE's case, provided there's a valid doctype).

grahamy84
Sep 16th, 2009, 12:24 PM
First, I'd remove the <p> tags so that the code is just:


<div id="photodiv" class="imagecenter">
<img src="http://www.caffevinci.com/images/the_finest_espresso_beans.jpg" name="photoimg" width="700" height="150" id="photoimg"/>
</div>

then add


#photodiv {width:700px; margin: 0 auto}

to your css. Margin: auto will centre a block item which has a defined width (and in IE's case, provided there's a valid doctype).

Hi mate, followed those changes and it's centred nicely. However, i'm still seeing that horrible background line when the image changes.

How do I get rid of this horrible little invader?

SB65
Sep 16th, 2009, 12:40 PM
Your live page looks OK to me in FF3.5 and IE7 now?

grahamy84
Sep 16th, 2009, 12:52 PM
Your live page looks OK to me in FF3.5 and IE7 now?

It looks ok to me in IE but it's the same as it was before in FF3.5.3 :confused:

SB65
Sep 16th, 2009, 01:06 PM
Sounds like a caching problem as it's fine for me in FF3.5.3.

grahamy84
Sep 16th, 2009, 01:14 PM
Sounds like a caching problem as it's fine for me in FF3.5.3.

Is there any way I can fix it mate?

Also, how can I make my nav bar move over the top of the photoshuffler when I select the drop-down tabs?

Sorry to be a bother!

SB65
Sep 16th, 2009, 01:27 PM
Either just refresh or clear your browser cache and refresh...

Try adding z-index:999 to #nav li ul. This seems to be OK using Firebug.

grahamy84
Sep 16th, 2009, 01:37 PM
Either just refresh or clear your browser cache and refresh...

Try adding z-index:999 to #nav li ul. This seems to be OK using Firebug.

I've cleared the cache and it's working fine. Thanks!

However, I've just made the change you suggested to nav bar and it's not working so well. It doesn't seem to be working at all in IE...typical! :P

SB65
Sep 16th, 2009, 01:46 PM
Well, we're getting there because the drop down's on the top of the image for me in FF3, Chrome2, Opera 9 and Safari4. The IE problem is with the positioning of the second ul, not the z-index. Having a look at that now...

grahamy84
Sep 16th, 2009, 01:58 PM
Well, we're getting there because the drop down's on the top of the image for me in FF3, Chrome2, Opera 9 and Safari4. The IE problem is with the positioning of the second ul, not the z-index. Having a look at that now...

Thanks SB! It's strange, it's taking a while for my browsers to catch up with these changes even after refreshing the page several times. It looks great for me in FF now.

But like you say, still an issue with IE.

SB65
Sep 16th, 2009, 02:13 PM
Got it, it's a hasLayout issue with IE7.

Try adding display:block to #nav li:hover ul.

grahamy84
Sep 16th, 2009, 02:35 PM
Got it, it's a hasLayout issue with IE7.

Try adding display:block to #nav li:hover ul.

It doesn't seem to have changed anything for me.

grahamy84
Sep 16th, 2009, 02:45 PM
Sorry SB, it worked fine!

My client failed to upload the changes properly. How do you pinpoint mistakes so quickly? I don't even know what display: block means :cry:

How would I go about adding this nav bar to future documents? i.e. about us page etc. I have it saved in a stylesheet but i'm unsure how to apply it. Is it a case of applying every style and then copy and pasting the HTML?

SB65
Sep 16th, 2009, 03:14 PM
Well, if things are right in everything else but wrong in IE7 (IE6 is quite another kettle of piscine things...) then it's often a hasLayout issue.

Briefly IE7 and below use a proprietary property called hasLayout which influences how an item is displayed. Here the display:block property gives the element "hasLayout" which sorts the problem.

More on hasLayout (http://www.satzansatz.de/cssd/onhavinglayout.html) here. This is quite a useful css referenc (http://www.w3schools.com/css/default.asp)e.


How would I go about adding this nav bar to future documents? i.e. about us page etc. I have it saved in a stylesheet but i'm unsure how to apply it. Is it a case of applying every style and then copy and pasting the HTML?

Put the css in an external stylesheet and reference it from each of your pages. You can then just paste the html into each page. A slightly more advanced option would be to hold the navbar in a separate file and use php code to include it on each of your pages.

grahamy84
Sep 16th, 2009, 04:26 PM
Well, if things are right in everything else but wrong in IE7 (IE6 is quite another kettle of piscine things...) then it's often a hasLayout issue.

Briefly IE7 and below use a proprietary property called hasLayout which influences how an item is displayed. Here the display:block property gives the element "hasLayout" which sorts the problem.

More on hasLayout (http://www.satzansatz.de/cssd/onhavinglayout.html) here. This is quite a useful css referenc (http://www.w3schools.com/css/default.asp)e.



Put the css in an external stylesheet and reference it from each of your pages. You can then just paste the html into each page. A slightly more advanced option would be to hold the navbar in a separate file and use php code to include it on each of your pages.

Thanks mate. You've helped me a lot! I've learnt a great deal from you on this thread and I appreciate it.