За последние 24 часа нас посетили 41539 программистов и 1813 роботов. Сейчас ищут 1379 программистов ...

Что то не так

Тема в разделе "HTML и CSS", создана пользователем ExDragon, 8 апр 2011.

  1. ExDragon

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

    С нами с:
    18 дек 2010
    Сообщения:
    76
    Симпатии:
    0
    вот.. что то здесь не то.. нужно чтобы все компоненты растягивались по ширине в зависимости от контента
    DOWNLOAD NOW!
    HTML:
    1. <style type="text/css">
    2. body {
    3.     font-family: Trebuchet MS;
    4.     background-color: #2C2C2C;
    5. }
    6. #all {
    7.     margin:0 auto;
    8.     width:1024;
    9.     height: auto;
    10. }
    11. #content {
    12.     display: block;
    13.     width: 100%;
    14.     height: auto;
    15.     background: url('images/page-bg.jpg');
    16. }
    17. #content .top {
    18.     background: url('images/page-top.jpg') repeat-x;
    19.     height: 25px;
    20.     width: 100%;
    21. }
    22. #content .topleft {
    23.     background: url('images/page-top-left.jpg') no-repeat;
    24.     height: 25px;
    25.     width: 31px;
    26.     float: left;
    27. }
    28. #content .topright {
    29.     background: url('images/page-top-right.jpg') no-repeat;
    30.     height: 25px;
    31.     width: 31px;
    32.     float: right;
    33. }
    34. #content .botton {
    35.     background: url('images/page-botton.jpg') repeat-x;
    36.     height: 25px;
    37.     width: 100%;
    38. }
    39. #content .bottonleft {
    40.     background: url('images/page-botton-left.jpg') no-repeat;
    41.     height: 25px;
    42.     width: 31px;
    43.     float: left;
    44. }
    45. #content .bottonright {
    46.     background: url('images/page-botton-right.jpg') no-repeat;
    47.     height: 25px;
    48.     width: 31px;
    49.     float: right;
    50. }
    51. #content .left {
    52.     background: url('images/page-left.jpg') repeat-y;
    53.     height: 100%;
    54.     width: 31px;
    55.     margin: -25px 0 -80px 0;
    56.     float: left;
    57. }
    58. #content .right {
    59.     background: url('images/page-right.jpg') repeat-y;
    60.     height: 100%;
    61.     width: 31px;
    62.     margin: -25px 0 -50px 0;
    63.     float: right;
    64. }
    65. #content .cen {
    66.     padding: 8px;
    67. }
    68. #content .general {
    69.     width: 100%;
    70.     height: 100%;
    71.     margin: 0 0 -50px 0;
    72. }
    73. #content .center {
    74.     width: auto;
    75.     height: auto;
    76. }
    77. </head>
    78. <div id="all">
    79.     <div id="content">
    80.         <div>
    81.             <div class="top">
    82.                 <div class="topleft"></div>
    83.                 <div class="topright"></div>
    84.             </div>
    85.         </div>
    86.         <div class="general">
    87.             <div class="left"></div>
    88.             <div class="right"></div>
    89.             <div class="cen">
    90.                 <div class="center">TEST</div>
    91.             </div>
    92.         </div>
    93.         <div>
    94.             <div class="botton">
    95.                 <div class="bottonleft"></div>
    96.                 <div class="bottonright"></div>
    97.             </div>
    98.         </div>
    99.     </div>
    100. </div>
    101. </body>
    102. </html>
     
  2. Crayday

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

    С нами с:
    7 апр 2011
    Сообщения:
    26
    Симпатии:
    0
    width:1024px;
     
  3. ExDragon

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

    С нами с:
    18 дек 2010
    Сообщения:
    76
    Симпатии:
    0
    нет это особой роли не играет =( тут что то с дивами
     
  4. YSandro

    YSandro Старожил

    С нами с:
    7 апр 2011
    Сообщения:
    2.523
    Симпатии:
    2
    Ну не понятно.
    Как это? Какие компоненты? Контейнер "div" с классом "center" чтобы зависел от длины текста "TEST"? Есть макет, к чему стремитесь?
     
  5. YSandro

    YSandro Старожил

    С нами с:
    7 апр 2011
    Сообщения:
    2.523
    Симпатии:
    2
    или вам в ширину нужно растянуть?
    Код (Text):
    1. #all {
    2.      margin:0 auto;
    3.      width:100%;
    4.      height: auto;
    5.  }
     
  6. Invision

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

    С нами с:
    26 фев 2009
    Сообщения:
    1.437
    Симпатии:
    1
    Адрес:
    Томск
    max-width?
     
  7. ExDragon

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

    С нами с:
    18 дек 2010
    Сообщения:
    76
    Симпатии:
    0
    [​IMG]
    центральный див растягивается а вокруг него картинки.. сверху и снизу не растягиваются, а вот по бокам растягивается также как центр
    ширина фиксирована 1024px высота в зависимости от контента (TEST - заместо него будет страница)
     
  8. Crayday

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

    С нами с:
    7 апр 2011
    Сообщения:
    26
    Симпатии:
    0
    ппц. Тут нужен мануальный терапевт ))
    В этом коде растягивается по ширине 1024px всё, для чего установлена ширина 1024px или 100%. Всё, для чего установлена фиксированная ширина меньше 1024px, растягивается так, как и должно. Код написан без ошибок и кривостей, разве что непонятно, зачем помеченные классом div "botton" (такого слова, кстати, в английском языке нет) и "top" вложены в другой див, не помеченный вообще ничем и не имеющий никаких свойств.
     
  9. YSandro

    YSandro Старожил

    С нами с:
    7 апр 2011
    Сообщения:
    2.523
    Симпатии:
    2
    "вокруг него картинки.." - как именно? типа широкой рамки вокруг или весь бэкраунд в повторяющейся картинке, или от краев центрального контейнера до краев окна браузера? От этого вопроса зависит, как вообще верстать.
     
  10. ExDragon

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

    С нами с:
    18 дек 2010
    Сообщения:
    76
    Симпатии:
    0
    я уже решил проблему.. дело в том что див не может узнать как растянется див О_0
    короче я просто вставил в центр таблицу и всё заработало =)
     
  11. YSandro

    YSandro Старожил

    С нами с:
    7 апр 2011
    Сообщения:
    2.523
    Симпатии:
    2
    Ну если тебя это устраивает, то ок.
    Но это устаревшее решение.
     
  12. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    YSandro
    устаревшее это типо как "не модно уже"?
     
  13. YSandro

    YSandro Старожил

    С нами с:
    7 апр 2011
    Сообщения:
    2.523
    Симпатии:
    2
    Ага. Мода, ведь, влияет на спрос и на технологии (поиска роботами фраз, например). Семантика стала модной, появился CSS2, вот и табличная верстка устарела. Не согласен?
     
  14. ExDragon

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

    С нами с:
    18 дек 2010
    Сообщения:
    76
    Симпатии:
    0
    да ну на.. тока начал, а уже устарело =! пойду повешусь =)
    YSandro
    и как же вы предложите это обойти не используя таблиц
     
  15. Crayday

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

    С нами с:
    7 апр 2011
    Сообщения:
    26
    Симпатии:
    0
    Див прекрасно знает, как растянут его див-родитель. Про остальные ему знать даже не следует.
     
  16. YSandro

    YSandro Старожил

    С нами с:
    7 апр 2011
    Сообщения:
    2.523
    Симпатии:
    2
    Ничего страшного. У тебя получилось таблицей сделать - хорошо. Теперь можно переходить на div+css верстку :)
    Тут хороший человек постарался, даже тему сделал, пример: http://www.php.ru/forum/viewtopic.php?t=32163
    Но вам по-другому надо, потому спрашивал чуть ранее
     
  17. ExDragon

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

    С нами с:
    18 дек 2010
    Сообщения:
    76
    Симпатии:
    0
    хаки.. что это О_0 (это не вопрос)
    да ладно меня в принципе устраивает таблица
     
  18. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    нет. сказки слышал про роботов, но роботам настолько чхать на таблицы и дивы, что словами это не передать. Может в хтмл5 это и начнет сказываться, но семантика к роботам отношения не имеет. она нужна для умной обработки инфы перед показом человеку. А не для индексации.