Перейти к содержимому

MOAB

- - - - -

Разъехалась верстка - подскажите, плиз, в чем дело?


  • Войдите, чтобы ответить
Сообщений в теме: 16

#1 Tata_N

Tata_N

    Статус: чайник,но со свистком

  • Активный участник
  • PipPipPipPip
  • 785 сообщений
289

Отправлено 21 Март 2015 - 17:07

Постараюсь быть краткой)) Но заранее сорри за многабукв))
1. Вынуждено поменяла версию мозиллы (некоторые сервисы отказались работать) - сейчас 29.
2. На сайте в стилях поменяла явно указанные размеры шрифтов на ем-ные (ну нужно ж готовиться к адаптивному дизайну ;) )

И на странице моего "чумадана" появилась горизонтальная полоса прокрутки - т.е. шапка по ширине экрана, а та часть, которая с сайдбаром, - разъехалась, стала шире шапки. Это видно не во всех браузерах, если умеьшаю шрифт, - выравнивается, но, главное, не знаю, что это - результат моих ручек или так и раньше было, но браузер показывал красиво?
Пыталась разобраться, мозг сломала, но только выяснила, что это все делает таблица внизу страницы из двух ячеек - с рекламой и картинкой. Не могу понять, откуда берется размер ячейки 381 с рекламой (пунктиром обозначена на скрине 1), если ширина ее 336? я специально убрала паддинги полностью, сделала выравнивание влево, чтобы было видно, что это не отступы. Аналогично с картинкой (скрин2) - ее ширина 300, а ячейка - 342. У меня нигде в явном виде не указаны никакие размеры ячеек таблиц.

Подскажите, пожалуйста, если это возможно, конечно ;) , в каком направлении копать?

Прикрепленный файл  scrcss.jpg   196,73К   16 Количество загрузок:Прикрепленный файл  scrcss2.jpg   205,38К   15 Количество загрузок:

#2 c4e8ece0

c4e8ece0

    Ниггер на лошади

  • Участник
  • PipPipPipPipPip
  • 5 274 сообщений
6 792
  • Изцирка

Отправлено 21 Март 2015 - 17:30

Относительно размеров - это же просто размеры ячеек в таблице, а сама таблица 100%, вот они и вытягиваются.
Можно попробовать для отладки добавить в css: * {border:1px solid magenta; padding:3px;} - так яснее границы элементов станут.

И страница состоит из 3-х независимых таблиц, вот они и ездят каждая как ей нравится.
"Они не могут ничего, у них лапки котят"

#3 virtuoso

virtuoso

    Продвинутый

  • Участник
  • PipPipPip
  • 227 сообщений
154
  • ИзЛитвы

Отправлено 21 Март 2015 - 17:57

Ну посмотрите на вкладке "вычислено", откуда берется этот параметр width?

#4 Tata_N

Tata_N

    Статус: чайник,но со свистком

  • Активный участник
  • PipPipPipPip
  • 785 сообщений
289

TC Отправлено 21 Март 2015 - 18:07

Просмотр сообщенияДартаньян сказал:

Относительно размеров - это же просто размеры ячеек в таблице, а сама таблица 100%, вот они и вытягиваются.
так они вытягиваются шире 100%. если убираю картинку, например, все выравнивается.
скрин со стилем прикрепляю

Просмотр сообщенияvirtuoso сказал:

Ну посмотрите на вкладке "вычислено", откуда берется этот параметр width?
нету там ширины
Спойлер

Прикрепленные файлы

  • Прикрепленный файл  scrcss3.jpg   214,68К   4 Количество загрузок:


#5 c4e8ece0

c4e8ece0

    Ниггер на лошади

  • Участник
  • PipPipPipPipPip
  • 5 274 сообщений
6 792
  • Изцирка

Отправлено 21 Март 2015 - 18:29

Просмотр сообщенияTata_N сказал:

так они вытягиваются шире 100%. если убираю картинку, например, все выравнивается.
А в самом контенте как себя ведут картинки и длинный adsense?
Тут, например, табличку удаляю, но ячейку кто-то держит ещё: http://hobbyall.ru/i...-hobby-festival
И да, сначала держит адсенс, потом картинки и до нижней таблички дело вообще не доходит.
"Они не могут ничего, у них лапки котят"

#6 Tata_N

Tata_N

    Статус: чайник,но со свистком

  • Активный участник
  • PipPipPipPip
  • 785 сообщений
289

TC Отправлено 21 Март 2015 - 18:47

Просмотр сообщенияДартаньян сказал:

А в самом контенте как себя ведут картинки и длинный adsense?
а-а-а-а-а-а-а! куда ж я смотрела? - а, похоже, в нем как раз и дело, буду туда копать.

А, кстати, как с адаптивной версткой сочетаются блоки адсенса с фиксированной шириной?

#7 c4e8ece0

c4e8ece0

    Ниггер на лошади

  • Участник
  • PipPipPipPipPip
  • 5 274 сообщений
6 792
  • Изцирка

Отправлено 21 Март 2015 - 18:50

Просмотр сообщенияTata_N сказал:

А, кстати, как с адаптивной версткой сочетаются блоки адсенса с фиксированной шириной?
Ну так же как со всем остальным. Влезает показываем одно, не влезает - другое :)
"Они не могут ничего, у них лапки котят"

#8 Tata_N

Tata_N

    Статус: чайник,но со свистком

  • Активный участник
  • PipPipPipPip
  • 785 сообщений
289

TC Отправлено 22 Март 2015 - 11:03

Просмотр сообщенияДартаньян сказал:

Влезает показываем одно, не влезает - другое
Да, правим одно, а не влезает другое))
И по ходу пьесы у меня еще один вопрос возник. В коде, который формирует шапку страницы, забито такое:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="[url=""]http://www.w3.org/1999/xhtml[/url]" dir="[url=""]ltr[/url]" lang="[url=""]ru-RU[/url]">

Как я понимаю, именно эта спецификация влияет, в частности, и на то, как обрабатываются стили?
А могу я нахально на рабочем сайте заменить этот код на <!DOCTYPE html> (боязно! :) ) - насколько ОНО совместимо?
Или все-таки это надо делать "на кошечках", а потом переносить на рабочий сайт?

#9 c4e8ece0

c4e8ece0

    Ниггер на лошади

  • Участник
  • PipPipPipPipPip
  • 5 274 сообщений
6 792
  • Изцирка

Отправлено 22 Март 2015 - 16:39

Tata_N, ставлю бакс, что всё будет ок
"Они не могут ничего, у них лапки котят"

#10 Tata_N

Tata_N

    Статус: чайник,но со свистком

  • Активный участник
  • PipPipPipPip
  • 785 сообщений
289

TC Отправлено 22 Март 2015 - 18:14

Просмотр сообщенияДартаньян сказал:

Tata_N, ставлю бакс, что всё будет ок
Куда перевести бакс? :)
Валидатор находил 18 ошибок, теперь их 28 и 27 замечаний (однотипных), но вроде внешне ничего не испортилось.
Осталось помедитировать над ошибками))

#11 c4e8ece0

c4e8ece0

    Ниггер на лошади

  • Участник
  • PipPipPipPipPip
  • 5 274 сообщений
6 792
  • Изцирка

Отправлено 22 Март 2015 - 18:49

Tata_N, бакс Соне :) В валидаторе критична только вложенность тегов, остальное от лукавого.
"Они не могут ничего, у них лапки котят"

#12 neskor

neskor

    Продвинутый

  • Участник
  • PipPipPip
  • 249 сообщений
148
  • ИзУльяновск (в данную минуту)

Отправлено 23 Март 2015 - 09:51

Чаще всего, валидатор ругается на такие вещи: border="величина", width="величина", height="величина", align="величина" - это все рекомендуется в стили выносить: разметка - отдельно, оформление - отдельно.

#13 Tata_N

Tata_N

    Статус: чайник,но со свистком

  • Активный участник
  • PipPipPipPip
  • 785 сообщений
289

TC Отправлено 23 Март 2015 - 10:24

Просмотр сообщенияneskor сказал:

это все рекомендуется в стили выносить
это он выдает как замечания. Ошибки, в основном, - не видит закрывающую " >"
А у меня новые вопросы ;)
Дома на ноуте разрешение 1360, шрифт в браузере стоит 13 или 14 - не помню - и все выглядит вполне норм.
Решила на работе проверить, как это выглядит на экране 1920х1080 - оказалось очень мелко, потому, что шрифт в браузере стоит 10 - подобрала когда-то, чтобы часто посещаемые сайты выглядели норм. А мой сайт в таком случае выглядит мелко-нечитаемым.

Отсюда вопрос: я должна как-то учитывать это? Или все задаю относительно 16, а остальное - личное дело каждого юзера, какой он себе шрифт выберет?
И если должна, то как это учитывать? :wacko:

#14 neskor

neskor

    Продвинутый

  • Участник
  • PipPipPip
  • 249 сообщений
148
  • ИзУльяновск (в данную минуту)

Отправлено 23 Март 2015 - 14:20

Просмотр сообщенияTata_N (23 Март 2015 - 10:24) писал:

это он выдает как замечания. Ошибки, в основном, - не видит закрывающую " >"

:) Я правильно понимаю, что когда валидатор пишет:
Изображение Line 12, Column 24: The border attribute on the table element is obsolete. Use CSS instead.
и приводит пример:
<body><table border="0">,
то Вы уверены, что он не видит скобки?

Здесь, указана ошибка и сообщение, что для данного типа документа использование атрибута border с указанием его значения - не верно, нужно вынести все в стили.
В принципе, это не критично, плохо, когда есть ошибки такого рода: нет закрывающего тега или с вложением запутались, например, div поместили внутри p.


