Да здравствует опыт или моя первая верстка

[runet]

Добрый вечер.

Это моя первая верстка.

По этому хотелось получить конструктивную критику, а также советы по улучшению кода.

Данный макет(psd) был найден в просторах сети, так что по дизайну вопросы отсекаются.

Макет

Верстка

css код

[swetlana]

[runet]

Это apple mac показывает? Проверял в браузерах на windows, было все в порядке. Ну это скорей всего в разности размеров шрифта на разных ос.

[c01nd01r]

Вот, Ubuntu 10.10. Opera 11.

В FireFox(браузер по умолчанию) надписи "There are many" вообще практически не видно... Еще ниже расположена.

[Great Rash]

<img src="img/img-1.jpg" width="542" height="237" alt="" />

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

<div class="clear"> </div>

Это очень плохо. Если вы не в курсе есть <br clear="all" />. И вообще, разве тут нельзя обойтись просто overflow: hidden; для родителя?

<div id="footer"> 
	<div class="f_b-copy"> 
		<ul> 
			<li><a href="#" title="#">Home</a><span>|</span></li> 
			<li><a href="#" title="#">Products</a><span>|</span></li> 
			<li><a href="#" title="#">Services</a><span>|</span></li> 
			<li><a href="#" title="#">News</a><span>|</span></li> 
			<li><a href="#" title="#">Contact</a></li> 
		</ul> 
		<hr class="hr" /> 
		<p>Copyright 2009  Somara.com , All rights reserved. Design by Faisal Zahid</p> 
	</div> 
</div>

Тут можно было легко обойтись без дополнительного контейнера.

[runet]

<div class='quotetop'>Цитата(Great Rash @ 25.2.2011, 10:08) <a href="index.php?act=findpost&pid=185126"><{POST_SNAPBACK}></a></div><div class='quotemain'><!--quotec--><!--c1--><div class='codetop'>Код</div><div class='codemain'><!--ec1--><img src="img/img-1.jpg" width="542" height="237" alt="" /><!--c2--></div><!--ec2-->
Зачем вы всем картинкам размеры прописываете? Без указания размеров все тоже будет работать.

<!--c1--><div class='codetop'>Код</div><div class='codemain'><!--ec1--><div class="clear"> </div><!--c2--></div><!--ec2-->
Это очень плохо. Если вы не в курсе есть <i><br clear="all" /></i>. И вообще, разве тут нельзя обойтись просто <i>overflow: hidden;</i> для родителя?

<!--c1--><div class='codetop'>Код</div><div class='codemain'><!--ec1--><div id="footer"> 
	<div class="f_b-copy"> 
		<ul> 
			<li><a href="#" title="#">Home</a><span>|</span></li> 
			<li><a href="#" title="#">Products</a><span>|</span></li> 
			<li><a href="#" title="#">Services</a><span>|</span></li> 
			<li><a href="#" title="#">News</a><span>|</span></li> 
			<li><a href="#" title="#">Contact</a></li> 
		</ul> 
		<hr class="hr" /> 
		<p>Copyright 2009  Somara.com , All rights reserved. Design by Faisal Zahid</p> 
	</div> 
</div><!--c2--></div><!--ec2-->
Тут можно было легко обойтись без дополнительного контейнера.<!--QuoteEnd--></div>

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

2.

<div class="clear"></div>

Почему данная конструкция плохая? Я её использую не только чтобы очистить, но и для прижатия footer`a. Хотя можно было обойтись простым :after. Но у меня не вышло побороть IE. По этому пришлось использовать дополнительный контейнер. И разве атрибут clear рекомендуем в применении?

3. Ну здесь дополнительный контейнер служит для выравнивания "внутренностей" по середине. Но если можно обойтись без него, .... ща попробую.

Edited April 6, 2011 by runet

[Great Rash]

Почему данная конструкция плохая? Я её использую не только чтобы очистить но также для прижатия footer`a.

Если вы используете такую конструкцию только для очистки потока, то это плохо, если же у вас она несет еще какую-то нагрузку кроме этого, тогда нормально. Просто для очистки потока есть специальный элемент - <br />

