5 replies [Last post]
trailerparkboy
trailerparkboy's picture
Offline
newbie
Last seen: 14 years 9 weeks ago
Joined: 2005-01-07
Posts: 8
Points: 0

Hi,
I'm trying to learn CSS in my spare time. I need to add some thumbnail images on the right hand side of a div and am having troubles getting it to work.

I want to have my 50x50 pixel thumbnail images to run horizontally along the top and aligned on the right hand side. I think I need to add something like .floatright { float: right; } ??

The CSS for the div is:

.article2 {

	margin-left:20px;
	color:#000000;
	padding:5px;
	border: 1px solid #cccccc;
	margin-bottom:10px;

}

My html is:

<div class="article2">
		<h3>Title</h3><img src="pic1" />...to pic3
		<p> Description goes here......	
		</div>

Any help is appreciated. In the mean time I will keep trying. Thanks.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 8 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Adding images to div

If you're talking about a set of 3 images that you want floated to the right you might be better off putting them in a container div and floating that right (with a bit of left margin).

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

trailerparkboy
trailerparkboy's picture
Offline
newbie
Last seen: 14 years 9 weeks ago
Joined: 2005-01-07
Posts: 8
Points: 0

Adding images to div

Thanks. I floated the images to the right and everything looks good. I just need to make the images links now. How do you make them links without appearing underneath each other?

I changed my html as follows:

<div class="article">
		<div id="images">
		<ul>
			<li><img src="thumb1.jpg" />
				<ul>
					<li><img src="thumb2.jpg" />
						<ul>
							<li><img src="thumb3.jpg" />
						
			</ul></li>
		</ul></li>
	</ul></li>
  </ul>
  </div>
</div>

When you add <li><a href=" "><img src="thumb1.jpg" /></a>, to the images, they then display underneath each other. How do you keep them to display horizontally?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 8 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Adding images to div

Hard to say without seeing the CSS, but why have you created a nested unordered list for each successive image? I would've thought this would suffice:

<ul>
<li><img src="thumb1.jpg" /></li> 
<li><img src="thumb2.jpg" /></li> 
<li><img src="thumb3.jpg" /></li> 
</ul>

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

trailerparkboy
trailerparkboy's picture
Offline
newbie
Last seen: 14 years 9 weeks ago
Joined: 2005-01-07
Posts: 8
Points: 0

Adding images to div

You're right, absolutely no reason for nesting the list! Not sure what I was doing there. I've been doing a lot of experimenting.

So, all I need to do is make the images links, so a new window will open.

The CSS for 'images' is simply

	float:right;
	padding: 1px;

Now, if I do the following html, the images now appear below each other instead of side by side.

		<ul> 
<li><a href=""><img src="thumb1rc.jpg" /></a></li> 
<li><a href=""><img src="thumb2rc.jpg" /></a></li> 
<li><a href=""><img src="thumb3rc.jpg" /></a></li> 
</ul>

Must be a simple thing, but I can't find the answer. If you still need to see more code for some reason, let me know. Thanks!

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 8 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Adding images to div

Like I said, hard to say without seeing all the CSS, but have you got display: block set on the <a> tag anywhere?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference