...

View Full Version : Floating Images In a Div



lmw1
04-20-2011, 02:04 AM
Can someone take a look at the bottom of my site (where the green watches are) and please explain how to get the text to show "under" the images.

Am I doing this right?

http://www.americanwebmakers.com/demo_college

Thanks in advance!

oesxyl
04-20-2011, 02:53 AM
Can someone take a look at the bottom of my site (where the green watches are) and please explain how to get the text to show "under" the images.

Am I doing this right?

http://www.americanwebmakers.com/demo_college

Thanks in advance!

remove float: left from the img tag and add to the a tag two declarations:
float: left;
width: 240px;

would be better to use a span around captions since you probably want to style it later.


<a style="float: left; width: 240px;" title="my caption" rel="lightbox"
href="images/watches/most_popular/baylor.jpg"><img width="240"
height="240" class="thumbs"
src="images/watches/most_popular/baylor.jpg"><span>image #1</span></a>


best regards

lmw1
04-20-2011, 03:14 AM
Still have a few issues...

1) The text is acting like an anchor. It should just be plain text there, not a link. The image is the link that opens in a lightbox.

2) I've set margins for the thumb images but they are still butted up right next to each other. I'd like to have a 10-15px gap between them.

Any ideas?

oesxyl
04-20-2011, 03:24 AM
Still have a few issues...

1) The text is acting like an anchor. It should just be plain text there, not a link. The image is the link that opens in a lightbox.

2) I've set margins for the thumb images but they are still butted up right next to each other. I'd like to have a 10-15px gap between them.

Any ideas?
in this case you need to move the caption outside of the a tag but that means that you need to add a div to put inside the a tag and the caption. In this case you need to remove float and width from a and move them to the div.
about 2), did you remove the float: left from the img tag? the margin-top: 10px to the span caption or margin-bottom to the img tag should work.

best regards

lmw1
04-20-2011, 03:37 AM
I did as you suggested for #2 and it worked.

I'm a little confused as to what you meant in regard to #1 though.

oesxyl
04-20-2011, 10:36 AM
I did as you suggested for #2 and it worked.

I'm a little confused as to what you meant in regard to #1 though.
something like this instead of what you have:


<div>
<a ...>
<img...>
</a>
<p> caption </p>
</div>

now you need foat: left and width: 240px to the div because the a tag is inside the div container and you want to put watches one ofter another and both css declaration doesn't do nothing inside the div.
i replaced span with p for caption because you want to be on a new next line under the picture.

best regards



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum