PDA

View Full Version : Inserting text below pictures using CSS


brainwave
05-27-2005, 03:21 PM
How can I use CSS to insure that after inserting images onto a page in DW MX 2004 that text appears below it properly?

In order for text to appear how I want it to appear under an image in Internet Explorer I need to add quite a few nbsp lines of code. When I view the page in Firefox it displays it differently (I'll assume that because FF is more standards compliant).

A typical example would be for me to insert a picture and directly below the picture display text such as Figure xx.

What can I do so that both browsers view the page properly?

I was given an answer to this problem but could not quite understand (note to self: learn more about CSS). If this is correct then all I need is a bit of hand holding to translate it to something I understand. Here it goes:

Use CSS margins to control spacing. Make the image display: block or wrap it in a a div. Place the caption in a paragraph element following the image div. Then just adjust the top margin on the paragraph to whatever value you like.

Thank you for looking.

domedia
05-27-2005, 04:40 PM
the advice is sound. Where are you stuck? Can you link to your page or paste your code?

ranjan
05-27-2005, 05:49 PM
If this is correct then all I need is a bit of hand holding to translate it to something I understand. Here it goes:

Use CSS margins to control spacing. Make the image display: block or wrap it in a a div. Place the caption in a paragraph element following the image div. Then just adjust the top margin on the paragraph to whatever value you like.

First one should know the difference between HTML inline and block elements

Block-level elements are rendered with a line break before and after them, while inline-level elements are rendered where they occur in the text flow.

An image is an inline element, for the code below

<img src="abc.gif" alt="abc">Figure abc

You will see the image abc.gif in the browser and the text "figure abc" next to it. Don't take my word for it. Type the code out in dreamweaver and view it in your browser of choice.

A div is a block element

<div id="imageabc"><img src="abc.gif" alt="abc"></div>Figure abc

Now you will see that there is a line break above and below the image and the text appear below the image. Try it again in dreamweaver and see it in your browser.

Since we have now controlled the flow of text to appear below the image we now need to position the text using CSS margins/padding.

For this the understanding of the box model is essential

Here is a read on the box model
http://gthelp.com/showthread.php?t=30804 ('http://gthelp.com/showthread.php?t=30804')

Read it and if u have qs post here

brainwave
05-29-2005, 10:28 PM
Thank you domedia and ranjan for your helpful responses. I apologize for the delay in answering.

First is a some code:



To access the Address Book from within GroupWise, click the Address Book icon on the GroupWise toolbar or click the Tools menu and select Address Book. To access the Address Book outside of GroupWise, click Start, All Programs, Novell GroupWise, GroupWise Address Book. The Address Book displays as shown below.</p>
<blockquote>


../../images/address_book.gif </p>
</blockquote>


</p>


</p>
<h3><a name="introducingAddressBook"></a>Introducing Address Book Features</h3>


The redesigned GroupWise Address Book is streamlined for easy navigation and efficiency in locating users, contacts, and resources. Here are the Address Book's main components:</p>

Ranjan, I will read the link you suggested and will let you know if I do have any questions.

Thank you both for your time.

brainwave
06-02-2005, 10:07 PM
Ranjan,
Thanks for the link.

One question I do have is must I create a separate <div> tag for every picture or is there a way to make just one?

Thanks again.

ranjan
06-03-2005, 06:13 AM
yes a div for eah image

brainwave
06-03-2005, 03:22 PM
Ranjan,
Thanks for all your help.