Ещё макет для вёрстки

[s0rr0w]

http://www.w3.org/TR/CSS21/syndata.html#value-def-length

1em = высота шрифта

[zhuravlik]

блин( я сюда заходил в поисках истины, но не спикинглишь к сожалению... с лингвой отдельные участки текста понимаю, но общий смысл трудно уловить. Хорошо, просто скажите, если не затруднит, 1 em = высота шрифта, а ОТКУДА берется эта высота шрифта?? Это значение браузера по умолчанию? И чему оно равно?

[mishka]

http://habrahabr.ru/blogs/webdev/42151/ - статья про единицы измерения

http://aloestudios.com/code/emchart/ - удобная табличка для вычислений (там линочки есть "View Demo Download Zip") А то судя по предыдущему посту - можешь и ненайти )

Edited July 5, 2010 by mishka2

[sigma77]

Хорошо, просто скажите, если не затруднит, 1 em = высота шрифта, а ОТКУДА берется эта высота шрифта?? Это значение браузера по умолчанию? И чему оно равно?

Родительского элемента или браузера по умолчанию (обычно 16px).

http://aloestudios.com/code/emchart/ - удобная табличка для вычислений (там линочки есть "View Demo Download Zip") А то судя по предыдущему посту - можешь и ненайти )

Мне еще нравится http://pxtoem.gamecoll.com/

Но обычно задаешь для боди размер шрифта 62.5% и тогда em становятся кратны 10 размерам в пикселях.

Edited July 5, 2010 by sigma77

[mishka]

Если брать в пикселях, то да, соответствует 16 пикселям. Но на самом деле шрифт в браузере по дефолту 12 пунктов.

я делаю так -

*{font-size:100.01%;}/*точно немогу сказать для какой оперы это актуально, но это в ней фиксило баг перерасчета*/

html{font-size:62.5%;}

body{

font:1.2em/1.4em Arial,Helvetica,sans-serif; /*тут ставляю дефолтный шрифт сайта*/

}

тогда в любом месте будет шрифт не 10px, а дефолтный. Это немного больше мороки по сравнению с твоим способом. Но я считаю это более правильным ).

[zhuravlik]

спасибо всем)

[Joyfit]

Всем привет. Наконец-то сверстал до конца первый макет). Вот что вышло - http://slil.ru/29566512

Надо только подправить пару штук для ие6 >.< а в остальном вроде нормально выглядит ( ну по крайней мере мне так кажется, не считая ужасного ксса ) Если никто не решится смотрить из архива, то залью на домен какой-нить)

ps: на форуме обсуждений писало что нету прав создать тему >.<

[Joyfit]

http://belyaev-di.narod.ru/business/business.html

вот так вот)

Из непоняток:

- Во всех браухерах левые блоки не прижаты друг к другу, хотя отступов нету

- в ие6 не знаю как убрать у формы рамочку и сделать кнопку нормальной =)

ps: создавать тему в нормальном разделе прав нету >.<

[Red Planet]

Верстаю макет, возникла проблема с левой колонкой, текст в ней не подчиняется свойству padding. Почему так происходит?

		<div id="sidebar">
			<div id="top-sdbr">
				<h2>Aliquam sed veroeros</h2>
				<img src="images/sdbr_top_pic.png" alt="Aliquam sed veroeros" />
				<span class="sdbr">Fusce nec eros augue hendrerit erat. Nam dapibus lorem ipsum dolor suscipit semper. Lorem amet consequat.</span>
			</div>

			<div id="bottom-sdbr">
				<h2>Lorem ipsum sed amet</h2>
				<img src="images/sdbr_bottom__pic.png" alt="Lorem ipsum sed amet"  />
			</div>
		</div>

Из прикрепленной таблицы стилей.

#sidebar {
	position: absolute;
	top: 413px;
	left: 55px;
	width: 300px;
	height: 614px;
}

#sidebar img {
	border: #fff solid;
	margin-left: 30px;

}


#top-sdbr {
	height: 290px;
	background: url(images/h2_bg.gif) no-repeat #dde7f8;
}


#bottom-sdbr {
	height: 324px;
	background: url(images/h2_bg.gif) no-repeat #dde7f8;
}


span.sdbr {
	padding: 30px 33px;
	color: #4e7379;
}

Результат.

Edited September 10, 2010 by Red Planet

[Great Rash]

padding (вертикальный) работает только у блочных элементов, а <span> - это инлайн-элемент

[Red Planet]

Great Rash, спасибо. Заменил <span> на <p> и все получилось.

Edited September 12, 2010 by Red Planet

[Red Planet]

Есть неясность с размером шрифта. В body указываю размер 11pt, текст "Fusce nec eros augue, ut hendrerit erat. Nam dapibus sed

semper blandit. Fusce cursus neque suscipit semper", что находится по центру шапки, в макете 13pt.

Перевожу одни единицы в другие.

13pt/11pt=1.181818...em.

Однако, если прописать следующий код, размер становится слишком большим, совсем не как на макете.

То же самое касается и заголовка "Aliquam Etiam Tempus" (16pt на макете).

16pt/11pt=1.45em.

p#header-text {
 font-size: 1.18em;
}

h1 {
 font-size: 1.45em;
 color: #fff;
 padding: 25px 0 13px 34px;
}

Результат.

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

Edited September 18, 2010 by Red Planet

[Red Planet]

Здравствуйте. Проблема в следующем.

input {

margin: 10px 0 0 25px;

background: #094a80;

color: #fff;

border: none;

font-size: 14px;

height: 29px;

}

input.button {

margin-left: 5px;

vertical-align: middle;

}

<input type="textarea" size="20" / >

<input type="image" src="images/submit.jpg" class="button" / >

Блок, в котором находятся input-ы, спозиционирован абсолютно. Только в Mozilla Firefox кнопка и поле ввода соответствуют друг другу. В остальных криво как показано на скриншоте. В то же время (если для верстки это принципиально) текст в поле ввода в старом Firefox 2.0.0.17 и в Internet Explorer 8 выравнивается по верху в поле ввода, а хотелось бы, чтобы был посередине. Посередине он в Google Chrome, Opera.

Edited September 26, 2010 by Red Planet

[bref]

Здравствуйте.

Наконец сверстал этот макет. ссылка

Большая просьба к опытным людям оценить эту работу. Буду рад любым замечаниям.

[botyaslonim]

При уменьшении масштаба правая колонка уезжает вниз

[bref]

Исправил. Это я с отступами намудрил.

[Dinow]

Моя первая работа на суд:

http://dinow.host22.com/BusinessName/

Верстала по макету из этой темы.. Тестировала в IE 6-8, Mozilla 3.16, Opera 11, Chrom и Safari

Просьба оценить качество верстки. Жесткая критика приветствуется.

[swetlana]

Для начала: http://validator.w3.org/check?uri=http%3A%...ine&group=0

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

<li class="archive"> — это зачем? Только для полосатого оформления? Или в этом есть смысл?

Если только для оформления, то есть :nth-child(odd) и :nth-child(even).

<li class="last"> — есть же :last-child. А ещё лучше :first-child для первого элемента, он поддерживается также и старыми IE.

<div class="logo"><h1><a href="#"> — избыточно. Можно <a class="logo">

<div class="wrapper"> — это зло. В 99.8% случаев без этого можно обойтись. Данный случай не исключение.

а вот над формами надо работать. поле ввода и кнопка смещены — выглядит как ошибка. И разметка у формы достаточно грустная.

Но это придирки, попытка той самой «жёсткой критики», которую просили.

А в целом здорово. Вот только в то, что это первая работа, верится с трудом.

[Dinow]

Светлана, спасибо за подробный ответ! Учту замечания и постараюсь довести до идеала.

А валидатор ругается на скрипт, который добавил хостинг..

А в целом здорово. Вот только в то, что это первая работа, верится с трудом.

Спасибо, приятно слышать) Это первая работа по псд макету и выставленная для критики, до этого практиковалась на верстании уже существующих страниц..

[swetlana]

Dinow, а почему бы не выложить работу в специально на то обученном разделе?

[Dinow]

Dinow, а почему бы не выложить работу в специально на то обученном разделе?

Я бы с радостью, но количество постов не позволяет пока..

[psywalker]

Dinow, когда то верстал его тоже. Если интересно, посмотри

http://psywalker.ru/Portfolio/BusinessName.../main-page.html

[Dinow]

Dinow, когда то верстал его тоже. Если интересно, посмотри

http://psywalker.ru/Portfolio/BusinessName.../main-page.html

Видела, видела)) даже скрипт оттуда для ИЕ6 кинула.. другие работать не хотели ни в какую..

Приглянулось, как использовал списки для контента.. взяла на заметку)

[Dinow]

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

А какой в данном случае больше подойдет?

<li class="archive"> — это зачем? Только для полосатого оформления? Или в этом есть смысл?

Если только для оформления, то есть :nth-child(odd) и :nth-child(even).

<li class="last"> — есть же :last-child. А ещё лучше :first-child для первого элемента, он поддерживается также и старыми IE.

IE6 не понял эти псевдоклассы(( нужен expression для него, поэтому оставила как есть..

<div class="logo"><h1><a href="#"> — избыточно. Можно <a class="logo">

Лишнее убрала

<div class="wrapper"> — это зло. В 99.8% случаев без этого можно обойтись. Данный случай не исключение.

Долго думала, как от него избавиться.. Он использовался для выравнивания колонок по высоте и задания ширины страницы. Подходящей альтернативы не нашла.. Есть другие варианты?

а вот над формами надо работать. поле ввода и кнопка смещены — выглядит как ошибка. И разметка у формы достаточно грустная.

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

[swetlana]

А какой в данном случае больше подойдет?

Вообще на дворе 2011 год, и производители браузеров рекомендуют не заниматься ерундой, а ставить <!DOCTYPE html>, а обо всяких версиях и мудрёных спецификациях забыть.

IE6 не понял эти псевдоклассы(( нужен expression для него, поэтому оставила как есть..

IE6 остался за бортом истории.

В принципе, можно ориентироваться даже на IE3. И не сомневаюсь, что есть люди, которые ещё им пользуются. Но тем самым тормозить развитие — оно того стоит?

Лишнее убрала

И правильно!

Долго думала, как от него избавиться.. Он использовался для выравнивания колонок по высоте и задания ширины страницы. Подходящей альтернативы не нашла.. Есть другие варианты?

А зачем, если в этих же целях можно использовать body?

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

И впрямь ровно. А что выглядит неровным — то обман зрения. Дизайнера бить по рукам за такие решения.