Просмотр сообщенияTata_N (23 Март 2015 - 10:24) писал:


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

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

И да, если жестко зафиксировать шрифт (в px), то личные настройки не повлияют на отображение сайта, а если мы в em задаем, то пользователь сам несет ответственность за то, что пожелал видеть (это как если мы задаем фон у блока, то предпочтительнее указывать и цвет шрифта, потому что пользователи могут на свое усмотрение менять настройки, а потом не видеть текст ...)

Сообщение отредактировал neskor: 23 Март 2015 - 14:25


#15 Tata_N

Tata_N

    Статус: чайник,но со свистком

  • Активный участник
  • PipPipPipPip
  • 785 сообщений
289

TC Отправлено 23 Март 2015 - 15:49

Просмотр сообщенияneskor сказал:

Изображение Line 12, Column 24: The border attribute on the table element is obsolete. Use CSS instead. и приводит пример:
, то Вы уверены, что он не видит скобки?
нет, конечно, не уверена)) я не вчиталась в сообщение - а просто посмотрела на красненькие обозначения))) - ну-у-у-у-у, Вы ж понимаете - женский подход: сперва красненькое)))

Просмотр сообщенияneskor сказал:

Здесь, указана ошибка и сообщение, что для данного типа документа использование атрибута border с указанием его значения - не верно, нужно вынести все в стили. В принципе, это не критично, плохо, когда есть ошибки такого рода: нет закрывающего тега или с вложением запутались, например, div поместили внутри p.
там за исключением самой первой ошибки и какого-то количества в конце (что-то с плагинами связано), все и ошибки и замечания сводятся к необходимости выноса в CSS.
Только я не соображу что-то, как я могу вынести в стили ширину столбцов таблицы, если они в разных статьях, с разной шириной и разным количеством столбцов и, соответственно, % разные? (я пока вообще не знаю, можно ли в стилях указать для таблицы разную ширину столбцов - по порядку их следования?)

Цитата

Изображение Line 21, Column 32: The width attribute on the td element is obsolete. Use CSS instead.
<td class="theadkn" width="11%"><a

И вообще, это уже становится нелогично как-то:
у меня в 10 статьях 10 разных таблиц, которые больше нигде не используются - не логичнее все про них прописать в тексте самой статьи, а не захламлять CSS?
Он же разрастется и нечитабельным тогда станет?

Просмотр сообщенияneskor сказал:

Чем больше начинаешь делать, тем веселее.
решила немного разобраться сперва в теории. Кто-то давал ссылки на видеоуроки - там все понятно пока, даже мне))

#16 c4e8ece0

c4e8ece0

    Ниггер на лошади

  • Участник
  • PipPipPipPipPip
  • 5 274 сообщений
6 792
  • Изцирка

Отправлено 23 Март 2015 - 17:30

Просмотр сообщенияTata_N сказал:

Решила на работе проверить, как это выглядит на экране 1920х1080 - оказалось очень мелко, потому, что шрифт в браузере стоит 10 - подобрала когда-то, чтобы часто посещаемые сайты выглядели норм. А мой сайт в таком случае выглядит мелко-нечитаемым.
У меня тоже 1920, только диагональ 27" и всё норм. Не надо ничего трогать короче.
"Они не могут ничего, у них лапки котят"

#17 Tata_N

Tata_N

    Статус: чайник,но со свистком

  • Активный участник
  • PipPipPipPip
  • 785 сообщений
289

TC Отправлено 27 Март 2015 - 22:56

Просмотр сообщенияTata_N сказал:

А, кстати, как с адаптивной версткой сочетаются блоки адсенса с фиксированной шириной?

Просмотр сообщенияДартаньян сказал:

Ну так же как со всем остальным. Влезает показываем одно, не влезает - другое :)
угу, вотЪ, что оказывается.....

Цитата

Адаптивный веб-дизайн позволяет изменять оформление сайта в зависимости от параметров экрана и устройства пользователя. Используя адаптивный рекламный блок, вы можете автоматически применять разные форматы объявлений в зависимости от того, как расположены другие элементы на странице. Дополнительные сведения можно найти в этом руководстве на сайте Google Developers.




Похожие темы


Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных



© 2021 SMO&SEO форум «WEBIMHO» — продвижение и создание сайтов, интернет-маркетинг

По вопросам рекламы на форуме и цены на рекламу
Все материалы SEO форума разрешены к копированию только с установкой гиперактивной ссылки на webimho.ru,
тем, кто этого не сделает, мы оторвем руки и ноги и поменяем местами,
а когда выйдем из тюрьмы, опять оторвем и опять поменяем.


Россия, г. Москва
  • Top.Mail.Ru

Мы в соцсетях: twitter | вконтакте | facebook | livejournal