Первая верстка

[Rustick]

Ширина: фиксированная, 1024px.

Скриншот макета: смотреть

Верстка: смотреть

Возникшие проблемы:

1. Возникла проблема с IE6 & IE7. Правая колонка съезжала вниз по правой стороне.

Для правой колонки было добавлено свойство display: inline;

После этого появилась проблема в Firefox, конец текста правой колонки текста, появился под левой колонкой текста.

2. Возникла проблема с отступами в меню, которое было создано с использованием списка.

Прописал padding: 12px 0 12px 15px;

но как в макете не получилось.

Вот это то, что у меня не получилось исправить.

А так это мой первый макет, сверстал его недели 2 назад, но не хватало сообщений, ну вот 30 сообщений и теперь я здесь.

Критика по всем фронтам приветствуется. Что сделал не так? Что можно было сделать лучше? И другие ваши советы.

[maxsnw]

а почему слева находится? opera 11.10

[Temiks]

Критика по всем фронтам приветствуется. Что сделал не так? Что можно было сделать лучше? И другие ваши советы.

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

2. зеленые полоски (голова и ноги) можно было сделать на всю ширину экрана, и вложив в него еще один блок где было бы лого и т.д , выравнивая его по центру экрана

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

4. ссылкам в меню можно было указать границу справа , а не писать |

5. зачем указывать так :

border-right-color:#5B8617;
border-right-style:solid;
border-right-width:1px;

когда можно просто написать

border-right: 1px solid #5B8617

Edited April 27, 2011 by Temiks

[Great Rash]

Картинки ужасны

Шрифты не по макету.

Меню сделано совершенно неправильно (я когда-то давно так тоже делал).

Но в целом рациональное зерно есть! Верстка совсем не плохая. Для первого раза очень даже неплохо. Продолжайте учиться.

[Rustick]

а почему слева находится? opera 11.10

Вопрос 1 в начале топика, который я не смог решить.

Критика по всем фронтам приветствуется. Что сделал не так? Что можно было сделать лучше? И другие ваши советы.

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

2. зеленые полоски (голова и ноги) можно было сделать на всю ширину экрана, и вложив в него еще один блок где было бы лого и т.д , выравнивая его по центру экрана

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

4. ссылкам в меню можно было указать границу справа , а не писать |

5. зачем указывать так :

border-right-color:#5B8617;
border-right-style:solid;
border-right-width:1px;

когда можно просто написать

border-right: 1px solid #5B8617

1. Что вы имеете ввиду под логотипом?

2. Зеленые полоски фоном, сверху логотип?

3. Хорошо, добавлю.

4. padding указаны, а | добавлены, так как они есть в макете, возможно эту палочку можно вставить каким-то css свойством?

5. Да, спасибо, возьму на заметку.

Картинки ужасны

Шрифты не по макету.

Меню сделано совершенно неправильно (я когда-то давно так тоже делал).

Но в целом рациональное зерно есть! Верстка совсем не плохая. Для первого раза очень даже неплохо. Продолжайте учиться.

Картинки - какие были в макете.

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

Меню - прочитал статью на htmlbook.ru и решил сделать меню таким образом.

Каким образом лучше делать меню, подскажите пожалуйста?

И еще- если не сложно ответьте пожалуйста на два вопроса в первом сообщении.

И еще вопросик появился, это нормально, то что я использую отрицательные margin?

[DrStrangeLove]

У меня небольшая горизонтальная прокрутка(в последнем Хроме).

Попробуй засунуть всё в wrapper и поставить ширину по меньше, чем 1024px.

Edited April 27, 2011 by DrStrangeLove

[Temiks]

1. Что вы имеете ввиду под логотипом?

2. Зеленые полоски фоном, сверху логотип?

3. Хорошо, добавлю.

4. padding указаны, а | добавлены, так как они есть в макете, возможно эту палочку можно вставить каким-то css свойством?

5. Да, спасибо, возьму на заметку.

1. вот как я вам говорил

а сейчас у вас так (где красная линия, там у вас разрез)

2. вот так

4.

a{
border-right: 1px solid #000000;
}

Edited April 27, 2011 by Temiks

[Great Rash]

Картинки - какие были в макете.

