Оценка верстки

[Pato]

Приветствую обитателей данного форума.

В верстке я еще новичок, многое не знаю, не понимаю.

Прошу оценить верстку http://test.hi-news.ws/index.html

Верстка не совсем валидна, но кроссбраузерна.

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

В общем наставьте на путь истинный

P.S. Прошу прощения, за то что не в том разделе, просто не хочется флудить 30 сообщений.

[Softlink]

Из того, что я бы сделал не так:

<li class="one"><a href="">О компании</a></li> 
                <li><a href="">Каталоги</a></li>... 

вполне себе подошел бы first-child. Не заработал бы в ИЕ6, ну и черт с ним.

<a href="">Анатолий</a> <div class="date">22 июля 2010</div> 

можно было вместо дива с классом завернуть в спан и в css сделать .comment1 span{...}

<div class="copy"> 
            <p>© 2011 ООО «Свистелки и Перделки»</p> 
            <p>Все права защищены. Все торговые марки являются собственностью их правообладателей.</p> 
        </div> 

и тут я бы не делал обертку. У вас бы текст и так встал бы слева.

[amelice]

Приветствую обитателей данного форума.

В верстке я еще новичок, многое не знаю, не понимаю.

Прошу оценить верстку http://test.hi-news.ws/index.html

Верстка не совсем валидна, но кроссбраузерна.

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

В общем наставьте на путь истинный

P.S. Прошу прощения, за то что не в том разделе, просто не хочется флудить 30 сообщений.

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

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

Я считаю, что нужно начать с соблюдения условий на форуме.

[Pato]

и тут я бы не делал обертку. У вас бы текст и так встал бы слева.

да, мне нужно задать отступы для текста и для счетчиков, если я уберу обертку, то футер уезжает http://s42.radikal.ru/i095/1107/13/851729bc5e16.jpg

cheburek Вы правы.

[MaferoK]

Только у меня ? при определенном разрешении в Опере ( незнаю каком ибо изменял через ctrl+колесико) .

слайдер и меню вниз сьезжают ?

Edited July 30, 2011 by MaferoK

[Pato]

Только у меня ? при определенном разрешении в Опере ( незнаю каком ибо изменял через ctrl+колесико) .

слайдер и меню вниз сьезжают ?

да что ж такое..

по ходу это не только в опере.. в хроме так же и сафари..

[Temiks]

Если отключит js будет это

ФФ 5.0.1

[Gvager]

#topmenu li { 
float: left;
margin-left: 30px;}

К этому следовало бы добавить list-style-type: none; чтобы убрать точки у верхнего меню так как они отображаются начиная со второго <li>. Если это конечно не задумывалось как разделение между пунктами меню

<div class="goods">
  <h3>Наши товары</h3>
  <a href="">Вкусные и питательные краски</a>
  <img src="images/pic1.png" alt""="">
  <br>
  <a href="">Полезные и сочные кирпичи</a>
  <img src="images/pic2.png" alt""="">
</div>

<br> - между ними был бы кстати так как без него фраза "Полезные и сочные кирпичи" прижимается к границе.

[Seva1986]

Ну скажу так, для первого сайта (хотя это не первый явно, может первый не из тестовых) сойдёт... есть и намного хуже!

Технических приёмов и советов писать не буду, так как это мало что даёт если сам не находишь и не разбираешься... поэтому тут для начала книга эрика меера, потом всякие сборники рецептов, гугл, и естественно спецификация..

А теперь ближе к делу.

Просто вёрстка (сделать чтобы было красиво) как правильно гворят некоторые программеры это детский лепет! это тупое и нудное занятие! Как секретутка тексты печатает, так и говно-кодер верстает абы було, не задумываясь о красоте своего кода и разметке... Так вот есть такие понятия как семантическая вёрстка, SEO вёрстка, оптимизированная вёрстка (использзование спрайтов, вёрстка без лишних тегов, классов и т.д.). Эти три понятия во много пересекаються и требуют совершенно другого уровня знания css html. Когда человек может сверстать сложный многостраничный макет да ещё и с соблюдением вышеуказанных требований вот тут уже горе верстальшик начинает превращаться в гуру!

В общем наставьте на путь истинный

Ну вроде наставил!

Под словами говно-кодер и горе верстальщик имел ввиду не тебя (так как ты только в начале пути своего развития ), а вот в какую категорию попадёшь ты решать тебе...

Edited August 3, 2011 by Seva1986

[rediskavet]

to Seva1986

использзование спрайтов, вёрстка без лишних тегов, классов и т.д.

Про спрайты понятно. Верстка без лишних тегов тоже, хотя тут по ситуации нужно определяться, зацикливаться на этом не стоит, если с лишними обертками получается надежнее то плевать на красоту кода. А с классами не понял чего советуете, экономить на присвоении классов элементам? Еще и на многостраничной верстке спорный мне кажется совет. Или чего другое с классами имелось ввиду?

Edited August 4, 2011 by rediskavet

[Seva1986]

to Seva1986

использзование спрайтов, вёрстка без лишних тегов, классов и т.д.

Про спрайты понятно. Верстка без лишних тегов тоже, хотя тут по ситуации нужно определяться, зацикливаться на этом не стоит, если с лишними обертками получается надежнее то плевать на красоту кода. А с классами не понял чего советуете, экономить на присвоении классов элементам? Еще и на многостраничной верстке спорный мне кажется совет. Или чего другое с классами имелось ввиду?

Как понять надёжнее, единственное это возможные проблемы с ослами 6-7, в остальном оно только поначалу очень тяжело, но оптом на автомате получается и времени тратиться не больше чем при обычной вёрстке. Просто уровень знания css разный нужен... например многие используют при сложном графическом оформлении лишние теги обёртки, это не нужно...

Это не зацикливание это уровень мастерства...

Edited August 4, 2011 by Seva1986

[rediskavet]

Это не зацикливание это уровень мастерства...

Если я вот этот блок размечу как ниже привел, будет ли это говорить о том что я верстала 80 уровня мастерства или хотя бы 60-ого?

<p>
  <img src="" alt="" />
  <span>дата статьи</span>
  <a href="#">ссылка</a>
  <span>левый верхний угол</span>
  <span>правый верхний угол</span>
  <span>левый нижний</span>
  <span>правый нижний</span>
  <span>левая тень</span>
  <span>правая тень</span>
</p>

[Vlad]

Seva1986 слишком категорично заявляет о вёрстке, поэтому слушать его надо осторожно. Профессия это не варкрафт, там нет обычно деления на верстальщика восьмидесятого уровня.

[Seva1986]

Это не зацикливание это уровень мастерства...

Если я вот этот блок размечу как ниже привел, будет ли это говорить о том что я верстала 80 уровня мастерства или хотя бы 60-ого?

<p>
  <img src="" alt="" />
  <span>дата статьи</span>
  <a href="#">ссылка</a>
  <span>левый верхний угол</span>
  <span>правый верхний угол</span>
  <span>левый нижний</span>
  <span>правый нижний</span>
  <span>левая тень</span>
  <span>правая тень</span>
</p>

Сверстать можно как угодно главное уметь сделать более правильно...

но это вообще муть а не вёрстка, разве что речь о поддержке старых ослов, но для них можно в условные коменты оформить лишний код...

я бы это как вариант так оформил

<p>
  дата статьи
  <a href="#">ссылка<img src="" alt="" /></a>
</p>

хотя там не параграф нужно использовать, и дату в тег <time> засунул бы если бы на html5 писать...

Seva1986 слишком категорично заявляет о вёрстке, поэтому слушать его надо осторожно. Профессия это не варкрафт, там нет обычно деления на верстальщика восьмидесятого уровня.

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

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

Edited August 4, 2011 by Seva1986

[Softlink]

Так вот есть такие понятия как семантическая вёрстка, SEO вёрстка, оптимизированная вёрстка (использзование спрайтов, вёрстка без лишних тегов, классов и т.д.).

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

[Vlad]

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

[Seva1986]

Так вот есть такие понятия как семантическая вёрстка, SEO вёрстка, оптимизированная вёрстка (использзование спрайтов, вёрстка без лишних тегов, классов и т.д.).

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

ну опять же класс работает быстрее, селектор медленнее, да ещё и привязка к тегам потом проблемы может вызвать при установке и ещё хуже при дополнении корректировки... это понятно что нужно аккуратно выбирать что и как делать... но пихать просто так лишние классы это зло я про это писал...

[Softlink]

мысль дошла позже Особенно с масштабируемыми проектами. Сайт из 3-5 страниц еще стерпит минимализм, а вот в большом проекте, когда ты будешь добавлять новые страницы(еще и с разной структурой) - этот самый минимализм может вылезти боком.

[Seva1986]

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

Я для себя выбрал семантику, уже привык и даже очень сложные макеты делаю семантично... конечно про 6 и 7 речь не идёт... хорошо ещё то что css3 очень быстро развивается правда тут и с 8 ослом проблемы начинаються...

