Yesterday I continued working on the 2014 family reunion website. When I’d last worked on the site, adding jCarousel had thrown my footer layout into complete chaos.
For example, I had positioned the list wrapper 50% to the left and the list itself 50% back to the right to center it. That didn’t work with all of the divs added by jCarousel, and it caused the page to scroll: http://screencast.com/t/yXnLgcnPU.
I added a rainbow border so I could see everything that was going on:
Then I reviewed overflow and floats at CSS Tricks and I commented out what I thought I could in the jCarousel script so I could remove the script’s styles and control styles in my own stylesheet. I couldn’t find the formula in the script that controlled the width of ul#carousel (the green bordered box), but eventually I realized — because of a Harry Roberts CSS carousel article that, at the time, was completely unrelated to my work on this site — that I didn’t need to clip the ul as the viewport, I needed to clip the “.clip” div around it (in yellow). And once I gave the .clip div a width I was able to center it using margin: auto.
Thanks also to a couple of threads at Stack Overflow and Chrome inspector which told me my animation was broken (*I wanted to use ‘easeOutBounce’ for the easing but I had to change it back to the default ‘swing’.
Next, I have to finish my art, pop it in, adjust positioning and probably face overflow issues again — my art is tall but my list items want to wrap when there’s extra height available.
Afterwards I’ll work on the interiors and the navigation, which will probably need a second level. I’ll wrap up by compressing my files and images and studying load times.
*I just learned that I have to download the other easing options for jQuery animation. I may try that later.