За последние 24 часа нас посетил 17581 программист и 1718 роботов. Сейчас ищут 1905 программистов ...

Высота главного слоя. (css)

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

  1. Danilevsky

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

    С нами с:
    12 фев 2006
    Сообщения:
    286
    Симпатии:
    0
    Адрес:
    Киев
    Код (Text):
    1. #main {
    2.     position:relative;
    3.     top:7px;
    4.     margin:auto;
    5.     width:760px;
    6.     height:auto;
    7.     border:1px solid black;
    8.     background-color:red;
    9. }
    это основной слой, в нем расположены другие дочерние слои.
    не могу задать фиксированную высоту, потому что контент может менятся. когда высота стоит "auto" или 100% слой получается почему-то очень высоким (около тысячи пикселов появляется зазор между концом контента и концом основного слоя). Как сделать так что-бы основной слой подстраивался под контент?
    И еще вопрос:
    почему у меня на этом слое top:7px; работает, а bottom:7px; не работает?
     
    #1 Danilevsky, 1 сен 2006
  2. Demon

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

    С нами с:
    20 апр 2006
    Сообщения:
    239
    Симпатии:
    0
    Danilevsky:
    Тогда вообще высоту не указывайте.
    Вам нужен внешний отступ или внутренний? Если внешний - margin-top: **px; or margin-bottom: **px; Если внутренний - то padding-top: **px; or padding-bottom: **px;
     
    #2 Demon, 1 сен 2006
  3. Danilevsky

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

    С нами с:
    12 фев 2006
    Сообщения:
    286
    Симпатии:
    0
    Адрес:
    Киев
    Demon, ваши советы, чего-то вообще не подействовали. (ни один ни второй)
     
    #3 Danilevsky, 1 сен 2006
  4. Demon

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

    С нами с:
    20 апр 2006
    Сообщения:
    239
    Симпатии:
    0
    Danilevsky: Код тогда приведите.
     
    #4 Demon, 1 сен 2006
  5. Davil

    Davil Guest

    Не во всех браузерах...

    По делу:
    Не лучше ли тут воспользоваться z-index?
    Код?
     
    #5 Davil, 1 сен 2006
  6. Ti

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

    С нами с:
    3 июл 2006
    Сообщения:
    2.378
    Симпатии:
    1
    Адрес:
    d1.ru, Екатеринбург
    Код (Text):
    1. #main {
    2.    margin:auto;
    3.    margin-top:7px;
    4.    width:760px;
    5.    border:1px solid black;
    6.    background:red;
    7. }
     
    #6 Ti, 2 сен 2006
  7. Danilevsky

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

    С нами с:
    12 фев 2006
    Сообщения:
    286
    Симпатии:
    0
    Адрес:
    Киев
    Вот код касательно вопроса нижнего отступа:
    Код (Text):
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5. <title>Untitled Document</title>
    6. <style type="text/css">
    7. body {
    8.     background-color:#FFFFCC;
    9.     margin-top:0;
    10.     margin-bottom:0;
    11.     margin-left:0;
    12.     margin-right:0;
    13.     font-family:Arial, Helvetica, sans-serif;
    14.     font-size:11px;
    15. }
    16. #main {
    17.     position:relative;
    18.     margin:auto;
    19.     width:760px;
    20.     height:2000px;
    21.     top:7px;
    22.     border: 1px solid #999999;
    23.     background-color:#FFFFFF;
    24. }
    25. </style>
    26. </head>
    27.  
    28. <body>
    29.  <div id="main"></div>
    30. </body>
    31. </html>
    Как внизу такой же отступ в 7 пикселей сделать?
     
    #7 Danilevsky, 2 сен 2006
  8. Davil

    Davil Guest

    Попробуй padding: 7px 5px 7px 5px
    Для этого нужен контейнер, в котором слой будет храниться и от которого будет отступ. (Например таблица)

    2й способ - просто подобрать height элемента, чтобы снизу был отступ 7px
     
    #8 Davil, 2 сен 2006
  9. Danilevsky

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

    С нами с:
    12 фев 2006
    Сообщения:
    286
    Симпатии:
    0
    Адрес:
    Киев
    не знаю это ли ты имел в виду, но наконец сделал нижний отступ.
    вот код:
    Код (Text):
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5. <title>Untitled Document</title>
    6. <style type="text/css">
    7. body {
    8.     background-color:#FFFFCC;
    9.     margin-top:0;
    10.     margin-bottom:0;
    11.     margin-left:0;
    12.     margin-right:0;
    13.     font-family:Arial, Helvetica, sans-serif;
    14.     font-size:11px;
    15. }
    16. #main {
    17.     top:7px;
    18.     position:relative;
    19.     margin:auto;
    20.     width:760px;
    21.     height:2000px;
    22.     border: 1px solid #999999;
    23.     background-color:#FFFFFF;
    24. }
    25. #suka_bottom {
    26.     position:relative;
    27.     top:100%;
    28.     height:7px;
    29. }
    30. </style>
    31. </head>
    32.  
    33. <body>
    34.  <div id="main">
    35.   <div id="suka_bottom"></div>
    36.  </div>
    37. </body>
    38. </html>
     
    #9 Danilevsky, 2 сен 2006
  10. Davil

    Davil Guest

    Danilevsky
    Неплохо выкрутился :)
     
    #10 Davil, 2 сен 2006
  11. Danilevsky

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

    С нами с:
    12 фев 2006
    Сообщения:
    286
    Симпатии:
    0
    Адрес:
    Киев
    1 вопрос (высота основного слоая) остается неразрешенным.
    но я наконец-то выявил закономерность.
    вот код:
    Код (Text):
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5. <title>Untitled Document</title>
    6. <style type="text/css">
    7. body {
    8.     position:relative;
    9.     background-color:#CCCC99;
    10.     margin-top:0;
    11.     margin-bottom:0;
    12.     margin-left:0;
    13.     margin-right:0;
    14.     font-family:Arial, Helvetica, sans-serif;
    15.     font-size:11px;
    16. }
    17. #main {
    18.     top:7px;
    19.     position:relative;
    20.     margin:auto;
    21.     width:760px;
    22.     border: 1px solid #999999;
    23.     background-color:#FFFFFF;
    24. }
    25. #line_1_1 {
    26.     position:relative;
    27.     top:5px;
    28.     left:5px;
    29.     width:200px;
    30.     height:20px;
    31.     background-color:#CCCCCC;
    32. }
    33. #line_1_2 {
    34.     position:relative;
    35.     top:-15px;
    36.     left:208px;
    37.     width:547px;
    38.     height:20px;
    39.     background-color:#CCCCCC;
    40. }
    41. #line_2_1 {
    42.     position:relative;
    43.     top:-12px;
    44.     left:5px;
    45.     width:200px;
    46.     height:20px;
    47.     background-color:#CCCCCC;
    48. }
    49. #line_2_2 {
    50.     position:relative;
    51.     top:-32px;
    52.     left:208px;
    53.     width:547px;
    54.     height:20px;
    55.     background-color:#CCCCCC;
    56. }
    57. </style>
    58. </head>
    59.  
    60. <body>
    61.  <div id="main">
    62.   <div id="line_1_1"></div>
    63.   <div id="line_1_2"></div>
    64.   <div id="line_2_1"></div>
    65.   <div id="line_2_2"></div>
    66.  </div>
    67. </body>
    68. </html>
    Вот результат этого кода:

    [​IMG]

    Так вот я выяснил, что чем больше слоев я делаю, то тем больше будет этот белый зазор.
    Вопрос: как убрать этот белый зазор?
     
    #11 Danilevsky, 2 сен 2006
  12. Davil

    Davil Guest

    Не пойму, зачем так мудрить? По мне, так проще сделать простую таблицу <table>. А белую полосу можно убрать так:
    Код (Text):
    1. #main{
    2. height:xx;
    3. }
    или поменять все координаты, поставить
    position:absolute
    #main{
    position:absolute;
    z-index:1;
    }
    #line{
    position:absolute;
    z-index:2;
    }
     
    #12 Davil, 2 сен 2006
  13. Danilevsky

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

    С нами с:
    12 фев 2006
    Сообщения:
    286
    Симпатии:
    0
    Адрес:
    Киев
    Davil, в том то и дело, что нужно мне только relative. потому что контент меняется, по этой же причине не могу поставить height:xx; таблица не катит. Как-то же должна эта проблемма решаться. ниче, буду искать...
     
    #13 Danilevsky, 2 сен 2006
  14. Demon

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

    С нами с:
    20 апр 2006
    Сообщения:
    239
    Симпатии:
    0
    Danilevsky
    Код (Text):
    1.  
    2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    3. <html xmlns="http://www.w3.org/1999/xhtml">
    4. <head>
    5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    6. <title>Untitled Document</title>
    7. <style type="text/css">
    8. body {
    9.    position:relative;
    10.    background-color:#CCCC99;
    11.    margin-top:0;
    12.    margin-bottom:0;
    13.    margin-left:0;
    14.    margin-right:0;
    15.    font-family:Arial, Helvetica, sans-serif;
    16.    font-size:11px;
    17. }
    18. #main {
    19.    position: relative;
    20.    margin: auto;
    21.    width: 760px;
    22.    border: 1px solid #999999;
    23.    background-color: #FFFFFF;
    24. }
    25. #line_1_1 {
    26.    position: relative;
    27.    width: 202px;
    28.      float: left;
    29.    height: 20px;
    30.      margin-top: 3px;
    31.      margin-left: 2px;
    32.    background-color: #CCCCCC;
    33. }
    34. #line_1_2 {
    35.    position: relative;
    36.    float: right;
    37.      margin-top: 3px;
    38.      margin-bottom: 3px;
    39.      margin-right: 2px;
    40.    width: 547px;
    41.    height: 20px;
    42.    background-color: #CCCCCC;
    43. }
    44. #line_2_1 {
    45.    position: relative;
    46.    width: 202px;
    47.      margin-top: 3px;
    48.      margin-left: 2px;
    49.      float: left;
    50.    height: 20px;
    51.    background-color: #CCCCCC;
    52. }
    53. #line_2_2 {
    54.    position: relative;
    55.    width: 547px;
    56.      float: right;
    57.      margin-bottom: 3px;
    58.      margin-right: 2px;
    59.    height: 20px;
    60.    background-color:#CCCCCC;
    61. }
    62. </style>
    63. </head>
    64.  
    65. <body>
    66.  <div id="main">
    67.   <div id="line_1_1"></div>
    68.   <div id="line_1_2"></div>
    69.   <div id="line_2_1"></div>
    70.   <div id="line_2_2"></div>
    71.  </div>
    72. </body>
    73. </html>
     
    #14 Demon, 2 сен 2006
  15. Danilevsky

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

    С нами с:
    12 фев 2006
    Сообщения:
    286
    Симпатии:
    0
    Адрес:
    Киев
    Demon - сенкс сенкс сенкс. Огромное спасибо!! Открыл мне глаза на совершенно новое!!
    +10
    уважаю!!
     
    #15 Danilevsky, 2 сен 2006
  16. Danilevsky

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

    С нами с:
    12 фев 2006
    Сообщения:
    286
    Симпатии:
    0
    Адрес:
    Киев
    Demon, проблема получилась - пример твой в Opera и FireFox не пашет.
     
    #16 Danilevsky, 2 сен 2006
  17. Demon

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

    С нами с:
    20 апр 2006
    Сообщения:
    239
    Симпатии:
    0
    Danilevsky: Тогда так:
    Код (Text):
    1.  
    2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    3. <html xmlns="http://www.w3.org/1999/xhtml">
    4. <head>
    5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    6. <title>Untitled Document</title>
    7. <style type="text/css">
    8. body {
    9.    position: relative;
    10.    background-color: #CCCC99;
    11.    margin-top: 0;
    12.    margin-bottom: 0;
    13.    margin-left: 0;
    14.    margin-right: 0;
    15.    font-family: Arial, Helvetica, sans-serif;
    16.    font-size: 11px;
    17. }
    18. #main {
    19.    top: 7px;
    20.    position: relative;
    21.    margin: auto;
    22.    width: 760px;
    23.    border: 1px solid #999999;
    24.    background-color: #FFFFFF;
    25. }
    26. #line_1_1 {
    27.      position: relative;
    28.    width: 202px;
    29.    float: left;
    30.    height: 20px;
    31.    margin-top: 3px;
    32.    margin-left: 2px;
    33.    background-color: #CCCCCC;
    34. }
    35. #line_1_2 {
    36.    position:relative;
    37.    margin-bottom: 3px;
    38.      margin-top: 3px;
    39.    width: 547px;
    40.    height: 20px;
    41.    background-color:#CCCCCC;
    42. }
    43. #line_2_1 {
    44.    position:relative;
    45.      margin-left: 4px;
    46.    width: 202px;
    47.    height: 20px;
    48.    background-color:#CCCCCC;
    49. }
    50. #line_2_2 {
    51.    position: relative;
    52.    width: 547px;
    53.    float: right;
    54.    margin-bottom: 3px;
    55.    margin-right: 2px;
    56.      margin-top: -20px;
    57.    height: 20px;
    58.    background-color:#CCCCCC;
    59. }
    60. html>body #line_1_2 {
    61. margin-left: 4px;
    62. margin-left: 209px;
    63. }
    64. html>body #line_2_2 {
    65. margin-left: 209px;
    66. margin-left: -4px;
    67. margin-right: 4px;
    68. }
    69. html>body #line_1_1 {
    70. width: 202px;
    71. margin-left: 4px;
    72. }
    73. html>body #line_ {
    74. margin-left: 209px;
    75. }
    76. html>body #main {
    77. padding-bottom: 3px;
    78. padding-top: -1px;
    79. }
    80. </style>
    81. </head>
    82.  
    83. <body>
    84.  <div id="main">
    85.   <div id="line_1_1"></div>
    86.   <div id="line_1_2"></div>
    87.   <div id="line_2_1"></div>
    88.   <div id="line_2_2"></div>
    89.  </div>
    90. </body>
    91. </html>
     
    #17 Demon, 2 сен 2006
  18. Danilevsky

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

    С нами с:
    12 фев 2006
    Сообщения:
    286
    Симпатии:
    0
    Адрес:
    Киев
    Demon, ты просто мастер CSS!! Все работает.
    А что это за "html>body"? Какие его функции?
     
    #18 Danilevsky, 2 сен 2006
  19. Demon

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

    С нами с:
    20 апр 2006
    Сообщения:
    239
    Симпатии:
    0
    Danilevsky: Это CSS-хак. Я его добавил, т.к не получалось сделать код, который одновременно понимали бы IE, Опера и Мозилла. Его понимают только Опера и Мозилла, а IE не видит, поэтому в нем можно прописывать стили, которые будут показывать только Мозилла и Опера.
    p.s. http://forum.vingrad.ru/index.php?act=m ... r_enabled=
     
    #19 Demon, 2 сен 2006
  20. Danilevsky

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

    С нами с:
    12 фев 2006
    Сообщения:
    286
    Симпатии:
    0
    Адрес:
    Киев
    Demon гуд!! Интересно, а IE7 его (этот хак) будет понимать...
     
    #20 Danilevsky, 2 сен 2006
  21. Demon

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

    С нами с:
    20 апр 2006
    Сообщения:
    239
    Симпатии:
    0
    Danilevsky: Возможно, но пока все-равно большинство пользователей сидит за шестой версией.:)
     
    #21 Demon, 2 сен 2006
  22. Danilevsky

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

    С нами с:
    12 фев 2006
    Сообщения:
    286
    Симпатии:
    0
    Адрес:
    Киев
    Demon, а откуда ты так css знаешь? может книга какая очень хорошая есть?
     
    #22 Danilevsky, 2 сен 2006
  23. Demon

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

    С нами с:
    20 апр 2006
    Сообщения:
    239
    Симпатии:
    0
    Danilevsky: Книг специальных я не читал, просто года 1,5 назад стал итересоваться HTML, и захотел сделать собственного хомяка. Но т.к css и html я еще плохо знал, задавал много вопросов на одном форуме, мне помогали и я постепенно вникал в суть обоих стандартов, и потом научился самостоятельно писать сайты. Вот..:D
    p.s. Самый правильный ресурс - www.w3c.org
    Там есть все про все существующие стандарты (в русском переводе в том числе.).
     
    #23 Demon, 2 сен 2006
  24. Danilevsky

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

    С нами с:
    12 фев 2006
    Сообщения:
    286
    Симпатии:
    0
    Адрес:
    Киев
    упорство и труд - все перетруд!
    Код (Text):
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5. <title>Untitled Document</title>
    6. <style type="text/css">
    7. body {
    8.     position:relative;
    9.     background-image:url(/lib/img/bg.gif);
    10.     margin-top:0;
    11.     margin-bottom:0;
    12.     margin-left:0;
    13.     margin-right:0;
    14. }
    15. #main {  
    16.     position: relative;
    17.     top:7px;
    18.     margin: auto;
    19.     width: 748px;
    20.     border: 1px solid #999999;
    21.     background-color: #FFFFFF;
    22.     padding:5px;
    23. }
    24. #line {
    25.     position:relative;
    26.     width:203px;
    27.     margin-right:3px;
    28.     height:20px;
    29.     background-color:#CCCCCC;  
    30. }
    31. #line2 {
    32.     position:relative;
    33.     width:542px;
    34.     left:206px;
    35.     height:20px;
    36.     background-color:#CCCCCC;
    37.     margin-top:-20px;
    38.     margin-bottom:0;
    39. }
    40. #line2_1 {
    41.     position:relative;
    42.     width:203px;
    43.     margin-right:3px;
    44.     height:20px;
    45.     background-color:#CCCCCC;
    46.     margin-top:3px;
    47. }
    48. #line2_2 {
    49.     position:relative;
    50.     width:542px;
    51.     left:206px;
    52.     height:20px;
    53.     background-color:#CCCCCC;
    54.     margin-top:-20px;
    55.     margin-bottom:0;
    56. }
    57. </style>
    58. </head>
    59.  
    60. <body>
    61.  <div id="main">
    62.   <div id="line"></div>
    63.   <div id="line2"></div>
    64.   <div id="line2_1"></div>
    65.   <div id="line2_2"></div>
    66.  </div>
    67. </body>
    68. </html>
     
    #24 Danilevsky, 2 сен 2006
(Вы должны войти или зарегистрироваться, чтобы разместить сообщение.)