Sign in to follow this  

Image Gallery - 100% Width, Auto Positioning, Centering HTML and CSS layout issue

Recommended Posts

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
Edited by sonesay

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this