Форум программистов, компьютерный форум, киберфорум
Наши страницы

HTML, CSS

Войти
Регистрация
Восстановить пароль
 
Crystal-3
76 / 72 / 35
Регистрация: 04.04.2014
Сообщений: 222
#1

Оцените, пожалуйста, вёрстку - HTML, CSS

04.04.2014, 20:30. Просмотров 455. Ответов 13
Метки нет (Все метки)

Доброго времени суток.
Прошу оценить мою вёрстку. Буду благодарна за помощь, подсказки, а также за критику.
0
Вложения
Тип файла: rar Тестовый макет.rar (885.3 Кб, 24 просмотров)
Лучшие ответы (1)
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
04.04.2014, 20:30
Здравствуйте! Я подобрал для вас темы с ответами на вопрос Оцените, пожалуйста, вёрстку (HTML, CSS):

Оцените вёрстку - HTML, CSS
del Исходники: https://github.com/pashkes/164879-gllacy Резина 1200-900, главная страница и страница каталога (в меню) Запрещено...

Оцените вёрстку - HTML, CSS
Сразу оговорюсь, это мой самый первый опыт вёрстки. Оцените, пожалуйста, качество кода. Покритикуйте, придеритесь... По возможности,...

Покритикуйте вёрстку, пожалуйста - HTML, CSS
Здравствуйте. Оцените, пожалуйста, вёрстку. Жесткая критика приветствуется. Возникли трудности: 1. Не могу сделать плавный переход...

Оцените, пожалуйста, верстку - HTML, CSS
Оцените, пожалуйста, верстку, выскажите замечания. По ссылкам верстка не сайта, а пошаговой формы заказа (там можно также переключатся...

Оцените верстку, пожалуйста - HTML, CSS
Всем привет. Просьба оценить верстку. http://rghost.ru/8nmsNYHpN Верстка выполнена не полностью, поскольку у меня возник вопрос: ...

Оцените пожалуйста верстку - HTML, CSS
Здравствуйте Всем! Я занимаюсь самообучением HTML и CSS. И сейчас создав что-то что уже можно показать, хотел бы чтобы вы оценили...

13
Flare
11 / 11 / 0
Регистрация: 18.03.2014
Сообщений: 65
04.04.2014, 23:29 #2
Картинка с цветком уехала вправо, а в остальном вроде все ровно.
1
Maveric
2 / 2 / 0
Регистрация: 24.05.2013
Сообщений: 43
05.04.2014, 00:31 #3
В explorer 11, меняются шрифты и под меню появляется белая полоса.
Не знаю можно ли прикладывать скрин, но можешь сам наверное проверить.
1
Олег126
44 / 44 / 3
Регистрация: 21.03.2013
Сообщений: 252
05.04.2014, 00:32 #4
Первое что бы я поправил, это я бы сделал для всех основных блоков header, content, footer - id.
Вторым бы я сделал обертку всего кода в еще один div, wrapper к примеру, и сделал бы фиксированную ширину, margin поставил бы auto, что бы на всех мониках было по центру а не слева, еще у меня на монике с разрешением 1280x1024px меню не поместилось в одну строчку и получилось, что FAQ пошел на вторую строку и залез на about us.
Ну и естественно цветок, вы сделали абсолютное позиционирование и выставили справа 0px, это и привело к тому что на широкоформатных мониторах выглядит не красиво, и отдельно от основного сайта!
Это исправится с помощью div id="wrapper".
Так же еще я заметил что слоган вы сделали картинкой, можно было бы в фотошопе оставить только фон и эффект, а текст нанести с помощью кода!

Это так поверхностное мнение на скорую руку!)
1
Alorian
691 / 531 / 22
Регистрация: 22.06.2009
Сообщений: 1,291
05.04.2014, 09:40 #5
Для оценки верстки ее стоит выкладывать на сайт какой нибудь, чтобы можно было по ссылке посмотреть.
По ссылке больше народу перейдет, файл мало кто скачает.
1
Crystal-3
76 / 72 / 35
Регистрация: 04.04.2014
Сообщений: 222
05.04.2014, 11:40  [ТС] #6
Цитата Сообщение от Олег126 Посмотреть сообщение
Первое что бы я поправил, это я бы сделал для всех основных блоков header, content, footer - id.
Использовала class поскольку здесь на форуме читала: id оставить для JavaScript.
Остальное поправила. Спасибо за подсказку.
0
Олег126
44 / 44 / 3
Регистрация: 21.03.2013
Сообщений: 252
05.04.2014, 11:56 #7
Цитата Сообщение от Crystal-3 Посмотреть сообщение
Использовала class поскольку здесь на форуме читала: id оставить для JavaScript.
Мне кажется что это немного бредово, поскольку сам немало раз видел что на форуме пишут что ид не стоит пихать везде подряд, а только в основные блоки страницы, такие как wrapper, header, content, footer(на вашем сайте), ну и другие основные теги!

