Hotel in Prague

DrStrangeLove · June 17, 2011

Hotel in Prague

Дизайн не мой.

Где я проверял:

html валидатор - не пройден - 1 ошибка от яндекс вставки.

css валидатор - пройден.

Браузеры:

IE8, FF(3.6.15, 4), Safari 5.0.2, Opera (10.61, 11.11), Google Chrome 12. (всё только под Виндой - XP(SP2),7)

даже страшно представить что там в IE6-IE7.. Будет интересно узнать..

Разрешения: 1024х768, 1280х720, 1920х1080.

Походу вёрстки у меня накопился ряд вопросов, на который очень нужны ответы:

1. Если в макете текст-рыба в абзацах, в верстке рыба должна совпадать слово в слово, строка в строку с макетом??

Или ничего что в верстке абзац на 1-2 строки меньше/больше чем на макете??

2. Как сделать чтобы пункты меню были ровно, равномерно распределены?? Что не так в моём примере??

3. Есть два фона для wrapper'а и inner'а, у них нет установленного height, фон зависит от содержимого, след-но он обрезается внизу и не отображается полностью.. Правильно ли я поставил padding-bottom wrapper'у?? Или как правильно??

4. Логотип и звёзды не получились как на макете.. ( Логотип - текст. слой, я его и растрировал, и сохранял в индекс. цветах, и в RGB, но всё равно почему-то белые контуры.. ( Как тут быть??

Vlad · June 17, 2011

4. Сохраняйте рисунок как PNG-24. Если же необходимо в PNG-8 (например, для IE6), то почитайте эту статью, она объясняет, откуда берутся белые контуры.

http://webimg.ru/basic/sglazhivanie-kraev

DrStrangeLove · June 17, 2011

4. Сохраняйте рисунок как PNG-24. Если же необходимо в PNG-8 (например, для IE6), то почитайте эту статью, она объясняет, откуда берутся белые контуры.
http://webimg.ru/basic/sglazhivanie-kraev

Пофиксил белые контуры (через PNG-24). Спасибо за ссылку..

buddah · June 17, 2011

У лупы не пофиксил.

Кнопки соц сетей должны под прозрачный фон наезжать?

У кнопок Reserve видны пиксели.

Звезд отеля не видно.

Опять же используешь доктайп хтмл5, но не используешь рекомендуемые nav, aside и т.д и не пользуешься правилами синтаксиса хтмл5.

Код не отформатирован, отступов нет, тяжело читать. Считается признаком дурного тона.

<img src="hotel_03.png" alt="">

Что это? Зачем alt, если ты его оставляешь пустым? Для валидатора?)

Где h1?

DrStrangeLove · June 17, 2011

У лупы не пофиксил.
Кнопки соц сетей должны под прозрачный фон наезжать?
У кнопок Reserve видны пиксели.
Звезд отеля не видно.
Опять же используешь доктайп хтмл5, но не используешь рекомендуемые nav, aside и т.д и не пользуешься правилами синтаксиса хтмл5.
Код не отформатирован, отступов нет, тяжело читать. Считается признаком дурного тона.
<img src="hotel_03.png" alt="">
Что это? Зачем alt, если ты его оставляешь пустым? Для валидатора?)
Где h1?

1. Теперь пофиксил.

2. Да, по макету.

3. знаю, там градиент и иногда оттенки зелёного не совпадают.. Как правильно в таких случаях?? Ведь оттенки меняются..

4. знаю, на макете тоже вроде не особо видно.. можно как-то улучшить png при таком psd??

5. Я поставил doctype html5 только чтобы не ставить длинные doctype'ы (читал, что так можно).

6. Да не отформатирован, и в css файле нет разбиения на разделы.. Я не собирался вылизовать вёрстку, хотел сделать просто хорошо, нормально, чтобы нигде ничего не разваливалось и никуда не уезжало.. На некоторых сайтах после XSL ещё более нечитаемо, но всё нормально работает..

7. Да, для Валидатора..

8. Зачем и куда h1??

buddah · June 17, 2011

8. Зачем и куда h1??

Ну хотя бы в лого, для СЕО.

Shift-Web · June 17, 2011

8. Зачем и куда h1??
Ну хотя бы в лого, для СЕО.

Не надо ... Тайтла хватит и пару раз по тексту. Это вообще извращение на мой взгляд. Лого как то больше с брендингом коррелирует, чем с текстом и большинство делают его графикой. Какой смысл от картинки в заголовке?

Edited June 17, 2011 by Shift-Web

buddah · June 17, 2011

