За последние 24 часа нас посетил 42471 программист и 1816 роботов. Сейчас ищут 835 программистов ...

резиновый сайт

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

  1. Inject

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

    С нами с:
    3 апр 2011
    Сообщения:
    24
    Симпатии:
    0
    Чтобы небыло подобного
    специально сделал для вас резину...
    -У некоторых бывает возникают вопросы как огроничить тянучесть в обратную сторону до 1000px.
    -У меня блоки пустые и они пропадают(((.
    -У меня футер не опускается
    -У меня текст в контенте опускается и заходит с права под панель...
    и т. д.... Решено!

    [​IMG]

    HTML:
    1.  
    2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    3. <html xmlns="http://www.w3.org/1999/xhtml">
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5. <link href="style/css.css" type="text/css" rel="stylesheet" />
    6. <title>Резиновый сайт</title>
    7. </head>
    8. <div id="template">
    9.     <div id="cnt_left">
    10.         ЭТО - ЛЕВАЯ ПАНЕЛЬ
    11.     </div>
    12.         <div id="cnt_right">
    13.             ЭТО - ПРАВАЯ ПАНЕЛЬ
    14.         </div>
    15.             <div id="content">
    16.                 ЭТО - КОНТЕНТ
    17.             </div>
    18.         <div id="clear"></div>
    19. </div>
    20. <div id="footer">ЭТО - ПОДВАЛ</div>
    21. </body>
    22. </html>
    23.  
    [css]@charset "utf-8";
    body
    {
    font-size:12px;
    font-family:Arial, Tahoma, sans-serif;
    background-color:#ffdddd;
    color:#222;
    line-height:1.5;
    margin:0;
    padding:0;
    }
    #template
    {
    min-width:1000px;
    min-height:150px;
    *//_height:150px;
    border:1px solid #000000;
    }
    #clear
    {
    clear:both;
    }
    #cnt_left
    {
    border:1px solid #000000;
    width:150px;
    min-height:150px;
    *//_height:150px;
    float:left;
    }
    #cnt_right
    {
    border:1px solid #000000;
    width:150px;
    min-height:150px;
    *//_height:150px;
    float:right;
    }
    #content
    {
    border:1px solid #000000;
    margin-left:152px;
    margin-right:152px;
    }
    #footer
    {
    border:1px solid #000000;
    height:15px;
    }
    [/css]
     
  2. YSandro

    YSandro Старожил

    С нами с:
    7 апр 2011
    Сообщения:
    2.523
    Симпатии:
    2
    Не работает. Это что?
    Код (Text):
    1. *//_height:150px;
    Хак?
     
  3. Inject

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

    С нами с:
    3 апр 2011
    Сообщения:
    24
    Симпатии:
    0
    что у тебя не работает!?
     
  4. YSandro

    YSandro Старожил

    С нами с:
    7 апр 2011
    Сообщения:
    2.523
    Симпатии:
    2
    )) работает, ок. Папку style не сделал.

    а здесь лучше мета теги и линки в head заключить
    Код (Text):
    1. <html xmlns="http://www.w3.org/1999/xhtml">
    2.  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    3.  <link href="style/css.css" type="text/css" rel="stylesheet" />
    4.  <head>
    5.  <title>Резиновый сайт</title>
    6.  </head>
    и css валидацию не проходит
     
  5. Inject

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

    С нами с:
    3 апр 2011
    Сообщения:
    24
    Симпатии:
    0
    Простите! немного опечатался, поправил!
    Вы сами понимаете? О чем говорите, каким образом он его пройдет?
    Уберите хаки и пройдет...
    Но не надейтесь без него на правильную работу в Ие, чтобы были пустые боки и работала минимальная высота когда пусто... *//_ это для того чтобы ие понял как min-height:150px; и не затормозил на 150px блок, а тянул дальше в низ...
    Кстате убираю тут пробел от кодировки,
    надо так:
    @charset "utf-8";

    а когда Вы копируете...
    То получается так:
    @charset "utf-8";

    Лишний пробел... По правилам он не должен быть так что 1 ошибка будет из за этого...
    уберете отступ слева от @, то есть допустим" это боковая стенка блокнота))) | @charset "utf-8"; вот так не зя, надо так
    |@charset "utf-8";"сохроните и обновите страницу и валидация будет окей!
     
  6. YSandro

    YSandro Старожил

    С нами с:
    7 апр 2011
    Сообщения:
    2.523
    Симпатии:
    2
    Inject, да всё прекрасно, не переживайте :)
    Копипейстить умею, ShiftTab-ить тоже. По невнимательности только не сделал подпапку style. Было интересно проверить этот "*//", из-за которого и невалидно.
     
  7. Апельсин

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

    С нами с:
    20 мар 2010
    Сообщения:
    3.645
    Симпатии:
    2
    и после этих костылей они говорят, что таблицы - это тупо и объемно.
     
  8. YSandro

    YSandro Старожил

    С нами с:
    7 апр 2011
    Сообщения:
    2.523
    Симпатии:
    2
    Апельсин, html то явно проще получается, чем было бы на таблицах.
    Правда, год назад пришлось для одного сайта сделать нелегкий выбор в пользу таблиц, т.к. контент менеджеры и сеошники постоянно что-то вставляли, ломая вложенность тегов. В таблице ничего не рушилось.
     
  9. Inject

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

    С нами с:
    3 апр 2011
    Сообщения:
    24
    Симпатии:
    0
    Таблици древний век Апельсин явно не знает, что умеет xhtml Strict 1.0 + версий, раз такое говорит,
    на счет таблици разрушения контента это зависит все от кодера, у меня ничего и нигде не рушилось и не будет и даже в ие 5 мои верстки работают, а таблицы где не смотрю все тупо уежают... ну опять же зависит от кодера!

    так, что удачи Вам в табличной верстке! )))

    Обычно я хаки не применяю ну и сайт пустой не оставляю...
    так, что у меня все всегда пашит! И таблици это для ленивых, а валидность быстрота и качество для умельцев
    так, что сугубо мое мнение, то, что я сделал тут это цветочки).

    Разметить дивной таблицу можно такую забубенить!)
    В принципи это дело каждого...
     
  10. Апельсин

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

    С нами с:
    20 мар 2010
    Сообщения:
    3.645
    Симпатии:
    2
    Вся это поебень, что ты тут нарекламировал - решается в три столбца и в три строки. Никаких хаков и все будет валидно. И в два раза меньше кода.

    Еще один прозомбированный мозг. Вперде к кодерам, пусть тебе дальше рассказывают, дивы это круто, это блин третье тысячелетие, это нанотехнологии. А ты дальше верь.
    Когда откроешь в стандартном ишаке под Windows Mobile свою чудо-херню на дивах, и увидишь как оно классно в трубочку завернется. Потом и скажешь, что таблицы - это древний век.
     
  11. igordata

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

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    хз, я таблицы юзаю постоянно. кто верит что с таблицами что-то не так - тот дурак и потребитель, ведется на любую модную мульку, хрень и рекламу. =) есть тег <table> у него есть предназначение. ЕСЛИ вам надо что-то вывести как таблицу, то конечно городить поеботу с дивами, чем просто вывести таблицу, да =)

    когда что-то говорите, задумайтесь, постарайтесь наморщить лоб и вспомнить: ваше ли это мнение или вы его где-то впитали?
     
  12. Vladson

    Vladson Старожил

    С нами с:
    4 фев 2006
    Сообщения:
    4.040
    Симпатии:
    26
    Адрес:
    Estonia, Tallinn
    Дивы фигня, HTML и BODY сами по себе блочные тэги, засирать всё тысячей DIV-ов только ламеры пытаются... (впрочем с таблицами такая-же история, нах не нужны тоже, как и дивы, всех ф топку, и таблицы и дивы)
     
  13. centnerik

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

    С нами с:
    11 мар 2011
    Сообщения:
    32
    Симпатии:
    0
    Если смотреть с точки зрения предпочтений, то абсолютно без разницы, что использовать. Как с DIV так и с TABLE есть свои особенности. Но TABLE - это все таки таблица и предназначен для отображения табличных данных, а DIV - это логически обособленная часть конкретной отображаемой страницы, точно так же как HEAD и BODY - логически обособленные части всего документа. Бока со стандартами были всегда, но их не алкаши за рюмкой в кабаке придумывают, а придерживаться их или нет - личный выбор каждого.
     
  14. igordata

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

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    centnerik
    Как с DIV так и с TABLE есть свои особенности.
    это правда =)

    centnerik
    DIV - это логически обособленная часть конкретной отображаемой страницы, точно так же как HEAD и BODY - логически обособленные части всего документа
    это не правда
    див вобще ни от чего ничем не обособлен.
     
  15. igordata

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

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
  16. YSandro

    YSandro Старожил

    С нами с:
    7 апр 2011
    Сообщения:
    2.523
    Симпатии:
    2
    igordata, спасибо за линк!
    Срочно исправляю заголовки на "application/xhtml+xml" :)
     
  17. igordata

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

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    YSandro
    чувак, ты ничего не понял =) это вчерашний день!
     
  18. YSandro

    YSandro Старожил

    С нами с:
    7 апр 2011
    Сообщения:
    2.523
    Симпатии:
    2
    igordata, я знал, что ты это скажешь.
    Но проще, ведь, одну строку с заголовком исправить (ну и одну-две ошибки :), чем десятки строк в случае с html 5
     
  19. igordata

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

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    YSandro
    нет. проще жить. а править строки прочая муть - это не для живых людей. =) html5 проще и лучше. правда он не поддерживается толком. но ниче =)
     
  20. Апельсин

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

    С нами с:
    20 мар 2010
    Сообщения:
    3.645
    Симпатии:
    2
    igordata
    Чувак, ты ничего не понял. В этом деле главное - хостинг за 10 рублей.
     
  21. centnerik

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

    С нами с:
    11 мар 2011
    Сообщения:
    32
    Симпатии:
    0
    Если в буквальном смысле, то я с вами согласен. Я хотел сказать, что с помощью DIV автор разметки может выделить участок кода в отдельный логически связанный блок, который не сделает разметку лучше или правильней, а просто визуально позволит, на мой взгляд, лучше ориентироваться в коде (как бы некоторое подобие модулей при меньшем объеме кода разметки). Как, например, в РНР - можно создавать классы, а можно отдельные функции - если код работает, то каким способом организована обработка данных не очень важно. Кто к чему привык... Спорить не хочу, просто я так думаю!!! ))
     
  22. igordata

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

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    centnerik
    хз. меня html5 порадовал.там вот точно есть и логически и обособленные =)
     
  23. centnerik

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

    С нами с:
    11 мар 2011
    Сообщения:
    32
    Симпатии:
    0
    Нашел неплохой ресурс
    [url=http://www.sd-company.su/art...w.sd-company.su/article/html_css/html5_review
    [/url]
    Все бы хорошо, да только будет ли все так работать как задумано. Если бы броузерами соблюдались единые стандарты, то скорее всего HTML5 не появился бы, с головой хватило бы и 4.01 с CSS. А так, по большому счету, просто те же яйца, что и XHTML, только вид с боку.

    P.S. НО, если на HTML5 "написанное однажды - работает везде", то буду использовать.
     
  24. igordata

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

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    http://htmlbook.ru/diveintohtml5
    рекомендую прочесть все главы. дело не в тегах - надо прочувствовать суть "семантического веба"
     
  25. centnerik

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

    С нами с:
    11 мар 2011
    Сообщения:
    32
    Симпатии:
    0
    Обязательно перечитаю. Просмотрел - интересная штука...