Click here to get back home

"Glueing" grapchic with inline text together?
 Home | NewsGroups | Search | About
Login Password
Register Now!
 comp.infosystems.www.authoring.html    Post an article   get this group's latest topics as an RSS feed add this group's latest topics to your My MSN content add this group's latest topics to your My Yahoo content
Subject Author Date
"Glueing" grapchic with inline text together? TomB 11-04-2005
Posted by Jukka K. Korpela on November 4, 2005, 10:38 pm
Please log in for more thread options


> So it's possible to define your own bullets?

Yes.

> Besides that, isn't a list
> always displayed vertically?

No.

> I need them displayed horizontally, unless
> the viewport becomes to small.

Really? Such styling of a list is challenging at present, but you might get
help in c.i.w.a.stylesheets.

Generally, a vertical list is better for useability and accessibility, and it
also helps the author keep the size of the list decent.

> Here's the actual code:

You didn't post the URL even now.

> <span class="glue"><img src="img/icon_mini.gif" width="12"
> height="13" alt="">&nbsp;<a href="news.php">News</a></span>

You added an alt attribute but didn't think of it much, did you?
If the icons are useful indicators in graphic rendering, wouldn't
some separators be needed in plain text rendering, aural rendering,
or Braille rendering? Using alt="*" is more or less conventional
when simulating list bullets.

But if it's really a list (you didn't say anything about that previously),
why not make it a list?

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html


Posted by TomB on November 5, 2005, 1:49 am
Please log in for more thread options

Jukka K. Korpela wrote:

>> <span class="glue"><img src="img/icon_mini.gif" width="12"
>>height="13" alt="">&nbsp;<a href="news.php">News</a></span>
>
>
> You added an alt attribute but didn't think of it much, did you?
> If the icons are useful indicators in graphic rendering, wouldn't
> some separators be needed in plain text rendering, aural rendering,
> or Braille rendering? Using alt="*" is more or less conventional
> when simulating list bullets.

Actually, using "" or " " for alt text on decorative graphics was
something recomended to me by a user of this ng. That made a lot of
sense to me, taking text-only browsers and braille rendering into
consideration.

> But if it's really a list (you didn't say anything about that previously),
> why not make it a list?

I already use lists for summing up stuff in plain text, but now that
I've learned they are much more versitile than that, I'll probably wille
use them for other things as well.

But please gimme a break: I justed exchanged Dreamweaver4 for jEdit when
it comes to building a website ;-)

Posted by Leonard Blaisdell on November 4, 2005, 5:22 pm
Please log in for more thread options



> Actually, using "" or " " for alt text on decorative graphics was
> something recomended to me by a user of this ng. That made a lot of
> sense to me, taking text-only browsers and braille rendering into
> consideration.

That's actually good practice. But think about the the graphic you are
using to denote the list. Wouldn't a nice text fallback be a '*' instead
of nothing at all? After all, it is a list.

leo

--
<http://web0.greatbasin.net/~leo/>

Posted by David Ross on November 4, 2005, 2:10 pm
Please log in for more thread options


TomB wrote:
>
> Hello,
>
> Let's say I have the following code:
>
> <img src="/path/to/little/decorative/graphic"><a href="/link/path">Link</a>
>
> When I now make my browser window smaller eventually the graphic and the
> link text will break into two lines. I don't want that to happen. How to
> I accomplish that? I tried putting a non-breaking space between the
> image and the link, but perhaps I'm misunderstanding the concept of
> &nbsp; since that doesn't solve anything.

If you are trying to have an image with a link, put the image
inside the link anchor:
        <a href=". . ."><img . . . >text</a>

See my home page (per the signature below) for an example. Near
the top of the page, I have images and links for sending me E-mail
and for my PGP keys. Also look at the bottom of my
<URL:http://www.rossde.com/garden/garden_back.html>, where I have
three images and links arranged horizontally.

My preference is to have a small descriptive label below the image
rather than next to it. My text and image would be side-by-side if
I removed the <br> tag between them. I just ran a test. Without
the <br>, the lines of text wrap before the text separates from the
images when I make the browser window narrower. The text does
eventually separate from the images when the window becomes very
narrow. I get a horizontal scrollbar only when the window is so
narrow that the images cannot fit side-by-side without scrolling.

--

David E. Ross
<URL:http://www.rossde.com/>

I use Mozilla as my Web browser because I want a browser that
complies with Web standards. See <URL:http://www.mozilla.org/>.

Posted by brucie on November 4, 2005, 7:29 pm
Please log in for more thread options


TomB said:

> <img src="/path/to/little/decorative/graphic"><a href="/link/path">Link</a>
>
> When I now make my browser window smaller eventually the graphic and the
> link text will break into two lines. I don't want that to happen.

white-space:nowrap; on the element containing the image and the link.

--
l i t t l e v o i c e s

Similar ThreadsPosted
Two lines of text in inline context September 1, 2005, 5:40 am
inline frames September 21, 2005, 8:48 pm
inline images December 27, 2005, 2:48 am
CSS gap between inline elements February 7, 2008, 3:03 am
display: inline question? April 26, 2008, 1:11 pm
Restricting inline image size March 29, 2005, 6:56 pm
Re: Restricting inline image size March 29, 2005, 9:24 pm
Re: Restricting inline image size March 30, 2005, 2:07 am
Showing target of a link inline November 15, 2005, 6:00 pm
DTD? Is address element block or inline? December 15, 2005, 10:16 pm

Our other projects:

Art Dolls, Fairies and Mermaids - Sunnyfaces.net

Roy's Linux, Programming and Search Engines messages

1-Script XML SitemapXML Sitemap