Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770
Форумы портала PHP.SU :: Версия для печати :: Верстка в первый раз - где ошибка?
Форумы портала PHP.SU » Клиентская разработка » HTML, Дизайн & CSS » Верстка в первый раз - где ошибка?

Страниц (1): [1]
 

1. CHEBURNATOR - 22 Октября, 2015 - 18:37:19 - перейти к сообщению
Добрый день, уважаемые форумчане!

Совсем недавно друг попросил сверстать ему Лендинг из PSD файла.
Визуально лендинг не сложный, поэтому я согласился.
С версткой до этого особо опыта не имел.

В процессе вертски я сталкивался со всевозможными пролемами, которые удавалось решить с помощью гугла и форумов верстальщиков, за что вам огромное спасибо.
Но одну проблему я так и не победил. Перехожу к сути:
Дано: домен http://водоканал-сервис[dot]рф
Что хотел получить согласно макету PSD: http://joxi[dot]ru/a2X3ZYMCq9qDmg
Для верстки решил использовать Dreamveawer CC2015.
Был выбран табличный тип верстки.
Все вроде получилось кроме одного НО - в разных браузерах таблицы съезжают с фона!
Причем в каждом браузере по своему.
Сам Dreamveawer все показывает идеально:http://joxi[dot]ru/KAxzoMyfy0yQm8
Однако в браузере все совсем не так.
Все съезжает постоянно: http://joxi[dot]ru/BA0p0bgF5R53Ay
В одном браузере подправишь - в другом вылезет.
Что было выяснено в процессе изучения форумов и гугла: Как я понял данный косяк проявляется из-за того, что браузеры по разному трактуют высоту пустых ячеек.

Законочерно вопрос - правильна ли моя догадка? Если да - то как можно исправить данный косяк?
Если нет - то где копать?

Возможно ли что это связано с тем - что я очень много элементов занес в фон - посчитав так упростить себе работу?
Вот картинка фона для понимания сколько я занес в фон:http://joxi[dot]ru/n2Yka0GI3DqGr6
Так же прилагаю код главной страницы: http://pastebin[dot]com/r6acX0ip
Код CSS: http://pastebin[dot]com/ud7hkZjb

Спасибо всем откликнувшимся!
P.S>Просьба не прелагать переделывать блочной версткой, я в ней пока что не разбираюсь.
Раз уж выбор пал на Дримвивер и табличный способ - просьба помочь реализовать в данном способе, если конечно это возможно.
2. DelphinPRO - 22 Октября, 2015 - 20:23:37 - перейти к сообщению
"Чувак, не стоило напрягаться. Просто запилил бы целиковую картинку."

.......Хотел я было написать такой ответ. Но посмотрел код - блин, там как раз так и сделано!!!!
И теперь у меня просто нет слов.
3. CHEBURNATOR - 23 Октября, 2015 - 05:51:30 - перейти к сообщению
Отличный ответ, "чувак".
Толку от твоего ответа НОЛЬ.

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

Я правильно понял, что запиливать в фон для упрощения задачи - тупая затея, и что все будет съезжать в любом случае при таком способе?
4. DeepVarvar - 23 Октября, 2015 - 09:39:51 - перейти к сообщению
Ты правильно понял.

Гугл картинки -> печать переделывай
5. DelphinPRO - 23 Октября, 2015 - 10:26:16 - перейти к сообщению
CHEBURNATOR пишет:
Толку от твоего ответа НОЛЬ.

Как же ноль, если ты уже понял, что облажался с фоном? Улыбка

1. Стили задавать атрибутами (width например) - не следует
2. Создавать отступы пробелами (пустыми ячейками, BR-ами, пустыми параграфами) - не следует
3. Разбивать сайт на маленькие блоки, каждый с отдельным фоном.
4. однородные фоны не вырезать картинками а задавать цветом в CSS
5. Таблицы - в топку
6. Зачем ты там два раза jquery подключил?
7. Зачем стили и скрипты прямо в разметке? Выноси во внешние файлы.
8. Для текста-подсказки в input-полях cotcndetn атрибут placeholder
9. Используй семантичные теги. Например, заголовки верстаются тегами h1-h6
10. "Контентные" картинки оформляются тегом img, оформительские - фоном (background)
11. Формы должны располагаться в теге form, иначе они просто не работают.

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

CHEBURNATOR пишет:
Визуально лендинг не сложный, поэтому я согласился.

Я не согласен с тем, что лендинг совсем несложный. Учти, что говорю я это с высоты 6-летнего опыта.

CHEBURNATOR пишет:
Совсем недавно друг попросил сверстать ему Лендинг из PSD файла.

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

От такого ответа есть польза?
(Добавление)
Совсем забыл - ты для начала хотя бы посмотрел на ютьюбе несколько уроков по верстке, ну или книжку какую прочел (современную только).
6. armancho7777777 - 23 Октября, 2015 - 13:02:56 - перейти к сообщению
CHEBURNATOR, верстать надо самому, своими руками.
А пока что Dreamweaver верстает за Вас, как могЁт.
Найдите Видео-уроки от специалиста HTML, CSS.
Там 2 уровня. Всё разжевано: предназначение HTML - элементом, поведение их при различных CSS свойствах и т.д., и самое главное - как грамотно верстать.
Ну и конечно же практика, практика, еще раз практика.
Ну и потом откроете для себя CSS3, хотя возможно в новых уроках затронута и эта тема.
Мне понравилась книжка автора Питера Гастона "CSS3. руководство разработчика"
7. CHEBURNATOR - 23 Октября, 2015 - 16:44:15 - перейти к сообщению
Вот реально парни спасибо!
Вот действительно помогли и как говорится тыкнули носом.

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

то DelphinPRO:

Да? от такого ответа 100% реальная польза.
Благодарю что залез в код и проверил наглядно, выделив часть ошибок.

А то на многих форумах я кроме "да кто так делает" и "ужас и безобразие" я ничего в ответ не услышал.

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

Спасибо вам.

 

Powered by ExBB FM 1.0 RC1