Кстати я бы еще на вашем месте начал использовать семантические теги. Не помешает это!
На htmlbook.ru можно почитать об этом!
1
Crystal-3
76 / 72 / 35
Регистрация: 04.04.2014
Сообщений: 222
05.04.2014, 12:10  [ТС] #8
Цитата Сообщение от Олег126 Посмотреть сообщение
Кстати я бы еще на вашем месте начал использовать семантические теги.
Но ведь не все браузеры их поддерживают. Что делать с IE-8?
0
Олег126
44 / 44 / 3
Регистрация: 21.03.2013
Сообщений: 252
05.04.2014, 12:22 #9
Вообще я не особо заостряю внимание на этом вопросе, ибо считаю что это каменный век, хотя возможно большинство домохозяек и сидят на таком, поэтому в интернете есть очень много статей по разным инструментариям, написанным специально для применения их в IE, для решения подобного рода задач!
1
Mr Coder
365 / 365 / 82
Регистрация: 04.04.2013
Сообщений: 1,564
05.04.2014, 18:41 #10
Лучший ответ Сообщение было отмечено автором темы, экспертом или модератором как ответ
Crystal-3,
Во-первых, что бросилось в глаза так это обнуление отступов у всех элементов:
CSS
1
2
3
4
* {
    margin: 0px;
    padding: 0px;
}
Так делать не нужно, поскольку вы убираете отступы у абзацев, списков и т.д. В дальнейшем вам нужно будет переназначать эти значения. Убирайте отступы только там, где это действительно нужно.

Я вижу вам уже пришлось это сделать:

CSS
1
2
3
4
5
6
7
8
9
.content .text p {
    padding: 8px;
}
.content .top p {
    padding: 5px 0px;
}
.content .bottom  p {
    padding: 5px 0px;
}
-------------------

Во-вторых, когда используете свойство float вы должны "обнулять" обтекание чтоб родительский элемент не схлопнулся а так же, в отдельных ситуациях, плывёт вся вёрстка (а потом люди идут на форум ). О том, как очищают обтекания можно почитать тут http://seodiz.ru/clear-float

Мне больше нравится использование свойства overflow: hidden; у родительского элемента в случаях, когда к дочерним применяется свойство float. Но это не прямое его назначение. Дело в том, что он частично или полностью скрывает дочерние элементы, которые выходят за границы родительского (используют отрицательный margin или position).

То есть нужно понимать где его можно использовать а где нет. Рекомендую выбрать для себя один из способов и активно его использовать.

-------------------

В-третьих я бы посоветовал использовать сокращённые записи. То есть вместо этого:
CSS
1
2
padding-left: 5px;
padding-top: 13px;
Указывать отступы таким способом:
CSS
1
padding: 13px 0 0 5px; /*верх -> право -> низ -> лево*/
При вёрстке больших проектов это сокращает количество кода в разы и сказывается положительно на читабельности.

------------------

В-четвёртых надо стараться использовать как можно меньше кода. Всегда и во всех ситуациях. У вас в тексте чуть ли ни каждый абзац вложен в отдельный контейнер:

Кликните здесь для просмотра всего текста
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
            <div class="suscipit">
                <div class="right">
                    <h2>Maecenas suscipit </h2>
                    <p>Nulla in velit nec metus pharetra bibendum. Donec metus leo, feugiat sed, aliquet facilisis, pulvinar ac, mauris. In feugiat sagittis nunc. Maecenas vehicula venenatis arcu. Aenean viverra consectetur neque. Aliquam blandit bibendum lacus. In non nisi. Fusce facilisis pulvinar tellus. Ut </p>
                </div>
            </div>
                <img class="thumb" src="img/thumb.png" alt="thumb">
            <div class="text">
                <h1>Pellentesque vestibulum erat.</h1>
                <p>Duis nisl. Cras a quam non leo placerat lacinia. Proin in nulla. Sed a ligula at quam vulputate auctor. Vivamus mi lacus, feugiat eget, porta ut, fermentum nec, nisi. Maecenas vel orci eu nunc accumsan scelerisque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis luctus sapien eu leo. Etiam hendrerit leo eu metus. Morbi sagittis. Nulla lacinia justo quis lorem.</p>
            </div>
            <div class="top">
                <h3>Nullam vitae leo vel pede sollicitudin suscipit</h3>
                <p>Nulla in velit nec metus pharetra bibendum. Donec metus leo, feugiat sed, aliquet facilisis, pulvinar ac, mauris. In feugiat sagittis nunc. Maecenas vehicula venenatis arcu. Aenean viverra consectetur neque. Aliquam blandit bibendum lacus. In non nisi. Fusce facilisis pulvinar tellus. Ut vitae purus ac odio fringilla pulvinar. Quisque consectetur, urna sit amet fringilla tempus, neque nunc consequat eros, ac dignissim quam elit vel turpis. Donec sollicitudin mauris at purus suscipit sodales. Nunc rutrum ornare lacus. Maecenas accumsan turpis sit amet arcu. Nulla neque.</p>
            </div>
            <div class="bottom">
                <h3>Nullam vitae leo vel pede sollicitudin suscipit</h3>
                <p>Nulla in velit nec metus pharetra bibendum. Donec metus leo, feugiat sed, aliquet facilisis, pulvinar ac, mauris. In feugiat sagittis nunc. Maecenas vehicula venenatis arcu. Aenean viverra consectetur neque. Aliquam blandit bibendum lacus. In non nisi. Fusce facilisis pulvinar tellus. Ut vitae purus ac odio fringilla pulvinar. Quisque consectetur, urna sit amet fringilla tempus, neque nunc consequat eros, ac dignissim quam elit vel turpis. Donec sollicitudin mauris at purus suscipit sodales. Nunc rutrum ornare lacus. Maecenas accumsan turpis sit amet arcu. Nulla neque.</p>
            </div>
            <div class="button">
                <a href="#"><img src="img/button.png" alt="read more"></a>
                <span>Posted : 11-2-2009 11:45am by : Matthew Doyle</span>
            </div>



