4 replies [Last post]
Boxkites
Boxkites's picture
Offline
newbie
New Zealand
Last seen: 1 year 11 weeks ago
New Zealand
Timezone: GMT+12
Joined: 2009-12-25
Posts: 9
Points: 12

Hi there,
I am trying to get a lot of the same size divs inline using an unordered list.
Not sure if this is possible as I tried a lot of things to get it working, I must admit I only tried it in Chrome for now,
[Here] is the page as it is right now, and [this] is what I would like it to look like. It is not about the images but the layout.
The page how I want it to look like, has thumbs in the form of slides, now I would like to have the normal thumbs in a div with the blanc slide in the background. See the Blanc.png background image below

I got this to work but I can not get them to show horizontally inline.

Here are the codes for your info.

#Thumbnails_Album_Container ul li{
		display:inline;
		}
 
.Thumbnails_Image_Div {
		width:160px;
		height:120px;
		background-image:url(../img/nav/Blanc.png);
		border:0px solid red;
		}
 
.Img_Thumbnails_Album {
		margin:9px;
		border-top:1px solid #000;		
		border-right:1px solid #C0C0C0;
		border-bottom:1px solid #C0C0C0;
		border-left:1px solid #000;		
		}

The html code is as follows,

<div id="Thumbnails_Album_Container">
	<ul>
		<li><div class="Thumbnails_Image_Div"><img src="http://i181.photobucket.com/albums/x103/boxkites/2010/nelson10/tn/tn-Nelson10-01.jpg" width="134" height="83" alt="" border="0" class="Img_Thumbnails_Album"></div></li>
		<li><div class="Thumbnails_Image_Div"><img src="http://i181.photobucket.com/albums/x103/boxkites/2010/nelson10/tn/tn-Nelson10-02.jpg" width="134" height="83" alt="" border="0" class="Img_Thumbnails_Album"></div></li>
		<li><div class="Thumbnails_Image_Div"><img src="http://i181.photobucket.com/albums/x103/boxkites/2010/nelson10/tn/tn-Nelson10-03.jpg" width="134" height="83" alt="" border="0" class="Img_Thumbnails_Album"></div></li>
		<li><div class="Thumbnails_Image_Div"><img src="http://i181.photobucket.com/albums/x103/boxkites/2010/nelson10/tn/tn-Nelson10-04.jpg" width="134" height="83" alt="" border="0" class="Img_Thumbnails_Album"></div></li>
		<li><div class="Thumbnails_Image_Div"><img src="http://i181.photobucket.com/albums/x103/boxkites/2010/nelson10/tn/tn-Nelson10-05.jpg" width="134" height="83" alt="" border="0" class="Img_Thumbnails_Album"></div></li>
		<li><div class="Thumbnails_Image_Div"><img src="http://i181.photobucket.com/albums/x103/boxkites/2010/nelson10/tn/tn-Nelson10-06.jpg" width="134" height="83" alt="" border="0" class="Img_Thumbnails_Album"></div></li>
		<li><div class="Thumbnails_Image_Div"><img src="http://i181.photobucket.com/albums/x103/boxkites/2010/nelson10/tn/tn-Nelson10-07.jpg" width="134" height="83" alt="" border="0" class="Img_Thumbnails_Album"></div></li>
		<li><div class="Thumbnails_Image_Div"><img src="http://i181.photobucket.com/albums/x103/boxkites/2010/nelson10/tn/tn-Nelson10-08.jpg" width="134" height="83" alt="" border="0" class="Img_Thumbnails_Album"></div></li>
		<li><div class="Thumbnails_Image_Div"><img src="http://i181.photobucket.com/albums/x103/boxkites/2010/nelson10/tn/tn-Nelson10-09.jpg" width="134" height="83" alt="" border="0" class="Img_Thumbnails_Album"></div></li>
		<li><div class="Thumbnails_Image_Div"><img src="http://i181.photobucket.com/albums/x103/boxkites/2010/nelson10/tn/tn-Nelson10-10.jpg" width="134" height="83" alt="" border="0" class="Img_Thumbnails_Album"></div></li>
		<li><div class="Thumbnails_Image_Div"><img src="http://i181.photobucket.com/albums/x103/boxkites/2010/nelson10/tn/tn-Nelson10-11.jpg" width="134" height="83" alt="" border="0" class="Img_Thumbnails_Album"></div></li>
		<li><div class="Thumbnails_Image_Div"><img src="http://i181.photobucket.com/albums/x103/boxkites/2010/nelson10/tn/tn-Nelson10-12.jpg" width="134" height="83" alt="" border="0" class="Img_Thumbnails_Album"></div></li>
		<li><div class="Thumbnails_Image_Div"><img src="http://i181.photobucket.com/albums/x103/boxkites/2010/nelson10/tn/tn-Nelson10-13.jpg" width="134" height="83" alt="" border="0" class="Img_Thumbnails_Album"></div></li>
		<li><div class="Thumbnails_Image_Div"><img src="http://i181.photobucket.com/albums/x103/boxkites/2010/nelson10/tn/tn-Nelson10-14.jpg" width="134" height="83" alt="" border="0" class="Img_Thumbnails_Album"></div></li>
		<li><div class="Thumbnails_Image_Div"><img src="http://i181.photobucket.com/albums/x103/boxkites/2010/nelson10/tn/tn-Nelson10-15.jpg" width="134" height="83" alt="" border="0" class="Img_Thumbnails_Album"></div></li>
		<li><div class="Thumbnails_Image_Div"><img src="http://i181.photobucket.com/albums/x103/boxkites/2010/nelson10/tn/tn-Nelson10-16.jpg" width="134" height="83" alt="" border="0" class="Img_Thumbnails_Album"></div></li>
	</ul>
