За последние 24 часа нас посетили 17377 программистов и 1672 робота. Сейчас ищут 1673 программиста ...

Отступы между изображениями.

Тема в разделе "HTML и CSS", создана пользователем Demon, 25 окт 2006.

  1. Demon

    Demon Активный пользователь

    С нами с:
    20 апр 2006
    Сообщения:
    239
    Симпатии:
    0
    Всем привет.
    Подскажите пожалуйста, как убить отступы между изображениями? В Мозилле все нормально показываеться, а в IE как всегда, через то место, через которое не нужно.
    Код (Text):
    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    2. <html>
    3. <head>
    4. <title>Page title</title>
    5. <style type="text/css">
    6. <!--
    7. body {
    8. padding: 0;
    9. margin: 0;
    10. }
    11. #buttons {
    12. width: 1001px !important;
    13. background-color: red;
    14. }
    15. #buttons img {
    16. width: 143px;
    17. padding: 0;
    18. margin: 0;
    19. }
    20. -->
    21. </style>
    22. </head>
    23. <body>
    24. <div id="buttons">
    25. <a href=""><img src="" alt="" align="left"></a>
    26. <a href=""><img src="" alt="" align="left"></a>
    27. <a href=""><img src="" alt="" align="left"></a>
    28. <a href=""><img src="" alt="" align="left"></a>
    29. <a href=""><img src="" alt="" align="left"></a>
    30. <a href=""><img src="" alt="" align="left"></a>
    31. <a href=""><img src="" alt="" align="left"></a>
    32. </div>
    33. </body>
    34. </html>
     
  2. убери переводы строк
     
  3. Demon

    Demon Активный пользователь

    С нами с:
    20 апр 2006
    Сообщения:
    239
    Симпатии:
    0
    Чебурген: Не помогает.
     
  4. Mavir

    Mavir Guest

    По логике это в Мозилле отображается через то самое место.
    Ведь ни у кого не вызывает удивления почему между двумя словами, написаных в исходном коде на разных строчка, есть промежуток.
     
  5. Mavir

    Mavir Guest

    Demon
    Добавь для каждого рисунка еще три аттрибута
    border="0" hspace="0" vspace="0"
     
  6. Demon

    Demon Активный пользователь

    С нами с:
    20 апр 2006
    Сообщения:
    239
    Симпатии:
    0
    Mavir: Большое спасибо, работает.
     
  7. Demon

    Demon Активный пользователь

    С нами с:
    20 апр 2006
    Сообщения:
    239
    Симпатии:
    0
    Чтобы не начинать новую тему, спрошу тут. Вот никак не могу придумать способ, который позволил бы создать "резиновый" блок с изображением в центре, на дивах.
    Вот примерный код. Ширина и высота блока image и расположенных в нем дивов должна изменяться в соответствии с размерами изображения, размещенного в центре. Еще загвоздка в том, что родительский блок, содержащий дочерние блоки (которые тоже "резиновые") - "резиновый".
    Код (Text):
    1.  
    2. <html>
    3. <head>
    4. <style type="text/css">
    5. <!--
    6. #image {
    7. width: 272px;
    8. height: 276px;
    9. border: 1px solid blue;
    10. }
    11. img {
    12. float: left;
    13. }
    14. #top {
    15. width: 100%;
    16. float: right;
    17. height: 30px;
    18. background-color: red;
    19. }
    20. #left {
    21. width: 30px;
    22. height: 76%;
    23. float: left;
    24. background-color: red;
    25. }
    26. #bottom {
    27. width: 100%;
    28. float: left;
    29. height: 36px;
    30. background-color: red;
    31. }
    32. #right {
    33. width: 30px;
    34. float: right;
    35. height: 76%;
    36. background-color: red;
    37. }
    38. -->
    39. </style>
    40. <title>Page title</title>
    41. </head>
    42. <body>
    43. <div id="image">
    44. <div id="top"></div>
    45. <div id="left"></div>
    46. <img src="http://www.the-cranberries.ru/eng/audio.files/slims1.jpg" alt="" hspace="0" vspace="0">
    47. <div id="right"></div>
    48. <div id="bottom"></div>
    49. </div>
    50. </body>
    51. </html>