0

I am trying to add the thumbnails section of the js gallery in the footer of a web page. I've never broken up a gallery before and figured it's the only way to achieve this look

http://img69.imageshack.us/img69/5923/bsade.jpg

The link for what I have now is this: http://www.marisaraskin.com/two.html.

(The borders are just guides for me while I'm still working on it)

The CSS code for the thumbnails container is:

.galleria-thumbnails-container {
    height: 100px;<br>
    bottom: 0;<br>
    position: absolute;<br>
    left: 10px;<br>
    right: 10px;<br>
    z-index: 1;<br>
    border:1px solid yellow;<br>
}

I'm not sure what my other options are for this. I was maybe thinking overlapping the content container over the footer with z-index. Though I'm iffy about that especially because everyone's screen resolution is different. I can post more code per request. I am not sure what else you need to see as of now.

In case you need to know I'm using a gallery js called "Galleria" (classic).

PeeHaa
  • 66,697
  • 53
  • 182
  • 254
Marisa R
  • 25
  • 5

1 Answers1

1

If I were you I'd modify the js script so that you can populate blocks that are not contiguous in the actual HTML code, but here's a rough approach to doing it all through css:

  • remove position:relative from #container
  • remove position:relative from .galleria-container
  • add position:absolute to .galleria-stage and remove left and right positioning. Also, add top:90px (or something close to that) and give it a width: width:920px.
  • change .galleria-thumbnails-container to use absolute positioning and use the bottom:___ property to set it where you belong.

Basically what you're doing here is removing all the relatively positioning in the parent elements of the gallery so that the gallery segments all all being positioned with respect to the page rather than any of their parent elements. Once this is done, you can just modify the absolute positioning and width of the stage block and the thumbnail block so that they sit where you want them.

Ben D
  • 13,146
  • 3
  • 43
  • 59
  • Wow. Thank you so much! It worked and the thumbnails are positioned on top of the footer now. Is it possible to get the gallery container/stage to be aligned to the bottom of the container div? Something like #container{ bottom: 0; } ? And I noticed the height of the gallery CSS won't work with height: 100%, is it true I have no choice but to specify the height? – Marisa R Jan 31 '12 at 05:50
  • Height:100% only works if the immediate parent element has a defined height. Otherwise you have to specify the specific height (or use javascript to calculate the computed height of the parent node and then apply that height to the child) – Ben D Jan 31 '12 at 12:34
  • I am okay with defining the height with pixels but with the container working sans "position: relative;" I am not able figure how to get the gallery container to sit at the bottom of the div. i.e. - http://stackoverflow.com/questions/585945/how-to-align-content-of-a-div-to-the-bottom-with-css – Marisa R Jan 31 '12 at 18:35
  • Specifically which div are you referring to? If it's absolutely positioned you can set it with style="bottom:____px" – Ben D Jan 31 '12 at 19:18
  • i tried that in the galleria stylesheet but it thinks the bottom is the bottom of the footer. i need the slideshow (without touching the thumbnails container) to float to the bottom of JUST the white space. (#container div). So that it's resting right above the footer. here's what i have now - http://www.marisaraskin.com/two.html – Marisa R Feb 01 '12 at 03:55