Оцените верстку

[oleg126]

Подскажите, что так, что не так с версткой!
Чего подправить, и как сделать в самом низу в footer-bottom серую полоску на всю ширину экрана?

http://oleg126-ru.1gb.ru

[Ironimus]

Там в ⇒ our portfolio в последнем элементе не пишет view, а их всех лучше сделать ссылками. Ну а для футера просто сделайте обертку. И лучше все таки использовать семантические блоки вроде <header>

[afdw]

HTML:

<div class="footer-bottom">	<div class="footer-bottom-inner">		<ul>			<li><a href="#index.html">Home</a></li>			<li><a href="">About us</a></li>			<li><a href="">Portfolio</a></li>			<li><a href="">Services</a></li>			<li><a href="">Blog</a></li>			<li><a href="">Contact us</a></li>		</ul>		<p>© 2012 PSDMania.RU. All Rights Reserved</p>		<img src="images/footer-logo.jpg">  	</div></div>

CSS:

.footer-bottom {background: #E2E2E2;width: 100%;height: 100px;position: absolute;left: 0;}.footer-bottom-inner {width: 960px;margin: 0 auto;}

[oleg126]

Спасибо, заменил, все стало как надо!

 

И что, кроме семантических тегов больше нечего исправить? Я думал будет больше косяков! 

 

Кстати, может кто посоветует домен + хост на одном сайте бесплатный? А то тот что был, стал не рабочим, и чего то исправить на сайте не получается!(

[Нарек]

футер не прижат, блоки наезжают друг на друга при просмотре с мобильного. Хост и домен на hostinger.ru

[klierik]

типичные ошибки по ссылке в подписи

[Ironimus]

Зачем там изображения линий, которые запросто делаются блоками или тегами hr?  И если уже очень хотелось сделать все изображениями, то можно было сделать их однопиксельной высоты и растягивать как вам надо. И не делайте ссылки при наведении почти черными, а то как то не красиво. И такие изображения как, например, в футере (что будут продолжатся на многих страницах) лучше вставлять css`ом, так как излишний код html это всегда плохо.

[oleg126]

Зачем там изображения линий, которые запросто делаются блоками или тегами hr?  И если уже очень хотелось сделать все изображениями, то можно было сделать их однопиксельной высоты и растягивать как вам надо. И не делайте ссылки при наведении почти черными, а то как то не красиво. И такие изображения как, например, в футере (что будут продолжатся на многих страницах) лучше вставлять css`ом, так как излишний код html это всегда плохо.

hr добавлю, а на счет ссылок, так в макете так, поэтому так надо!

 

Кстити, можете помочь мне, написав код для header-logo через css, а то я что то не могу понять как это сделать. Прописываю вместо img тег span, и в css пишу background: url("../images/header-logo.jpg") no repeat left top; но ничего не появляется почему то(

 

Вот новая ссылка!

 

http://testsiteoleg126.tk/CreativeDesignServices/

[klierik]

.logo {

    width: 100px;

    height: 100px;

    display: block;

    background: url(image.png);

}

[oleg126]

http://testsiteoleg126.tk/CreativeDesignServices/

 

что я не так сделал? У меня просто лого исчезает и все!

[Нарек]

что я не так сделал? У меня просто лого исчезает и все!

 

Не правильно пишешь ссылку на картинку. Он у тебя не в папке css, соответственно надо сначала выходить с папки css потом зайти в папку img 

url("../images/header-logo.jpg")

[oleg126]

Спасибо всем за помощь! Сейчас начал переделывать сайт, делать так, как надо, и тут у меня опять вопрос, почему у меня id="portfolio" охватывает не только портфолио но и предыдущий div? Я выделил черным бордюром!

 

http://testsiteoleg126.tk/CreativeDesignServices/

Edited June 10, 2014 by oleg126

[afdw]

Здесь ошибка:

<h2>Here’s some nice work <a href="#">view portfolio <span>⇒<span></a></h2> 

Замените на:

<h2>Here’s some nice work <a href="#">view portfolio <span>⇒</span></a></h2>

[oleg126]

Я заменил, но все равно ничего не изменилось, как захватывал бордер див контент, так и захватывает! 

[Нарек]

Я заменил, но все равно ничего не изменилось, как захватывал бордер див контент, так и захватывает! 

Потому что хаос в стилях. Если флоатить блоки, после них обязательно надо очистить поток хотя бы clear: both;

напиши clear: both; у #portfolio это хотя бы немножко исправит ситуацию.

[oleg126]

clear: both; помог как надо, спасибо! К сожалению вообще его не использую, потому что до конца не понял что это и с чем его едят( Это типа очищения предыдущих стилей, которые идут по наследству?

[Нарек]

clear: both; помог как надо, спасибо! К сожалению вообще его не использую, потому что до конца не понял что это и с чем его едят(

Есть еще лучше вариант, для блока #content добавить clearfix http://nicolasgallagher.com/micro-clearfix-hack/  Просто скопируй содержимое в свой css код и пропиши блоку #content класс cf

 

Это типа очищения предыдущих стилей, которые идут по наследству?

 

Как тебе объяснить то.. Попробую покороче. Свойство float как бы отрывает от основного документа какой нибудь блок. Представь плоскость, блок с float-ом будет выше остальных. То есть на твоем примере твой блок #portfolio просто не видит блоки с float потому что они приподняты от плоскости. Хак clearfix добавляет как бы невидимую оболочку, которая обхватывает твой основной блок в котором находятся блоки с float-ом, и создает невидимую границу. Получается твой блок #portfolio не видит блоки с float-ом, но видит границу которая добавила clearfix. И не лезет через границу. Надеюсь поймешь.