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

[Great Rash]

Я считаю, что ID использовать вообще нельзя. Представление документа должно быть завязано на классы. ID придуман для использования языками программирования. Приведу такой интересный факт: я однажды устраивался на работу в одну компанию где мне сразу заявили, что одним из условий написания кода у них является неиспользование ID в верстке. И я с ними в этом плане согласен, оставьте ID программистам не усложняйте им жизнь.

[psywalker]

Я считаю, что ID использовать вообще нельзя. Представление документа должно быть завязано на классы. ID придуман для использования языками программирования. Приведу такой интересный факт: я однажды устраивался на работу в одну компанию где мне сразу заявили, что одним из условий написания кода у них является неиспользование ID в верстке. И я с ними в этом плане согласен, оставьте ID программистам не усложняйте им жизнь.

Основные блоки всё таки следуют пометить идентификатором. Для тех же программеров например.

[Great Rash]

Программеры при необходимости сами все пометят. Да и, как правило, от помеченных основных блоков толку нет. Основным лэйаутом навряд ли кто-то будет рулить.

[mishka]

li - это не строчный элемент

насчет id и основного лаяута - основным блокам не то что нужно, а можно дать айдишник. Во всех остальных случаях - слушайте дядьку GreatRash и проблем будет меньше.

[psywalker]

слушайте дядьку GreatRash и проблем будет меньше.

А дядьку psywalkera слушать уже не надо получается?

[rash]

Я считаю, что ID использовать вообще нельзя. Представление документа должно быть завязано на классы. ID придуман для использования языками программирования. Приведу такой интересный факт: я однажды устраивался на работу в одну компанию где мне сразу заявили, что одним из условий написания кода у них является неиспользование ID в верстке. И я с ними в этом плане согласен, оставьте ID программистам не усложняйте им жизнь.

<label for="…

А в остальных случаях да, это разумный подход.

[Great Rash]

Да, для лейбла без ID не пройдет валидацию. Хотя я не понимаю чем W3C name не угодил...

[Red Planet]

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

Стоп. Я думал, что использовать нужно id, когда применение один раз, class - когда два или более. Считал это некой парадигмой. Нужно всегда использовать class?

[psywalker]

Стоп. Я думал, что использовать нужно id, когда применение один раз, class - когда два или более. Считал это некой парадигмой. Нужно всегда использовать class?

Да не воспринимай ты так всё буквально. Злые они все.

Делай всё с умом и всё будет хорошо

[klierik]

автор, не бери в голову, просто учись.

ID - JavaScript

Class - CSS

верстайте просто и понятно не только вам а и программисту который потом это будет "вешать" или дописывать скрипты.

[Red Planet]

psywalker, klierik, ЦУ уяснил. Сверстаю, только как появится время.

[psywalker]

psywalker, klierik, ЦУ уяснил. Сверстаю, только как появится время.

Давай, будет ждать

[Red Planet]

Добрый день. Сейчас занимаюсь переоформлением блока с коробкой и текстом. Есть вопрос. Internet Explorer 6 при установке padding'ов растягивает саму картинку вместо того чтобы увеличивать размер блока путем установки отступов (показано на рисунке). Нужно писать отдельные правила для него.

Ничего не придумал кроме абсолютного позиционирования для картинки-заголовка и абзаца.

Стиль для Internet Explorer 6.

#h1-replace, #top-grey-bar p {	
	position: absolute;
	top: 30px;
}


img#h1-replace {
	padding: 0;	
}


#top-grey-bar p {
	top: 90px;
	width: 460px;	
}

Стиль для других браузеров.

#top-grey-bar {
	position: relative;
	height: 200px;
	background: url('images/top-grey-bg.jpg');
}


img#box {
	float: right;
	margin-right: 105px;	
}


#h1-replace, #top-grey-bar p {
	margin-left: 175px;	
}


img#h1-replace {
	padding: 35px 0 27px 0;	
}

Из HTML.

<div id="top-grey-bar">			
			<img src="images/box.jpg" alt="box" id="box" /> 
			<img src="images/h1-replace.png" alt="Lorem ipsum dolor sit amet, consectetur tadipiscing elit. Nulla pharetra sagittis varius." id="h1-replace" />
				<p>Sed mi ipsum, gravida eget volutpat nec, auctor et nisl. Maecenas aliquet, lacus quis consectetur fringilla, nisi nunc malesuada felis, eu ornare elit ante ipsum primis in faucibus<strong> <a href="#">orci luctus et.</a></strong></p>

		</div> <!-- top-grey-bar -->

