Перейти к публикации
ExTEzZy

Верстка макета uBlog (Olejegcord)

Рекомендованные сообщения

ExTEzZy

Как и обещал сверстал для паблика один простенький макет, нарисованный дизайнером Olejegcord для конкурса uCoz. На верстку ушло 5 часов.

vEZTGH1.png

 

Прошу вас оценить код и сказать недостатки (если они есть).

Забираем: ublog-html.zip



Ребята, верстку перезалил, поправил один баг

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
volkod

в целом хорошо по html разметке. Но лучше не делай пустые элементы которых у тебя много

Изменено пользователем volkod

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
ExTEzZy

в целом хорошо по html разметке. Но лучше не делай пустые элементы которых у тебя много

Спасибо, а что с ними делать?

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
volkod

 

в целом хорошо по html разметке. Но лучше не делай пустые элементы которых у тебя много

Спасибо, а что с ними делать?

запихивай текст который характеризует этот блок, а потом в css через text-indent убирай его, а также используй псевдо классы типа after before и другие то у тебя особенно в шапке можно было обойтись без 2 доп дива, а как раз использовать их

Изменено пользователем volkod

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
Гость Blendy

А мне вот это не нравится

nvx1396282071__desktop_31-03-2014_20-06-

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
volkod

А мне вот это не нравится

nvx1396282071__desktop_31-03-2014_20-06-

быстрей всего хотел что б высота была не фиксирована тогда лучше задать минимальную высоту и будет все ок

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
MyTalk

Может кто-нибудь сможет адаптировать его под DLE и выложить для пользователей NEVEX? :popkorn:

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
FlaZeR

Уже в группе psd'ец :)

за работу +

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
Гость Blendy

@volkod, А мне не понравился вид кода :(

Вот такой более удобный

nvx1396358461____2014-04-01__171929.png

 

а этот?

 

nvx1396358513____2014-04-01__172022.png

 

Во всем остальном не плохо :)

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
ExTEzZy

 

 

в целом хорошо по html разметке. Но лучше не делай пустые элементы которых у тебя много

Спасибо, а что с ними делать?

запихивай текст который характеризует этот блок, а потом в css через text-indent убирай его, а также используй псевдо классы типа after before и другие то у тебя особенно в шапке можно было обойтись без 2 доп дива, а как раз использовать их

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

 

Слушай, а можно заполнить пустые элементы тегом " 

"

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
Гость Blendy

@ExTEzZy, Еще тебе нужно всегда подключать скрипт если верстаешь на html5

<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
ExTEzZy

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
MyTalk

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

Ну не скажи,IE в Windows 8 и выше,вполне резвый и удобный.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
volkod

 

 

 

в целом хорошо по html разметке. Но лучше не делай пустые элементы которых у тебя много

Спасибо, а что с ними делать?

запихивай текст который характеризует этот блок, а потом в css через text-indent убирай его, а также используй псевдо классы типа after before и другие то у тебя особенно в шапке можно было обойтись без 2 доп дива, а как раз использовать их

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

 

Слушай, а можно заполнить пустые элементы тегом " 

"

нет и бо это символ пробела и поисковики будут его просто напросто не видеть и считать пустым 

 

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

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
webil

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

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

особенно радует уровень плавности анимации(на которую не влияет объемы анимированных объектов) в ослике по сравнению с тем же самым вебкит...

 

Мои глаза!

<li><a href="#"><span><img src="img/menu/news.png" alt="Новости"></span>Новости</a></li>
<li><a href="#"><span><img src="img/menu/biz.png" alt="Бизнес"></span>Бизнес</a></li>
<li><a href="#"><span><img src="img/menu/lab.png" alt="Дизайн"></span>Дизайн</a></li>
<li><a href="#"><span><img src="img/menu/micro.png" alt="Интервью"></span>Интервью</a></li>
<li><a href="#"><span><img src="img/menu/glass.png" alt="Исследования"></span>Исследования</a></li>
<li><a href="#"><span><img src="img/menu/key.png" alt="Безопасность"></span>Безопасность</a></li>
<li><a href="#"><span><img src="img/menu/circle.png" alt="Шаг за шагом"></span>Шаг за шагом</a></li>
<li><a href="#"><span><img src="img/menu/ucoz.png" alt="uCoz"></span>uCoz</a></li>
<li><a href="#"><span><img src="img/menu/gold.png" alt="Конкурсы"></span>Конкурсы</a></li>
<li><a href="#"><span><img src="img/menu/up.png" alt="Обновления"></span>Обновления</a></li>

зачем так много всего?! и li и span еще и img... можно было обойтись одними a и img(ну рас он нужен вам) хотя я и без img бы делал.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
ExTEzZy

 

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

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

особенно радует уровень плавности анимации(на которую не влияет объемы анимированных объектов) в ослике по сравнению с тем же самым вебкит...

 

Мои глаза!

<li><a href="#"><span><img src="img/menu/news.png" alt="Новости"></span>Новости</a></li>
<li><a href="#"><span><img src="img/menu/biz.png" alt="Бизнес"></span>Бизнес</a></li>
<li><a href="#"><span><img src="img/menu/lab.png" alt="Дизайн"></span>Дизайн</a></li>
<li><a href="#"><span><img src="img/menu/micro.png" alt="Интервью"></span>Интервью</a></li>
<li><a href="#"><span><img src="img/menu/glass.png" alt="Исследования"></span>Исследования</a></li>
<li><a href="#"><span><img src="img/menu/key.png" alt="Безопасность"></span>Безопасность</a></li>
<li><a href="#"><span><img src="img/menu/circle.png" alt="Шаг за шагом"></span>Шаг за шагом</a></li>
<li><a href="#"><span><img src="img/menu/ucoz.png" alt="uCoz"></span>uCoz</a></li>
<li><a href="#"><span><img src="img/menu/gold.png" alt="Конкурсы"></span>Конкурсы</a></li>
<li><a href="#"><span><img src="img/menu/up.png" alt="Обновления"></span>Обновления</a></li>

зачем так много всего?! и li и span еще и img... можно было обойтись одними a и img(ну рас он нужен вам) хотя я и без img бы делал.

Если убрать span, то пункты меню не будут выровнены, т.к. картинки имеют разную ширину, нужно было их заключить в span, чтобы получить фиксированную ширину

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
webil

@ExTEzZy, можно было обойтись без img и использовать классы для того же спан, или как делал бы я  все картинки выводил бы через bg ссылки с нужным отступом и так же через класс естественно, просто это слишком много лишнего кода.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
Гость Blendy

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

 

#h-search input[type=submit]{display: block;width: 28px;height: 28px;background: url(../img/search-button.png);margin-top: 2px;}
#h-search input[type=submit]:hover{display: block;width: 28px;height: 28px;background: url(../img/search-button.png) right;margin-top: 2px;}
 

Зачем?

Изменено пользователем Blendy

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
ExTEzZy

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

 

#h-search input[type=submit]{display: block;width: 28px;height: 28px;background: url(../img/search-button.png);margin-top: 2px;}
#h-search input[type=submit]:hover{display: block;width: 28px;height: 28px;background: url(../img/search-button.png) right;margin-top: 2px;}
 

Зачем?

Так было в макете

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
Гость Blendy

@ExTEzZy, Зачем 2 раза писать одни и теже стили? И еще этой кнопке можно было задать фон просто цветами и поставить 1 картинку этой лупы) :O:

Изменено пользователем Blendy

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас

×
×
  • Создать...