"Glueing" grapchic with inline text together?

[TomB]

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.

Kind regards
TomB

[brucie]

In post <news:e2**************************@news.versatel.n l>,
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

[TomB]

brucie wrote:

In post <news:e2**************************@news.versatel.n l>,
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.

Great. Thanks!!!

[Spartanicus]

TomB <dr******@dusk-metal.kicks-ass.org> wrote:

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.
Preventing the break will result in a horizontal scrollbar, this should
be avoided when possible.
I don't want that to happen.

Stop wanting that.

Btw, this is not an HTML but a style issue (CSS is on topic in alt.html
or comp.infosystems.www.authoring.stylesheets).

--
Spartanicus

[TomB]

Spartanicus wrote:

TomB <dr******@dusk-metal.kicks-ass.org> wrote:

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.

Preventing the break will result in a horizontal scrollbar, this should
be avoided when possible.

I'm aware of that. However, the graphic is only 14px in width so in this
case it isn't a big deal.

I don't want that to happen.

Stop wanting that.

I won't.
Btw, this is not an HTML but a style issue (CSS is on topic in alt.html
or comp.infosystems.www.authoring.stylesheets).

That's true. Sorry for that. I still keep looking for style solutions
html wise. My bad.

Greets
TomB

[Spartanicus]

TomB <dr******@dusk-metal.kicks-ass.org> wrote:

Preventing the break will result in a horizontal scrollbar, this should
be avoided when possible.

I'm aware of that. However, the graphic is only 14px in width so in this
case it isn't a big deal.

What matters is the combined width of the graphic and the text. If there
is little text then there is no need to be worried about it wrapping in
small viewport widths, if there is more than a little text then the
horizontal scrollbar will appear long before it is necessary.

Since you have not told us what it is you are actually trying to do it
is hard to give proper advice, but coding a decorative graphic as
content (i.e. in the HTML) is questionable.

--
Spartanicus

[TomB]

Spartanicus wrote:

TomB <dr******@dusk-metal.kicks-ass.org> wrote:

Preventing the break will result in a horizontal scrollbar, this should
be avoided when possible.

I'm aware of that. However, the graphic is only 14px in width so in this
case it isn't a big deal.

What matters is the combined width of the graphic and the text. If there
is little text then there is no need to be worried about it wrapping in
small viewport widths, if there is more than a little text then the
horizontal scrollbar will appear long before it is necessary.

Since you have not told us what it is you are actually trying to do it
is hard to give proper advice, but coding a decorative graphic as
content (i.e. in the HTML) is questionable.

I completely second what you are saying. To clarify, my particular case
is the following:

Wide viewport:
img linktext img linktext img linktext img linktext

Narrow viewport:
img linktext
img linktext
img linktext
img linktext

rather than
img
linktext
img
linktext
etc...

;-)

[Jukka K. Korpela]

TomB <dr******@dusk-metal.kicks-ass.org> wrote:

Let's say I have the following code:

<img src="/path/to/little/decorative/graphic"><a href="/link/path">Link</a>

Then first fix it. It's invalid markup.

Before the fix, you could first consider whether you actually have a list of
links, so that the images act as list bullets. Then the logical approach is
to remove the <img> elements, change the list to use <ul> markup, and
consider writing some CSS styling, including list-style-image.

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

[TomB]

Jukka K. Korpela wrote:

TomB <dr******@dusk-metal.kicks-ass.org> wrote:

Let's say I have the following code:

<img src="/path/to/little/decorative/graphic"><a href="/link/path">Link</a>

Then first fix it. It's invalid markup.

Oops. Got me there.
Before the fix, you could first consider whether you actually have a list of
links, so that the images act as list bullets. Then the logical approach is
to remove the <img> elements, change the list to use <ul> markup, and
consider writing some CSS styling, including list-style-image.

So it's possible to define your own bullets? Besides that, isn't a list
always displayed vertically? I need them displayed horizontally, unless
the viewport becomes to small.

Here's the actual code:

..navbox { display: block; text-align: center; margin-left: auto;
margin-right: auto; }
<div class="navbox">
<p>
<span class="glue"><img src="img/icon_mini.gif" width="12"
height="13" alt="">&nbsp;<a href="news.php">News</a></span>
<span class="glue"><img src="img/icon_mini.gif" width="12"
height="13" alt="">&nbsp;<a href="bio.php">Biography</a></span>
<span class="glue"><img src="img/icon_mini.gif" width="12"
height="13" alt="">&nbsp;<a href="media.php">Media</a></span>

<span class="glue"><img src="img/icon_mini.gif" width="12"
height="13" alt="">&nbsp;<a href="shows.php">Shows</a></span>
<span class="glue"><img src="img/icon_mini.gif" width="12"
height="13" alt="">&nbsp;<a href="band.php">Band</a></span>
</p>
<p>
<span class="glue"><img src="img/icon_mini.gif" width="12"
height="13" alt="">&nbsp;<a href="releases.php">Releases</a></span>
<span class="glue"><img src="img/icon_mini.gif" width="12"
height="13" alt="">&nbsp;<a href="contact.php">Contact</a></span>
<span class="glue"><img src="img/icon_mini.gif" width="12"
height="13" alt="">&nbsp;<a href="http://dusk-forum.heavymetal.be"
target="_blank">Forum</a></span>

<span class="glue"><img src="img/icon_mini.gif" width="12"
height="13" alt="">&nbsp;<a href="gbook.php">Guestbook</a></span>
<span class="glue"><img src="img/icon_mini.gif" width="12"
height="13" alt="">&nbsp;<a href="links.php">Links</a></span>
</p>
</div>

Greets,
TomB

[Jim Moe]

TomB wrote:

So it's possible to define your own bullets? Besides that, isn't a list
always displayed vertically? I need them displayed horizontally, unless
the viewport becomes to small.

Visit <http://css.maxdesign.com.au/listamatic/>

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[TomB]

Jim Moe wrote:

TomB wrote:

So it's possible to define your own bullets? Besides that, isn't a
list always displayed vertically? I need them displayed horizontally,
unless the viewport becomes to small.

Visit <http://css.maxdesign.com.au/listamatic/>

O_o

Well, ehm, I'm still learning :-p

[David Ross]

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/>.

[Jukka K. Korpela]

TomB <dr******@dusk-metal.kicks-ass.org> wrote:

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

[TomB]

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 ;-)

[Leonard Blaisdell]

In article <5b**************************@news.versatel.nl>,
TomB <dr******@dusk-metal.kicks-ass.org> wrote:

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/>