Первая в массы работка

[new-dev]

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

 

http://function.vv.si

[Switch74]

В разделе "Как мы работаем" текст съехал влево чуток и картинки сверху обрезаны

Блок "ПРИЧИНЫ почему мы лучше" наехал на "НАШЫ ВЫПОЛНЕНЫЕ РАБОТЫ"

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

[hypnocolor]

Табличная вёрстка там, где она не нужна — незачёт.

Лорем ипсум — незачёт. Рыба должна быть релевантна тематике сайта.

В формах заказа инпуты и кнопки есть, а самой формы нет — то же самое.

Текст в верхнем регистре целесообразней делать через text-transform.

Линия под заголовками в «НАШЫХ ПОСЛЕДНИХ ПРОЕКТАХ» сделана картинкой — серьёзно? Зачем?

Про орфографические/грамматические ошибки в целом уже даже молчу.

 

Ну и вышеуказанные косяки в ту же копилку.

 

Вывод: ещё работать и работать.

Edited April 25, 2014 by hypnocolor

[new-dev]

блин странно, в мозиле, хроме и ие смотрю у себя всё ок ничего не сьежает при уменьшении экрана в % и с ужении, на 2 компе смотрю тоже всё ок

Табличная вёрстка там, где она не нужна — незачёт.

Лорем ипсум — незачёт. Рыба должна быть релевантна тематике сайта.

В формах заказа инпуты и кнопки есть, а самой формы нет — то же самое.

Текст в верхнем регистре целесообразней делать через text-transform.

Линия под заголовками в «НАШЫХ ПОСЛЕДНИХ ПРОЕКТАХ» сделана картинкой — серьёзно? Зачем?

Про орфографические/грамматические ошибки в целом уже даже молчу.

 

Ну и вышеуказанные косяки в ту же копилку.

 

Вывод: ещё работать и работать.

Где именно табличную вёрстку не уместно применил? 

Что такое рыба?))

Формы не сделал да каюсь) упор на саму вёрстку делал)

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

Лорем - использовал так как сайт делал в качестве попрактиковаться, и тратить время на ввод текста попусту не хотелось.

Орфография - грамматика согласен))  

[hypnocolor]

Табличную? Да везде, собственно. И эта схема с линиями, и синие блоки в подвале спокойно верстаются без таблиц.

Рыба — тот самый текст, который используется для забивания места. В данном случае, пресловутый «лорем ипсум».

[npofopr]

1365px и уже появляется скролл, ужас ведь.

И почему то мне кажется вертка далека от реального макета.

[new-dev]

1365px и уже появляется скролл, ужас ведь.

И почему то мне кажется вертка далека от реального макета.

не один в один, также шрифт везде использовался один. 

Почему скролл появляется?

Edited April 25, 2014 by new-dev

[amelice]

Доброго времени)) Вобщем верстаю, читаю, видео смотрю, вопросы задаю)) Пытаюсь постигнуть сакральные знание веб девелоперов) 

Прошу оценить труды, рукоделия)) Готов принять любую критику.

 

http://function.vv.si

1. неуместно ставите размеры. Значит не знаете как форматируется блочные элементы. Например, ширина блока .content  равна 1350px, значит у потомков если вы не указываете паддингов, бордеров, маргинов такая же.  не нужно всем потомкам указывать такую же ширину. 

По поводу высоты, здесь иная картина, нужно указать предку высоту, чтобы потомку можно было указать высоту в процентах. Поэтому если хотите указать блоку .content высоту 100%, то задайте высоту блоку .main. 

 

2. не правильно используете позиционирование.

3. блоку с абсолютным позиционированием до лампочки на другие блоки, поэтому ему не нужно писать clear: both.

4. http://f6.s.qip.ru/tOAcrHNB.png

[new-dev]

Табличную? Да везде, собственно. И эта схема с линиями, и синие блоки в подвале спокойно верстаются без таблиц.

Рыба — тот самый текст, который используется для забивания места. В данном случае, пресловутый «лорем ипсум».

синие блоки переделал. 

А схема эта та что Как мы работаем и под картинками? Её стоило через css делать? мудрёжки ведь много а картинка весит мизер?

 

Доброго времени)) Вобщем верстаю, читаю, видео смотрю, вопросы задаю)) Пытаюсь постигнуть сакральные знание веб девелоперов) 

Прошу оценить труды, рукоделия)) Готов принять любую критику.

 

http://function.vv.si

1. неуместно ставите размеры. Значит не знаете как форматируется блочные элементы. Например, ширина блока .content  равна 1350px, значит у потомков если вы не указываете паддингов, бордеров, маргинов такая же.  не нужно всем потомкам указывать такую же ширину. 

По поводу высоты, здесь иная картина, нужно указать предку высоту, чтобы потомку можно было указать высоту в процентах. Поэтому если хотите указать блоку .content высоту 100%, то задайте высоту блоку .main. 

 

2. не правильно используете позиционирование.

3. блоку с абсолютным позиционированием до лампочки на другие блоки, поэтому ему не нужно писать clear: both.

4. http://f6.s.qip.ru/tOAcrHNB.png

 

Спасибо, за объяснения) просветлело маленько? как проверять по поводу сьежает ли верстка? потому что у себя смотрел с ужал экран и в % соотношении всё ок было?

 

вроде поменял так как понял, скролл не проподает

Edited April 25, 2014 by new-dev

[amelice]

Спасибо, за объяснения) просветлело маленько? как проверять по поводу сьежает ли верстка? потому что у себя смотрел с ужал экран и в % соотношении всё ок было?

 

вроде поменял так как понял, скролл не проподает

 

Вы не поняли. Перетаскивание height: 100%; c .content на .main ничего не даст. 

Потому что предок у .main боди, а для боди не задана высота, и опять блоку .main неоткуда брать высоту в процентах.

КОГДА нужна высота окна для всего для обертки, то идет с самого начала- html, body {height: 100%}. потом только .wrap или в вашем случае .main-у указывать {height: 100%}.

То есть должна быть цепочка, html берет 100%-ю высоту у окно просмотра, а body у html, а обертка у боди.

Но, это когда нужно, а в вашем случае для чего вы берете высоту - 100%, у вас контента и так на две высоты окна?

 

Edited April 25, 2014 by amelice

[amelice]

вроде поменял так как понял, скролл не проподает

 

Горизонтальный скролл потому что ширина контента  1350пикселей, при меньшем разрешении конечно появится

 

[new-dev]

 

Спасибо, за объяснения) просветлело маленько? как проверять по поводу сьежает ли верстка? потому что у себя смотрел с ужал экран и в % соотношении всё ок было?

 

вроде поменял так как понял, скролл не проподает

 

Вы не поняли. Перетаскивание height: 100%; c .content на .main ничего не даст. 

Потому что предок у .main боди, а для боди не задана высота, и опять блоку .main неоткуда брать высоту в процентах.

КОГДА нужна высота окна для всего для обертки, то идет с самого начала- html, body {height: 100%}. потом только .wrap или в вашем случае .main-у указывать {height: 100%}.

То есть должна быть цепочка, html берет 100%-ю высоту у окно просмотра, а body у html, а обертка у боди.

Но, это когда нужно, а в вашем случае для чего вы берете высоту - 100%, у вас контента и так на две высоты окна?

 

 

Спасиба, за столь развёрнутый ответ

[amelice]

Спасиба, за столь развёрнутый ответ

Можете почитать тут про поведение разных элементов. Учитывая их возможности можно будет правильно их применять.
про абсолют
http://www.letscode.ru/absolute/
про флоат

http://habrahabr.ru/post/136622/
инлайн-блок
http://habrahabr.ru/post/117109/ 

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

[Galaxy]

для более глубокого понимания html css советую прочитать http://learn.javascript.ru/css-for-js - css для javascript разработчика, очень хорошо затронуты многие моменты

[new-dev]

cпасибо) много полезной информации придётся усвоить)) будем работать))

Edited April 26, 2014 by new-dev