Наверстал макет

Softlink · May 16, 2011

За сегодня сверстал макет. Для меня это 5-я верстка дивами и вторая с момента регистрации на форуме. Много полезностей здесь узнал и применял.

Собственно вот здесь сама верстка. А здесь макет по которому верстал.

Немного запечалился, когда валидатор выдал 2 ошибки и те в ссылке на подгрузку шрифта из Гугла. Обидно блин! :rolleyes: Но это сам гугл такую ссылку дал. А так радует, что с первого раза сделал без ошибок в самом коде

Теперь хочется услышать ваше мнение. Структура, семантика, в общем все что можно наговорить по нему.

Edited June 6, 2011 by Softlink

Gaspode · May 16, 2011

Что в глаза бросилось:

В верхнем меню отдельно на наведение реагирует блок (синий фон) и отдельно - ссылка (белый цвет). Это тонкий ход такой о_О?

<li><a href="#">Карта</a>/li>

Не ай-ай-ай?

<div class="line"></div>

Эт что за ужос? Зачем?

<div class="bazy">

Надо было сразу "bazy-otdykha", ещё красивее бы смотрелось, вот правда :rolleyes: То же самое с class="mesta", class="blogi" и всеми вытекающими.

Базы

Это заголовок явно же.

Статьи

Тоже заголовок. А ссылки на статьи - явно список.

Softlink · May 16, 2011

с верхним меню завтра поборюсь и сделаю чтобы цвет самой ссылки не менялся.

<li><a href="#">Карта</a>/li>

этого не было. Может скобка потерялась между тем как я выложил его и постом, просто я еще поизголялся над кодом немного. В первой редакции все хорошо было. :rolleyes:

а по поводу

<div class="line"></div>

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

По названиям классов, тут на любителя. По-моему итак понятно, что за класс это Хотя здесь они называются как раз первым словом в блоке.

Ну и с заголовками. Это для СЕО полезно, да?

Список со статьями поправлю тоже.

Спасибо за рецензию

Edited May 16, 2011 by Softlink

Gaspode · May 16, 2011

Ну и с заголовками. Это для СЕО полезно, да?

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

Это сильно страшно использовать пустой див?

Кому как. Бордер-то обычный чем не угодил?

Softlink · May 16, 2011

Ну и с заголовками. Это для СЕО полезно, да?
Это просто логично: заголовок должен быть заголовком. Не знаю уж, как там для сео.
Это сильно страшно использовать пустой див?
Кому как. Бордер-то обычный чем не угодил?

а там если делать бордер, то он будет во всю ширину блока, а нужны отступы справа и слева. Чем маржинами выгадывать, наверное лучше див вставить пустой. В любом случае кода больше не прибавилось. Зато в любой момент можно без ущерба верстке эту линию убрать или подвинуть. Я так рассуждал, когда делал.

Gaspode · May 16, 2011

а там если делать бордер, то он будет во всю ширину блока, а нужны отступы справа и слева.

Он и так во всю ширину - в шапке и в колонках внизу. А в контенте проще сделать одну обёртку и задать у неё паддинги справа и слева, чем двумя пустыми дивами разметку засорять. Вставили бы <hr>, если так хочется оформление в разметке отражать.

Зато в любой момент можно без ущерба верстке эту линию убрать или подвинуть.

А бордер нельзя типа о_О?

Edited May 16, 2011 by Gaspode

Softlink · May 16, 2011

а там если делать бордер, то он будет во всю ширину блока, а нужны отступы справа и слева.
Он и так во всю ширину - в шапке и в колонках внизу. А в контенте проще сделать одну обёртку и задать у неё паддинги справа и слева, чем двумя пустыми дивами разметку засорять.
Зато в любой момент можно без ущерба верстке эту линию убрать или подвинуть.
А бордер нельзя типа о_О?

он не во всю ширину :rolleyes: Там справа и слева по 5px отступ. И бордер можно убрать, зато останется ненужный див-обертка В общем, считаю, оба варианта имеют право на жизнь.

Softlink · May 16, 2011

и еще по списку со статьями интересно. Чем вызвана потребность в тегах <li>? Ведь и <p> нормально справляются. А так будет на два тега больше плюс класс для списка в ксс, при этом результат тот же останется. Это тоже логически правильно или оно как-то на что-то влияет?

