How to keep space between rows of graphics?

[Cogito]

Several graphics are displayed in a row, like this:

<a href="link1.html"> <img align=top src="pic1.gif"></a>
<a href="link2.html"> <img align=top src="pic2.gif"></a>
<a href="link3.html"> <img align=top src="pic3.gif"></a>
<a href="link4.html"> <img align=top src="pic4.gif"></a>
<a href="link5.html"> <img align=top src="pic5.gif"></a>
<a href="link6.html"> <img align=top src="pic6.gif"></a>

When the window is wide enough for all of them to fit in one row there
is a small space between each graphic and the next. As the width of
the window is dragged to reduce the size of the window, the graphics
dynamically re-arrange themselves in two, three, four… rows. When this
happens, there is still a space between adjacent graphics on the same
row but not between graphics on different rows. In other words, when
they are arranged to be in one column, for example, they all touch
each other (top and bottom).
Without going into tables, is there a simple way to ensure that a
small space is kept between rows?

 

[Spartanicus]

<a href="link1.html"> <img align=top src="pic1.gif"></a>

The required alt attribute is missing on the img element, you should
also specify the size in the html. Using presentational markup like
align attributes went out of fashion in 1997.

Without going into tables, is there a simple way to ensure that a
small space is kept between rows?

CSS: img{margin-bottom:1em}

 

[Mark Parnell]

<a href="link1.html"> <img align=top src="pic1.gif"></a>

<snip>

The alt attribute is required on img. The align attribute is deprecated.
Do you really want that space at the front of each link?

Without going into tables, is there a simple way to ensure that a
small space is kept between rows?

img {margin-top: 1em;}

 

[Els]

Several graphics are displayed in a row, like this:

Without going into tables, is there a simple way to ensure that a
small space is kept between rows?

Of course you could choose either Spartinicus' or Mark's solution, or
combine them ;-)

img{margin:.5em 0;}

or having some space between them horizontally too:

img{margin:.5em;}

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: - Selecter, the - The Very Best of - 10 - The Selecter
((( Turn Up the Ska! )) (( ...say goodbye to your radio. ::
turnuptheska.com )))

 

[Cogito]

The required alt attribute is missing on the img element, you should
also specify the size in the html. Using presentational markup like
align attributes went out of fashion in 1997.


CSS: img{margin-bottom:1em}

You are all wonderful guys. It does just what I wanted.
I found that it looks best with
img{margin:.1em .1em;}

BTW, what does em stand for? What unit of measure is it?

align attributes went out of fashion in 1997.

Gee, Time flies. My pages are littered with align=
What should I use instead?

 

[Cogito]

The required alt attribute is missing on the img element

Ok, I tried the alt= attribute and found that it does exactly what I
have asked in a previous question. Yesterday I asked how could I get a
small text window show up when hovering over a graphic? The answer I
received was to use title="text".
It seems that when I have both, the alt= takes precedence.
So which one shell I use?

 

[Mark Parnell]

BTW, what does em stand for? What unit of measure is it?

It's an em. It doesn't stand for anything, it's just an em. It's a
measurement that has been used in typography for years, long before the
web.
http://en.wikipedia.org/wiki/Em_(typography)

Gee, Time flies. My pages are littered with align=
What should I use instead?

CSS.
http://w3.org/TR/CSS2/

 

[Spartanicus]

BTW, what does em stand for? What unit of measure is it?
http://www.w3.org/TR/CSS21/syndata.html#length-units


Gee, Time flies. My pages are littered with align=
What should I use instead?

Semantic Strict HTML with all presentational code moved to CSS. Given
that you still use the align attribute your code probably contains lots
of other presentational markup that should also be removed.

Advantages of CSS:
http://www.w3.org/TR/CSS21/intro.html#q6
A brief CSS tutorial:
http://www.w3.org/TR/CSS21/intro.html#q1

 

[Mark Parnell]

Ok, I tried the alt= attribute and found that it does exactly what I
have asked in a previous question. Yesterday I asked how could I get a
small text window show up when hovering over a graphic? The answer I
received was to use title="text".

And that answer is correct.

It seems that when I have both, the alt= takes precedence.

In what browser? None that I know of. If only alt is present, IE will
mistakenly show it as a tooltip, but if both alt and title are present,
it will use the title as the tooltip instead. Other browsers will
(correctly) only show the title as a tooltip.

So which one shell I use?

Use them both, as appropriate. The alt attribute provides a textual
*replacement* for the image, for instances where the image is not/cannot
be displayed. It is mandatory. The title attribute gives additional
information, often displayed as a tooltip. It is optional. The title
attribute can also be used on numerous other elements, not just img.

 

[Cogito]

In what browser? None that I know of. If only alt is present, IE will
mistakenly show it as a tooltip, but if both alt and title are present,
it will use the title as the tooltip instead. Other browsers will
(correctly) only show the title as a tooltip.

I have IE and FF installed.
When alt and title differ, IE shows the alt where FF shows the title.

 

[Els]

I have IE and FF installed.
When alt and title differ, IE shows the alt where FF shows the title.

Do you have an online example of that?

 

[Mark Parnell]

When alt and title differ, IE shows the alt where FF shows the title.

URL? What version of IE?

 

[Cogito]

I have IE and FF installed.
When alt and title differ, IE shows the alt where FF shows the title.

Ooops, sorry, I take it back...
IE does work as you have satated.

 

[Sid Ismail]

: BTW, what does em stand for? What unit of measure is it?

http://www.elsid.co.za/download/css_fontsizes.htm

Sid