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

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/topic.php on line 737
Форумы портала PHP.SU :: Верстка в первый раз - где ошибка?

 PHP.SU

Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


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

> Описание: Съезжают таблицы
CHEBURNATOR
Отправлено: 22 Октября, 2015 - 18:37:19
Post Id


Новичок


Покинул форум
Сообщений всего: 3
Дата рег-ции: Окт. 2015  


Помог: 0 раз(а)




Добрый день, уважаемые форумчане!

Совсем недавно друг попросил сверстать ему Лендинг из 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>Просьба не прелагать переделывать блочной версткой, я в ней пока что не разбираюсь.
Раз уж выбор пал на Дримвивер и табличный способ - просьба помочь реализовать в данном способе, если конечно это возможно.
 
 Top
DelphinPRO
Отправлено: 22 Октября, 2015 - 20:23:37
Post Id



Активный участник


Покинул форум
Сообщений всего: 7187
Дата рег-ции: Февр. 2012  


Помог: 353 раз(а)




"Чувак, не стоило напрягаться. Просто запилил бы целиковую картинку."

.......Хотел я было написать такой ответ. Но посмотрел код - блин, там как раз так и сделано!!!!
И теперь у меня просто нет слов.


-----
Чем больше узнаю, тем больше я не знаю.
 
 Top
CHEBURNATOR
Отправлено: 23 Октября, 2015 - 05:51:30
Post Id


Новичок


Покинул форум
Сообщений всего: 3
Дата рег-ции: Окт. 2015  


Помог: 0 раз(а)




Отличный ответ, "чувак".
Толку от твоего ответа НОЛЬ.

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

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



Активный участник


Покинул форум
Сообщений всего: 10377
Дата рег-ции: Дек. 2008  
Откуда: Альфа Центавра


Помог: 353 раз(а)




Ты правильно понял.

Гугл картинки -> печать переделывай
 
 Top
DelphinPRO
Отправлено: 23 Октября, 2015 - 10:26:16
Post Id



Активный участник


Покинул форум
Сообщений всего: 7187
Дата рег-ции: Февр. 2012  


Помог: 353 раз(а)




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 файла.

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

От такого ответа есть польза?
(Добавление)
Совсем забыл - ты для начала хотя бы посмотрел на ютьюбе несколько уроков по верстке, ну или книжку какую прочел (современную только).


-----
Чем больше узнаю, тем больше я не знаю.
 
 Top
armancho7777777 Супермодератор
Отправлено: 23 Октября, 2015 - 13:02:56
Post Id



Активный участник


Покинул форум
Сообщений всего: 4526
Дата рег-ции: Февр. 2011  
Откуда: Москва


Помог: 221 раз(а)




CHEBURNATOR, верстать надо самому, своими руками.
А пока что Dreamweaver верстает за Вас, как могЁт.
Найдите Видео-уроки от специалиста HTML, CSS.
Там 2 уровня. Всё разжевано: предназначение HTML - элементом, поведение их при различных CSS свойствах и т.д., и самое главное - как грамотно верстать.
Ну и конечно же практика, практика, еще раз практика.
Ну и потом откроете для себя CSS3, хотя возможно в новых уроках затронута и эта тема.
Мне понравилась книжка автора Питера Гастона "CSS3. руководство разработчика"
 
 Top
CHEBURNATOR
Отправлено: 23 Октября, 2015 - 16:44:15
Post Id


Новичок


Покинул форум
Сообщений всего: 3
Дата рег-ции: Окт. 2015  


Помог: 0 раз(а)




Вот реально парни спасибо!
Вот действительно помогли и как говорится тыкнули носом.

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

то DelphinPRO:

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

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

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

Спасибо вам.
 
 Top
Страниц (1): [1]
Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)
« HTML, Дизайн & CSS »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
 



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB