Сообщений в теме: 31

[dark7to]

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

[Taisia]

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

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

[dark7to]

Taisia (14 Июнь 2013 - 20:02) писал:

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

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

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

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

[dark7to]

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

[miyako]

dark7to (17 Июнь 2013 - 14:34) писал:

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

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

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

• 

[dark7to]

miyako (17 Июнь 2013 - 15:47) писал:

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

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

[dark7to]

в очередной раз просматривал код...нашел такую фигню:
1. откуда то берется тег "tbody" (в моем коде его нет)

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

[Сake]

Цитата

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;
}

[dark7to]

Цитата

...Это стили определенные браузером, а именно личные файлы стилей пользователя. Вероятно вы используете браузер 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"...
возможно, моя ошибка в том, что те добрые люди, которые пытались помочь мне, видели постоянно меняющиеся куски кода (в это время я пытался найти решение сам), что не давало полной картины и только сбивало с толку...

[miyako]

dark7to (19 Июнь 2013 - 14:06) писал:

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

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

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

[dark7to]

miyako (19 Июнь 2013 - 14:27) писал:

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

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

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

[Vaccina]

Данная проблема присуща только старым версиям 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 свойства.

[dark7to]

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 рх запрещена...но отдельная то страница с этой шапкой в этом же браузере (да и в остальных тоже) выглядит нормально!
пока не разобрался в чем косяк...попробую поискать еще...может у вас получится найти косяк?

[Сake]

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

<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">

[dark7to]

С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%, позволяет растягивать боковые элементы от центрального к краям окна...

да и проблема не в ширине, а в высоте...

[Сake]

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

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

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

Цитата

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

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

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

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

[dark7to]

Сake (22 Июнь 2013 - 01:26) писал:

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

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

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



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

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

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

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

<td valign="top" width="50%">

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

[Nikolay]

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

[Ирина345]

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;}

[Nikolay]

Ирина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;}

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