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


Html В Шапке Шаблона Лайт

Автор dark7to, 14 июня 2013 13:25

  • Авторизуйтесь для ответа в теме
Сообщений в теме: 31

#1 dark7to

dark7to

    Пользователь

  • Пользователи
  • PipPip
  • 32 сообщений

Отправлено 14 Июнь 2013 - 13:25

http://shop.szr.su
уже пару недель не могу понять в чем дело...я тупой или лыжи не едут...на картинках изображение этого же кода в этом же браузере в отдельной странице и в составе шаблона...все разъезжается...какие то отступы появляются...ничего не пойму...уже и вдоль и поперек и даже по диагонали код вычитывал...поможете?

Изображение

Изображение

#2 Taisia

Taisia

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

  • Модератоpы
  • 1 289 сообщений

Отправлено 14 Июнь 2013 - 20:02

у вас проблема с padding  у тегов <td>
на странице действует стиль для <td> padding:3px;
из-за этого у вас смещается картинка
вам надо прописывать ячейкам вашей таблицы вручную padding:0px;
Но все равно могут оставаться корявые моменты.

Может вам разместить этот глобус как целую картинку блоком <div> и абсолютным позиционированием. ?

#3 dark7to

dark7to

    Пользователь

  • Пользователи
  • PipPip
  • 32 сообщений

Отправлено 17 Июнь 2013 - 13:57

Просмотр сообщенияTaisia (14 Июнь 2013 - 20:02) писал:

у вас проблема с padding у тегов на странице действует стиль для padding:3px; из-за этого у вас смещается картинка вам надо прописывать ячейкам вашей таблицы вручную padding:0px; Но все равно могут оставаться корявые моменты. Может вам разместить этот глобус как целую картинку блокоми абсолютным позиционированием. ?
вывернуться можно и так и еще полно вариантов, но хотелось бы понять, что именно мешает...а то сделаешь какую нибудь очередную запчасть, а нормально разместить не выходит...

паддинг я попробовал, но в этом случае вообще впадаю в ступор, ибо тогда у меня пропадают картинки...причем только с "глобуса"...

P.S. изначально это было разбито на части, чтоб максимально ускорить загрузку страницы...

#4 dark7to

dark7to

    Пользователь

  • Пользователи
  • PipPip
  • 32 сообщений

Отправлено 17 Июнь 2013 - 14:34

хохмы ради изменил в main.css td padding:0; — так пропали все картинки...если менять на любое положительное число — все на месте, только картинки не стыкуются (что в принципе и должно быть), а как только сделать "0" — картинки пропадают...я уже тупить начал...ничего не понимаю...может еще где то надо менять?

#5 miyako

miyako

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

  • Модератоpы
  • 5 372 сообщений

Отправлено 17 Июнь 2013 - 15:47

Просмотр сообщенияdark7to (17 Июнь 2013 - 14:34) писал:

хохмы ради изменил в main.css td padding:0; — так пропали все картинки...если менять на любое положительное число — все на месте, только картинки не стыкуются (что в принципе и должно быть), а как только сделать "0" — картинки пропадают...я уже тупить начал...ничего не понимаю...может еще где то надо менять?

Можно иначе решить эту проблему с шапкой. К примеру залить в центре основную картинку, а снизу сделать слой с полосками, то есть получится так:

Прикрепленные изображения

  • Snimok2.png

#6 dark7to

dark7to

    Пользователь

  • Пользователи
  • PipPip
  • 32 сообщений

Отправлено 17 Июнь 2013 - 17:55

Просмотр сообщенияmiyako (17 Июнь 2013 - 15:47) писал:

Можно иначе решить эту проблему с шапкой. К примеру залить в центре основную картинку, а снизу сделать слой с полосками, то есть получится так:
спасибо...но это, как я уже сказал — одно из многих решений, эквивалентных "ой! мне перчатки малы! что делать то?! Отруби один палец, будет в самый раз!"...все же хотелось бы понять как реализовать имеющееся решение, работающее на сайте, но не работающее в магазине...на подобных фишках многие решения базируются и реализация все же нужна...где-то же собака зарыта...надо только найти...

#7 dark7to

dark7to

    Пользователь

  • Пользователи
  • PipPip
  • 32 сообщений

Отправлено 17 Июнь 2013 - 18:30

в очередной раз просматривал код...нашел такую фигню:
1. откуда то берется тег "tbody" (в моем коде его нет)
Изображение
2. и что это за "user agent stylesheet" в котором задается "border-spacing: 2px;"?
Изображение

#8 Сake

Сake

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

  • Модератоpы
  • 5 979 сообщений

Отправлено 18 Июнь 2013 - 04:05

Цитата

1. откуда то берется тег "tbody" (в моем коде его нет)

Это корректный синтаксис HTML тег tbody не обязателен для добавления, но браузер автоматически его добавляет. Поэтому вы видите данный тег в инспекторе.

Цитата

2. и что это за "user agent stylesheet" в котором задается "border-spacing: 2px;"?

Это стили определенные браузером, а именно личные файлы стилей пользователя. Вероятно вы используете браузер Opera, в данном браузере можно любому сайту назначить личный файл стилей.

Любой элемент для которого стили не определены используются стили заданные браузером по умолчанию. Например по умолчанию у body или у параграфа есть свой отступ определенный браузером. Все стандартные стили которые не нужны - необходимо обнулять.

По вашему вопросу шапки: Шапку вы реализовали в виде таблицы, с использованием тегов tr, td. У тега td по умолчанию есть отступ, но в наших шаблонах используется файл сброса стилей reset.css. В вашем случае есть дополнительный отступ в виде 

td {
	padding: 1px;
}

Который необходимо обнулить для шапки, добавив в файл стилей main.css

body > div:not(.content) td {
	padding: 0 !important;
}

#9 dark7to

dark7to

    Пользователь

  • Пользователи
  • PipPip
  • 32 сообщений

Отправлено 18 Июнь 2013 - 13:57

Цитата

...Это стили определенные браузером, а именно личные файлы стилей пользователя. Вероятно вы используете браузер Opera...
нет, я проверяю код в Google Chrome и IE...

Цитата

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

Цитата

...В вашем случае есть дополнительный отступ в виде...
я пробовал писать в стилях (выше это можно прочесть)
td {
padding: 0px;
}
но результат — отсутствие фоновых картинок вообще, поэтому и была оставлена единица...

Цитата

...обнулить для шапки, добавив в файл стилей main.css
body > div:not(.content) td {
padding: 0 !important;
}
в порядке эксперимента были опробованы разнообразные решения, такие как:
добавление в теги "td" стиля, задающего "padding: 0", добавление этого же параметра в классы, изменение этого параметра глобально для всех тегов "td" в "main.css"...но это все от безысходности...как я уже говорил, результат всегда один: если td padding = 0 — картинки пропадают вообще...и это мне совершенно не понятно...

в настоящее время я оставил ваше решение в "main.css"...
возможно, моя ошибка в том, что те добрые люди, которые пытались помочь мне, видели постоянно меняющиеся куски кода (в это время я пытался найти решение сам), что не давало полной картины и только сбивало с толку...

#10 miyako

miyako

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

  • Модератоpы
  • 5 372 сообщений

Отправлено 19 Июнь 2013 - 14:27

Просмотр сообщенияdark7to (19 Июнь 2013 - 14:06) писал:

хм...идей нет?

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

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

#11 dark7to

dark7to

    Пользователь

  • Пользователи
  • PipPip
  • 32 сообщений

Отправлено 19 Июнь 2013 - 19:24

Просмотр сообщенияmiyako (19 Июнь 2013 - 14:27) писал:

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

Поэтому я и предложила вам более простой способ установки шапки. Выглядеть будет одинаково.
хм...более простые способы — это, само собой, никуда не убежит...но хотелось бы полного контроля над тем, что делаешь...а посему...хех...будем ждать...

#12 Vaccina

Vaccina

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

  • Модераторы
  • 24 353 сообщений

Отправлено 20 Июнь 2013 - 01:39

Данная проблема присуща только старым версиям IE так как они вероятно просто не понимают синтаксис данной конструкции css и Chrome, в других браузерах с использованием правила

body > div:not(.content) td {
		padding: 0 !important;
}

шапка отображается нормально, например в Opera или Firefox

Для IE можно удалить в шаблоне "HTML" строку

<meta http-equiv="X-UA-Compatible" content="IE=7" />

Что приведет к нормальному результату в IE9. Браузер chome как-то странно реагирует на данное поведение. В инспекторе не отображается id у блоков td, и не выставляется размер. Попробуйте прописать в td как height так и width свойства.

#13 dark7to

dark7to

    Пользователь

  • Пользователи
  • PipPip
  • 32 сообщений

Отправлено 20 Июнь 2013 - 13:39

Просмотр сообщенияVaccina (20 Июнь 2013 - 01:39) писал:

Данная проблема присуща только старым версиям IE так как они вероятно просто не понимают синтаксис данной конструкции css и Chrome, в других браузерах с использованием правила

body > div:not(.content) td {
	 padding: 0 !important;
}

шапка отображается нормально, например в Opera или Firefox
спасибо, действительно в Firefox — OK

Цитата

Для IE можно удалить в шаблоне "HTML" строку

<meta http-equiv="X-UA-Compatible" content="IE=7" />

Что приведет к нормальному результату в IE9.
спасибо...в IE10 — все ОК...

Цитата

Браузер chome как-то странно реагирует на данное поведение. В инспекторе не отображается id у блоков td, и не выставляется размер. Попробуйте прописать в td как height так и width свойства.
спасибо...выставил размеры для каждого td...картинки есть, но! при проверке в Google Chome, в строках
<td width="171" height="8" bgcolor="#005C23" id="PPS_WEB2_top_cicle2">
<td width="171" height="8" bgcolor="#005C23" id="PPS_WEB2_top_cicle4">
<td width="171" height="8" bgcolor="#005C23" id="PPS_WEB2_top_cicle6">
указано height="8", а при выделении строк в инспекторе кода, показывает высоту блоков равную 9 (при этом в коде по прежнему 8), что визуально выглядит как тонкая линия, пересекающая картинку (из под картинки выглядывает темно-зеленый фон)...
Изображение
такое ощущение, что высота блока менее 9 рх запрещена...но отдельная то страница с этой шапкой в этом же браузере (да и в остальных тоже) выглядит нормально!
пока не разобрался в чем косяк...попробую поискать еще...может у вас получится найти косяк?

#14 Сake

Сake

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

  • Модератоpы
  • 5 979 сообщений

Отправлено 21 Июнь 2013 - 02:15

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

<td valign="top">
<td width="171" height="204" align="center" valign="top">
<td valign="top">

задайте данным ячейкам корректный размер, так как автоматически размер не высчитывается. Так как у вас шапка резиновая, то вам лучше использовать процентное значение для резиновых элементов. Например так

<td width="45%" valign="top">
<td width="10%" height="204" align="center" valign="top">
<td width="45%" valign="top">

#15 dark7to

dark7to

    Пользователь

  • Пользователи
  • PipPip
  • 32 сообщений

Отправлено 21 Июнь 2013 - 12:35

Просмотр сообщенияСake (21 Июнь 2013 - 02:15) писал:

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

<td valign="top">
<td width="171" height="204" align="center" valign="top">
<td valign="top">

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

Изображение

Цитата

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

<td width="45%" valign="top">
<td width="10%" height="204" align="center" valign="top">
<td width="45%" valign="top">
нет...шапка не совсем резиновая...
высота элементов — величина фиксированная, и не может быть задана в процентах (иначе картинка не соберется, будут или пробелы между кругом и словами, или круг поместится не весь)
  • ширина центральной группы (той, где круг) — имеет фиксированный размер
  • ширина боковых элементов не задается, но входящие в нее таблицы имеют ширину 100%, что, наряду с шириной контейнера, включающего все элементы, равной 100%, позволяет растягивать боковые элементы от центрального к краям окна...
да и проблема не в ширине, а в высоте...

#16 Сake

Сake

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

  • Модератоpы
  • 5 979 сообщений

Отправлено 22 Июнь 2013 - 01:26

Шапку можно обвернуть в дополнительный блок <div> которому в смою очередь задать максимальную ширину, чтобы шапка при достижении максимального результата не разъезжалась.

<div style="max-width: 1200px;">...</div>

Таблица будет работать во всех браузерах только тогда когда ей заданы все размеры как высоты так и ширины. В противном случае эти размеры могут прыгать от браузера к браузеру.

Цитата

P.S. изначально это было разбито на части, чтоб максимально ускорить загрузку страницы...

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

На данный момент ваша шапка отображается во всех браузерах корректно включая браузер Chrome.

Для ускорения загрузки шапки в вашем случае - сделать единое изображение формата jpg с качеством 75-80. задать блоку в который вставляется шапка цвет равный цвету вашей шапки.

#17 dark7to

dark7to

    Пользователь

  • Пользователи
  • PipPip
  • 32 сообщений

Отправлено 24 Июнь 2013 - 10:57

Просмотр сообщенияСake (22 Июнь 2013 - 01:26) писал:

Шапку можно обвернуть в дополнительный блок <div> которому в смою очередь задать максимальную ширину, чтобы шапка при достижении максимального результата не разъезжалась.

<div style="max-width: 1200px;">...</div>

Таблица будет работать во всех браузерах только тогда когда ей заданы все размеры как высоты так и ширины. В противном случае эти размеры могут прыгать от браузера к браузеру.



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

На данный момент ваша шапка отображается во всех браузерах корректно включая браузер Chrome.

Для ускорения загрузки шапки в вашем случае - сделать единое изображение формата jpg с качеством 75-80. задать блоку в который вставляется шапка цвет равный цвету вашей шапки.

всем спасибо за помощь!
проблема решена указанием в коде нелогичного значения ширины двух ячеек (тех, где слова) по краям от центрального элемента...
<td valign="top" width="50%">
благодаря этому, казалось бы нелогичному решению — все работает как надо...
будем думать дальше... :)

#18 Nikolay

Nikolay

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 89 сообщений
  • ГородМосква

Отправлено 02 Июнь 2015 - 09:46

Здравствуйте, помогите вставить шапку и рамки а заголовкам как  на картинке.
благодарю.

#19 Ирина345

Ирина345

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

  • Модераторы
  • 5 709 сообщений

Отправлено 02 Июнь 2015 - 13:02

Просмотр сообщенияNikolay (02 Июнь 2015 - 09:46) писал:

Здравствуйте, помогите вставить шапку и рамки а заголовкам как  на картинке.
благодарю.
Здравствуйте, найдите в шаблоне HTML
<body lang="ru">
замените на
<body lang="ru">  <div class="header_top"></div>
в конец main.css вставьте
.header_top {
  width: 100%;
  margin: 0 auto;
  min-height: 40px;
  background-color: #f5f5f5;
}
где цвет полосы это
  background-color: #f5f5f5;

далее найдите 

.contentTbodyCatalogHeader		  {margin:0 1em 0.33em 1em;padding-bottom:0.2em;background:url('{ASSETS_IMAGES_PATH}grey_dotted.gif?design=light') repeat-x scroll 0 100% transparent;}
замените на
.contentTbodyCatalogHeader		  {margin:0 1em 0.33em 1em;border: 1px solid #123456;  padding: 0.2em;background:url('{ASSETS_IMAGES_PATH}grey_dotted.gif?design=light') repeat-x scroll 0 100% transparent;}

#20 Nikolay

Nikolay

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 89 сообщений
  • ГородМосква

Отправлено 02 Июнь 2015 - 14:58

Просмотр сообщенияИрина345 (02 Июнь 2015 - 13:02) писал:

Здравствуйте, найдите в шаблоне HTML
<body lang="ru">
замените на
<body lang="ru"> <div class="header_top"></div>
в конец main.css вставьте
.header_top {
width: 100%;
margin: 0 auto;
min-height: 40px;
background-color: #f5f5f5;
}
где цвет полосы это
  background-color: #f5f5f5;

далее найдите

.contentTbodyCatalogHeader {margin:0 1em 0.33em 1em;padding-bottom:0.2em;background:url('{ASSETS_IMAGES_PATH}grey_dotted.gif?design=light') repeat-x scroll 0 100% transparent;}
замените на
.contentTbodyCatalogHeader {margin:0 1em 0.33em 1em;border: 1px solid #123456; padding: 0.2em;background:url('{ASSETS_IMAGES_PATH}grey_dotted.gif?design=light') repeat-x scroll 0 100% transparent;}

Благодарю, все получилось, помогите пожалуйста еще переместить элементы картинка
Обратно в Шаблон Лайт


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

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

  1. Форум владельцев интернет-магазинов
  2. → Вопросы работы сервиса StoreLand
  3. → Дизайн
  4. → Шаблон Лайт
  5. Privacy Policy