VPF::Правила верстки - Форум программистов

WolfAlone

Дата 9.7.2009, 18:11 (ссылка)

(нет голосов)

Загрузка ...

В экстазе

Профиль
Группа: Завсегдатай
Сообщений: 1010
Регистрация: 16.9.2008
Где: Рай

Репутация: нет
Всего: 5

Здравствуйте уважаемые Гуру! Вопрос у меня тупой, но всё же он имеет место быть.

Подскажите пожалуйста, где можно подробно почитать про вёрстку с помощью слоёв (без таблиц)?
В частности интересуют такие вопросы:
1. Создание футера/хеадера с помощью слоёв;
2. Создание левой и правой колонки сайта фиксированного размера + средней колонки "резинового" размера.
3. Позиционирование слоя в зависимости от рабочий области браузера.

Спасибо!

--------------------

И сказал Бог: "Тогда я построю свой мир с блэк-джеком и шлюхами!"

Ф топку Ubuntu, Debian наше фсё!

(с) Евгений Вольф

ksnk

Дата 9.7.2009, 18:13 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

cssplay

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

WolfAlone

Дата 9.7.2009, 18:19 (ссылка)

(нет голосов)

Загрузка ...

В экстазе

Профиль
Группа: Завсегдатай
Сообщений: 1010
Регистрация: 16.9.2008
Где: Рай

Репутация: нет
Всего: 5

Простите, забыл добавить: на Русском... smile

Добавлено @ 18:27
Прошу прощения, дошло до меня дубового! Это ж пример!
Скажите пожалуйста, зачем вот эта строка в CSS:

Код


#outer1, #outer2, #outer3 {padding-bottom:32767px; margin-bottom:-32767px;}

Это сообщение отредактировал(а) WolfAlone - 9.7.2009, 18:29

--------------------

И сказал Бог: "Тогда я построю свой мир с блэк-джеком и шлюхами!"

Ф топку Ubuntu, Debian наше фсё!

(с) Евгений Вольф

ksnk

Дата 9.7.2009, 18:38 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

WolfAlone, Это великий и ужасный хак. проблема в том, что более цивильно выглядящими методами сделать прижатие футера точно книзу экрана значительно более сложно. Придумывали верстку слоями компания воюющих друг с другом уродов. Вот теперь, некоторые очевидные, вроде бы вещи приходится делать через -32000 и совершенно этого не стесняться...

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

WolfAlone

Дата 9.7.2009, 19:13 (ссылка)

(нет голосов)

Загрузка ...

В экстазе

Профиль
Группа: Завсегдатай
Сообщений: 1010
Регистрация: 16.9.2008
Где: Рай

Репутация: нет
Всего: 5

ksnk, скажите пожалуйста, как Вы относитесь к классической вёрстке таблицами? Это новая рекламная уловка веб-студий ("МЫ ВЕРСТАЕМ СЛОЯМИ!!") или действительно это так хорошо для поисковых систем?

P.S. После чистки кода (для его читабельности/разборки) получилось следующее:

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>

<title> Заголовок </title>


<style type="text/css">
#header {background:#a31e39;}

#outer1 {float:left; width:180px; padding:10px; background:#e0d0d0;}
#outer3 {float:right; width:180px; padding:10px; background:#b0b0b0;}
#outer2 {margin:10px 0px;}
#outer1, #outer2, #outer3 {padding-bottom:32767px; margin-bottom:-32767px;}
#wrapper {overflow:hidden; background:#e0e0e0;}
#footer {clear:both; background:#455c5a;}
</style>

<!--[if lte IE 7]>
<style type="text/css">
#outer2 {float:left; display:inline; margin-left:10px; margin-right:10px;}
#wrapper {display:inline-block;}
</style>
<![endif]-->

</head>
<body>
        <div id="header">
            ШАПКА            
        </div> <!-- end header -->

        <div id="wrapper">
            <div id="outer1">
                    СЛЕВА
            </div>

            <div id="outer3">
                    СПРАВА
            </div> <!-- end outer3 -->

            <div id="outer2">
                    СЕРЕДИНКА<br /><br /><br /><br /><br /><br /><br /><br /><br />
            </div> <!-- end outer2 -->


        </div><!-- end #wrapper -->

        <div id="footer">
            ФУТЕР
        </div> <!-- end footer -->

</body></html>