-------------------

В-пятых не нужно обычный текст маскировать под ссылки. Так уж исторически сложилось, что ссылка должна быть подчёркнута для того, чтоб ее было видно. Поэтому таким образом вы вводите в заблуждение пользователей.
Оцените, пожалуйста, вёрстку
Это наверно ваша ошибка, так как тут подразумевалось место под дополнительную навигацию справа от контента, поэтому нужно было верстать как навигацию.

P.S. Мой непрофессиональный взгляд как всегда подлежит критике. Буду рад любым поправкам в сторону оптимизации кода.
1
Crystal-3
76 / 72 / 35
Регистрация: 04.04.2014
Сообщений: 222
05.04.2014, 20:21  [ТС] #11
Mr Coder, спасибо большое за советы, они мне очень важны.
А как на Ваш взгляд лучше сбрасывать настройки в начале кода и нужно ли это делать?
0
Mr Coder
365 / 365 / 82
Регистрация: 04.04.2013
Сообщений: 1,564
05.04.2014, 20:28 #12
Цитата Сообщение от Crystal-3 Посмотреть сообщение
А как на Ваш взгляд лучше сбрасывать настройки в начале кода и нужно ли это делать?
На мой взгляд тут зависит от техники. Мною свёрстано очень много макетов, при этом я пользовался только этим:
CSS
1
body{margin: 0;}

Многие составляют полноценный reset.css


Мне стыдно, но он мне ни разу не пригодился.
1
MathMath
29 / 29 / 9
Регистрация: 03.03.2014
Сообщений: 58
05.04.2014, 22:39 #13
Используйте не reset, а normalize.css
1
Vladislav WebDev
324 / 214 / 76
Регистрация: 04.11.2012
Сообщений: 638
06.04.2014, 01:30 #14
Цитата Сообщение от Mr Coder Посмотреть сообщение
Мой непрофессиональный взгляд как всегда подлежит критике. Буду рад любым поправкам в сторону оптимизации кода.
Цитата Сообщение от Mr Coder Посмотреть сообщение
* { margin: 0px; padding: 0px; }
Цитата Сообщение от Mr Coder Посмотреть сообщение
Так делать не нужно, поскольку вы убираете отступы у абзацев, списков и т.д. В дальнейшем вам нужно будет переназначать эти значения. Убирайте отступы только там, где это действительно нужно.
А как же normalize.css? Там тоже всё сбрасывается, чтобы во всех браузерах всё было одинаково, поэтому:
Цитата Сообщение от Mr Coder Посмотреть сообщение
Убирайте отступы только там, где это действительно нужно.
Я считаю лучше добавлять отступы и поля там, где это действительно нужно.

Добавлено через 1 минуту
Цитата Сообщение от MathMath Посмотреть сообщение
Используйте не reset, а normalize.css
Поддерживаю!
1
06.04.2014, 01:30
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
06.04.2014, 01:30
Привет! Вот еще темы с ответами:

Оцените Портфолио, пожалуйста - HTML, CSS
Добрый день! Мое Портфолио :)

Оцените верстку, пожалуйста - HTML, CSS
Добрый день! Оцените резиновую верстку, укажите на ошибки в коде, пожалуйста. svet

Оцените верстку, пожалуйста - HTML, CSS
Добрый день! /marco/

Оцените верстку, пожалуйста - HTML, CSS
Доброе время суток! верстка


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
14
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.