Image and Text

Hello,

I have the following markup:

<ol>
<li>
<img src="Img1.jpg" alt="Image 1" class="Product"/>
<p>Product 1</p>
<a href="/Product/Download/1">Brochure</a>
</li>
<li> ... </li>
</ol>

How can I make the link and text to be on the right side of the image?

Thanks,
Miguel

In article
<c65b831b-128a-4319-9d33-62cbecb97de5 (AT) a7g2000yqk (DOT) googlegroups.com>,
shapper <mdmoura (AT) gmail (DOT) com> wrote:

ol
li
img src="Img1.jpg" alt="Image 1" class="Product"/
p>Product 1</p
a href="/Product/Download/1">Brochure</a
/li
li> ... </li
/ol

Remove the P tags

--
dorayme

Gazing into my crystal ball I observed shapper <mdmoura (AT) gmail (DOT) com>
writing in news:c65b831b-128a-4319-9d33-62cbecb97de5
@a7g2000yqk.googlegroups.com:

Hello,

I have the following markup:

ol
li
img src="Img1.jpg" alt="Image 1" class="Product"/
p>Product 1</p
a href="/Product/Download/1">Brochure</a
/li
li> ... </li
/ol

How can I make the link and text to be on the right side of the image?

Thanks,
Miguel

<style type="css">
..product img {float:left;}
</style>

<ol>
<li>
<p class="product"><img src="img1.jpg" alt="short product description">
Product 1 <a href=/product/download/1">Brochure</a></p>
</li>
</ol>

By the way, if the brochure is in PDF format, it would be nice to
indicate such, eg:

a.pdf {background-image:url("pdf.gif"); background-repeat:no-repeat;
background-position:right; padding-right:15px} or
<a href="/product/download/1">Brochure</a> (pdf}

--
Adrienne Boswell at Home
Arbpen Web Site Design Services
http://www.cavalcade-of-coding.info
Please respond to the group so others can share

On Jul 3, 4:16*am, Adrienne Boswell <arb... (AT) yahoo (DOT) com> wrote:

style type="css"
.product img {float:left;}
/style

ol
li
p class="product"><img src="img1.jpg" alt="short product description"
Product 1 <a href=/product/download/1">Brochure</a></p
/li
/ol

I think you need clear:both on each list item or not?
At least when I preview it the lists are half way up ...

In article <doraymeRidThis-34E12B.13063003072009 (AT) news (DOT) albasani.net>,
dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:

In article
c65b831b-128a-4319-9d33-62cbecb97de5...oglegroups.com>,
shapper <mdmoura (AT) gmail (DOT) com> wrote:

ol
li
img src="Img1.jpg" alt="Image 1" class="Product"/
p>Product 1</p
a href="/Product/Download/1">Brochure</a
/li
li> ... </li
/ol

Remove the P tags

Why? In the DTD, <li> is ENTITY %flow

Doesn't that mean <li> is a block element that can contain both inline
and block elements?

I hardly ever use lists (except for navigation) so I do not have
experience of using them for more than a word or two of content.

--
http://www.ericlindsay.com

In article <Xns9C3CCD9709A59arbpenyahoocom (AT) 188 (DOT) 40.43.213>,
Adrienne Boswell <arbpen (AT) yahoo (DOT) com> wrote:

Gazing into my crystal ball I observed shapper <mdmoura (AT) gmail (DOT) com
writing in news:c65b831b-128a-4319-9d33-62cbecb97de5
@a7g2000yqk.googlegroups.com:

Hello,

I have the following markup:

ol
li
img src="Img1.jpg" alt="Image 1" class="Product"/
p>Product 1</p
a href="/Product/Download/1">Brochure</a
/li
li> ... </li
/ol

How can I make the link and text to be on the right side of the image?

Thanks,
Miguel


style type="css"
.product img {float:left;}
/style

ol
li
p class="product"><img src="img1.jpg" alt="short product description"
Product 1 <a href=/product/download/1">Brochure</a></p
/li
/ol

By the way, if the brochure is in PDF format, it would be nice to
indicate such, eg:

a.pdf {background-image:url("pdf.gif"); background-repeat:no-repeat;
background-position:right; padding-right:15px} or
a href="/product/download/1">Brochure</a> (pdf}

Isn't the a.pdf something where you need to specify a class for each
link to a PDF document before the CSS can do its job?

Is there a problem with just letting the CSS do all the work?

/* Use attribute selectors to target the extension of a file name. Pad
the link right. Then put an icon in the background of the link */
a[href$=".pdf"] {
background: url(images/pdf_icon.png) right center no-repeat;
padding-right: 20px;
}

--
http://www.ericlindsay.com

In article
<NOwebmasterSPAM-0D43BA.06535805072009 (AT) freenews (DOT) iinet.net.au>,
Eric Lindsay <NOwebmasterSPAM (AT) ericlindsay (DOT) com> wrote:

In article <doraymeRidThis-34E12B.13063003072009 (AT) news (DOT) albasani.net>,
dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:

In article
c65b831b-128a-4319-9d33-62cbecb97de5...oglegroups.com>,
shapper <mdmoura (AT) gmail (DOT) com> wrote:

ol
li
img src="Img1.jpg" alt="Image 1" class="Product"/
p>Product 1</p
a href="/Product/Download/1">Brochure</a
/li
li> ... </li
/ol

Remove the P tags

Why?

Perhaps you were thinking that my saying to remove P was because I
thought it illegal? No, simplicity and purpose were my motivations here.
I am greatly attracted to non-existence and where it is useful, I find
it irresistible!

Because they are not needed here and because they are a positive
interference in getting what the OP wanted (which, if I recall, was to
have the text next to the image). Images are inline. Text is inline. Why
would you have an element whose natural tendency is to do what the OP
does not want? Yes, if there is a real semantic need and there really is
material worthy of the name of a paragraph and certainly if there are
further paragraphs. In which case, the simple solution is to use floats
for the image and rearrange the P tags a bit...

When I see table cells made with tiny bits of text wrapped in paragraphs
for no good reason, there is an Australian expression that seems always
to spring to my mind "What a ..."

In the DTD, <li> is ENTITY %flow

Doesn't that mean <li> is a block element that can contain both inline
and block elements?

I hardly ever use lists (except for navigation) so I do not have
experience of using them for more than a word or two of content.

I made an over-the-top list for all your eyes the other day on this
usenet group with tables as list items:

<http://dorayme.netweaver.com.au/tableBorders.html>

Btw of course, it was slightly naughty of me on my own view that an OL
should *really* only be used where there is real order in the list
rather than for the presentational numbers as distinguishable markers
for reference.

--
dorayme

Eric Lindsay wrote:

/* Use attribute selectors to target the extension of a file name. Pad
the link right. Then put an icon in the background of the link */
a[href$=".pdf"] {
background: url(images/pdf_icon.png) right center no-repeat;
padding-right: 20px;
}

Just be aware the MS only decided to play starting with IE8

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com