С подачи Никиты хочу дать несколько советов по HTML и CSS. Хоть я и не претендую на лавры специалиста в этой области, однако думаю что эти советы могут пригодиться.
Итак, начнем…
1. Куча ненужных блоков
Поклонники безтабличной верстки, старайтесь не использовать лишние элементы div, вложенные друг в друга. Также не стоит использовать class и id тут и там. Лучше обойтись без них где это возможно.
2. «Охватывание» плавающих элементов
Для того чтобы внешний контейнер полностью «охватывал» вложенные в него плавающие элементы, нужно контейнеру назначить следующие свойства:
#container { overflow:hidden; height:1% }
3. Устаревшие элементы
Не пользуйтесь устаревшими оформительскими элементами и атрибутами такими как b, i, small, big. Пользуйтесь средствами CSS для визуального оформления. Это значительно облегчит и сократит ваше время на работу с сайтом в дальнейшем.
4. «Подвал» всегда внизу страницы
Чтобы «подвал» был всегда внизу страницы используйте такую структуру:
<html> <body> <div id="content"> <div id="before_footer"></div> </div> <div id="footer"></div> </body> </html>
и следующие стили:
html {height:100%} body {height:100%} #content {min-height:100%} #footer {height: 40px; margin-top:-40px; position:relative} #before_footer {height:40px; clear:both}
К сожалению IE6 не понимает свойство min-height, однако свойство height в этом браузере дает необходимый нам эффект. Поэтому для контейнера #content нужно подключить это правило для IE6 с помощью условных комментариев.
5. Будьте в курсе событий
Старайтесь всегда быть в курсе всех изменений происходящих в области веб-проектирования. Читайте различные ресурсы посвященные веб технологиям, блоги различных разработчиков и т.д. Однако не стоит полностью полагаться и доверять таким источникам. Для этого лучше использовать официальные ресурсы (сайт W3C, официальные сайты наиболее популярных браузеров). Регулярно следите за всеми изменениями. Помните, то что вы прочитали сейчас, может стать со временем не актуальным и бесполезным.
Удачи!
Передаю эстафету:
Loading ...
2. Вместо height: 1% лучше написать zoom: 1
3. Смысл в них конечно никакой, но разве они запрещены?
2. zoom как мне известно не проходит валидацию.
3. Не запрещены, это я конечно нафантазировал. Но пользоваться все таки не стоит.
Спасибо за совет.Как в том фильме:»Воспользуюсь»
За «подвал всегда внизу» тебе отдельное и огромное спасибо. Если честно, я городил всё это дело при помощи JS, а тут всё так просто!
Огромнейшее спасибо за совет с подвалом =) вот благодарен, слов просто нет как =)
Всегда пожалуйста
4. В firefox и opera работает на ура, а вот в ie7 не хочет – блок остается наверху, поверх контента…=(
cheke, посмотрите этот пример http://www.arhmasters.ru/. Работает в IE6 и 7
С каких это пор элементы <b> и <i> стали устаревшими? Это элементы визуального форматирования, они включены даже в самые современные DTD и являются явным указанием на то, как должен выглядеть шрифт в отличие от элементов логического форматирования <strong> и <em>, которые указывают на повышенную важность текста.
Все правильно. Но если эти элементы несут лишь функцию оформления, то лучше использовать CSS, который для этого и предназначен. Т.к. в дальнейшем, если понадобится что-то исправить, не придется лезть в код.
Если нужно изменить на жирный или наклонный стиль шрифта всего блока, содержащего текст, то естественно лучше воспользоваться CSS, но если необходимо выделить in-line участок текста, то использование, например, <span class="bold"> помоему бредово и не рационально…
Alex, спасибо за пример.
Добавил * html #content{height:100%} и всё заработало…;)
Спасибо за этот «подвал» сколько знаю хтмл и пушу сайты для универа, никогда не сталкивался с этим кодом) спс еще раз)
[...] Алекс Ильин [...]
Первый совет конечно ни о чём… «Лишние div’ы» — это что такое? Если я вставил в код 5 блоков, значит каждый из них мне нужен. Так же и с классами и ID — если я их расставил, значит — в случае с классами — я хочу добиться гибкости (чтобы этот элемент можно было реюзать в других ситуациях), а в случае с ID — значит я считаю блок структурным или это поле с ярлыком.
То что вы обдумано делаете верстку, не означает что так делают все остальные. Порой встречаешь примеры, где много лишнего и ненужного.
Была проблема с «охватыванием» в firefox. height:1% не помогло. Попробовал min-height:100%; и всё исправилось.
40а, в Firefox для этого я использую overflow:hidden, а height:1% это для IE.
Совет №4: всё же можно обойтись без лишнего div.
Совет №2: height: 1% нужно прятать от IE/Mac:
/*\*/
* html something {
height: 1%;
}
/**/
Или можно использовать clearfix.
Vladimir, спасибо попробую.
Совет номер 4 – какой-то он через попу.
И совет от Vladimir’a тоже через попу, ИМХО.
Почему нельзя для футера написать #footer{position: absolute; bottom: 0; height: 50px;}, а для того чтобы контент не подлазил под футер, если его больше чем на страницу – для контейнера с контентом #wrap{padding-bottom: 50px;}.
Или я чего-то не понимаю?
XAMelleOH:, основной момент совета заключался в том, как сделать высоту родителя 100%. В вашем же примере нужно будет подгонять минимальную высоту для #wrap, т.к. с нижним отступом она будет больше 100%.
чтобы не использовать лишний див в совете 4 нужно использовать padding-top:40px замест пустого дива before_footer
ой точнее padding-bottom я имел ввиду:)
вот еще пример с футером:
html:
css:
html, body{
margin: 0;
padding: 0;
height: 100%;
}
.wrapper{
position: relative;
height: auto!important;
height: 100%;
min-height: 100%;
}
.footer{
position: absolute;
bottom: 0;
}
Уважаемые, а можно где нибудь увидеть наиболее полный список фиксов для различных браузеров?
C футором мне пример понравился, но на моих сайтах используется схема такая как у пользователя WEBS, единственное кроссбраузерность нужно доработать.
Ко второму пункту, лучше писать: _height:1% – дабы понимал только ИЕ6