Image and Text
shapper
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
dorayme
<c65b831b-128a-4319...@a7g2000yqk.googlegroups.com>,
shapper <mdm...@gmail.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
Adrienne Boswell
writing in news:c65b831b-128a-4319-9d33-62cbecb97de5
@a7g2000yqk.googlegroups.com:
<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
shapper
> <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 ...
Eric Lindsay
dorayme <dorayme...@optusnet.com.au> wrote:
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.
Eric Lindsay
Adrienne Boswell <arb...@yahoo.com> wrote:
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;
}
dorayme
<NOwebmasterSPAM-0D...@freenews.iinet.net.au>,
Eric Lindsay <NOwebma...@ericlindsay.com> wrote:
> In article <doraymeRidThis-34E...@news.albasani.net>,
> dorayme <dorayme...@optusnet.com.au> wrote:
>
> > In article
> > <c65b831b-128a-4319...@a7g2000yqk.googlegroups.com>,
> > shapper <mdm...@gmail.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
Jonathan N. Little
> /* 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