Моя первая верстка, прошу критики и советов

[Bava]

Всем прувет

Верстал макет предоставленный автором сайта (Ссылка на тему)

http://bava.ho.ua/ - вот здесь сверстанная страница.

Прошу критики и советов:

1. Правильно ли были использованы теги(такие теги какие нужно, расположение div'ов) для структурирования данных?

2. Правильные ли были использованы CSS свойства в определенных местах?

Ну то есть в определенных ситуациях правильно ли я использовал определенные свойства.. или это не важно?.. хз

3. Помогите оформить меню сайта (список ссылок) как на картинке.

4. Получилась кроссбраузерность начиная с ИЕ 8. Если не считать, что в ИЕ8 не работает border-radius, можно его как-то заменить чем-то другим?

5. Ну и какие-то замечания, если у вас имеются, буду рад услышать)

Edited June 13, 2012 by Bava

[Ergonav]

Меню посмотри внимательно, оранжевый цвет должен обвалакивать полностью длину строки, отступы по краям добавь, цвет текста при навадении - белый.

body{
margin:0;
}

Используй более лучший ресет (сброс стилей), да и где цвет фона? длина, ширина

Вот возьми, сам пользуюсь) хотя для каждого он свой, можешь использовать другие, например раз два

* {margin: 0; padding: 0;}
img { border: 0; }
a, img, div, input  { outline: none;}
ol, ul { list-style-position: inside;}
ul { list-style-type: none;}
table { border-collapse: collapse; margin: 0;}

* {margin: 0; padding: 0;}
img { border: 0; }
a, img, div, input  { outline: none;}
ol, ul { list-style-position: inside;}
ul { list-style-type: none;}
table { border-collapse: collapse; margin: 0;}


body {
background: #fff;
width: 100%;
height: 100%;
}

#menu{
background: #F6F6F8;
font: 11pt Tahoma;
height: 20px;
margin: 0;
}
#menu li{
	display: inline;
	float: left;
	margin-left: 8px;
	padding-left: 15px;
	padding-right: 15px;
	padding-bottom: 3px;
}
#menu ul{
	padding: 0;
	margin:0;
	text-align: center;
}
#menu li:hover{
	padding-left: 15px;
	padding-right: 15px;
background: #FF8200;
color: #000;
padding-bottom: 3px;
}
#menu a:link{
text-decoration: none;
color: #000;
}
#menu a:visited{
color: #000;
}

Как-то так, не уверен что кроссбраузерно

4. Получилась кроссбраузерность начиная с ИЕ 8. Если не считать, что в ИЕ8 не работает border-radius, можно его как-то заменить чем-то другим?

Картинкой

Edited June 13, 2012 by Ergonav

[Bava]

спасибо, буду разбираться)

* {margin: 0; padding: 0;}

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

background: #fff;

А зачем добавлять белый фон странице, которая по умолчанию белая?

[Ergonav]

спасибо, буду разбираться)

* {margin: 0; padding: 0;}

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

background: #fff;

А зачем добавлять белый фон странице, которая по умолчанию белая?

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

Edited June 13, 2012 by Ergonav

[Vin]

4. Получилась кроссбраузерность начиная с ИЕ 8. Если не считать, что в ИЕ8 не работает border-radius, можно его как-то заменить чем-то другим?

Конечно же, надо уметь делать декорирование картинками. Но применительно к вёрстке этого макета на квадратность углов в IE8 и старше можно и забить — она тут не портит дизайн.

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

Это больше для наглядности. Не вставлять же сюда листинг всего reset.css. Сброс желательно допиливать под конкретную вёрстку. Относительно щадящий сброс стилей у Yahoo — имхо, подходит для новичков; Мейеровский — более "жёсткий" и громоздкий, но зато хорошо подходит для модификации под собственные нужды.

[cyklop77]

Ну то есть в определенных ситуациях правильно ли я использовал определенные свойства..

автор, я тебе только за это плюсанул. чувство юмора у тебя есть)

по сабжу:

вот так

* {margin: 0; padding: 0;}

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

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

Edited June 13, 2012 by cyklop77

[hedgehog]

background: #fff;

А зачем добавлять белый фон странице, которая по умолчанию белая?

http://i.imgur.com/AfQRK.png

С каких это пор "#EEEEEE" = "#FFF"?

[Vin]

* {margin: 0; padding: 0;}

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

О, правда? Лично мне так и казалось, но убедительных оснований не было.

[Ergonav]

по сабжу:

вот так

* {margin: 0; padding: 0;}

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

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

[Bava]

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

странно, у других картинок вроде такие же атрибуты но все проходит, с ними, гладко.. или я чего-то не понимаю

а, нет. уже разобрался)) атрибут не так назвал и для картинки-кнопки задал ширину и высоту.. оказывается не надо этого делать

Edited June 15, 2012 by Bava