Правильно ли так делать? Оптимально ли? Какие другие варианты решения проблемы есть?

Edited October 19, 2010 by Red Planet

[psywalker]

А я чёт не понял, что тебе нужно получить в итоге, покажи скриншот конечный.

[Red Planet]

psywalker, смотрите скриншоты.

Резльтатат в браузерах за исключением IE 6.

Результат в Internet Explorer 6 без применения стиля специально для него.

Если написать стиль для IE, то в нем все отображается правильно.

Edited October 19, 2010 by Red Planet

[Great Rash]

Оберните <img> в еще один элемент (желательно блочный, желательно из семейства <h1(2,3,4,5,6)>). И к нему уже применяйте форматирование. Имхо у ИЕ крышу сносит когда вы пытаетесь margin и padding к картинке применить.

[psywalker]

psywalker, смотрите скриншоты.

Резльтатат в браузерах за исключением IE 6.

Результат в Internet Explorer 6 без применения стиля специально для него.

Если написать стиль для IE, то в нем все отображается правильно.

Пиши стиль для ИЕ специально в кондишнл комметс

[Red Planet]

psywalker, так и сделал.

Блоку с контентом и правой колонке нужно задавать фиксированную высоту или лучше прижать футер к низу?

Edited October 20, 2010 by Red Planet

[psywalker]

psywalker, так и сделал.

Блоку с контентом и правой колонке нужно задавать фиксированную высоту или лучше прижать футер к низу?

Не вздумай высоту контенту прописывать. Вообще подвязывай с этими делами.

Насчёт футера - прижми.

[Non Stop]

Свою тему создать пока что не могу, поэтому напишу здесь

Сверстал за вечер страничку автора по psd'шке. Учусь и практикуюсь.

http://best-dota.ru/

Стили сделал прямо в странице для вашего удобства.

Если не трудно пару словечек подкиньте

Edited October 21, 2010 by Non Stop

[sigma77]

Non Stop,

Честно говоря свёрстано не лучше, чем у автора топика. Много не напишу, надо бежать, но первое, что бросилось в глаза - куча относительно спозиционированных блоков, какая-то нереальная минимальная ширина (там легко можно сделать как минимум под разрешение 1024), шапка одной картинкой, непонятная ссылка справа от лого.

Ну дальше и в различных браузерах я не смотрела.

Вечером посмотрю поближе, если никто раньше не ответит

[LunatiK]

Свою тему создать пока что не могу, поэтому напишу здесь

Сверстал за вечер страничку автора по psd'шке. Учусь и практикуюсь.

http://best-dota.ru/

Стили сделал прямо в странице для вашего удобства.

Если не трудно пару словечек подкиньте

Прежде чем слушать комментарии приведите код к валидному состоянию, проверяйтесь Валидатором

З.Ы. Кстати об этом написано в правилах раздела

[Non Stop]

бросилось в глаза - куча относительно спозиционированных блоков

С помощью позиционирования размещал списки, какую можно сделать альтернативу?

там легко можно сделать как минимум под разрешение 1024

Сделать легко, но у автора 1200, возможно это было задумано.

Прежде чем слушать комментарии приведите код к валидному состоянию

Теперь всё валидно.

[LunatiK]

Теперь всё валидно.

ОК. Теперь продолжим :

  <p class=" rcont">
<span class="orc"><a href="#">Integer vel nulla felis</a></span><a href="#">.</a> (24.3.2008)
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce nec mauris sed quam pulvinar porta. In quam erat, hendrerit at dignissim ac, laoreet eu enim.</p>
<p class="rcont2">
<span class="orc"><a href="#">Integer vel nulla felis</a></span><a href="#">.</a> (24.3.2008)
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce nec mauris sed quam pulvinar porta. In quam erat, hendrerit at dignissim ac, laoreet eu enim.</p>

В чём прикол, оборачивать точку отдельно?

Для чего нужен <span>? не проще ли задать слили .rcont a {...} ?

[Non Stop]

Спасибо, Лунатик.

Поправил. Верстал в дримвивере, оттуда косяков и набрал.