"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 misunderstandin g the concept of
&nbsp; since that doesn't solve anything.

Kind regards
TomB

[brucie]

In post <news:e2******* *************** ****@news.versa tel.nl>,
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.versa tel.nl>,
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******@dus k-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.infosystem s.www.authoring.stylesheets).

--
Spartanicus

[TomB]

Spartanicus wrote:

TomB <dr******@dus k-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.infosystem s.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******@dus k-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******@dus k-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******@dus k-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******@dus k-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"><i mg src="img/icon_mini.gif" width="12"
height="13" alt="">&nbsp;<a href="news.php" >News</a></span>
<span class="glue"><i mg src="img/icon_mini.gif" width="12"
height="13" alt="">&nbsp;<a href="bio.php"> Biography</a></span>
<span class="glue"><i mg src="img/icon_mini.gif" width="12"
height="13" alt="">&nbsp;<a href="media.php ">Media</a></span>

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

<span class="glue"><i mg src="img/icon_mini.gif" width="12"
height="13" alt="">&nbsp;<a href="gbook.php ">Guestbook </a></span>
<span class="glue"><i mg 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.c om.au/listamatic/>

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