За последние 24 часа нас посетили 17344 программиста и 1663 робота. Сейчас ищут 1786 программистов ...

Внутренний отступ в диве.

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

  1. Demon

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

    С нами с:
    20 апр 2006
    Сообщения:
    239
    Симпатии:
    0
    Всем привет.
    Есть такая менюшка:
    Код (Text):
    1.  
    2. <html>
    3. <head>
    4. <title>Page title</title>
    5. <style type="text/css">
    6. #menu {
    7. border: 1px solid red;
    8. float: left;
    9. width: 170px;
    10. }
    11. #menu div {
    12. font-size: 11px;
    13. font-family: Georgia, serif;
    14. color: #967F00;
    15. padding-left: 19px;
    16. line-height: 1.8;
    17. margin-top: 2px;
    18. border: 1px solid #E6E8F1;
    19. width: 170px;
    20. height: 20px;
    21. background: #F5F5F6 url('*.jpg') no-repeat 5%;
    22. }
    23. </style>
    24. </head>
    25. <body>
    26. <div id="menu">
    27. <div>***</div>
    28. <div>***</div>
    29. <div>***</div>
    30. <div>***</div>
    31. <div>***</div>
    32. <div>***</div>
    33. <div>***</div>
    34. </div>
    35. </body>
    36. </html>
    Нужно сделать отступ текста от левого края на 18px. Если использовать padding, то див, в котором находиться текст, в Мозилле выезжает за пределы блока меню. Есть у кого-нибудь идеи, как сделать отступ буз изменения размеров дива, в котором он находиться? Отрицательные зачения padding или margin не проходят.
     
    #1 Demon, 25 ноя 2006
  2. Vladson

    Vladson Старожил

    С нами с:
    4 фев 2006
    Сообщения:
    4.040
    Симпатии:
    26
    Адрес:
    Estonia, Tallinn
    Cписки удобнее делать с помощью связки "ul" "li" (для этого они и предназначены)
     
    #2 Vladson, 25 ноя 2006
  3. Demon

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

    С нами с:
    20 апр 2006
    Сообщения:
    239
    Симпатии:
    0
    Допустим. Но ведь тоже будет такая же фигня с оступом.
    Код (Text):
    1. <html>
    2. <head>
    3. <title>Page title</title>
    4. <style type="text/css">
    5. #menu {
    6. border: 1px solid red;
    7. float: left;
    8. margin: 0;
    9. padding: 0;
    10. width: 170px;
    11. }
    12. #menu li {
    13. list-style-type: none;
    14. font-size: 11px;
    15. font-family: Georgia, serif;
    16. color: #967F00;
    17. padding-left: 19px;
    18. line-height: 1.8;
    19. margin-top: 2px;
    20. border: 1px solid #E6E8F1;
    21. width: 170px;
    22. height: 20px;
    23. background: #F5F5F6 url('*.jpg') no-repeat 5%;
    24. }
    25. </style>
    26. </head>
    27. <body>
    28. <ul id="menu">
    29. <li>***</li>
    30. <li>***</li>
    31. <li>***</li>
    32. <li>***</li>
    33. <li>***</li>
    34. <li>***</li>
    35. <li>***</li>
    36. <li>***</li>
    37. </ul>
    38. </div>
    39. </body>
    40. </html>
    Или я чего-то не понял?
     
    #3 Demon, 25 ноя 2006
  4. simpson

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

    С нами с:
    11 фев 2006
    Сообщения:
    1.650
    Симпатии:
    0
    Адрес:
    Санкт-Петербург
    а если у 'li' убрать ширину? и добавить:
    Код (Text):
    1. #menu ul {
    2.    padding: 0;
    3.    margin: 0;
    4. }
     
    #4 simpson, 25 ноя 2006
  5. Demon

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

    С нами с:
    20 апр 2006
    Сообщения:
    239
    Симпатии:
    0
    simpson: Пасибо.:wink: Сработало.
     
    #5 Demon, 25 ноя 2006
  6. Demon

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

    С нами с:
    20 апр 2006
    Сообщения:
    239
    Симпатии:
    0
    Мда, теперь другая проблема - почему ИЕ никак не риагирует на прохождение курсором по ссылкам?
    Код (Text):
    1. <html>
    2. <head>
    3. <title>Page title</title>
    4. <style type="text/css">
    5. #menu {
    6. border: 1px solid red;
    7. float: left;
    8. margin: 0;
    9. padding: 0;
    10. width: 170px;
    11. }
    12. #menu li {
    13. list-style-type: none;
    14. font-size: 11px;
    15. font-family: Georgia, serif;
    16. color: #967F00;
    17. padding-left: 19px;
    18. line-height: 1.8;
    19. margin-top: 2px;
    20. border: 1px solid #E6E8F1;
    21. height: 20px;
    22. background: #F5F5F6 url('*.jpg') no-repeat 5%;
    23. }
    24. a {
    25. text-decoration: none;
    26. }
    27. #menu a:link li {
    28. color: #967F00;
    29. text-decoration: none;
    30. }
    31. #menu a:visited li {
    32. background-color: silver;
    33. text-decoration: none;
    34. color: black !important;
    35. }
    36. #menu a:hover li {
    37. background-color: silver;
    38. text-decoration: none;
    39. color: #967F00 !important;
    40. }
    41.  
    42. </style>
    43. </head>
    44. <body>
    45. <ul id="menu">
    46. <a href=""><li>***</li></a>
    47. <a href=""><li>***</li></a>
    48. <a href=""><li>***</li></a>
    49. <a href=""><li>***</li></a>
    50. <a href=""><li>***</li></a>
    51. <a href=""><li>***</li></a>
    52. <a href=""><li>***</li></a>
    53. <a href=""><li>***</li></a>
    54. </ul>
    55. </div>
    56. </body>
    57. </html>
     
    #6 Demon, 25 ноя 2006
  7. simpson

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

    С нами с:
    11 фев 2006
    Сообщения:
    1.650
    Симпатии:
    0
    Адрес:
    Санкт-Петербург
    Код (Text):
    1. a {
    2.     text-decoration: none;
    3. }
    4. #menu li a:link {
    5.     color: #967F00;
    6. }
    7. #menu li a:visited {
    8.     background-color: silver;
    9.     color: black !important;
    10. }
    11. #menu li a:hover {
    12.     background-color: silver;
    13.     color: #967F00 !important;
    14. }
    и ссылки надо делать внутри элемента списка:
    Код (Text):
    1. <li><a href="...">...</a></li>
     
    #7 simpson, 25 ноя 2006
(Вы должны войти или зарегистрироваться, чтобы разместить сообщение.)