Ну здесь дополнительный контейнер служит для выравнивания "внутренностей по середине". Но если можно обойтись без него, .... ща попробую.

Я понял, что для выравнивания. Но можно обойтись без него.

<li><a href="#" title="#">Home</a><span>|</span></li>

Еще, разделители лучше было б бекграундом сделать. Все-таки лучше отказываться от лишних элементов там где это возможно.

[runet]

<li><a href="#" title="#">Home</a><span>|</span></li>

Еще, разделители лучше было б бекграундом сделать. Все-таки лучше отказываться от лишних элементов там где это возможно.

То есть нужно было вырезать | картинкой и закинуть в background тегу a? Я правильно Вас понял?

Edited February 25, 2011 by runet

[Great Rash]

Ну да, в бекграунд <li> слева.

<ul> сказать overflow: hidden;, а <li> сказать margin: 0 0 0 -1px;, тогда у первого элемента в списке бекграунда видно не будет.

[runet]

<div id="footer">
	<div class="f_b-copy">
		<ul>
			<li><a href="#" title="#">Home</a><span>|</span></li>
			<li><a href="#" title="#">Products</a><span>|</span></li>
			<li><a href="#" title="#">Services</a><span>|</span></li>
			<li><a href="#" title="#">News</a><span>|</span></li>
			<li><a href="#" title="#">Contact</a></li>
		</ul>
		<hr class="hr" />
		<p>Copyright 2009  Somara.com , All rights reserved. Design by Faisal Zahid</p>
	</div>
</div>

Тут можно было легко обойтись без дополнительного контейнера.

Всё вышло без дополнительного контейнера . Большое спасибо, Great Rash.

[SelenIT]

Просто для очистки потока есть специальный элемент - <br />

Сорри? Меня всю жизнь учили, что это еще хуже (по сути строчный элемент, притом нетипичный, плохо управляемый через стили, плюс только что проверил — похоже, он совсем не решает проблему в IE6-7)...

[Great Rash]

Все он решает и везде.

<br clear="all" />

Работает везде. Чем же этот элемент так нетипичен? Зачем им управлять через стили?

[runet]

Я всегда считал, что лучше использовать дополнительный контейнер или еще лучше Псевдоэлемент :after. Но так как :after не работает в IE, приходится добавлять лишнюю конструкцию. Хотя можно было обойтись overflow: hidden или zoom:1 для родителя, но здесь в данном варианте влияло прижатия footer`a.

Просто код

<br clear="all" />

создает после себя пустую строку которую через стили не убрать.

Кстати данный код не проходит валидацию в (X)HTML.

Edited February 25, 2011 by runet

[swetlana]

Ну да, в бекграунд <li> слева.

<ul> сказать overflow: hidden;, а <li> сказать margin: 0 0 0 -1px;, тогда у первого элемента в списке бекграунда видно не будет.

li:not(:first-child) {
border-left: 1px solid white;
}

[SelenIT]

Работает везде.

Странно, почему у меня не везде? Может, в старых IE всё-таки hasLayout его страховал?

[Great Rash]

swetlana, мой способ кроссбраузерный. Ваш - нет.

SelenIT, хм, да не прав.

[swetlana]

swetlana, мой способ кроссбраузерный. Ваш - нет.

я намеренно использовала именно :not(), который понимает ещё меньше ослов, чем :first-child (можно было ещё второй строкой li:first-child{ border: none; }).

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

[psywalker]

я намеренно использовала именно :not(), который понимает ещё меньше ослов, чем :first-child (можно было ещё второй строкой li:first-child{ border: none; }).

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

Вы так суровы мадам

<br clear="all" />

Такая грязь дикая. Если всё правильно верстать, то такие вещи вообще не пригодятся.

[LunatiK]

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

Слова человека использующего яваскрипт для этой самой кроссбраузерности ...

[swetlana]

ну да, именно так. Следовало бы перефразировать, но уже лениво.

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

[Xorigan]

супер! хорошо сделано