homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

simple image gallery - DIVs vs UL vs DL

5+ Year Member

Msg#: 4058351 posted 3:42 pm on Jan 11, 2010 (gmt 0)

Looking to make a simple image gallery with captions underneath to start with. I've seen suggestions for using Divs with floats, ULs and DLs to accomplish this. Does anyone have any thoughts on the pros and cons of each. They probably all work but now I'm starting to get confused.



5+ Year Member

Msg#: 4058351 posted 6:15 am on Jan 12, 2010 (gmt 0)

I assume you want the images to be horizontally adjacent to each other no matter which method you use?

As you said, THEY PROBABLY ALL WORK. The important thing as everyone offers you advice is to remember that. Otherwise you'll get more, not less, confused. :)

-Div styles are pretty reliable cross-browser.
-You say "images with captions underneath to start with". If you're planning on adding more complicated stuff, having each gallery item inside of a div may be helpful.
-For those who don't know a ton about how CSS behaves, it may be easier to set <div>s' styles than <li>s' styles. For example, when you set a <li>'s width to 100px, does that include the bullet point and the space between it, or not? Do you know the answer?

UL pros:
You can easily set a style for the whole gallery: that is, if you wanted all the captions to be font-size:11px, you could put that in the UL's style instead of each DIV's style.

DL: I'm not familiar enough with DL to say.

Keep in mind, you could even have <div>s inside floated <li>s inside a <ul>. (That's what I would do. That way, you can have the advantages of both divs and ULs, and an extra advantage: margins and padding will be easier to manage*.)

*If you didn't already know, css width sets the width of the content, and margins/padding are added on after that. E.g. given
#gallery {height:500px; border:1px black solid;}
#gallery li {height:100%; padding:5px; border:1px black solid;}
the <li>s would be set to 500px tall, and THEN padding would be added within their borders, so they would be 510px tall total.

However, given
#gallery {height:500px; border:1px black solid;}
#gallery li {float:left; height:100%; border:1px black solid;}
#gallery li div {margin:5px;}
<ul id='gallery'><li><div>content1</div></li>
the <li>s would remain 500px tall and there would still be a 5px space between "content(1,2)" and the li's border. This may or may not be useful; depends on your individual gallery.

So: I'd recommend divs inside floated li's; but then I don't know just what you envision your gallery looking like.
Otherwise, between floated divs and UL's: if you put all the divs within a container div, the container div could be made to act like a <ul>; meanwhile, <li>s are containers just like any other and can be made to act like <div>s. So what it really comes down to is your personal preference.


5+ Year Member

Msg#: 4058351 posted 1:26 pm on Jan 12, 2010 (gmt 0)

Thanks for your detailed explanation.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved