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

panas_dnepr · August 14, 2012

Доброго времени суток!

Сверстал макет.

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

Заранее благодарен.

Ссылка http://panas.hop.ru/

wildhind · August 14, 2012

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

А код таков, что ошибки начинаются с первой же строки.

panas_dnepr · August 14, 2012

А конкретнее можно?

wildhind · August 14, 2012

ок, конкретнее:

1) сайт выглядит так, как будто тут лохов разводят. Неприятно очень выглядит. И юзабилити соответствующее.

2) строка №1 в коде содержит грубую ошибку. Далее читать этот код смысла не вижу.

panas_dnepr · August 14, 2012

ок, конкретнее:
1) сайт выглядит так, как будто тут лохов разводят. Неприятно очень выглядит. И юзабилити соответствующее.
2) строка №1 в коде содержит грубую ошибку. Далее читать этот код смысла не вижу.

вид макета может не ахти! не я делал...

но что с <!DOCTYPE html> - это первая строка...никак не пойму...

wildhind · August 14, 2012

…<!DOCTYPE html> - это первая строка…

вы уверены?

panas_dnepr · August 14, 2012

…<!DOCTYPE html> - это первая строка…
вы уверены?

у меня в notepad++ с первой строки <!DOCTYPE html>, чего в сети так...не знаю...вчера впервые попробовал выложить на хостинг... :unsure:

wildhind · August 14, 2012

а это тоже хостинг чудит?

panas_dnepr · August 14, 2012

а это тоже хостинг чудит?

не знаю кто это чудит... у меня в ff нормально все...

и у меня складывается такое ощущение при этом разговоре...

чего я должен оправдываться...

как есть так и есть...

первая строка пустая...пусть так...я сказал как у меня...что показало в футере у Вас...это, возможно мой косяк(хотя у меня все норм,но это не показатель)...но опять же, я не профи и только учусь...

wildhind · August 14, 2012

ну ладно

panas_dnepr · August 14, 2012

ну ладно

Вы код глянули? Там есть явные косяки? помимо тех на которые Вы указали...

Спасибо за критику...Постараюсь учесть, правда пока как исправить это не знаю...

CalvinKlein · August 15, 2012

а это тоже хостинг чудит?

это хостинг

у меня в опере тоже показывает что первая строка пустая

в строчке кода

<meta charset="utf-8">

ошибка: сервер возвращает заголовок Content-Type: text/html; charset=windows-1251, а у вас кодировка стоит utf-8

и ещё непонятно почему у вас тег не закрыт, конечно это не обязательно но link вы закрыли, а meta нет

Edited August 15, 2012 by CalvinKlein

wildhind · August 15, 2012

и ещё непонятно почему у вас тег не закрыт, конечно это не обязательно но link вы закрыли, а meta нет

потому что это одиночный тэг, не нуждающийся в закрытии.

Пора уже избавляться от xhtml-придури.

CalvinKlein · August 15, 2012

и ещё непонятно почему у вас тег не закрыт, конечно это не обязательно но link вы закрыли, а meta нет
потому что это одиночный тэг, не нуждающийся в закрытии.
Пора уже избавляться от xhtml-придури.

не спорю но link тоже одиночный тег

так что либо закрывать все теги, либо не закрывать вообще

а вот так делать на мой взгляд не стоит


<meta charset="utf-8">
<link href="style.css" media="screen" rel="stylesheet" type="text/css" />

wildhind · August 15, 2012

CalvinKlein, у вас своего рода эстетство получается

ну да, пожалуй лучше, когда всё в одном стиле. Но, как говорится, это «на скорость не влияет»

Softlink · August 15, 2012

Хочу услышать критику по поводу: ..., юзабилити ... .

Вообще не вижу смысла оценивать "юзабилити" тренировочного макета, который даже работать нигде не будет. Да еще и не вашего рисования.

panas_dnepr · August 16, 2012

Хочу услышать критику по поводу: ..., юзабилити ... .
Вообще не вижу смысла оценивать "юзабилити" тренировочного макета, который даже работать нигде не будет. Да еще и не вашего рисования.

Согласен.

ar00 · August 16, 2012

Поставь в notepad++ кодировку UTF-8 без BOM и волшебная пустая строчка исчезнет.

По поводу вёрстки - структура, с моей точки зрения, не правильная(Я бы такую не принял бы от верстальщика уж точно):

</div>

Как Я понял - первый контейнер содержит 2 блока и сайдбар. Так вот - Я бы контент сделал в 1 див а сайдбар в другой.

</div>

Мммм... И присваивать класс overflow.... Лучше в CSS писать .wrap, .content, . sidebar {overflow:hidden}

Так же градиентный задний фон нужно запихивать не полностью картинкой в 900х100 пикс., а 1х100 пикс и повторять по горизонтали.

Старайся когда верстаешь сделать код как можно короче и понятней.

CalvinKlein · August 16, 2012

Так же градиентный задний фон нужно запихивать не полностью картинкой в 900х100 пикс., а 1х100 пикс и повторять по горизонтали.

1*100 px глупо лучше сделать 50*100 разница в размере в png формате меньше килобайта, а вот на скорость отрисовки влияет сильно

Edited August 16, 2012 by CalvinKlein

panas_dnepr · August 17, 2012

Поставь в notepad++ кодировку UTF-8 без BOM и волшебная пустая строчка исчезнет.

Такая кодировка и стоит...

По поводу вёрстки - структура, с моей точки зрения, не правильная(Я бы такую не принял бы от верстальщика уж точно):
<div class="content">
<div class="first overflow"></div>
<div class="second overflow"></div>
<div class="third overflow"></div>
</div>
Как Я понял - первый контейнер содержит 2 блока и сайдбар. Так вот - Я бы контент сделал в 1 див а сайдбар в другой.
<div class="wrap">
<div class="content"></div>
<div class="sidebar"></div>
</div>
Мммм... И присваивать класс overflow.... Лучше в CSS писать .wrap, .content, . sidebar {overflow:hidden}

Понял, учту на будущее!

Так же градиентный задний фон нужно запихивать не полностью картинкой в 900х100 пикс., а 1х100 пикс и повторять по горизонтали.
Старайся когда верстаешь сделать код как можно короче и понятней.

Это я гнался за кроссбраузерностью...border-radius не все браузер поддерживают...вот и загнал полностью...

Спасибо за замечания и подсказки!

Да! Подскажите как сделать что бы при переводе страницы(в хроме) у меня не съезжали элементы...

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

ar00 · August 17, 2012

Да! Подскажите как сделать что бы при переводе страницы(в хроме) у меня не съезжали элементы...
Это нужно каждому четкий размер прописать чтоб не растягивались?

Хм... По поводу перевода хз) Нужно заморачиваться, смотреть как будет лучше. Можно и фиксированные размеры сделать - в каждом отдельном случае нужно делать по своему.

Кстати, не хорошо делать картинку над текстом, текст невозможно выделить.

panas_dnepr · August 18, 2012

Да! Подскажите как сделать что бы при переводе страницы(в хроме) у меня не съезжали элементы...
Это нужно каждому четкий размер прописать чтоб не растягивались?
Хм... По поводу перевода хз) Нужно заморачиваться, смотреть как будет лучше. Можно и фиксированные размеры сделать - в каждом отдельном случае нужно делать по своему.
Кстати, не хорошо делать картинку над текстом, текст невозможно выделить.

А как бы вы сделали это(картинку над текстом)?

ar00 · August 18, 2012

А как бы вы сделали это(картинку над текстом)?

Например так:


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
</head>

<body>	
<div style="width: 500px; height:500px; background: red; position: relative;">
	<img src="2.jpg" style="width: 100px; height:100px; position:absolute; right:0; top:0; z-index:1">
	<p style="position:relative; z-index:2">
	Текст находится над картинкой.Текст находится над картинкой.Текст находится над картинкой.Текст находится над картинкой.
	</p>
	<p style="position:relative; z-index:0">
	Текст находится под картинкой. Текст находится под картинкой.Текст находится под картинкой.Текст находится под картинкой.
	</p>
</div>
</body>
</html>

panas_dnepr · August 20, 2012

А как бы вы сделали это(картинку над текстом)?

Например так:


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
</head>

<body>	
<div style="width: 500px; height:500px; background: red; position: relative;">
	<img src="2.jpg" style="width: 100px; height:100px; position:absolute; right:0; top:0; z-index:1">
	<p style="position:relative; z-index:2">
	Текст находится над картинкой.Текст находится над картинкой.Текст находится над картинкой.Текст находится над картинкой.
	</p>
	<p style="position:relative; z-index:0">
	Текст находится под картинкой. Текст находится под картинкой.Текст находится под картинкой.Текст находится под картинкой.
	</p>
</div>
</body>
</html>

Спасибо!

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