бриллиант махмуда

[cyklop77]

сверстал страничку по такому макету. главная задача была строго придерживаться макета. верстал под ie8/FF/chrome/opera/safari. под разрешения экрана >=800x600.

результат можно посмотреть здесь

переполненную версию можно посмотреть здесь

покритикуйте пожалуйста вёрстку. особенно интересует работа со шрифтом.

ссылка на psd-макет

[PanSoul]

Есть лишние дивы, к примеру, зачем создавать div.main, если уже есть div.wrap_main? Конечно, с размерами этих блоков явно перенамудрили.

.wrap_main {
margin: 0 auto;
min-width: 1003px;
max-width: 1400px;
min-height: 100%;
overflow: hidden;
}

.main {
height: 100%;
overflow: hidden;
position: relative;
}

Зачем так?

В данном примере глупо и нерационально подключать стили к какому-то разрешению экрана - для этого и была придумана "резиновая" вёрстка.

function styles()
    {
        if (screen.width==800) 
        {    
           document.getElementById('styles').href='css/alt_styles.css';
        }   
    }   

<h1>
<a href="/">Brilliante</a>
</h1>

- Что это? Зачем это? Да ещё со ссылкой и ещё скрытый?! Я бы понял, если бы это был какой-нибудь заголовок в виде картинки, да и то без ссылки - только текст.

Зачем в ul.menuT делать такой большой правый паддинг? Если Вы хотели прижать к бокам элементы, то вполне хватило float с соответствующим свойством (left/right), и тогда не пришлось бы мудрить с формой, делая её абсолютом...

И это только начало...Ну и в общем, Вы явно потеряли соответствие шрифтов, пренебрегаете расстояниями между элементами (margin/padding)...О, а ещё у Вас нижний чёрный блок обрезается при уменьшении окна до появления скролла.

[cyklop77]

В данном примере глупо и нерационально подключать стили к какому-то разрешению экрана - для этого и была придумана "резиновая" вёрстка.

function styles()
    {
        if (screen.width==800) 
        {    
           document.getElementById('styles').href='css/alt_styles.css';
        }   
    }   

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

<h1>
<a href="/">Brilliante</a>
</h1>

- Что это? Зачем это? Да ещё со ссылкой и ещё скрытый?! Я бы понял, если бы это был какой-нибудь заголовок в виде картинки, да и то без ссылки - только текст.

это косяк да. дело в том, что сначала я сделал логотип текстом, но потом заметил, что при изменении масштаба в разных браузерах он теряет свою прямоугольную форму. поэтому решил сделать картинкой, а <a href> забыл убрать

И это только начало...Ну и в общем, Вы явно потеряли соответствие шрифтов, пренебрегаете расстояниями между элементами (margin/padding)...О, а ещё у Вас нижний чёрный блок обрезается при уменьшении окна до появления скролла.

да обрезается немного справа, но я поставил родителю overflow: hidden... у вас все таки появляется именно скролл? можно скриншот и версию браузера?

укажите пожалуйста хотя бы на пару мест, в которых я изменил расстояния между элементами по сравнению с макетом

[cyklop77]

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