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

AdmBuxonly ↓

14 Май, 2011, 10:19:20

НЕ ХУЕТА! ХУЕТА!

Карма: -1
Сообщений: 369
Сила слова: -0.27

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

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

Стили:

CSS

* {
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;
}

Спустя 1 минуту 33 секунды добавил

Я на втором изображении подписал что и как должно быть, но не могу сообразить...помогите плиз..

Спустя 3 минуты 5 секунд добавил

HTML

Это элементы DIV.

Спустя 1 минуту 59 секунд добавил

HTML

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


	Записан

Givi ↓

15 Май, 2011, 02:22:27 , спустя 4 часа 3 минуты 7 секунд

НЕ ХУЕТА! ХУЕТА!

Группа: Адекваты

Карма: 42
Сообщений: 2305
Сила слова: 1.82

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

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

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


	Записан

Все, что говорят другие - неправда! До тех пор, пока ты сам в это не поверишь.
Если человек дурак, то... чур это не я!

KaFe ↓

15 Май, 2011, 02:29:58 , спустя 7 минут 31 секунду

НЕ ХУЕТА! ХУЕТА!

Группа: Сраный Тролль

Карма: -13346
Сообщений: 1727
Сила слова: -772.79

AdmBuxonly, я не вижу здесь чего то сложного, сверстать не так сложно.


	Записан

http://казин-федор.рф/ | http://gliss-framework.org/

AdmBuxonly ↓

15 Май, 2011, 11:16:29 , спустя 8 часов 46 минут 31 секунду

НЕ ХУЕТА! ХУЕТА!

Карма: -1
Сообщений: 369
Сила слова: -0.27

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


	Записан

Elif ↓

15 Май, 2011, 11:42:37 , спустя 26 минут 8 секунд

НЕ ХУЕТА! ХУЕТА!

Карма: 0
Сообщений: 25
Сила слова: 0

AdmBuxonly

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

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


	Записан

AdmBuxonly ↓

15 Май, 2011, 11:45:08 , спустя 2 минуты 31 секунду

НЕ ХУЕТА! ХУЕТА!

Карма: -1
Сообщений: 369
Сила слова: -0.27

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


	Записан

Elif ↓

15 Май, 2011, 11:47:51 , спустя 2 минуты 43 секунды

НЕ ХУЕТА! ХУЕТА!

Карма: 0
Сообщений: 25
Сила слова: 0

AdmBuxonly

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

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


	Записан

AdmBuxonly ↓

15 Май, 2011, 11:55:02 , спустя 7 минут 11 секунд

НЕ ХУЕТА! ХУЕТА!

Карма: -1
Сообщений: 369
Сила слова: -0.27

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

В общем в опере тоже происходит бред, вылазит вся контентная часть при min-height:100%, а при height:100% все браузеры показывают одинаково, только не так как надо. все сжимают...

Спустя 3 минуты 34 секунды добавил

Да бл*дь, почему у меня ни чего не получается!!!! уже с 11 часов мучаюсь и ни хрена... 5 часов коту под хвост!


	Записан

master ↓

15 Май, 2011, 11:59:31 , спустя 4 минуты 29 секунд

НЕ ХУЕТА! ХУЕТА!

Квадратов сколько видишь ты?
Группа: Джедаи

Карма: 44
Сообщений: 2080
Сила слова: 2.12

делай таблицей


	Записан

http://rumin-sport.com

AdmBuxonly ↓

15 Май, 2011, 12:03:32 , спустя 4 минуты 1 секунду

НЕ ХУЕТА! ХУЕТА!

Карма: -1
Сообщений: 369
Сила слова: -0.27

Elif
js-хаки

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

Спустя 1 минуту 49 секунд добавил

master
е

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

Спустя 12 секунд добавил

master
делай таблицей

Спустя 1 минуту 18 секунд добавил

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


	Записан

master ↓

15 Май, 2011, 12:18:18 , спустя 14 минут 46 секунд

НЕ ХУЕТА! ХУЕТА!

Квадратов сколько видишь ты?
Группа: Джедаи

Карма: 44
Сообщений: 2080
Сила слова: 2.12

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

HTML

<!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>

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

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


	Записан

http://rumin-sport.com

AdmBuxonly ↓

15 Май, 2011, 12:50:41 , спустя 32 минуты 23 секунды

НЕ ХУЕТА! ХУЕТА!

Карма: -1
Сообщений: 369
Сила слова: -0.27

Сделал тоже самое только на таблица.... опера сразу отобразила, как мне надо но другие браузеры вообще игнорят height:100% и min-height:100%.!!!!!

Спустя 51 секунду добавил

http://www.olegastanin.ru/test/ результат... не знаю, что делать...

Спустя 4 минуты 14 секунд добавил

AdmBuxonly
я верстаю больше четырёх лет и верстаю пиздато

А где-то обучался или полное самообучение?

Спустя 1 минуту 53 секунды добавил

В общем попробую натянуть дизайн... т.к. контента много на блоге, думаю будут нормально смотреться... хотя страницы будут сжатыми...


	Записан

Givi ↓

15 Май, 2011, 01:00:19 , спустя 9 минут 38 секунд

НЕ ХУЕТА! ХУЕТА!

Группа: Адекваты

Карма: 42
Сообщений: 2305
Сила слова: 1.82

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


	Записан

AdmBuxonly ↓

15 Май, 2011, 01:05:34 , спустя 5 минут 15 секунд

НЕ ХУЕТА! ХУЕТА!

Карма: -1
Сообщений: 369
Сила слова: -0.27

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

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


	Записан

artoodetoo ↓

15 Май, 2011, 01:21:33 , спустя 15 минут 59 секунд

НЕ ХУЕТА! ХУЕТА!

с особым цинизмом
Группа: в ухо

Карма: 124
Сообщений: 3805
Сила слова: 3.26

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

и да, таблицы рулят


	Записан

Страниц: [1] 2 3

Печать

« предыдущая тема следующая тема »

	Автор	Тема: Верстка нестандартного макета на DIV (Прочитано 661 раз)
0 Пользователей и 1 Гость смотрят эту тему.