Вот здесь http://htmlbook.ru/ внизу в разделе "Советы по написанию статей" явно виден список, но тоже все выделено тегами <p>

Edited May 16, 2011 by Softlink

Gaspode · May 16, 2011

и еще по списку со статьями интересно. Чем вызвана потребность в тегах <li>? Ведь и <p> нормально справляются.

Вообще, надо три элемента: див, спан и ссылку - они нормально со всем справляются =D Что значит "справляется"? Это не абзацы у вас там. Это список статей. По-моему, это очевидно. Странные вы вопросы задаёте.

Great Rash · May 17, 2011

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=Windows-1251">

При доктайпе HTML 4.01 strict имена тегов и атрибутов тегов должны быть в нижнем регистре.

<link href='http://fonts.googleapis.com/css?family = PT+Sans&subset=cyrillic,latin' rel='stylesheet' type='text/css'>

А кавычки должны быть двойными.

<img src="images/logo.png" alt="">

Обычно логотип является ссылкой на главную сайта. Это уже почти стандарт.

<div class="line2"></div>

Зачем юзать <div> если есть <hr>?

<div class="bazy-info"> 
	<a href="#" class="bazy-info-link">Санатория "У Михалыча"</a><span>82</span> 
	<a href="#" class="bazy-info-link">Пансионат "Даниловка"</a><span>81</span> 
	<a href="#" class="bazy-info-link">Лучшая база в мире</a><span>78</span> 
	<a href="#" class="bazy-info-link">Кемпинг "У тети Эммы"</a><span>77</span> 
</div>

А чего не списком?

<span>Новые темы форума</span>

Зачем <span> если это явный заголовок?

<span>Сель переотложен. Ламинарное движение разновозрастно. Тем не менее, нужно учитывать и то обстоятельство, что меандр повсеместно подпитывает метаморфический грязевой вулкан, что свидетельствует о проникновении днепровских льдов в бассейн Дона.</span>

Тут нужен не <span> а <b>, это же очевидно...

<div class="info-right"> 
	Статьи
	<p><a href="#">Бюджетное изучение языка: 4 альтернативных страны, где можно сэкономить</a></p> 
	<p><a href="#">Советы туристам отправляющимся в круиз</a></p> 
	<p><a href="#">Уфологи отправятся в тур по аномальным местам Байкала</a></p> 
	<p><a href="#">Топ-10 круизных лайнеров для проведения корпоративов</a></p> 
	<p><a href="#">Крым проигрывает в популярности Турции</a></p> 
	<p><a href="#">На пляжах Геленджика появится кнопка вызова полиции</a></p> 
	<p><a href="#">Рейсы на египетские курорты отправятся в эти выходные</a></p> 
</div>

"Статьи" - это заголовок, остальное - список.

По-началу кажется, что верстка неплохая, но когда смотришь внимательней видно, что нет полного понимания для чего и когда нужны те или иные элементы. Многие вещи сделаны, скажем, не элегантно. Продолжайте развиваться, пока у вас получается неплохо :rolleyes:

web-monster · May 17, 2011

Немного посмотрел css-код

Кое-где можно сократить :rolleyes:

Вместо


body {
  margin: 0 0 0 0;
}

Просто


body {
margin: 0;
}

Или


.html {
background: #ffffff;
}
.header {
padding: 0 5px 0 5px;
}

Используем


html {
background: #fff;
}
.header {
padding: 0 5px;
}

Может еще целесообразно reset.css использовать?

Edited May 17, 2011 by web-monster

Softlink · May 17, 2011

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=Windows-1251">
При доктайпе HTML 4.01 strict имена тегов и атрибутов тегов должны быть в нижнем регистре.

откровенно не знал. Обязательно почитаю еще про доктайпы.

<link href='http://fonts.googleapis.com/css?family = PT+Sans&subset=cyrillic,latin' rel='stylesheet' type='text/css'>
А кавычки должны быть двойными.

тоже не знал, сделано.

<img src="images/logo.png" alt="">
Обычно логотип является ссылкой на главную сайта. Это уже почти стандарт.

поправил, хотя верстка делалась для себя. Поэтому здесь на заморачивался. А вообще имею это ввиду.