</div>

The BG image I would like to use:

I would like to be able to change the background rather than redoing all those thumbnails if I want to change things.
Your help is appreciated.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 6 hours 5 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9190
Points: 3195

Make the li elements

Make the li elements {display: inline-block;}, and make the parent ul {text-align: center;}.

You don't need the divs that hold the pics. Put the height, width and bg image on the li elements.

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

Boxkites
Boxkites's picture
Offline
newbie
New Zealand
Last seen: 1 year 11 weeks ago
New Zealand
Timezone: GMT+12
Joined: 2009-12-25
Posts: 9
Points: 12

Thanks Gary, it looks ok to

Thanks Gary, it looks ok to me in Chrome, Opera and Firefox, but in IE it is, although centered, not inline. I have shown the updated CSS, have I made an error somewhere, if not, how can I get it to work in IE??

You can still use the same links in my first post as the page is updated as we go along, to see the results.

So: html is now,

<div id="Thumbnails_Body_Container">
	<ul>
		<li class="Thumbnails_Image_Li"><img src="http://i181.photobucket.com/albums/x103/boxkites/2010/nelson10/tn/tn-Nelson10-01.jpg" width="134" height="83" alt="" border="0" class="Img_Thumbnails_Album"></li>
		<li class="Thumbnails_Image_Li"><img src="http://i181.photobucket.com/albums/x103/boxkites/2010/nelson10/tn/tn-Nelson10-02.jpg" width="134" height="83" alt="" border="0" class="Img_Thumbnails_Album"></li>
		<li class="Thumbnails_Image_Li"><img src="http://i181.photobucket.com/albums/x103/boxkites/2010/nelson10/tn/tn-Nelson10-03.jpg" width="134" height="83" alt="" border="0" class="Img_Thumbnails_Album"></li>
		<li class="Thumbnails_Image_Li"><img src="http://i181.photobucket.com/albums/x103/boxkites/2010/nelson10/tn/tn-Nelson10-04.jpg" width="134" height="83" alt="" border="0" class="Img_Thumbnails_Album"></li><br />
		<li class="Thumbnails_Image_Li"><img src="http://i181.photobucket.com/albums/x103/boxkites/2010/nelson10/tn/tn-Nelson10-05.jpg" width="134" height="83" alt="" border="0" class="Img_Thumbnails_Album"></li>
		<li class="Thumbnails_Image_Li"><img src="http://i181.photobucket.com/albums/x103/boxkites/2010/nelson10/tn/tn-Nelson10-06.jpg" width="134" height="83" alt="" border="0" class="Img_Thumbnails_Album"></li>
		<li class="Thumbnails_Image_Li"><img src="http://i181.photobucket.com/albums/x103/boxkites/2010/nelson10/tn/tn-Nelson10-07.jpg" width="134" height="83" alt="" border="0" class="Img_Thumbnails_Album"></li>
		<li class="Thumbnails_Image_Li"><img src="http://i181.photobucket.com/albums/x103/boxkites/2010/nelson10/tn/tn-Nelson10-08.jpg" width="134" height="83" alt="" border="0" class="Img_Thumbnails_Album"></li><br />
		<li class="Thumbnails_Image_Li"><img src="http://i181.photobucket.com/albums/x103/boxkites/2010/nelson10/tn/tn-Nelson10-09.jpg" width="134" height="83" alt="" border="0" class="Img_Thumbnails_Album"></li>
		<li class="Thumbnails_Image_Li"><img src="http://i181.photobucket.com/albums/x103/boxkites/2010/nelson10/tn/tn-Nelson10-10.jpg" width="134" height="83" alt="" border="0" class="Img_Thumbnails_Album"></li>
		<li class="Thumbnails_Image_Li"><img src="http://i181.photobucket.com/albums/x103/boxkites/2010/nelson10/tn/tn-Nelson10-11.jpg" width="134" height="83" alt="" border="0" class="Img_Thumbnails_Album"></li>
		<li class="Thumbnails_Image_Li"><img src="http://i181.photobucket.com/albums/x103/boxkites/2010/nelson10/tn/tn-Nelson10-12.jpg" width="134" height="83" alt="" border="0" class="Img_Thumbnails_Album"></li><br />
		<li class="Thumbnails_Image_Li"><img src="http://i181.photobucket.com/albums/x103/boxkites/2010/nelson10/tn/tn-Nelson10-13.jpg" width="134" height="83" alt="" border="0" class="Img_Thumbnails_Album"></li>
		<li class="Thumbnails_Image_Li"><img src="http://i181.photobucket.com/albums/x103/boxkites/2010/nelson10/tn/tn-Nelson10-14.jpg" width="134" height="83" alt="" border="0" class="Img_Thumbnails_Album"></li>
		<li class="Thumbnails_Image_Li"><img src="http://i181.photobucket.com/albums/x103/boxkites/2010/nelson10/tn/tn-Nelson10-15.jpg" width="134" height="83" alt="" border="0" class="Img_Thumbnails_Album"></li>
		<li class="Thumbnails_Image_Li"><img src="http://i181.photobucket.com/albums/x103/boxkites/2010/nelson10/tn/tn-Nelson10-16.jpg" width="134" height="83" alt="" border="0" class="Img_Thumbnails_Album"></li>
	</ul>