Нет, в макете картинки нормальные. А у вас они ужасны. Какие-то артефакты по краям, неужели вы этого не видите?

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

Ок, фотошоп заменил, но хоть размер шрифта под макет подогнать можно было?

Меню - прочитал статью на htmlbook.ru и решил сделать меню таким образом.

Статья нормальная, а меню вы сделали плохо Очень плохо засовывать разделители в <li>.

Вот это я имел в виду:

<ul class="hr">
  <li>home</li>
  <li>|</li>		
  <li>Products</li>
  <li>|</li>
  <li>Specials</li>
  <li>|</li>
  <li>Pro Tour</li>
  <li>|</li>
  <li>Club Hire</li>
</ul>

должно быть так:

<ul class="hr">
  <li>home</li>		
  <li>Products</li>
  <li>Specials</li>
  <li>Pro Tour</li>
  <li>Club Hire</li>
</ul>

1. Возникла проблема с IE6 & IE7. Правая колонка съезжала вниз по правой стороне.

Все от незнания (или непонимания) блочной модели. Ширина блока складывается из, собственно, ширины и паддингов. У вас написано width: 435px; padding-left: 10px; padding-right: 30px;. В итоге получается что ширина блока равна не 435px, а 435 + 10 + 30 = 475px. А вы правой колонке продолжаете назначать отступ в 435px и она, естественно, съезжает вниз т.к. не помещается по ширине. Удивительно что не съезжает в остальных браузерах. Тут ИЕ вам совершенно верно все показал.

2. Возникла проблема с отступами в меню, которое было создано с использованием списка.

Все оттого, что меню сверстано неправильно.

[Rustick]

Переделал все что смог:

Скриншот макета: смотреть

Верстка: смотреть

У меня небольшая горизонтальная прокрутка(в последнем Хроме).

Попробуй засунуть всё в wrapper и поставить ширину по меньше, чем 1024px.

По совету psywalker'а делаю как в оригинале 1024px, так только учусь верстать

1. вот как я вам говорил

а сейчас у вас так (где красная линия, там у вас разрез)

2. вот так

4.

a{
border-right: 1px solid #000000;
}

1 и 2 - извиняюсь, но я совсем не догоняю

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

Все от незнания (или непонимания) блочной модели. Ширина блока складывается из, собственно, ширины и паддингов. У вас написано width: 435px; padding-left: 10px; padding-right: 30px;. В итоге получается что ширина блока равна не 435px, а 435 + 10 + 30 = 475px. А вы правой колонке продолжаете назначать отступ в 435px и она, естественно, съезжает вниз т.к. не помещается по ширине. Удивительно что не съезжает в остальных браузерах. Тут ИЕ вам совершенно верно все показал.

Понял, исправил, заработало.

Всем спасибо за помощь.

Появилось еще парочку вопросов:

У меня в сверстанном макете судя по всему шрифт больше, чем в оригинале.

Каким образом при верстке макета понимается какой размер шрифта отверстывать?

То есть вот я в фотошопе посмотрел, там стоял 12pt, с таким же размером отверстал, но в левой и правой колонка оригинала гораздо больше текста умещается в 1 строчку. Или же нужно самому подбирать размер подставляя различные размеры шрифтов?

[Temiks]

поставьте шрифт 12px и семью шрифта

[psywalker]

Переделал все что смог:

Почему меню не переделал? Тебе же камрад даже кода дал?

[ctpz]

1. Файл style.css строка 12 - 14

Замени

a {

}

на

a {
color: #000000;
font-size: 14px;
font-weight: bold;
}

2. В том же файле строки 21 - 23

Замени

p {
margin: 0.5em 0 1em 0;
}

на

p {
font-size: 14px;
margin: 0.5em 0 1em;
}

3. Замени

#right_column {
margin-left: 463px;
width: 561px;
}

на

#right_column {
margin-left: 463px;
width: 561px;
padding-left: 20px;
}

И это я указал только незначительные ошибки.

И на будущее. Думаю как-нибудь проще верстать страницы.

Edited May 3, 2011 by ctpz

[Фаринг]

Нормально

[psywalker]

Нормально

Ещё раз такое увижу, бан незамедлительно!