<div class="line2"></div>
Зачем юзать <div> если есть <hr>?

до сего момента не мог помыслить, что для <hr> можно задать бордер, всегда считал его только разделительной сплошной полосой. Спасибо, надоумили, теперь буду пользовать Дивы убрал.

<div class="bazy-info"> 
	<a href="#" class="bazy-info-link">Санатория "У Михалыча"</a><span>82</span> 
	<a href="#" class="bazy-info-link">Пансионат "Даниловка"</a><span>81</span> 
	<a href="#" class="bazy-info-link">Лучшая база в мире</a><span>78</span> 
	<a href="#" class="bazy-info-link">Кемпинг "У тети Эммы"</a><span>77</span> 
</div>

А чего не списком?

мне почему-то показалось так проще сделать. Ссылка блоком с float:left. Т.е. избежал списка именно таким способом. Хотя о нем думал. Ниже, где места и т.д. Там именно список.

<span>Новые темы форума</span>
Зачем <span> если это явный заголовок?

Почему-то не привык использовать заголовки. Чем они так хороши? Или потому что есть тег, который предназначен для заголовка?

<span>Сель переотложен. Ламинарное движение разновозрастно. Тем не менее, нужно учитывать и то обстоятельство, что меандр повсеместно подпитывает метаморфический грязевой вулкан, что свидетельствует о проникновении днепровских льдов в бассейн Дона.</span>

Тут нужен не <span> а <b>, это же очевидно...

это точно. Здесь уже ум за разум зашел, что называется. :rolleyes: Исправлено.

<div class="info-right"> 
	Статьи
	<p><a href="#">Бюджетное изучение языка: 4 альтернативных страны, где можно сэкономить</a></p> 
	<p><a href="#">Советы туристам отправляющимся в круиз</a></p> 
	<p><a href="#">Уфологи отправятся в тур по аномальным местам Байкала</a></p> 
	<p><a href="#">Топ-10 круизных лайнеров для проведения корпоративов</a></p> 
	<p><a href="#">Крым проигрывает в популярности Турции</a></p> 
	<p><a href="#">На пляжах Геленджика появится кнопка вызова полиции</a></p> 
	<p><a href="#">Рейсы на египетские курорты отправятся в эти выходные</a></p> 
</div>

"Статьи" - это заголовок, остальное - список.

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

Допустим, если мы в строчку перечислим эти ссылки, это тоже будет списком и надо будет использовать <li> с inline?

По-началу кажется, что верстка неплохая, но когда смотришь внимательней видно, что нет полного понимания для чего и когда нужны те или иные элементы. Многие вещи сделаны, скажем, не элегантно. Продолжайте развиваться, пока у вас получается неплохо

Спасибо за рецензию, будем работать дальше

web-monster · May 17, 2011

<img src="images/logo.png" alt="">
Обычно логотип является ссылкой на главную сайта. Это уже почти стандарт.
Не всегда
<div class="line2"></div>
Зачем юзать <div> если есть <hr>?
<span>Сель переотложен. Ламинарное движение разновозрастно. Тем не менее, нужно учитывать и то обстоятельство, что меандр повсеместно подпитывает метаморфический грязевой вулкан, что свидетельствует о проникновении днепровских льдов в бассейн Дона.</span>
Тут нужен не <span> а <b>, это же очевидно...
Мне кажется, что вместо <hr> лучше использовать css border.
А <span> + font-weight: bold; думаю будет здесь более уместен,чем <b>. Все оформление в стили.
Мое сугубо личное мнение

Softlink · May 17, 2011

А <span> + font-weight: bold; думаю будет здесь более уместен,чем <b>. Все оформление в стили.
Мое сугубо личное мнение

мне наоборот кажется. Лучше использовать 1 раз <b>, чем писать класс для span. Тем более тегов в коде от этого ни убавится, ни прибавится.

web-monster · May 17, 2011

А <span> + font-weight: bold; думаю будет здесь более уместен,чем <b>. Все оформление в стили.
Мое сугубо личное мнение
мне наоборот кажется. Лучше использовать 1 раз <b>, чем писать класс для span. Тем более тегов в коде от этого ни убавится, ни прибавится.


.info-left p span {
font-weight: bold;
}

Можно обойтись и без присвоения класса <span>'у

Softlink · May 17, 2011

Можно обойтись и без присвоения класса <span>'у

для p написать? Так там еще стоят они ниже, где жирный шрифт не нужен.

Gaspode · May 17, 2011

Как раз-таки b - это лучший вариант. b, согласно новым стандартам, - это выделение текста, не подразумевающее эмфатического ударения. Если я правильно понял :rolleyes: Оно необязательно должно быть полужирным. Просто выделение и всё. span этой информации не несёт.

Хотя p:first-child вполне сканал бы, если честно. Тут, наверное, надо по смыслу текста смотреть.

Edited May 17, 2011 by Gaspode

Softlink · May 17, 2011

Как раз-таки b - это лучший вариант. b, согласно новым стандартам, - это выделение текста, не подразумевающее эмфатического ударения. Если я правильно понял

все правильно

web-monster · May 17, 2011

Можно обойтись и без присвоения класса <span>'у
для p написать? Так там еще стоят они ниже, где жирный шрифт не нужен.


.info-left p span {
font-weight: bold;
}

Сработает для всех присутствующих <span> в абзацах <p> в классе .info-left, но не на <p>. Попробуйте

Ну или можно так


.info-left span {
font-weight: bold;
}

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

Как раз-таки b - это лучший вариант. b, согласно новым стандартам, - это выделение текста, не подразумевающее эмфатического ударения. Если я правильно понял Оно необязательно должно быть полужирным. Просто выделение и всё. span этой информации не несёт.
Хотя p:first-child вполне сканал бы, если честно. Тут, наверное, надо по смыслу текста смотреть.

А можете порекомендовать,где про это прочесть можно (новые стандарты)? Может я что-то пропустил?

Просто при верстке стараюсь придерживаться вот этого, а также этого

Edited May 17, 2011 by web-monster

Gaspode · May 17, 2011

А можете порекомендовать,где про это прочесть можно (новые стандарты)? Может я что-то пропустил?

Не знаю, я нахватался отовсюду, ссылок дать не смогу. Курите сайт w3c, там точно есть. На Хабре блок по ксс тоже почитать можно, там люди отслеживают всяческие веяния.

Edited May 17, 2011 by Gaspode

buddah · May 17, 2011

Мн еще кажется просто гениальной вот эта статья в общеобразовательных целях.

awrora · May 17, 2011

Надо поправлять! У вас там много чего посъезжало и в базах и в фотогалерее. Рано выставили на обсуждение:-)Смотрела в фаерфокс.

Softlink · May 17, 2011

Надо поправлять! У вас там много чего посъезжало и в базах и в фотогалерее. Рано выставили на обсуждение:-)Смотрела в фаерфокс.

нет, все было нормально. Просто я уже тут экспериментирую Я бы естественно не выложил в таком состоянии

p.s. интересно так, человек зарегистрировался 15 минут назад и сразу отписался именно в этой ветке. :rolleyes:

Edited May 17, 2011 by Softlink

Bonzash · May 17, 2011

1. Виды баз нада делать списком.

2. Отступы в главном меню большие.

3. Что будет если добавить в меню еще одну <li><a>...</a></li>?

4. Если картинка базы будет больше в 2-3 раза, что будет с версткой?

Посмотрите эти пункты, а так вполне нормально.

Softlink · May 17, 2011

1. Виды баз нада делать списком.
2. Отступы в главном меню большие.
3. Что будет если добавить в меню еще одну <li><a>...</a></li>?
4. Если картинка базы будет больше в 2-3 раза, что будет с версткой?
Посмотрите эти пункты, а так вполне нормально.

1. Зачем? + я не пробовал ни разу позиционировать элемент внутри списка. Сработает? Это касаемо оценок и их position:relative;

2. Поправил. Это после некоторых переделок остались.

3. Меню станет шире :rolleyes:

4. "Если бы да ка бы" Верстка поплывет. Но я думаю, если есть макет, значит его заказчики подумали над тем, чтобы изображения были одинаковыми. Иначе это элементарно будет некрасиво смотреться. С текстом все понятно, что его может быть больше, может меньше, но с изображениями надо решать вопрос на берегу

Спасибо за мнение)

Edited May 17, 2011 by Softlink

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

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information