Поругайте верстку.

[lolka84]

Всем привет.

Нужны ваши мнения и небольшая помощь.

По-идее это сайт на html5, но т.к. это первая попытка - делайте на это скидку

По кроссбраузерности: ie8+

http://mytavatuy.ru/a/

Макет - http://mytavatuy.ru/a/img/alyans.jpg

Вопросы, как и обещал:

1. Меню. В макете оно со скругленными углами. Самипосебе углы не проблема, но т.к. меню тянется и докучи нужно, что б каждый пункт меню при наведении мыши "подсвечивался", то это меня поставило в тупик - как реализовать скругленные углы ?

2. Разделы сайта (Продаем, покупаем и т.д.). Так и не понял, как сделать, что б они располагались как на макете (растянуты четко от края до края). Мож кто-что подскажет..

Заранее благодарен за мнения

Edited October 6, 2011 by lolka84

[lolka84]

С меню вопрос решил, с разделами вопрос остается

[Softlink]

С меню вопрос решил, с разделами вопрос остается

display:table > display:table-cell

[lolka84]

Дык так оно и есть

.positions {
	width:100%;
	height:197px;
	padding:10px 0;
	display:table;
}
.positions .pch {
	width:20%;
	height:197px;
	display:table-cell;
}
.positions figure {
	width:171px;
	height:185px;
	background:url("../img/posFon.png") no-repeat;
	padding:6px;
	margin:0 auto;
}

       <div class="positions">



			<div class="pch">

            	<figure class="fonL">

                    <a href="#"><img id="idP1" src="img/p1.png" alt="" title=""></a>

                    <figcaption><a href="#">Продаем</a></figcaption>

            	</figure>

            </div>

			<div class="pch">

            	<figure class="fonLl">

                    <a href="#"><img id="idP2" src="img/p2.png" alt="" title=""></a>

                    <figcaption><a href="#">Производим</a></figcaption>

            	</figure>

            </div>

			<div class="pch">

            	<figure class="fonC">

                    <a href="#"><img id="idP3" src="img/p3.png" alt="" title=""></a>

                    <figcaption><a href="#">Купим</a></figcaption>

            	</figure>

            </div>

			<div class="pch">

            	<figure class="fonRr">

                    <a href="#"><img id="idP4" src="img/p4.png" alt="" title=""></a>

                    <figcaption><a href="#">Утилизация</a></figcaption>

            	</figure>

            </div>

			<div class="pch">

            	<figure class="fonR">

                    <a href="#"><img id="idP5" src="img/p5.png" alt="" title=""></a>

                    <figcaption><a href="#">Контакты</a></figcaption>

            	</figure>

            </div>



    	</div>

Edited October 6, 2011 by lolka84

[lolka84]

А по самой верстке замечаний что, нет никаких ?

[Gidroplan]

<header class="header">

креативный у вас html5 )

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

[Softlink]

А по самой верстке замечаний что, нет никаких ?

да как сказать. Поверхностно пробежался.

1) Футер не должен быть прижат?

2) <img src="img/menuFon.png" alt="" title=""> - зачем?

3) зачем для figure еще одна обертка в див?

4)

<div class="b1"><b></b></div>
        <div class="b2"><b><i><q></q></i></b></div>
        <div class="b3"><b><i></i></b></div>
        <div class="b4"><b></b></div>
        <div class="b5"><b></b></div>

- забить и забыть. Пусть лучше квадратное будет.

5)<section class="textSection"> - весьма спорный момент. Нежелательно использовать section просто для обертки, для этого есть дивы и их никто не отменил.

6)<section class="about"> больше тянет на article, имхо

сюда же <div class="allNews"><a href="#">читать далее</a></div> - это явный footer

7) <div class="cleaner"></div> - ну и это тоже мусор.

[lolka84]

<header class="header">

креативный у вас html5 )

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

Так оно, но решил выбрать вариант посложнее - резину

1) Футер не должен быть прижат?

2) <img src="img/menuFon.png" alt="" title=""> - зачем?

3) зачем для figure еще одна обертка в див?

4)

<div class="b1"><b></b></div>
        <div class="b2"><b><i><q></q></i></b></div>
        <div class="b3"><b><i></i></b></div>
        <div class="b4"><b></b></div>
        <div class="b5"><b></b></div>

- забить и забыть. Пусть лучше квадратное будет.

7) <div class="cleaner"></div> - ну и это тоже мусор.

1. Не акцентировали этот момент, поэтому пусть будет неприжат

2. Заказчик хотел 100% валидацию

3. Что б табличную структуру имитировать.

4. Тоже заказчик хотел загругляшки

7. Как сделать по-другому ?

И в целом - большое спасибо, принял ко вниманию.

з.ы. Думал, косяков поболе будет

[ceil100]

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

с такой хреновиной в шапке не будет 100% валидации

<meta charset="UTF-8">

так правильно

[nadop]

там где дата в новостях при увеличении дата уходит за рамочку скриншот

фон слишком рано начинает светлеть.

firefox. ubuntu.

Edited October 13, 2011 by nadop

[lolka84]

Апну тему.

Ребята, спасибо за отзывы, возникла следущая заморочка: сделал подвал прижатым к низу страницы - заказчик говорит, что у него все поползло.

Его скриншот - http://mytavatuy.ru/a/img/alyans.png'>http://mytavatuy.ru/a/img/alyans.png (ВНИМАНИЕ! 1.7 мб! )

Ссылка - http://mytavatuy.ru/a/

Фишка в том, у меня все всех браузерах и на всех моих 3х компьютерах ВСЕ ОК.

Посмотрите пожалуйста, как оно у вас.

Заранее благодарю!

Edited October 13, 2011 by lolka84

[lolka84]

Отбой, все ок