Jump to content
command

Images In Css

Recommended Posts

I'm basically working with a two-column page with a header and footer, navigation on the right.

My CSS calls for a border on the right side of the "contents" (which basically divides the "contents" and the right-side "menu".

It also calls for a border on the bottom of the "contents" area.

 

Within the "contents" area I'd like to align an image to the left with a short caption to the right.

Below that image, I'd like to align another image to the right with a short caption to the left......and continue thusly for a number of images.

 

My problem is floating the image and keeping the captions where I want them. Unless there is enough text to wrap under the image, the images and text seem to all jam together in a mish-mash.

 

I've tried the "clear" properties and this causes my right-hand border to break.

 

I can separate all these images with <br> tags in the html but that's not only messy, it changes the text and image positions depending on how large any browser window is.

 

Also, without sufficient text BELOW the last image, the last image floats down past the bottom border.

 

I suppose I could fix all this with a table but that's really not what CSS is supposed to be all about, is it? Can anyone help??

(I can post the html and css if it will be helpful. So far there's no point in uploading this mess :-)

 

Thanks!

Colette

Share this post


Link to post
Share on other sites

Hi Colette.

At first glance, I'd try making each of your image/caption pieces a paragraph, giving each one the background image you want positioned properly, and give the paragraph the proper text-alignment and padding (right or left) sufficient to clear the image. That way you don't need to float them at all and they shouldn't break the content border. You might have to play with the heights a little depending on how big your captions are. But since each one has its own image, you can assign each one the proper height as well.

 

Does that help?

Share this post


Link to post
Share on other sites
Hi Colette.

At first glance, I'd try making each of your image/caption pieces a paragraph, giving each one the background image you want positioned properly, and give the paragraph the proper text-alignment and padding (right or left) sufficient to clear the image. That way you don't need to float them at all and they shouldn't break the content border. You might have to play with the heights a little depending on how big your captions are. But since each one has its own image, you can assign each one the proper height as well.

 

Does that help?

 

I tried enclosing them in <p> tags the the W3 validator told me I was full of it :-) But perhaps I wasn't doing it properly. I'll try again and see if I can figure out another way to do it. We'll see!

 

Thank you!

Colette

Share this post


Link to post
Share on other sites
I tried enclosing them in <p> tags the the W3 validator told me I was full of it :-) But perhaps I wasn't doing it properly. I'll try again and see if I can figure out another way to do it. We'll see!

 

I'm sorry but I'm obviously not understanding your suggestion. Can you give me an example of the coding you're describing? So far all I've managed to do is make the image AND caption invisible <sigh>.

 

Thanks!

Colette

Share this post


Link to post
Share on other sites

Hi Colette.

Sorry - I've been away from the forum for a couple of days.

 

You can see an example of what I suggest at olifields.com/colette. View the source to see the css. There are a couple of tricks in there to get around IE bugs and such.

 

Let me know if you have more questions. I'll keep an eye out for your posts.

Edited by btrfld

Share this post


Link to post
Share on other sites

Have you got a link? I have a couple of ideas.

 

idea 1

><div>
<img src="image1.jpg" alt="" style="float: left;">TEXT HERE
</div>

<div>
<img src="image2.jpg" alt="" style="float: right;">TEXT HERE
</div>

 

idea 2

><img src="image1.jpg" alt="" style="float: left;">TEXT HERE
<br style="clear: both;">
<img src="image2.jpg" alt="" style="float: right;">TEXT HERE
<br style="clear: both;">

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...