Собственно проблема в том, что футер прижимамается точно к низу оставшихся слоёв, к низу непосредственно рабочей области браузера он прижиматься не хочет! Это я что-то лишнее удалил, или так и должно быть?

--------------------

И сказал Бог: "Тогда я построю свой мир с блэк-джеком и шлюхами!"

Ф топку Ubuntu, Debian наше фсё!

(с) Евгений Вольф

ksnk

Дата 9.7.2009, 19:45 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

Хм... Действительно, прижимается по контенту, а не во всю высоту экрана, так и есть... Зато как букв-то мало в самом layout'е! smile

В принципе, в реальной жизни, как правило, прижимать к низу экрана не нужно. Обычно контентом все-таки сайт забивают и все само получается как надо. Заметил, что на табличном layout'е, который я обычно применяю, есть такая-же не очень заметная, в нормальной жизни фича. Еще неприятная фича в этом layout'е - если блок занимает больше места, чем отведено для него по разметке (длинная картинка или таблица)- разметка не расширяется. Табличная верстка этой проблемы почти не замечает...

Так что - если нужно "растягивать" во всю высоту - нужно искать более другую разметку...

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

SelenIT

Дата 9.7.2009, 23:06 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

Огромный паддинг и такой же нижний маргин + overflow:hidden для контейнера - популярная уловка для выравнивания высоты колонок. Альтернативы следующие:

display:table-cell (самый стандартный выход, но не работает в IE7- и не позволяет менять порядок колонок)
общая фоновая картинка для контейнера ("ложные колонки"), при >2 колонок годится только для фикс. ширины
наложение колонки на border соседней, такой же ширины и цвета, совпадающего с ее фоном (не годится, если у колонок рисованный фон)
смещение вложенных контейнеров (способ Сергея Чикуенка)

Вообще CSS придуман не для верстки, а для украшения электронных публикаций, поэтому все известные на сегодня способы верстки колонок - по сути хаки (включая использование таблиц). Основное преимущество блочных решений - гибкость структуры (напр., можно поставить основное содержание - среднюю колонку - выше по коду, чем навигацию и рекламу, что вроде как полезно для SEO).

А для прижатия футера к низу первым делом нужно растянуть body минимум на весь экран:

Код


html { height: 100%; } /* чтоб было от чего отсчитывать */
body { min-height: 100%; }
* html body { height: 100%; } /* только для IE6, неправильно понимающего height */

Дальше дело техники - см., напр., здесь: http://zodios.net/htmlcss/downfooter.html

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

jsa

Дата 10.7.2009, 07:27 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 704
Регистрация: 19.1.2006
Где: Новосибирск

Репутация: нет
Всего: 20

Цитата(ksnk @ 9.7.2009, 23:38

)

проблема в том, что более цивильно выглядящими методами сделать прижатие футера точно книзу экрана значительно более сложно

хочу поделиться своим способом.... вдруг кому пригодиться smile

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
    <title></title>
    <link href="main.css" rel="stylesheet"  type="text/css"/>
</head>

<body>
    
    <div id="all">
                <div id="head" /> <!-- as you wish :)) -->
        
        <div id="content">
            content
        </div>
        
                                
        <div id="empty" />
        <div id="footer">            
            foot
        </div>
    </div>    
</body>
</html>

Код


html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#all {
    position: relative;
    height: 100%;
    min-height: 100%;
    width: 100%;
    text-align: center;    
}
html>body #all {
    height: auto;
}

#empty, #footer {
    height: 250px;
}

#footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;        
    border-top: 1px dotted Green;                
}

#content {
    width: 100%;
}

Добавлено через 1 минуту и 50 секунд
работает в ИЕ6 тоже

--------------------

WolfAlone

Дата 10.7.2009, 14:44 (ссылка)

(нет голосов)

Загрузка ...

В экстазе

Профиль
Группа: Завсегдатай
Сообщений: 1010
Регистрация: 16.9.2008
Где: Рай

Репутация: нет
Всего: 5

Спасибо всем принявшим участие в данной конференции. Я прямо умнеть начал... Глядишь, так и бухать брошу! smile

Сейчас пойду пробовать!

--------------------

И сказал Бог: "Тогда я построю свой мир с блэк-джеком и шлюхами!"

Ф топку Ubuntu, Debian наше фсё!

(с) Евгений Вольф

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »