A div in text flow
Hans-Georg Michna
<p>some text <a href="..."><img src="..." /></a> more text</p>
that works pretty well. I can add style="border: 2px solid blue"
to the img tag to make its link quality more obvious.
So far, so good. But now I want two images side by side as one
link with one blue border around both, and still flowing with
the text.
I've tried <div style="display: inline-block" ...>... around the
two images, but the div doesn't flow inside a line of text. If I
use <span ...> instead, then it does flow properly, but the
border does not surround the images. Instead the images stick
out at the top of the box if they are higher than the line
height.
I have now done a poor emergency solution by adding a character
(‍) and defining the font-size according to image height,
but the crude workaround still has problems with going below the
large font base line, and it is extremely ugly and embarrassing
code anyway.
Can it be done properly? How?
Hans-Georg
dorayme
Hans-Georg Michna <hans-georgN...@michna.com> wrote:
> When I put an image link into text, like:
>
> <p>some text <a href="..."><img src="..." /></a> more text</p>
>
> that works pretty well. I can add style="border: 2px solid blue"
> to the img tag to make its link quality more obvious.
>
> So far, so good. But now I want two images side by side as one
> link with one blue border around both, and still flowing with
> the text.
>
img {border: 2px solid blue;}
<p>Some text <a href="example.com"><img style="border-right: 0"
src="pics/crimson.png" alt=""><img style="border-left: 0"
src="pics/crimson.png" alt=""></a> and some more text</p>
Does this do what you want?
--
dorayme
Hans-Georg Michna
>In article <v4rtf5to6baig940u...@4ax.com>,
> Hans-Georg Michna <hans-georgN...@michna.com> wrote:
Good idea, thanks! It would solve most similar cases of my
current problem perfectly. However, in this particular case it
doesn't, because the two images don't have the same height. So
the blue borders look odd, with a gap.
I kept looking for solutions and found a few things that I will
mention here, just in case somebody else runs into the same
problem.
I wanted to have the entire image block clickable. That makes
div unworkable anyway, because you can't have a <div ...> inside
an <a ...> tag (can't put a block tag inside an inline tag,
according to, for example, the XHTML 1.0 standard), and if I put
the <a ...> tag inside the div, around the two images, then the
area inside the div, but above the lower picture would not be
clickable.
This leaves only the span tag or simply the a tag itself, and
the only problem I had with this was that it didn't reach high
enough around the images. It looked rather funny, like the
images sitting in a translucent blue-frame bathtub with their
heads sticking out.
The primitive solution was to forget about span and add some
padding-top to the a tag. Problem solved for me. You can see an
example of this in the last picture at the bottom of
http://winhlp.com/node/446 . It actually consists of two
side-by-side images in an a tag.
But the residual problem is, if the content of the a tag changed
dynamically, then I'd have to write excessive JavaScript to
adapt the padding-top of the a tag for every change.
So the remaining, now merely theoretical question is, why does
the span (or the a) tag not surround its content? Why can the
content stick out at the top? And how can one prevent this and
force the span tag to completely and automatically encompass its
content?
Another question on the side is, why does the standard not allow
to put a <div style="display: inline-block">...</div> into text,
like into a <p>...</p> tag? Or does it? At least Expression Web
flags the following as forbidden in XHTML 1.0 Transitional:
<p>Text <div style="display: inline-block">DIV</div> text</p>
Hans-Georg
Harlan Messinger
> When I put an image link into text, like:
>
> <p>some text <a href="..."><img src="..." /></a> more text</p>
>
> that works pretty well. I can add style="border: 2px solid blue"
> to the img tag to make its link quality more obvious.
>
> So far, so good. But now I want two images side by side as one
> link with one blue border around both, and still flowing with
> the text.
What would you expect to happen in the case where the line breaks
between the two images?
The best solution is to make a single composite image out of the two.
Jukka K. Korpela
> What would you expect to happen in the case where the line breaks
> between the two images?
I would expect that to the unexpected to the OP, but a line break is
possible - in actual implementations, and the specifications are silent -
between two images even when there is no whitespace between the img
elements. On the other hand, it can be prevented, with the usual CSS
caveats, by using white-space: nowrap on an element that contains both
images, or, with the usuan moaning about nonstandard markup, by the use of
<nobr>...</nobr> around them.
> The best solution is to make a single composite image out of the two.
Certainly, unless the best solution is to stop using an inline image in the
first place.
--
Yucca, http://www.cs.tut.fi/~jkorpela/
Jukka K. Korpela
>> img {border: 2px solid blue;}
>>
>> <p>Some text <a href="example.com"><img style="border-right: 0"
>> src="pics/crimson.png" alt=""><img style="border-left: 0"
>> src="pics/crimson.png" alt=""></a> and some more text</p>
>>
>> Does this do what you want?
>
> Good idea, thanks!
The suggestion has more problems than I care to list down, like the use of
alt="" for images that are a link ("just an example", yes, but a very bad
example, and people learn by example).
If you like such an approach, you should at least change the first CSS rule
to
img { border-width: 2px; }
(to let browsers indicate link status by colors - _or_ set up your own color
scheme that use provisions for :link, :visited, :active, and :focus).
> It would solve most similar cases of my
> current problem perfectly.
We don't actually know what your current problem is. Why don't you simply
combine the images into one, and why do you use inline images in the first
place? Text and images are friends, but blending images into text easily
causes confusion and layout problems that wouldn't exist in a simpler
approach.
> However, in this particular case it
> doesn't, because the two images don't have the same height.
So in which sense should they share a border, and why?
> This leaves only the span tag or simply the a tag itself, and
> the only problem I had with this was that it didn't reach high
> enough around the images. It looked rather funny, like the
> images sitting in a translucent blue-frame bathtub with their
> heads sticking out.
Your language is interesting, even poetic, but it does not tell what you
have actually done and how it behaves. A URL is worth more than a thousand
words.
> The primitive solution was to forget about span and add some
> padding-top to the a tag. Problem solved for me. You can see an
> example of this in the last picture at the bottom of
> http://winhlp.com/node/446 . It actually consists of two
> side-by-side images in an a tag.
Is that your page and does not demonstrate your real problem? And you could
have been more explicit in saying what construct you were referring to. It
seems to be construct with two images that render as
"Twisted4Life DNS configuration checkerTwisted4Life DNS configuration
checker"
unless the browser happens to be configured to display images. (Hint:
There's a hint here, but if you didn't get it, check
http://www.alanflavell.org.uk/alt/alt-text.html )
So why don't you simply combine the two images into one? Better still, when
linking to pages about some software, why don't use just the names as links?
Logo images hardly add anything to the value of your page, and they make the
presentation visually unbalanced ja confusing.
> But the residual problem is, if the content of the a tag changed
> dynamically, then I'd have to write excessive JavaScript to
> adapt the padding-top of the a tag for every change.
What padding? You're not describing your purported solution, and this seems
to be about CSS, not HTML, which is the topic of this group, so I'm not
particularly interested in finding out, from a bulk of code, what you regard
as a solution - to something that is apparently a non-problem.
> So the remaining, now merely theoretical question is, why does
> the span (or the a) tag not surround its content?
The question appears to be about visual rendering, which belongs to the
realm of browser behavior and CSS rather than HTML.
> And how can one prevent this and force
You can't.
> the span tag to completely and automatically encompass its
> content?
You would have to formulate the question in more objective and tangible
terms, and in a different forum.
> Another question on the side is, why does the standard not allow
> to put a <div style="display: inline-block">...</div> into text,
> like into a <p>...</p> tag?
Because the designers of HTML wanted to make the p element correspond to the
concept of text paragraph that contains only text and, in less common cases,
other inline elements (images, form fields).
> Or does it?
It doesn't.
> At least Expression Web
> flags the following as forbidden in XHTML 1.0 Transitional:
Web authoring software should not be relied in matters of markup
correctness. Such software has long traditions of generating invalid markup,
making incorrect statements about markup, etc.
If display: inline-block worked in WWW terms (it doesn't), you could of
course use <span> instead of <div> there. After all, whether the element has
display: inline or display: block as default is insignificant as long as you
are going to rely on being able to set the display property to a value that
differs from both of them.
--
Yucca, http://www.cs.tut.fi/~jkorpela/
Osmo Saarikumpu
> So why don't you simply combine the two images into one? Better still,
> when linking to pages about some software, why don't use just the names
> as links? Logo images hardly add anything to the value of your page, and
> they make the presentation visually unbalanced ja confusing.
Full ACK. And the presented example certainly is no exception. JFTR the
above "ja" (between "unbalanced ja confusing") means "and" in Finnish
if somebody is wondering.
--
Best wishes,
Osmo
Molly Mockford
wrote in <4b003d9d$0$6271$9b53...@news.fv.fi>:
I guessed that! And presumably kirjoitti means "wrote"? This could
turn into a useful (if off-topic) tutorial.
--
Molly Mockford
Nature loves variety. Unfortunately, society hates it. (Milton Diamond Ph.D.)
(My Reply-To address *is* valid, though may not remain so for ever.)
Ben C
You can make a span display: inline-block, or just do this:
<a style="display-inline: block" ...> <img> <img> </a>
> The primitive solution was to forget about span and add some
> padding-top to the a tag. Problem solved for me. You can see an
> example of this in the last picture at the bottom of
> http://winhlp.com/node/446 . It actually consists of two
> side-by-side images in an a tag.
>
> But the residual problem is, if the content of the a tag changed
> dynamically, then I'd have to write excessive JavaScript to
> adapt the padding-top of the a tag for every change.
>
> So the remaining, now merely theoretical question is, why does
> the span (or the a) tag not surround its content? Why can the
> content stick out at the top?
The height of the "content area" of an inline box is based on its font
size, not on its contents. You're right that inline-block is the best
solution here.
You could also try using outline instead of border. Firefox will stretch
the outline around images in links the way you want (or did the last
time I tried it). This is because outline is often used for a sort of
highlight and nobody likes that bathtub effect. Then you'd just use
outline on an inline box.
> And how can one prevent this and
> force the span tag to completely and automatically encompass its
> content?
Make the span display: inline-block.
> Another question on the side is, why does the standard not allow
> to put a <div style="display: inline-block">...</div> into text,
> like into a <p>...</p> tag? Or does it? At least Expression Web
> flags the following as forbidden in XHTML 1.0 Transitional:
>
><p>Text <div style="display: inline-block">DIV</div> text</p>
No, you're not allowed a div in a p. The DTDs are full of rules like
that, mostly just historical IMO, but still better not to break them,
because browsers do odd things.
You can style anything how you want, so just go with the flow, and make
it a span rather than a div. It doesn't make any difference (other than
having the benefit of being valid).
dorayme
Hans-Georg Michna <hans-georgN...@michna.com> wrote:
> On Sun, 15 Nov 2009 07:04:17 +1100, dorayme wrote:
>
> >In article <v4rtf5to6baig940u...@4ax.com>,
>
> > Hans-Georg Michna <hans-georgN...@michna.com> wrote:
>
> >> When I put an image link into text, like:
> >>
> >> <p>some text <a href="..."><img src="..." /></a> more text</p>
> >>
> >> that works pretty well. I can add style="border: 2px solid blue"
> >> to the img tag to make its link quality more obvious.
> >>
> >> So far, so good. But now I want two images side by side as one
> >> link with one blue border around both, and still flowing with
> >> the text.
>
> >img {border: 2px solid blue;}
> >
> ><p>Some text <a href="example.com"><img style="border-right: 0"
> >src="pics/crimson.png" alt="..."><img style="border-left: 0"
> >src="pics/crimson.png" alt=""></a> and some more text</p>
> >
> >Does this do what you want?
>
> Good idea, thanks! It would solve most similar cases of my
> current problem perfectly. However, in this particular case it
> doesn't, because the two images don't have the same height. So
> the blue borders look odd, with a gap.
In that case, you can either combine the two images into one using an
image program, even putting a border around the result or not, or
possibly reducing the height of the larger image to the size of the
smaller in the *height* specification. But remember to note the aspect
ratio of the larger image and reduce the width accordingly. If you are
using inline images, presumably they are not going to be wildly
different in height (it would be fairly odd looking!), the whole idea,
as I understand you, is to be sort of a bit "in the flow, text-like, but
iconic!
For example, suppose the natural size of crimson.png was 70px wide by
50px high but green.png was 50px wide by 100px high. In the img element
for green, use width="25" and height="50".
This might solve many more of your case. Actually, with the right
images, this is not a bad idea of yours and mine. Let's split the
financial rewards if there are any: I am dorayme c/o Sydney.
Worried that you don't want the images to be split up on wrap? Don't for
two reasons. First it looks cute when they do, it is a positive! Second,
although you cannot profitably use between the img closing and
opening tags like in text (browsers are spoil-sports and don't fully
embrace my theory that inline images are very like fixed size letters
you can use no-wrap <g>), you can span the image elements and use the
css white-space of nowrap:
<http://dorayme.netweaver.com.au/twoPicsLink.html>
Turn text-decoration for anchor off in this situation (helps to get St
Peter to pass you through The Gates when he is in one of his fussy
aesthetic moods).
--
dorayme
Hans-Georg Michna
>What would you expect to happen in the case where the line breaks
>between the two images?
Thanks for this good hint! I had already thought of that and
intended to use white-space: nowrap, but then forgot.
But I won't add it even now, because the whole construct behaves
quite nicely without it. Just for fun, give it a try. Open
http://winhlp.com/node/446 , scroll down to the dark-red
"twisted4life" image, then make the browser window narrow.
What happens is that, once the center column becomes too narrow
for both images, the second one slips underneath the first,
which still looks perfectly good.
If you make the browser window even narrower, trying to squeeze
out the wider of the two images, the center column will stop
getting narrower, and instead the right column will move partly
or wholly outside the browser window.
That's exactly the behavior I want to make the whole design
usable on narrow screens like smartphones. So no need for
white-space: nowrap. (:-)
>The best solution is to make a single composite image out of the two.
Nope, and now we finally know why. The gentle auto-repositioning
behavior of the two images is desirable. I must admit that I
never preconceived it, but sometimes a relatively simple HTML
construct does nice things just on its own. (:-)
Hans-Georg
Hans-Georg Michna
>Make the span display: inline-block.
Ha, so simple! Why didn't I have that idea?
In fact, I now removed the span entirely and simply styled the
<a ...> tag, which also encompasses the two images, as display:
inline-block. That immediately solved the problem perfectly.
Thanks! I'm learning. One should really understand exactly where
and how to use div or span or something else. (:-)
Hans-Georg
Hans-Georg Michna
>Hans-Georg Michna wrote:
>>> img {border: 2px solid blue;}
>>>
>>> <p>Some text <a href="example.com"><img style="border-right: 0"
>>> src="pics/crimson.png" alt=""><img style="border-left: 0"
>>> src="pics/crimson.png" alt=""></a> and some more text</p>
>>>
>>> Does this do what you want?
>> Good idea, thanks!
>The suggestion has more problems than I care to list down, like the use of
>alt="" for images that are a link ("just an example", yes, but a very bad
>example, and people learn by example).
>
>If you like such an approach, you should at least change the first CSS rule to
>img { border-width: 2px; }
>(to let browsers indicate link status by colors - _or_ set up your own color
>scheme that use provisions for :link, :visited, :active, and :focus).
Thanks. Sounds good, but strangely didn't seem to work. I've
just tried. It showed no border at all.
Anyway, no big deal. A blue border is good enough for now.
>> It would solve most similar cases of my
>> current problem perfectly.
>We don't actually know what your current problem is. Why don't you simply
>combine the images into one, and why do you use inline images in the first
>place? Text and images are friends, but blending images into text easily
>causes confusion and layout problems that wouldn't exist in a simpler
>approach.
I want a tightly enclosing rectangular box around the two
images, whose entire surface is a clickable link. I know I could
join the images, but this touches a philosophical and fairly
fundamental question. You are essentially telling me that I
should bend to the inclinations of the computer and find a way
to wriggle through.
That's not my attitude. I'm not the servant of the computer. The
computer is my servant and I will force it to do exactly what
and how I want to do it. If I can, that is. (:-) In this case I
could. If I want to put two pictures, or whatever else I may
want, into a box, then I will do exactly that.
>> However, in this particular case it
>> doesn't, because the two images don't have the same height.
>So in which sense should they share a border, and why?
As mentioned, I wanted the appearance of one rectangular,
clickable area. Actually it looks as if it were one image.
The question why opens a new topic. I didn't intend to waste any
time on that. I don't even know yet for what I may want it
tomorrow. Let's assume for the moment that I want to learn how
to do it, just in case I may need it one day. I want to get a
better feel for this aspect of HTML.
>So why don't you simply combine the two images into one? Better still, when
>linking to pages about some software, why don't use just the names as links?
>Logo images hardly add anything to the value of your page, and they make the
>presentation visually unbalanced ja confusing.
Yes, that is certainly worth another thought. I may reconsider
and redesign this particular page. But I would still like to
know the best way to fulfill my original intention, in case I
have to do it for other reasons one day.
Why didn't I combine the two images?
a) Combining the images means extra work for something the
browser should be able to do just as well.
b) http://winhlp.com/node/446 (the dark-red logo near the bottom
of the center column) is only an example. As I had already
written, I'm interested in a general solution for this question,
regardless of how many images or whatever else would be in the
surrounding box.
>> Another question on the side is, why does the standard not allow
>> to put a <div style="display: inline-block">...</div> into text,
>> like into a <p>...</p> tag?
>Because the designers of HTML wanted to make the p element correspond to the
>concept of text paragraph that contains only text and, in less common cases,
>other inline elements (images, form fields).
But a <div style="display: inline-block">...</div> is
effectively an inline element. I fear the designers of HTML
simply overlooked that when they prohibited all divs inside a p
or similar tag. By the way, the actual browser implementations
appear to lean my way in this respect. My earlier problems with
this were probably due to something unrelated. I could solve the
problem with an inline-block div, but I prefer to avoid
violating the standard.
In fact, I haven't checked the standard thoroughly yet. Maybe it
doesn't violate the standard after all. This particular detail
doesn't seem to be very clearly defined.
>If display: inline-block worked in WWW terms (it doesn't), you could of
>course use <span> instead of <div> there. ...
display: inline-block is part of the CSS 2.1 standard. But yes,
I ended up using span instead, with the surprising (for me)
effect that the span doesn't necessarily surround its content,
and I had to add padding-top to force it to do that. I have
found no better solution so far. It's good enough for the
moment, but leaves something to be desired.
As to the question whether a CSS group would be better for this
topic, yes that sounds reasonable, but here the question
encompasses both HTML and CSS decisions, for example, whether to
use div or span, and so it would be partly off-topic in a CSS
group either. I would need a group that deals with both HTML and
CSS at the same time, but I don't know of one.
I do now get the feeling though that the problem lies more on
the CSS side. On the other hand, I think we are nearly through.
I have a workable solution and am half-heartedly looking for a
better one that may not exist.
Hans-Georg
dorayme
Hans-Georg Michna <hans-georgN...@michna.com> wrote:
> As to the question whether a CSS group would be better for this
> topic, yes that sounds reasonable, but here the question
> encompasses both HTML and CSS decisions, for example, whether to
> use div or span, and so it would be partly off-topic in a CSS
> group either. I would need a group that deals with both HTML and
> CSS at the same time, but I don't know of one.
Don't worry too much, it is OK that you raise this, you are not to know
exactly what group to ask a question in when you are not sure of the
best answer in advance. And it is a bit wooden for people who frequent
all the related groups anyway to pretend that if it is something about
CSS that you best know about, that you should go off and reapply
elsewhere if they know the answer that is likely to suit you here and
now.
But if you are not sure quite what group a general question about
webpage issue should go to, and you are worried about it, try alt.html.
--
dorayme
dorayme
Hans-Georg Michna <hans-georgN...@michna.com> wrote:
> On Sun, 15 Nov 2009 12:11:43 -0600, Ben C wrote:
>
> >Make the span display: inline-block.
>
> Ha, so simple! Why didn't I have that idea?
You might find:
<http://helephant.com/2009/08/a-great-big-welcome-to-inline-block/>
informative and interesting...
--
dorayme
Ben C
Use nothing if possible, then whatever seems sensible, then if the
validator complains, change to the nearest thing that works.
If in doubt post to c.i.w.a.s saying you are unsure of the abstract
meaning of "paragraph" or whether a list is a sort of table or a table a
sort of list.
dorayme
Ben C <spam...@spam.eggs> wrote:
Post anywhere on *this* subject, it is so interesting, even hire a sky
writer or trailing banner plane... <g>
--
dorayme
Hans-Georg Michna
somebody to turn to when one gets stuck.
Hans-Georg
Hans-Georg Michna
>You might find:
>
><http://helephant.com/2009/08/a-great-big-welcome-to-inline-block/>
>
>informative and interesting...
Yes. Thanks! Nice article.
I think he misinterpreted the spacing between inline blocks, as
one comment also stated. If there is no whitespace between the
inline-block tags, then there are no spaces.
Hans-Georg