How to keep space between rows of graphics?

Discussion in 'HTML' started by Cogito, May 26, 2005.

  1. Cogito

    Cogito Guest

    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?
     
    Cogito, May 26, 2005
    #1
    1. Advertising

  2. Cogito

    Spartanicus Guest

    Cogito <> wrote:

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

    --
    Spartanicus
     
    Spartanicus, May 26, 2005
    #2
    1. Advertising

  3. Cogito

    Mark Parnell Guest

    Previously in alt.html, Cogito <> said:

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

    --
    Mark Parnell
    http://www.clarkecomputers.com.au
    alt.html FAQ :: http://html-faq.com/
     
    Mark Parnell, May 26, 2005
    #3
  4. Cogito

    Els Guest

    Cogito wrote:

    > 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 )))
     
    Els, May 26, 2005
    #4
  5. Cogito

    Cogito Guest

    On Wed, 25 May 2005 23:23:36 GMT, Spartanicus
    <> wrote:

    >Cogito <> wrote:
    >
    >><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}


    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, May 26, 2005
    #5
  6. Cogito

    Cogito Guest

    On Wed, 25 May 2005 23:23:36 GMT, Spartanicus
    <> wrote:

    >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?
     
    Cogito, May 26, 2005
    #6
  7. Cogito

    Mark Parnell Guest

    Mark Parnell, May 26, 2005
    #7
  8. Cogito

    Spartanicus Guest

    Cogito <> wrote:

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


    http://www.w3.org/TR/CSS21/syndata.html#length-units

    >>align attributes went out of fashion in 1997.

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

    --
    Spartanicus
     
    Spartanicus, May 26, 2005
    #8
  9. Cogito

    Mark Parnell Guest

    Previously in alt.html, Cogito <> said:

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

    --
    Mark Parnell
    http://www.clarkecomputers.com.au
    alt.html FAQ :: http://html-faq.com/
     
    Mark Parnell, May 26, 2005
    #9
  10. Cogito

    Cogito Guest

    On Thu, 26 May 2005 16:35:28 +1000, Mark Parnell
    <> wrote:

    >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.
     
    Cogito, May 26, 2005
    #10
  11. Cogito

    Els Guest

    Cogito wrote:

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

    --
    Els http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
     
    Els, May 26, 2005
    #11
  12. Cogito

    Mark Parnell Guest

    Mark Parnell, May 26, 2005
    #12
  13. Cogito

    Cogito Guest

    On Thu, 26 May 2005 07:04:22 GMT, Cogito <> wrote:

    >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.
     
    Cogito, May 26, 2005
    #13
  14. Cogito

    Sid Ismail Guest

    Sid Ismail, May 26, 2005
    #14
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Shuo Xiang

    Stack space, global space, heap space

    Shuo Xiang, Jul 9, 2003, in forum: C Programming
    Replies:
    10
    Views:
    2,913
    Bryan Bullard
    Jul 11, 2003
  2. Christian Seberino
    Replies:
    21
    Views:
    1,673
    Stephen Horne
    Oct 27, 2003
  3. Ian Bicking
    Replies:
    2
    Views:
    1,021
    Steve Lamb
    Oct 23, 2003
  4. Ian Bicking
    Replies:
    2
    Views:
    730
    Michael Hudson
    Oct 24, 2003
  5. =?Utf-8?B?ZHc=?=
    Replies:
    5
    Views:
    1,125
    Alan Silver
    Jul 30, 2006
Loading...

Share This Page