ФорумРазработкаКлиентская сторонаВерстка и оформление → Верстка нестандартного макета на DIV

Верстка нестандартного макета на DIV

  • AdmBuxonly

    Сообщения: 370 Репутация: N Группа: Кто попало

    Spritz 14 мая 2011 г. 11:19

    Решил сверстать вот такой макет:


    Получается вот такая беда:


    Стили:
    * {
    margin:0;
    padding:0;
    }
    /* Задаем цвет фона светлосерый и растягиваем область документа на 100% по высоте */
    body, html {
    background-color:#e6e6e6;
    height:100%;
    }

    div#container {
    width:880px;
    min-height:100%;
    background-color:#fff;
    z-index:0;
    margin:0 auto;
    position:relative;
    }
    div#header {
    width:880px;
    height:175px;
    background-color:orange;
    z-index:1;
    position:relative;
    }
    div#menu {
    width:630px;
    height:40px;
    margin-left:250px;
    float:right;
    background-color:lightgreen;
    z-index:2;
    position:relative;
    }
    div#content {
    background-color:#cc0000;
    width:630px;
    height:auto;;
    z-index:3;
    position:relative;
    margin-left:200px;
    float:right;
    }
    div#sidebar {
    background-color:#ccc;
    width:250px;
    min-height:350px;
    z-index:5;
    position:relative;
    margin-top:-40px;

    }
    div#footer {
    background-color:gold;
    width:630px;
    height:50px;
    z-index:4;
    position:relative;
    margin-top:25px;
    clear:both;
    }


    Спустя 93 сек.
    Я на втором изображении подписал что и как должно быть, но не могу сообразить…помогите плиз..
    Спустя 185 сек.
    <div id="container">
    <div id="menu"></div>
    <div id="content"></div>
    <div id="sidebar"></div>
    <div id="footer"></div>
    </div>


    Это элементы DIV.
    Спустя 119 сек.
    <div id="container">
    <div id="header"></div>
    <div id="menu"></div>
    <div id="content"></div>
    <div id="sidebar"></div>
    <div id="footer"></div>
    </div>


    Точнее вот так! HEADER пропустил!
  • Givi

    Сообщения: 2284 Репутация: N Группа: Адекваты

    Spritz 14 мая 2011 г. 15:22, спустя 4 часа 3 минуты 7 секунд

    Круто. Что именно не получается? Точнее что именно ведет себя не так, как должно вести согласно заданным стилям?
    Пока я не вижу нормального (то есть полного) кода ХТМЛ + я бы советовал использовать reset.css для избежания многих глюков при последующей верстке, особенно в плане кроссбраузерности.

    Ну и из того, что бросается в глаза:
    1. div#content не имеет заданной высоты. То есть указан "автомат", но это по сути значит что выделено будет ровно столько, сколько контент этого блока потребует, но никак не во всю возможную высоту, как того тебе требуется.
    2. div#footer. Почему на картинке у него есть отступ справа, а в стилях нету? Также по сути этот блок никак не подвержен "прижатию" к низу страницы: он не прижимается ни блоком с контентом (если бы тот тянулся бы на всю высоту страницы) ни позиционированием (плохой случай, но иногда и он сгодится).

    Да и вообще у тебя сплошное использование позиционирования и зет-индексов (порядкового расположения слоев), что не очень корректно для достижения нормального и предсказуемого поведения всей верстки в целом.
  • AdmBuxonly

    Сообщения: 370 Репутация: N Группа: Кто попало

    Spritz 15 мая 2011 г. 0:16, спустя 8 часов 54 минуты 2 секунды

    Установил резет КСС. Теперь все нормально верстается… но столкнулся с проблемой. Свойство CSS min-height:100%; в Опере отображается нормально (растягивает блоки на 100% высоты), а во всех остальных нет. Как быть? Я так понимаю это проблема кроссбраузерности? Подскажите.. как баг исправить?
  • Elif

    Сообщения: 21 Репутация: N Группа: Кто попало

    Spritz 15 мая 2011 г. 0:42, спустя 26 минут 8 секунд


    Установил резет КСС. Теперь все нормально верстается… но столкнулся с проблемой. Свойство CSS min-height:100%; в Опере отображается нормально (растягивает блоки на 100% высоты), а во всех остальных нет. Как быть? Я так понимаю это проблема кроссбраузерности? Подскажите.. как баг исправить?


    попробуй просто height: 100%
  • AdmBuxonly

    Сообщения: 370 Репутация: N Группа: Кто попало

    Spritz 15 мая 2011 г. 0:45, спустя 2 минуты 31 секунду

    Пробовал, вообще ни где не растягивает…строка обычная и все…
  • Elif

    Сообщения: 21 Репутация: N Группа: Кто попало

    Spritz 15 мая 2011 г. 0:47, спустя 2 минуты 43 секунды


    Пробовал, вообще ни где не растягивает…строка обычная и все…


    тогда используй js-хаки
  • AdmBuxonly

    Сообщения: 370 Репутация: N Группа: Кто попало

    Spritz 15 мая 2011 г. 0:55, спустя 7 минут 11 секунд

    На сервере наконец то разместил, теперь можно следить за процессом…http://www.olegastanin.ru/test/

    В общем в опере тоже происходит бред, вылазит вся контентная часть при min-height:100%, а при height:100% все браузеры показывают одинаково, только не так как надо. все сжимают…
    Спустя 214 сек.
    Да бл*дь, почему у меня ни чего не получается!!!! уже с 11 часов мучаюсь и ни хрена… 5 часов коту под хвост!
  • master

    Сообщения: 3244 Репутация: N Группа: Джедаи

    Spritz 15 мая 2011 г. 0:59, спустя 4 минуты 29 секунд

    делай таблицей
    не всё полезно, что в swap полезло
  • AdmBuxonly

    Сообщения: 370 Репутация: N Группа: Кто попало

    Spritz 15 мая 2011 г. 1:03, спустя 4 минуты 1 секунду

    js-хаки


    Я не изучал еще JS… эххх… В коем то веке решил сам сверстать диз для блога и …..
    Спустя 109 сек.
    е


    И будь самым отсталым верстальщиком)) Нет, таблицами у меня вообще не загрузится WordPress он на дивах грузится медленно а еще и таблицы будут… там даже если каждый блок как отдельную таблицу делать - нерационально.
    Спустя 12 сек.
    делай таблицей

    Спустя 78 сек.
    Оно так то все правильно легло, осталось только растянуть и прижать футер, что можно сказать для меня "миссия невыполнима"!
  • master

    Сообщения: 3244 Репутация: N Группа: Джедаи

    Spritz 15 мая 2011 г. 1:18, спустя 14 минут 46 секунд

    я верстаю больше четырёх лет и верстаю пиздато, но вот конкретно футер прижатый к низу делаю таблицей. ты можешь ко мне прислушаться или продолжать набивать шишки.
    пример как это делается таблицей


    <!DOCTYPE html>
    <html>
    <head>
     <style>
       html, body {width:100%; height:100%; padding:0; margin:0;}
       table {border-collapse: collapse; border-spacing:0;}
       table tr td {padding:0;}
     </style>
    </head>
    <body>
     <table style="width:100%; height:100%">
       <tr><td style="vertical-align:top">шапка и контент</td></tr>
       <tr><td style="vertical-align:bottom">низ</td></tr>
     </table>
    </body>
    </html>


    И будь самым отсталым верстальщиком))

    можно подумать это не так
    ну или если ты хочешь быть не самым отсталым то разбирайся, а не задавай вопросы по каждой мелочи. а если спрашиваешь то прислушивайся к советам
    не всё полезно, что в swap полезло
  • AdmBuxonly

    Сообщения: 370 Репутация: N Группа: Кто попало

    Spritz 15 мая 2011 г. 1:50, спустя 32 минуты 23 секунды

    Сделал тоже самое только на таблица…. опера сразу отобразила, как мне надо но другие браузеры вообще игнорят height:100% и min-height:100%.!!!!!
    Спустя 51 сек.
    http://www.olegastanin.ru/test/ результат… не знаю, что делать…
    Спустя 254 сек.
    я верстаю больше четырёх лет и верстаю пиздато


    А где-то обучался или полное самообучение?
    Спустя 113 сек.
    В общем попробую натянуть дизайн… т.к. контента много на блоге, думаю будут нормально смотреться… хотя страницы будут сжатыми…
  • Givi

    Сообщения: 2284 Репутация: N Группа: Адекваты

    Spritz 15 мая 2011 г. 2:00, спустя 9 минут 38 секунд

    master, я блоками нормально "прижимаю" футер в низу и имею профит (нет у меня под рукой голого цсс-каркаса, так бы выложил). Но ты прав, пусть таблицами сверстает и не имеет гемороя.
  • AdmBuxonly

    Сообщения: 370 Репутация: N Группа: Кто попало

    Spritz 15 мая 2011 г. 2:05, спустя 5 минут 15 секунд

    Геммор все таки есть… http://www.olegastanin.ru/test/ в мозилле вместе с содержимым левого сайдбара разъезжается и шапка и меню и все прочее по высоте, в других браузерах нормально. Что можно в CSS прописать, чтобы они не ехали в мозилле вместе с содержимым сайдбара?

    Решение для футера нашел. Добавил вторую таблицу…
  • artoodetoo

    Сообщения: 5147 Репутация: N Группа: в ухо

    Spritz 15 мая 2011 г. 2:21, спустя 15 минут 59 секунд

    AdmBuxonly, подумай относительно чего ты объявляешь 100%. может быть эти контейнеры надо тоже растянуть? типа
    html, body, #wrapper { height: 100%; }
    добавь сюда еще 100500 своих контейнеров, если надо

    и да, таблицы рулят
    ιιlllιlllι унц-унц
  • Givi

    Сообщения: 2284 Репутация: N Группа: Адекваты

    Spritz 15 мая 2011 г. 2:39, спустя 17 минут 38 секунд

    Ну, рулит то, на чем умеешь корректно верстать :)

Пожалуйста, авторизуйтесь, чтобы написать комментарий!