но в вёрстке и разработке сайтов нет таких правил, которые нельзя обойти

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

мысль дошла позже Особенно с масштабируемыми проектами. Сайт из 3-5 страниц еще стерпит минимализм, а вот в большом проекте, когда ты будешь добавлять новые страницы(еще и с разной структурой) - этот самый минимализм может вылезти боком.

я знаю было и такое, но для этого сейчас верстаю используя что-то типа мини шаблонов (патернов) для разных кусков сайта да тут конечно у каждого из них свои имена классы, множественные классы... но это не лишние классы, лишнее это когда некоторые делают класс red который делает просто красный цвет, или клас overflow который делает просто overflow, или ещё чтото где можно без них обойтись... вот это лишние классы и не правильный стиль!

Edited August 4, 2011 by Seva1986

[rediskavet]

я знаю было и такое, но для этого сейчас верстаю используя что-то типа мини шаблонов (патернов) для разных кусков сайта да тут конечно у каждого из них свои имена классы, множественные классы... но это не лишние классы, лишнее это когда некоторые делают класс red который делает просто красный цвет, или клас overflow который делает просто overflow, или ещё чтото где можно без них обойтись... вот это лишние классы и не правильный стиль!

ну так надо же объяснять, а то дали общий совет использовать меньше классов.

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

это как, что-то типа БЕМ? Можно пример какой то, ну или в личку ссылку, просто последнее время оч.интересуют подходы к структурированию кода.

[Seva1986]

я знаю было и такое, но для этого сейчас верстаю используя что-то типа мини шаблонов (патернов) для разных кусков сайта да тут конечно у каждого из них свои имена классы, множественные классы... но это не лишние классы, лишнее это когда некоторые делают класс red который делает просто красный цвет, или клас overflow который делает просто overflow, или ещё чтото где можно без них обойтись... вот это лишние классы и не правильный стиль!

ну так надо же объяснять, а то дали общий совет использовать меньше классов.

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

это как, что-то типа БЕМ? Можно пример какой то, ну или в личку ссылку, просто последнее время оч.интересуют подходы к структурированию кода.

ну вот на сайт в начале этой темы посмотрел, сразу с самого верха, вот это там вообще не нужно

<div id="wrapper">

<div class="polocka"></div>

А мини шаблоны ну это более менее независимые куски кода которые можно пихнуть в нужное место на сайте (например новая страница появилась) без особых проблем с минимумом доработки...

это как, что-то типа БЕМ? Можно пример какой то, ну или в личку ссылку, просто последнее время оч.интересуют подходы к структурированию кода.

это придёт именно с опытом причём довольно скоро...

Edited August 4, 2011 by Seva1986

[Pato]

довольно интересно читать что вы пишите

Seva1986 спасибо за совет

Что еще можете сказать?

[Pato]

Извиняюсь за оффтоп, но с связи с тем, что css я знаю не совсем хорошо, по тесту на сайте на 3 . Нужно как-то доучивать его.

Что можете посоветовать? Каким образом более эффективно будет? Купить ли справочник в виде книги, или в виде электронной книге? Просто когда читаешь книгу на диване, лучше запоминается, нежели с монитора

Edited August 4, 2011 by Pato

[Seva1986]

Извиняюсь за оффтоп, но с связи с тем, что css я знаю не совсем хорошо, по тесту на сайте на 3 . Нужно как-то доучивать его.

Что можете посоветовать? Каким образом более эффективно будет? Купить ли справочник в виде книги, или в виде электронной книге? Просто когда читаешь книгу на диване, лучше запоминается, нежели с монитора

я же написал выше на пару постов

Технических приёмов и советов писать не буду, так как это мало что даёт если сам не находишь и не разбираешься... поэтому тут для начала книга эрика меера, потом всякие сборники рецептов, гугл, и естественно спецификация..

ну вот с этого нужно начать

http://www.kodges.ru/9941-css-kaskadnye-tablicy-stilejj.-podrobnoe.html

Извиняюсь за оффтоп, но с связи с тем, что css я знаю не совсем хорошо, по тесту на сайте на 3

А еслиб на 5 то хорошо бы знали?

яего даже не смотрел тот тест...

Edited August 4, 2011 by Seva1986

[Pato]

А еслиб на 5 то хорошо бы знали?

яего даже не смотрел тот тест...

да я сам знаю, что плохо css знаю)