Jump to content

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


Jardineiro
 Share

Recommended Posts

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

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

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

  • Like 2
Link to comment
Share on other sites

ИЕ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>

  • Like 1
Link to comment
Share on other sites

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

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

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


#registration input#logo

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

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

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

Link to comment
Share on other sites

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

  On 5/14/2013 at 12:08 PM, alexriz said:
ИЕ8- не поддерживают новые теги, для них в head можно подключить дополнительный скрипт

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

  On 5/14/2013 at 12:43 PM, Catherine said:
Как по мне, много идентификаторов. Постарайтесь использовать их только там, где это действительно необходимо.

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

  On 5/14/2013 at 12:43 PM, Catherine said:
#registration input#logo

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

  On 5/14/2013 at 12:43 PM, Catherine said:
Верхнее меню и нижнее имеют общие стили, их можно было вынести в отдельный класс, а отличия прописать для каждого свои. HTML-код для этих блоков я бы использовала одинаковый.

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

  On 5/14/2013 at 12:43 PM, Catherine said:
При увеличении ширины экрана футер съезжает влево. Для чего там абсолютное позиционирование?

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

Link to comment
Share on other sites

  On 5/14/2013 at 1:38 PM, Jardineiro said:

Действительно, хорошая идея с 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>

  • Like 1
Link to comment
Share on other sites

  On 5/14/2013 at 1:46 PM, Great Rash said:
Элемент может содержать сколько угодно классов через пробел. Назначьте более-менее одинаковым элементам одинаковые свойства, а потом переопределите нужные свойства в новом классе. Или назначте второй класс, который будет дополнять первый.

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

Edited by Jardineiro
Link to comment
Share on other sites

  On 5/14/2013 at 1:59 PM, alexriz said:
А, что не получилось?

Да вот например этот код. Очевидно где-то туплю, но вот где?..


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

Link to comment
Share on other sites

  On 5/15/2013 at 9:56 AM, alexriz said:
Странно, у меня ваш код прекрасно работает. Единственное я <!doctype html> добавил

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

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

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

Edited by Jardineiro
Link to comment
Share on other sites

  On 5/15/2013 at 1:05 PM, alexriz said:
не lt, а lte

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

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

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

Link to comment
Share on other sites

  On 5/14/2013 at 12:10 PM, Great Rash said:
Хорошая верстка, аккуратненькая.

+1

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

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

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

  On 5/14/2013 at 1:38 PM, Jardineiro said:
А позиционирование сделала абсолютным по одному из рецептов "Как прижать футер к низу".

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

Link to comment
Share on other sites

  On 5/17/2013 at 9:39 AM, amelice said:
Я бы в сайдбаре уменьшила число флоатов, блоки .block1, .block2, .block3 могут обойтись без флоата, так как расположены как в нормальном потоке.

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

  On 5/17/2013 at 9:39 AM, amelice said:
а не могли бы дать источник?

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

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

Edited by Jardineiro
Link to comment
Share on other sites

  On 5/18/2013 at 11:22 AM, Jardineiro said:
Действительно, флоат там ни на что не влияет, убрала.

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

  On 5/18/2013 at 11:22 AM, Jardineiro said:

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

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

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

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

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

Edited by amelice
Link to comment
Share on other sites

  On 5/18/2013 at 6:35 PM, amelice said:
Да, вижу вы убрали флоат и для блока .img-sidebar, теперь он не учитывает флоаты перед собой, чтоб он учитывал ссылку перед ним, нужно присвоить ему clear: both;

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

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

  On 5/18/2013 at 6:35 PM, amelice said:
Дело в том, что у вас сейчас футер не прижат

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

Link to comment
Share on other sites

  On 5/19/2013 at 9:32 AM, Jardineiro said:

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

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

Link to comment
Share on other sites

  On 5/19/2013 at 11:48 AM, Jardineiro said:

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

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

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

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

Link to comment
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy