Первая законченная верстка.

[LunatiK]

Ну а по внешнему виду, что бросилось в глаза: цвет ссылок не соответствует тому что в макете; текст в блоке «What we do the best.» тот что возле картинок выезжает за границы задуманные дизайнером.

есть подозрение, что если померить, то у вас ещё где-то что-то не соответствует и сделано на глазок. Не надо портить дизайн, его вам надо только напилить.

Добавил: в макете шрифт без засечек ...

Ещё добавил: поглядел на ваши нарезки картинок - батенька, а вы халтурщик с графикой работать не умеете, либо жутко экономите время

[Non Stop]

Что верно то верно. В фотошопе знаю только примитивные функции, нарезкой пользоваться не умею. Основную часть времени уделял html и css, до графики дело серьезно не доходило еще. Это все впереди.

Изменил шрифт + подправил дизайн.

[Verder]

За сдвоенный копирайт руки поотрывать. Коробит, когда такое вижу. Типа все кругом идиоты и им одного знака или слова copyright недостаточно, чтобы понять.

[Red Planet]

Спрашивал на одном форуме, можно ли ссылку добавить ссылку с помощью псевдоэлемента after. Сказали, что нельзя. На данном макете после каждого абзаца встречается сслыка "orci luctus et". Выходит, что вручную писать?

[psywalker]

Выходит, что вручную писать?

Выходит так.

[Протуберанец]

За сдвоенный копирайт руки поотрывать. Коробит, когда такое вижу. Типа все кругом идиоты и им одного знака или слова copyright недостаточно, чтобы понять.

Я тоже весь четырехлетний Бизнес-линч просмотрел, самая полезная рубрика, наверн

[Протуберанец]

да, сорь за оффтоп(ассоциативное мышление работает не удержать )

[Red Planet]

Есть вопрос.

Как организовать картинку с текстом?

Понятно, что здесь имеет место обтекание. Но вопрос не в этом.

Текста может быть много (высота больше высоты картинки), мало (высота меньше высоты картинки). Как сделать так, чтобы величина отступа (показан стрелкой) между первым и вторым (обозначено цифрами) не зависел от того, сколько текста?

Edited October 23, 2010 by Red Planet

[psywalker]

Параграфу с текстом overflow:hidden; да и родителю не мешало бы.

[Red Planet]

psywalker, но тогда текст ведет себя следующим образом, если его много. Почему?

#content {	
	margin-right: 290px;
	padding: 0 25px;
	border-right: #dbd4c6 1px solid;
	overflow: hidden;
}


h3 {
	font-size: 14px;
	font-weight: bold;
	padding: 0 0 10px;
}


img.pic-and-text {
	padding-right: 20px;
	float: left;
}


p.content-text {
	overflow: hidden;
}

Все это находится в блоке "content".

<img src="images/pic_01.jpg" alt="Apple iPhone" class="pic-and-text" />
				<h3>Sed mi ipsum, gravida eget</h3>
				<p class="content-text">Maecenas aliquet, lacus quis consectetur fringilla, nisi nunc malesuada felis, eu ornare elit ligula vitae diam. Phasellus eu nisl mi, fringilla iaculis magna. Vestibulum ante ipsum primis in faucibus orci luctus et. Maecenas aliquet, lacus quis consectetur fringilla, nisi nunc malesuada felis, eu ornare elit ligula vitae diam. Phasellus eu nisl mi, fringilla iaculis magna. Vestibulum ante ipsum primis in faucibus orci luctus et. Maecenas aliquet, lacus quis consectetur fringilla, nisi nunc malesuada felis, eu ornare elit ligula vitae diam. Phasellus eu nisl mi, fringilla iaculis magna. Vestibulum ante ipsum primis in faucibus orci luctus et.
</p>

Edited October 23, 2010 by Red Planet

[psywalker]

А как нужно, чтобы вёл себя текст?

[Red Planet]

psywalker, чтобы обтекал и в месте, где я нарисовал знак вопроса. Если убрать overflow: hidden, то тогда обтекает.

[psywalker]

psywalker, чтобы обтекал и в месте, где я нарисовал знак вопроса. Если убрать overflow: hidden, то тогда обтекает.

Значит убери, оставь только у родителя.

[Red Planet]

Значит убери, оставь только у родителя.

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

Пока что не нашел ничего лучше кроме создания блоков-оберток и задания им фиксированной высоты.

div.div-pic-and-text {
	height: 150px;
}


h3 {
	font-size: 14px;
	font-weight: bold;
	padding: 0 0 10px;
}


img.pic-and-text {
	padding-right: 20px;
	float: left;
}

<div class="div-pic-and-text">

					<img src="images/pic_01.jpg" alt="Apple iPhone" class="pic-and-text" />
					<h3>Sed mi ipsum, gravida eget</h3>
					<p>Maecenas aliquet, lacus quis consectetur fringilla, nisi nunc malesuada felis, eu ornare elit ligula vitae diam. Phasellus eu nisl mi, fringilla iaculis magna. Vestibulum ante ipsum primis in faucibus <strong><a href="#">orci luctus et.</a></strong></p>

</div> <!-- div-pic-and-text -->

				<div class="div-pic-and-text">

					<img src="images/pic_02.jpg" alt="Table" class="pic-and-text" />
					<h3>Sed mi ipsum, gravida eget</h3>
					<p>Maecenas aliquet, lacus quis consectetur fringilla, nisi nunc malesuada felis, eu ornare elit ligula vitae diam. Phasellus eu nisl mi, fringilla iaculis magna. Vestibulum ante ipsum primis in faucibus <strong><a href="#">orci luctus et.</a></strong></p>

</div> <!-- div-pic-and-text -->

[psywalker]

Никаких сюрпризов. Просто надо делать всё правильно.

http://www.jsfiddle.net/psywalker/eBFQE/

[Red Planet]

Почти завершил, но только что обнаружил проблему: при уменьшении размеров окна по горизонтали левый край зажевывается (на скриншоте показано, левую часть картинки мы так и не увидим). В чем причина и как устранить?

Edited October 27, 2010 by Red Planet

[psywalker]

Наверняка блоки не резиновые. Это плохо. Остаётся как то исправить ситуацию, поставив min-width: , но это халтура брат.

[Red Planet]

psywalker, верстку фиксированной сделал. Если можно чем-то исправить ситуацию, подскажите.

Не буду размещать пока что, просто прикреплю.

Можете заодно и вцелом посмотреть.

Верстка

Edited October 27, 2010 by Red Planet

[psywalker]

psywalker, верстку фиксированной сделал. Если можно чем-то исправить ситуацию, подскажите.

Не буду размещать пока что, просто прикреплю.

Можете заодно и вцелом посмотреть.

Верстка

Нее дружище, к сожалению времени нет совсем. Да и ты уже итак получил много советов и критики. Сделай как сможешь, а мы поглядим.

Сделай резиновую вёрстку.

[Great Rash]

Забавно, что тема называется "...законченная верстка", судя по всему, не такая уж она и законченная

[psywalker]

Забавно, что тема называется "...законченная верстка", судя по всему, не такая уж она и законченная

Да она походу ещё будет начинаться и заканчиваться не один раз))

[Red Planet]

Да она походу ещё будет начинаться и заканчиваться не один раз))

Нет, не будет. Я учел ваши замечания, многое понял, чему-то научился.

Но свет клином не сошелся именно на этом макете, хочу что-нибудь новое сделать.

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

Недостатки:

1. Футер не прижат к низу (слишком поздно об этом задумался, тогда уже обновленная верстка была почти сделана, учту при верстке следующего макета).
   
2. Горизонтальная полоса прокрутки все таки зажевывает левый край (тоже разберусь).
   

Буду рад комментариям.

Следующий макет, за который хочу взяться.

Сразу вопросы.

1. Там pop-up'ы. Я с ними дела не имел. В какую сторону посмотреть?
   
2. Как поступить с футером? Высота его слишком большая, прижимать как-то, мне кажется, неправильно. Пустить в общий поток?
   

Edited October 28, 2010 by Red Planet

[psywalker]

Red Planet

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

# Там pop-up'ы. Я с ними дела не имел. В какую сторону посмотреть?

Выпадающее меню постарайся сделать, в остальном просто верстай макет.

# Как поступить с футером? Высота его слишком большая, прижимать как-то, мне кажется, неправильно. Пустить в общий поток?

Да, пусти потоком всё.

[Red Planet]

Если будет совсем невмоготу, то возьмусь за другой, а к этому вернусь потом.

[Red Planet]

Есть вопрос по второму макету.

Там спрайты используются (сделаю без выпадающего меню, пусть будут просто спрайты).

Насколько я понял, ссылка должна отображаться как блочный элемент, чтобы работала смена фона. Но у меня-то список в строчку.

Код следующий, но проблема в том, что значения table-cell для свойства display седьмой и более ранние Intenet Explorer'ы не поддерживают.

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

HTML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>Blue and Green</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="my-style.css" rel="stylesheet" type="text/css" media="all" />

<!--[if lt IE 7]>
	<script defer type="text/javascript" src="pngfix.js" mce_src="pngfix.js"></script>
	<link href="my-style-ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

</head>
<body>

	<div id="wrapper">

		<ul class="menu">
			<li><a href="#" class="sprite1"></a></li>
			<li><a href="#" class="sprite2"></a></li>
		</ul>

		<a href="#" title="Bluish"><img src="images/logo.png" class="logo" alt="Bluish - varius ullamcorper" /></a>


	</div> <!-- wrapper -->

	<div id="footer">
	</div> <!-- footer -->


</body>
</html>

CSS.

body {
	background: url('images/bg.png') repeat-x #075d79;
}


* {
	margin: 0;
	padding: 0;
}


ul {
	list-style: none;
}


img {
	border: none;
}


#wrapper {
	width: 942px;
	margin: 0 auto;
}


img.logo, ul.menu {
	margin-top: 30px;
}


ul.menu {
	float: right;
}


ul.menu li {
	display: table-cell;
}


a.sprite1 {
	display: block;
	background: url('images/menu/home.gif') left top;
	width: 82px;
	height: 37px;
}


a.sprite1:hover {
	background-position: left 37px;
}

Edited October 31, 2010 by Red Planet