Верстка, как она вам?

Jardineiro · May 14, 2013

Очень хотелось бы узнать ваше мнение по поводу верстки

http://tri-w.3dn.ru/1/index.html

Почему-то теги html5 (например footer) так и не распознались ie8, хотя добавляла display: block; и все варианты script-ов, которые нашла на htmlbook... В итоге не стала использовать эти теги, но doctype оставила html.

lexxcode · 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>

Great Rash · May 14, 2013

Хорошая верстка, аккуратненькая.

Catherine · May 14, 2013

Видно, что старались)

1) Как по мне, много идентификаторов. Постарайтесь использовать их только там, где это действительно необходимо.

2) Конструкция


#registration input#logo

в данном случае избыточна, поскольку #logo - и так уникальный элемент на странице.

3) Верхнее меню и нижнее имеют общие стили, их можно было вынести в отдельный класс, а отличия прописать для каждого свои. HTML-код для этих блоков я бы использовала одинаковый.

4) При увеличении ширины экрана футер съезжает влево. Для чего там абсолютное позиционирование?

Jardineiro · May 14, 2013

Спасибо за комментарии! Рада, что в целом нормально.

ИЕ8- не поддерживают новые теги, для них в head можно подключить дополнительный скрипт

Спасибо, но все равно никак, пока не разобралась в чем ошибка..

Как по мне, много идентификаторов. Постарайтесь использовать их только там, где это действительно необходимо.

Согласна, буду стараться.

#registration input#logo

И правда! Исправила.

Верхнее меню и нижнее имеют общие стили, их можно было вынести в отдельный класс, а отличия прописать для каждого свои. HTML-код для этих блоков я бы использовала одинаковый.

Действительно, хорошая идея с HTML-кодом. Но вот как прописать отличия в стилях, когда класс общий? Что-то не догоняю..

При увеличении ширины экрана футер съезжает влево. Для чего там абсолютное позиционирование?

Не заметила.. А позиционирование сделала абсолютным по одному из рецептов "Как прижать футер к низу".

Great Rash · 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>

Jardineiro · May 14, 2013

Элемент может содержать сколько угодно классов через пробел. Назначьте более-менее одинаковым элементам одинаковые свойства, а потом переопределите нужные свойства в новом классе. Или назначте второй класс, который будет дополнять первый.

Ух ты, здорово! Очень полезная информация, спасибо! Пошла переверстывать.

Edited May 14, 2013 by Jardineiro

lexxcode · May 14, 2013

Спасибо, но все равно никак, пока не разобралась в чем ошибка..

А, что не получилось?

Jardineiro · 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>

lexxcode · May 15, 2013

Странно, у меня ваш код прекрасно работает. Единственное я <!doctype html> добавил

Jardineiro · May 15, 2013

Странно, у меня ваш код прекрасно работает. Единственное я <!doctype html> добавил

Да, доктайп у меня тоже записан, забыла скопировать. Действительно странно. Проверила в IETester-e и через онлайн сервис, шестая и седьмая версии правильно отображают, а восьмая снова нет.

http://tri-w.3dn.ru/...stka_v_ie8.html

Ну что ж, ладно. Спасибо что посмотрели, буду думать. Все-таки семантическую верстку полезно использовать.

Edited May 15, 2013 by Jardineiro

lexxcode · May 15, 2013

не lt, а lte

Jardineiro · May 16, 2013

не lt, а lte

Ничего себе! Получилось! Вот спасибо огроменное!!!

А когда просто файл перетаскиваю в браузер, не работает. Поэтому решила что что-то не так, стала менять и забыла вернуть как было. А почему не получается, когда просто переносишь файл в браузер? Или у вас тут тоже все работает?)

Сорри, если достала уже. Тяга к знаниям - сильная вещь... ))

lexxcode · May 16, 2013

Не очень понял, в смысле перетаскиваете в браузер? Оно работает хоть просто локально с диска компьютера, хоть с сервера

Jardineiro · May 16, 2013

Все разобралась, теперь работает!

amelice · May 17, 2013

Хорошая верстка, аккуратненькая.

+1

Я бы в сайдбаре уменьшила число флоатов,

блоки .block1, .block2, .block3 могут обойтись без флоата, так как расположены как в нормальном потоке.

это касается еще к блоку .img-sidebar.

А позиционирование сделала абсолютным по одному из рецептов "Как прижать футер к низу".

а не могли бы дать источник?

Jardineiro · May 18, 2013

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

Спасибо за ценное замечание! Действительно, флоат там ни на что не влияет, убрала.

а не могли бы дать источник?

Конечно. Тут использовался первый способ из этой статьи http://dimox.name/pr..._with_css/#full

А чем плохо абсолютное позиционирование футера? Каким способом вы пользуетесь?

Edited May 18, 2013 by Jardineiro

amelice · May 18, 2013

Действительно, флоат там ни на что не влияет, убрала.

Да, вижу вы убрали флоат и для блока .img-sidebar, теперь он не учитывает флоаты перед собой, чтоб он учитывал ссылку перед ним, нужно присвоить ему clear: both;

Конечно. Тут использовался первый способ из этой статьи http://dimox.name/pr..._with_css/#full
А чем плохо абсолютное позиционирование футера? Каким способом вы пользуетесь?

Дело в том, что у вас сейчас футер не прижат, вы не правильно использовали то, что там было написано. Я хотела проверить источник.

Вынесите footer за wrap, попробуйте сделать так как было написано в источнике.

Я обычно использую что-то похожее на второй метод описанный в статье.

Edited May 18, 2013 by amelice

Jardineiro · May 19, 2013

Да, вижу вы убрали флоат и для блока .img-sidebar, теперь он не учитывает флоаты перед собой, чтоб он учитывал ссылку перед ним, нужно присвоить ему clear: both;

Сделала, но не поняла в чем фишка.. Не могли бы поподробней объяснить в чем тут суть?

Еще у ссылки убрала float: right; и добавила просто отступ слева.

Дело в том, что у вас сейчас футер не прижат

А почему не прижат? Если добавить контент, футер опускается вниз, а если контент убрать, футер все равно остается ниже сайдбара..

exeto · May 19, 2013

А почему не прижат? Если добавить контент, футер опускается вниз, а если контент убрать, футер все равно остается ниже сайдбара..

Прижатый футер, это когда он прижат к низу, даже когда сверху ничего нет. Уберите сайдбар и он поднимется у вас.

Jardineiro · May 19, 2013

Прижатый футер, это когда он прижат к низу, даже когда сверху ничего нет. Уберите сайдбар и он поднимется у вас.

Ясно, пошла исправлять)

amelice · May 20, 2013

Сделала, но не поняла в чем фишка.. Не могли бы поподробней объяснить в чем тут суть?

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

а строчные элементы учитывают и обтекают флоатов, чтобы такого не произошло поток "очищают" присваивая свойство clear к блочному элементу.

в вашем случае так же можно было блоку .img-sliader присвоить свойство clear, чтобы учитывать ссылку.

Jardineiro · May 21, 2013

Ага, ясно, спасибо!

amelice · May 21, 2013

Ага, ясно, спасибо!

Пожалуйста

Sign In

Верстка, как она вам?

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information