8. Зачем и куда h1??
Ну хотя бы в лого, для СЕО.
Не надо ... Тайтла хватит и пару раз по тексту. Это вообще извращение на мой взгляд. Лого как то больше с брендингом коррелирует, чем с текстом и большинство делают его графикой. Какой смысл от картинки в заголовке?

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

Shift-Web · June 17, 2011

Шаблон приятный, пасмурный такой. Немного огорчает, что фон ограничен ): Кстати, тут можно было PIE юзнуть легко. Вроде ничего не позиционируется и не плавает. Вёрстка бы полегчала

DrStrangeLove · June 17, 2011

Шаблон приятный, пасмурный такой. Немного огорчает, что фон ограничен ): Кстати, тут можно было PIE юзнуть легко. Вроде ничего не позиционируется и не плавает. Вёрстка бы полегчала

Что значит фон ограничен?? На мониторах побольше - видно побольше, но макс. ширина - 1234px.

PIE для чего?? Для круглых уголков??

Что значит:

Вроде ничего не позиционируется и не плавает.

?? Там используются float:left и float:right для колонок.. и position есть в хедере и футере..

Shift-Web · June 17, 2011

Шаблон приятный, пасмурный такой. Немного огорчает, что фон ограничен ): Кстати, тут можно было PIE юзнуть легко. Вроде ничего не позиционируется и не плавает. Вёрстка бы полегчала
Что значит фон ограничен?? На мониторах побольше - видно побольше, но макс. ширина - 1234px.
PIE для чего?? Для круглых уголков??
Что значит:
Вроде ничего не позиционируется и не плавает.
?? Там используются float:left и float:right для колонок.. и position есть в хедере и футере..

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

DrStrangeLove · June 17, 2011

Шаблон приятный, пасмурный такой. Немного огорчает, что фон ограничен ): Кстати, тут можно было PIE юзнуть легко. Вроде ничего не позиционируется и не плавает. Вёрстка бы полегчала
Что значит фон ограничен?? На мониторах побольше - видно побольше, но макс. ширина - 1234px.
PIE для чего?? Для круглых уголков??
Что значит:
Вроде ничего не позиционируется и не плавает.
?? Там используются float:left и float:right для колонок.. и position есть в хедере и футере..
1234px это и огорчает.

Увы, большей ширины картинка не предоставляет..

DrStrangeLove · June 20, 2011

Вопрос №2: Как всё-таки выровнять меню??

amelice · June 24, 2011

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>меню</title>
<link href="css/common.css" rel="stylesheet" type="text/css">
</head>
<body>
		<ul id="menu">
		<li><a href="#">Menu Link</a></li>
		<li><a href="#">Menu Link</a></li>
		<li><a href="#">Menu Link</a></li>
		<li><a href="#">Menu Link</a></li>
		<li><a href="#">Menu Link</a></li>
		</ul>

</body>
</html>

и css



#menu{
	width:800px;
	margin:0 auto;
	display:table;
	table-layout:fixed;
	padding:0;
	list-style:none;

}
#menu li{
	display:table-cell;
	border-left:1px #000 solid;
}
#menu li:first-child{
	border-left:none;
}
#menu li a{
	display:block;
	height:50px;
	padding:0 35px;
	line-height:50px;
	color:#fff;
	background:#69c;
	text-decoration:none;
}
#menu li a:hover{
	background:#369;
}

а результат будет такой, но, я не уверена, что будет работать в старых ИЕ...

Edited June 24, 2011 by cheburek

amelice · June 24, 2011

Походу вёрстки у меня накопился ряд вопросов, на который очень нужны ответы:
1. Если в макете текст-рыба в абзацах, в верстке рыба должна совпадать слово в слово, строка в строку с макетом??
Или ничего что в верстке абзац на 1-2 строки меньше/больше чем на макете??
3. Есть два фона и inner'а, у них нет установленного height, фон зависит от содержимого, след-но он обрезается внизу и не отображается полностью.. Правильно ли я поставил padding-bottom wrapper'у?? Или как правильно??

1. а что такое текст-рыба?

3. Я бы тоже использовала в данном случае (по макету) padding-bottom для wrapper'а.

Мой ФФ4 показывает так.

DrStrangeLove · June 24, 2011

Походу вёрстки у меня накопился ряд вопросов, на который очень нужны ответы:
1. Если в макете текст-рыба в абзацах, в верстке рыба должна совпадать слово в слово, строка в строку с макетом??
Или ничего что в верстке абзац на 1-2 строки меньше/больше чем на макете??
3. Есть два фона и inner'а, у них нет установленного height, фон зависит от содержимого, след-но он обрезается внизу и не отображается полностью.. Правильно ли я поставил padding-bottom wrapper'у?? Или как правильно??
1. а что такое текст-рыба?
3. Я бы тоже использовала в данном случае (по макету) padding-bottom для wrapper'а.
Мой ФФ4 показывает так.