And the CSS is updated to:

#Thumbnails_Body_Container {
      	margin-left:15px;
		text-align:center;
		width:98%;
		height:620px;
		}
 
#Thumbnails_body_Container ul{
		list-style:none;		
		}
 
 
.Thumbnails_Image_Li { 
		display:inline-block;
        text-align:left;       
		width:160px;
		height:120px;
		background-image:url(../img/nav/Blanc.png);
		border:0px solid red;
		}
 
.Img_Thumbnails_Album {
		margin:9px;
		border-top:1px solid #000;		
		border-right:1px solid #C0C0C0;
		border-bottom:1px solid #C0C0C0;
		border-left:1px solid #000;		
		}

I can delete the tags by setting the width of the div but for now I just want to see if I can get it all to work.
Cheers

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 6 hours 5 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9190
Points: 3195

You've forced quirks mode.

You've forced quirks mode. Change your DTD to

<!DOCTYPE html>

Also, lose those br elements.

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

Boxkites
Boxkites's picture
Offline
newbie
New Zealand
Last seen: 1 year 11 weeks ago
New Zealand
Timezone: GMT+12
Joined: 2009-12-25
Posts: 9
Points: 12

gary.turner wrote:You've

gary.turner wrote:

You've forced quirks mode. Change your DTD to

<!DOCTYPE html>

Also, lose those br elements.

cheers,

gary

The last line should have read:

Boxkites wrote:

I can delete the <br />tags by setting the width of the div but for now I just want to see if I can get it all to work.

Looks like they delete the tag because I forgot to put a code tag around it.
Anyway, you think I should replace :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

with :

<!DOCTYPE html>

?

I will give it a go. [Edited 2 minutes later: thanks Gary, that seems to fix the prob.]
Cheers