No replies to this topic

[sonesay]

Hey all, I am wondering if anyone can assist me in achieving a HTML and CSS layout I have been struggling with. I have looked at many image galleries available over the internet but none suits my needs. They are mostly fixed size widths and will look ugly if I go with that for my site. I need one that is able to expand depending on the users available browsers width and retract accordingly. This is probably a specific layout issue concerning HTML and CSS that I am still not fimilar with since I still cant solve my problem.


What I have done so far:
- I am able to fit in my gallery inside the content area which is auto expanding and have buttons for scrolling on the left and right hand side

What problems so far:
- I am able to add images in but when I try and control the display type to display-inline etc I get the wrapping of images coming across as shown in the attached image.
- I have tried putting the images inside a ul and li strcture and controlling them from there with display-inline and inline-block but they all seem to wrap. is there another property/combination I can try?
- also just having images without the ul li block has no effect


My current layout structure for the gallery

<div id="gallery_container_jqParent">

                                <div id="si4_btn_gallery_left">
                                    <button><</button>

                                </div>

                                <div id="si4_btn_gallery_right">
                                     <button>></button>
                                </div>

                                <div id="gallery_container">
                                   <!--<ul>
                                        <li><img alt=""  src="images/gallery/imac.jpg" /></li>
                                        <li><img alt=""  src="images/gallery/iphone.jpg" /></li>
                                        <li><img alt=""  src="images/gallery/macbook.jpg" /></li>
                                    </ul>-->

                                        <img alt=""  src="images/gallery/imac.jpg" />
                                        <img alt=""  src="images/gallery/iphone.jpg" />
                                        <img alt=""  src="images/gallery/macbook.jpg" />


                                </div>

                            </div>

Again my requirements for the gallery are:

- Auto expanding 100% width
- Auto filling of content as width is resized to fit as many images as possible in the gallery area
- Auto centering of active gallery image
- smooth scrolling from left to right of images and loop back

if you see any examples that fit any of these criteria's please let me know. I have only been able to find fixed sized galleries which are too simple for my liking.


seems to be an issue with image uploading so http://si3.freeiz.com/si4_gallery.png

Edited by sonesay, 07 December 2010 - 01:44 AM.