Jardineiro Posted May 14, 2013 Report Share Posted May 14, 2013 Очень хотелось бы узнать ваше мнение по поводу версткиhttp://tri-w.3dn.ru/1/index.htmlПочему-то теги html5 (например footer) так и не распознались ie8, хотя добавляла display: block; и все варианты script-ов, которые нашла на htmlbook... В итоге не стала использовать эти теги, но doctype оставила html. 2 Quote Link to comment Share on other sites More sharing options...
lexxcode Posted May 14, 2013 Report Share Posted May 14, 2013 ИЕ8- не поддерживают новые теги, для них в head можно подключить дополнительный скрипт<!--[if lte IE 8]><script src='http://html5shiv.googlecode.com/svn/trunk/html5.js'></script><![endif]-->сразу после указания кодировки вот так:<!DOCTYPE html><html lang="ru"><head> <meta charset="utf-8"> <!--[if lte IE 8]><script src='http://html5shiv.googlecode.com/svn/trunk/html5.js'></script><![endif]--> <title>Title</title> <link rel="stylesheet" type="text/css" href="css/style.css" media="all"> <script src="js/jquery-2.0.0.min.js"></script></head><body></body></html> 1 Quote Link to comment Share on other sites More sharing options...
Great Rash Posted May 14, 2013 Report Share Posted May 14, 2013 Хорошая верстка, аккуратненькая. 1 Quote Link to comment Share on other sites More sharing options...
Catherine Posted May 14, 2013 Report Share Posted May 14, 2013 Видно, что старались)1) Как по мне, много идентификаторов. Постарайтесь использовать их только там, где это действительно необходимо.2) Конструкция#registration input#logoв данном случае избыточна, поскольку #logo - и так уникальный элемент на странице.3) Верхнее меню и нижнее имеют общие стили, их можно было вынести в отдельный класс, а отличия прописать для каждого свои. HTML-код для этих блоков я бы использовала одинаковый.4) При увеличении ширины экрана футер съезжает влево. Для чего там абсолютное позиционирование? Quote Link to comment Share on other sites More sharing options...
Jardineiro Posted May 14, 2013 Author Report Share Posted May 14, 2013 Спасибо за комментарии! Рада, что в целом нормально. ИЕ8- не поддерживают новые теги, для них в head можно подключить дополнительный скрипт Спасибо, но все равно никак, пока не разобралась в чем ошибка.. Как по мне, много идентификаторов. Постарайтесь использовать их только там, где это действительно необходимо. Согласна, буду стараться. #registration input#logo И правда! Исправила. Верхнее меню и нижнее имеют общие стили, их можно было вынести в отдельный класс, а отличия прописать для каждого свои. HTML-код для этих блоков я бы использовала одинаковый. Действительно, хорошая идея с HTML-кодом. Но вот как прописать отличия в стилях, когда класс общий? Что-то не догоняю.. При увеличении ширины экрана футер съезжает влево. Для чего там абсолютное позиционирование? Не заметила.. А позиционирование сделала абсолютным по одному из рецептов "Как прижать футер к низу". Quote Link to comment Share on other sites More sharing options...
Great Rash Posted May 14, 2013 Report Share Posted May 14, 2013 Действительно, хорошая идея с HTML-кодом. Но вот как прописать отличия в стилях, когда класс общий? Что-то не догоняю..Элемент может содержать сколько угодно классов через пробел. Назначьте более-менее одинаковым элементам одинаковые свойства, а потом переопределите нужные свойства в новом классе. Или назначте второй класс, который будет дополнять первый. Пример:/* Переопределение */.class_main { background: red; color: green;}.class_special { color: blue;}/* HTML */<div class="class_main">я зеленый на красном фоне</div><div class="class_main class_special">я синий на красном фоне</div>/* Дополнение */.class_base { background: red;}.class_color-1 { color: green;}.class_color-2 { color: blue;}/* HTML */<div class="class_base class_color-1">я зеленый на красном фоне</div><div class="class_base class_color-2">я синий на красном фоне</div> 1 Quote Link to comment Share on other sites More sharing options...
Jardineiro Posted May 14, 2013 Author Report Share Posted May 14, 2013 (edited) Элемент может содержать сколько угодно классов через пробел. Назначьте более-менее одинаковым элементам одинаковые свойства, а потом переопределите нужные свойства в новом классе. Или назначте второй класс, который будет дополнять первый.Ух ты, здорово! Очень полезная информация, спасибо! Пошла переверстывать. Edited May 14, 2013 by Jardineiro Quote Link to comment Share on other sites More sharing options...
lexxcode Posted May 14, 2013 Report Share Posted May 14, 2013 Спасибо, но все равно никак, пока не разобралась в чем ошибка.. А, что не получилось? Quote Link to comment Share on other sites More sharing options...
Jardineiro Posted May 15, 2013 Author Report Share Posted May 15, 2013 А, что не получилось? Да вот например этот код. Очевидно где-то туплю, но вот где?..<html lang="ru"><head><meta charset="utf-8"><!--[if lte IE 8]><script src='http://html5shiv.googlecode.com/svn/trunk/html5.js'></script><![endif]--><title>Title</title></head><style>header {color: red;}footer {color: green;}</style><body><header>Привет, как дела?</header><footer>Спасибо, ничего.</footer></body></html> Quote Link to comment Share on other sites More sharing options...
lexxcode Posted May 15, 2013 Report Share Posted May 15, 2013 Странно, у меня ваш код прекрасно работает. Единственное я <!doctype html> добавил Quote Link to comment Share on other sites More sharing options...
Jardineiro Posted May 15, 2013 Author Report Share Posted May 15, 2013 (edited) Странно, у меня ваш код прекрасно работает. Единственное я <!doctype html> добавил Да, доктайп у меня тоже записан, забыла скопировать. Действительно странно. Проверила в IETester-e и через онлайн сервис, шестая и седьмая версии правильно отображают, а восьмая снова нет.http://tri-w.3dn.ru/...stka_v_ie8.htmlНу что ж, ладно. Спасибо что посмотрели, буду думать. Все-таки семантическую верстку полезно использовать. Edited May 15, 2013 by Jardineiro Quote Link to comment Share on other sites More sharing options...
lexxcode Posted May 15, 2013 Report Share Posted May 15, 2013 не lt, а lte Quote Link to comment Share on other sites More sharing options...
Jardineiro Posted May 16, 2013 Author Report Share Posted May 16, 2013 не lt, а lte Ничего себе! Получилось! Вот спасибо огроменное!!! А когда просто файл перетаскиваю в браузер, не работает. Поэтому решила что что-то не так, стала менять и забыла вернуть как было. А почему не получается, когда просто переносишь файл в браузер? Или у вас тут тоже все работает?)Сорри, если достала уже. Тяга к знаниям - сильная вещь... )) Quote Link to comment Share on other sites More sharing options...
lexxcode Posted May 16, 2013 Report Share Posted May 16, 2013 Не очень понял, в смысле перетаскиваете в браузер? Оно работает хоть просто локально с диска компьютера, хоть с сервера Quote Link to comment Share on other sites More sharing options...
Jardineiro Posted May 16, 2013 Author Report Share Posted May 16, 2013 Все разобралась, теперь работает! Quote Link to comment Share on other sites More sharing options...
amelice Posted May 17, 2013 Report Share Posted May 17, 2013 Хорошая верстка, аккуратненькая. +1Я бы в сайдбаре уменьшила число флоатов,блоки .block1, .block2, .block3 могут обойтись без флоата, так как расположены как в нормальном потоке.это касается еще к блоку .img-sidebar. А позиционирование сделала абсолютным по одному из рецептов "Как прижать футер к низу". а не могли бы дать источник? Quote Link to comment Share on other sites More sharing options...
Jardineiro Posted May 18, 2013 Author Report Share Posted May 18, 2013 (edited) Я бы в сайдбаре уменьшила число флоатов, блоки .block1, .block2, .block3 могут обойтись без флоата, так как расположены как в нормальном потоке. Спасибо за ценное замечание! Действительно, флоат там ни на что не влияет, убрала. а не могли бы дать источник? Конечно. Тут использовался первый способ из этой статьи http://dimox.name/pr..._with_css/#fullА чем плохо абсолютное позиционирование футера? Каким способом вы пользуетесь? Edited May 18, 2013 by Jardineiro Quote Link to comment Share on other sites More sharing options...
amelice Posted May 18, 2013 Report Share Posted May 18, 2013 (edited) Действительно, флоат там ни на что не влияет, убрала. Да, вижу вы убрали флоат и для блока .img-sidebar, теперь он не учитывает флоаты перед собой, чтоб он учитывал ссылку перед ним, нужно присвоить ему clear: both;Конечно. Тут использовался первый способ из этой статьи http://dimox.name/pr..._with_css/#fullА чем плохо абсолютное позиционирование футера? Каким способом вы пользуетесь?Дело в том, что у вас сейчас футер не прижат, вы не правильно использовали то, что там было написано. Я хотела проверить источник.Вынесите footer за wrap, попробуйте сделать так как было написано в источнике.Я обычно использую что-то похожее на второй метод описанный в статье. Edited May 18, 2013 by amelice Quote Link to comment Share on other sites More sharing options...
Jardineiro Posted May 19, 2013 Author Report Share Posted May 19, 2013 Да, вижу вы убрали флоат и для блока .img-sidebar, теперь он не учитывает флоаты перед собой, чтоб он учитывал ссылку перед ним, нужно присвоить ему clear: both; Сделала, но не поняла в чем фишка.. Не могли бы поподробней объяснить в чем тут суть?Еще у ссылки убрала float: right; и добавила просто отступ слева. Дело в том, что у вас сейчас футер не прижат А почему не прижат? Если добавить контент, футер опускается вниз, а если контент убрать, футер все равно остается ниже сайдбара.. Quote Link to comment Share on other sites More sharing options...
exeto Posted May 19, 2013 Report Share Posted May 19, 2013 А почему не прижат? Если добавить контент, футер опускается вниз, а если контент убрать, футер все равно остается ниже сайдбара..Прижатый футер, это когда он прижат к низу, даже когда сверху ничего нет. Уберите сайдбар и он поднимется у вас. Quote Link to comment Share on other sites More sharing options...
Jardineiro Posted May 19, 2013 Author Report Share Posted May 19, 2013 Прижатый футер, это когда он прижат к низу, даже когда сверху ничего нет. Уберите сайдбар и он поднимется у вас. Ясно, пошла исправлять) Quote Link to comment Share on other sites More sharing options...
amelice Posted May 20, 2013 Report Share Posted May 20, 2013 Сделала, но не поняла в чем фишка.. Не могли бы поподробней объяснить в чем тут суть?Обычные блоки не учитывают флоатов, так как флоаты убираются из нормального потока и сдвигаются влево или вправо насколько это возможно.а строчные элементы учитывают и обтекают флоатов, чтобы такого не произошло поток "очищают" присваивая свойство clear к блочному элементу.в вашем случае так же можно было блоку .img-sliader присвоить свойство clear, чтобы учитывать ссылку. Quote Link to comment Share on other sites More sharing options...
Jardineiro Posted May 21, 2013 Author Report Share Posted May 21, 2013 Ага, ясно, спасибо! 1 Quote Link to comment Share on other sites More sharing options...
amelice Posted May 21, 2013 Report Share Posted May 21, 2013 Ага, ясно, спасибо! Пожалуйста Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.