Почему ФФ4 так показывает?? Что вы поставили для padding-bottom?? Я проверял везде, кроме IE6, IE7 и IE9, и нигде такого не было...

Edited June 24, 2011 by DrStrangeLove

Dinow · June 24, 2011

Почему ФФ4 так показывает?? Что вы поставили для padding-bottom?? Я проверял везде, кроме IE6, IE7 и IE9, и нигде такого не было...

DrStrangeLove, у меня в ФФ4/Win7 тоже так показывает. Никаких паддингов не ставила, просто открыла страницу

DrStrangeLove · June 24, 2011

Почему ФФ4 так показывает?? Что вы поставили для padding-bottom?? Я проверял везде, кроме IE6, IE7 и IE9, и нигде такого не было...
DrStrangeLove, у меня в ФФ4/Win7 тоже так показывает. Никаких паддингов не ставила, просто открыла страницу

Какой-то странный у вас ФФ4.. Проверьте, может у вас он уже успел обновиться до ФФ5?? А на ФФ5 я ещё не проверял вёрстку...

amelice · June 25, 2011

Какой-то странный у вас ФФ4.. Проверьте, может у вас он уже успел обновиться до ФФ5?? А на ФФ5 я ещё не проверял вёрстку...

Нормальный у нас ФФ4, :rolleyes: это твой код не правильно показывает на экране с разрешением 1920Х1200. Почему так говорю, потому, что на ноутбуке ФФ4 показывает нормально, а там разрешение не большое.

Edited June 25, 2011 by cheburek

DrStrangeLove · June 25, 2011

Какой-то странный у вас ФФ4.. Проверьте, может у вас он уже успел обновиться до ФФ5?? А на ФФ5 я ещё не проверял вёрстку...
Нормальный у нас ФФ4, это твой код не правильно показывает на экране с разрешением 1920Х1200. Почему так говорю, потому, что на ноутбуке ФФ4 показывает нормально, а там разрешение не большое.

А где Вы взяли разрешение 1920Х1200 ?? У меня такого разрешения нет вообще.. максимальное - 1920х1080 - там всё было нормально...

Softlink · June 25, 2011

Какой-то странный у вас ФФ4.. Проверьте, может у вас он уже успел обновиться до ФФ5?? А на ФФ5 я ещё не проверял вёрстку...
Нормальный у нас ФФ4, это твой код не правильно показывает на экране с разрешением 1920Х1200. Почему так говорю, потому, что на ноутбуке ФФ4 показывает нормально, а там разрешение не большое.
А где Вы взяли разрешение 1920Х1200 ?? У меня такого разрешения нет вообще.. максимальное - 1920х1080 - там всё было нормально...

вот у такого аппарата есть например _http://www.mvideo.ru/products/30013321.html

DrStrangeLove · June 25, 2011

Какой-то странный у вас ФФ4.. Проверьте, может у вас он уже успел обновиться до ФФ5?? А на ФФ5 я ещё не проверял вёрстку...
Нормальный у нас ФФ4, это твой код не правильно показывает на экране с разрешением 1920Х1200. Почему так говорю, потому, что на ноутбуке ФФ4 показывает нормально, а там разрешение не большое.
А где Вы взяли разрешение 1920Х1200 ?? У меня такого разрешения нет вообще.. максимальное - 1920х1080 - там всё было нормально...
вот у такого аппарата есть например _http://www.mvideo.ru/products/30013321.html

Даже не знаю.. Что теперь для вёрстки нужно заводить "арсенал" мониторов всех "калибров"?? Сам как поступаешь?? Держишь парк компов??

Softlink · June 26, 2011

Даже не знаю.. Что теперь для вёрстки нужно заводить "арсенал" мониторов всех "калибров"?? Сам как поступаешь?? Держишь парк компов??

_http://viewlike.us/ есть сервис

Edited June 26, 2011 by Softlink

DrStrangeLove · June 26, 2011

Даже не знаю.. Что теперь для вёрстки нужно заводить "арсенал" мониторов всех "калибров"?? Сам как поступаешь?? Держишь парк компов??
_http://viewlike.us/ есть сервис

Спасибо за ссылку! Интересный сервис.. Согласно этому сервису всё выглядит нормально при 1920х1200..

Видимо дело в ФФ4 на 1920х1200..

Shift-Web · June 26, 2011

>> Видимо дело в ФФ4 на 1920х1200..

Если пользоваться скролом(Контрл + Колесо), иногда вылазят баги в браузерах.

Sign In

Hotel in Prague

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