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


Не Отображается Таблица


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

#21 Koderhan

Koderhan

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

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

Отправлено 07 Ноябрь 2013 - 18:49

Если вы хотите применить стили только к данной таблице то достаточно добавить:
#table_border {
	border-collapse: separate;
	border-spacing: 1px 1px;
	border: 1px solid; 
}

В конец файла main.css. Стили будут привязаны к идентификатору table_border

#22 AlexP_RUS

AlexP_RUS

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

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

Отправлено 07 Ноябрь 2013 - 18:53

Ну так а это
#table_border td{border:1px solid black;}
от туда удалять при этом?

Сделал, с этим кодом - никаких изменений, без этого кода - только убрались внутренние рамки, теперь это тупо квадрат, а не таблица.

#23 Koderhan

Koderhan

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

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

Отправлено 07 Ноябрь 2013 - 18:58

Стили должны были  применяться. Попробуйте очистить кеш браузера.
В любом случае не удаляйте этот код из файла style.css.

#24 AlexP_RUS

AlexP_RUS

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

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

Отправлено 07 Ноябрь 2013 - 19:02

Просмотр сообщенияKoderhan (07 Ноябрь 2013 - 18:58) писал:

Стили должны были  применяться. Попробуйте очистить кеш браузера.
В любом случае не удаляйте этот код из файла style.css.
Вы имеете ввиду main.css, а не style.css?

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

#25 Сake

Сake

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

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

Отправлено 08 Ноябрь 2013 - 04:54

Попробуйте добавить в самый конец файла стилей main.css следующий код

.htmlDataBlock table,
.htmlDataBlock tbody,
.htmlDataBlock tfoot,
.htmlDataBlock thead,
.htmlDataBlock tr,
.htmlDataBlock th,
.htmlDataBlock td {
	border: inherit;
	font-family: inherit;
	font-size: inherit;
	font-style: inherit;
	font-weight: inherit;
	line-height: inherit;
	margin: inherit;
	padding: inherit;
	vertical-align: middle;
}
.htmlDataBlock table {
	border: 1px solid;
	border-collapse: separate;
	border-spacing: 1px;
}


#26 AlexP_RUS

AlexP_RUS

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

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

Отправлено 08 Ноябрь 2013 - 18:56

Добавил, вроде что-то начинает вырисовываться.
Скажите, а предыдущие изменения, которые предлагали ранее другие модераторы удалять? Например из сообщения 21.
И нужно ли теперь удалять идентификатор table_border  из таблицы?

Теперь о правках:
1. В редакторе выставляю отступ от границ - в редакторе работает нормально, на сайте не работает.
2. Нужно убрать самую крайнюю обводку (рамку) или сделать её еле видимой (прозрачной), собственно как у таблицы на картинке чуть выше.
Спасибо.

#27 Сake

Сake

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

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

Отправлено 09 Ноябрь 2013 - 04:29

Цитата

И нужно ли теперь удалять идентификатор table_border из таблицы?

Да можно удалить. На визуальную часть это не повлияет.

К сожалению в рамках данных стилей улучшить отображение таблицы уже не получиться. Остается вариант частичного удаления стилей из файла сброса reset.css для таблицы, и задание стилей для всех таблиц сайта кроме таблиц в блоке htmlDataBlock. Сделать все это можно следующим образом - удаляем изменения которые ранее были добавлены из файла стилей main.css а именно классы

.htmlDataBlock table, .htmlDataBlock tbody, .htmlDataBlock tfoot, .htmlDataBlock thead, .htmlDataBlock tr, .htmlDataBlock th, .htmlDataBlock td {
	border: inherit;
	font-family: inherit;
	font-size: inherit;
	font-style: inherit;
	font-weight: inherit;
	line-height: inherit;
	margin: inherit;
	padding: inherit;
	vertical-align: middle;
}

так же необходимо удалить и

th, td {
	font-size: 1em;
	margin: 0.8333em 0;
	padding: 3px 10px 3px 0;
	text-align: left;
}

далее класс

#table_border {
	border: 1px solid;
	border-collapse: separate;
	border-spacing: 1px;
}

далее

.htmlDataBlock table {
	border: 1px solid;
	border-collapse: separate;
	border-spacing: 1px;
}

далее

table {
	border-collapse: collapse;
	margin-top: 20px;
	width: auto;
}

после этого удаляем подключение файла сброса reset_01.css из шаблона "HTML", а в самое начало файла стилей main.css добавляем

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, caption {
	border: 0 none;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	line-height: 1.22em;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
}
a:active, a:focus, input[type="image"] {
	outline: 0 none;
}
a img, *:link img, *:visited img {
	border: 0 none;
}
ol, ul {
	list-style: none outside none;
}
q:before, q:after, blockquote:before, blockquote:after {
	content: "";
}
strong, label, h1, h2, h3, h4, h5, h6 {
	font-weight: bold;
}
em {
	font-style: italic;
}
input, textarea, select {
	margin: 0;
}

в итоге мы сбрасываем все стили кроме таблиц. Остается задать эти самые табличные сбросы для каждой таблицы вне контентного блока. Далее необходимо всем таблицам заменить id на class для исключения высокого приоритета стилей сброса.

Для этого необходимо в файле стилей main.css найти

все строки

#contactInfo

и заменить их на

.contactInfo

далее найти все строки

#mainNav

и заменить их на

.mainNav

далее найти все строки

#cartInfo

и заменить их на

.cartInfo

далее найти все строки

#content

и заменить их на

.content

после этого изменения необходимы в шаблоне "HTML" необходимо найти строку

<div id="contactInfo">

и заменить её на

<div class="contactInfo">

далее найти строку

<div id="mainNav">

и заменить её на

<div class="mainNav">

далее найти строку

<div id="cartInfo">

и заменить её на

<div class="cartInfo">

далее найти строку

<div id="content">

и заменить её на

<div class="content">

после этого в самое начало файла стилей main.css необходимо добавить стили сброса таблиц по всем измененным правилам

.contactInfo table,
.contactInfo td,
.contactInfo tr,
.contactInfo tbody,
.contactInfo thead,
.contactInfo tfoot,
.contactInfo th,
.mainNav table,
.mainNav td,
.mainNav tr,
.mainNav tbody,
.mainNav thead,
.mainNav tfoot,
.mainNav th,
.cartInfo table,
.cartInfo td,
.cartInfo tr,
.cartInfo tbody,
.cartInfo thead,
.cartInfo tfoot,
.cartInfo th,
.content > table,
.content > table > tbody,
.content > table > tbody > tr,
.content > table > tbody > tr > td,
.content > table > thead,
.content > table > thead > tr,
.content > table > thead > tr > td,
.content > table > tfoot,
.content > table > tfoot > tr,
.content > table > tfoot > tr > td {
	border: 0 none;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	line-height: 1.22em;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
}
.contactInfo table,
.mainNav table,
.cartInfo table,
.content > table {
	border-collapse: collapse;
	border-spacing: 0;
}
.contactInfo table,
.mainNav table,
.cartInfo table,
.content > table {
	border-collapse: collapse;
	margin-top: 20px;
	width: auto;
}

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

#28 AlexP_RUS

AlexP_RUS

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

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

Отправлено 14 Ноябрь 2013 - 19:42

Всё сделал как велено, таблица стала корректно функционировать, но вот беда, шаблон во многих местах не хило покосился. Пришлось сфотографировать сделанную таблицу и вернуть все изменения назад.
Кстати, у таблицы рамки с разных сторон стали разного цвета (черный и серый).

#29 Сake

Сake

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

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

Отправлено 15 Ноябрь 2013 - 01:00

Данная проблема напрямую связана с приоритетом применяемых стилей. По всей видимости какие-то стили имеют больший приоритет и в связи с этим они искажают визуальную составляющую. В данном случае возможен только ручной подход к каждому конкретному случаю с определением стилей. Для решения проблемы необходимо задать больший приоритет именно тем стилям которые необходимы для исправления ситуации с отображением. Подобное можно достичь задав свойству метку !important или же прописать inline стиль т.е через атрибут style. Проблема на самом деле довольно объемная и решить её парами стилей к сожалению не получиться.

#30 Новичок Ю

Новичок Ю

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

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

Отправлено 20 Август 2014 - 11:15

Здравствуйте! Тоже помучилась с таблицей, думала, это только у меня... Не хочу так сильно менять код, как Вы предлагаете. В общем все и так уже не плохо, но не видны рамки и внутренние границы (должны быть как у картинок - серые).
2. Не могу настроить справа отступ текста от края таблы. При корректировке появляются непонятные отступы между словами, текст разваливается, хотя такой же отступ у картинок хорошо настроился.
Можно это решить с минимальными изменениями кода? Спасибо.
Screenshot_5.jpg

#31 Danil

Danil

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

  • Пользователи
  • PipPipPipPip
  • 4 645 сообщений

Отправлено 20 Август 2014 - 11:25

Просмотр сообщенияНовичок Ю (20 Август 2014 - 11:15) писал:

Здравствуйте! Тоже помучилась с таблицей, думала, это только у меня... Не хочу так сильно менять код, как Вы предлагаете. В общем все и так уже не плохо, но не видны рамки и внутренние границы (должны быть как у картинок - серые).
2. Не могу настроить справа отступ текста от края таблы. При корректировке появляются непонятные отступы между словами, текст разваливается, хотя такой же отступ у картинок хорошо настроился.
Можно это решить с минимальными изменениями кода? Спасибо.
Прикрепленный файл Screenshot_5.jpg

Здравствуйте.
Напишите ссылку, где находиться данная таблица.

#32 Новичок Ю

Новичок Ю

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

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

Отправлено 20 Август 2014 - 22:51

Вот http://roylwoodshop....v-Obshhij-obzor

#33 Сake

Сake

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

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

Отправлено 22 Август 2014 - 01:24

Вам необходимо открыть вашу страницу для редактирования и перейти к визуальному редактору (где вы вставляли таблицу). После этого нажмите на кнопку "Источник" на панели визуального редактора и в отобразившемся коде найдите строку

<table align="center" border="1" bordercolor="#ccc" cellpadding="0" cellspacing="0" style="line-height: 1.4em; width: 700px;">

и замените её на

<table class="tblBorder" align="center" border="1" bordercolor="#ccc" cellpadding="0" cellspacing="0" style="line-height: 1.4em; width: 700px;">

после этого зайдите в раздел Сайт -> Редактор шаблонов и откройте для редактирования файл стилей main.css, далее добавьте в самый конец следующий код

.htmlDataBlock .tblBorder {
  width: 100%;
}
.htmlDataBlock .tblBorder td {
  border: 3px solid #ccc !important;
}
.htmlDataBlock .tblBorder tr td:first-child {
  border-right: none !important;
}
.htmlDataBlock .tblBorder tr td:last-child {
  border-left: medium none !important;
}
.htmlDataBlock .tblBorder tr td:last-child div {
  margin-left: 0 !important;
  padding-right: 8px;
}


#34 Новичок Ю

Новичок Ю

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

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

Отправлено 22 Август 2014 - 11:13

Здравствуйте. Все получилось) Подскажите еще, как отодвинуть текст от картинки (кнопка "увеличить отступ" не помогает).
Screenshot_7.jpg

#35 Alekseys

Alekseys

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

  • Пользователи
  • PipPipPipPip
  • 2 355 сообщений

Отправлено 22 Август 2014 - 11:27

Просмотр сообщенияНовичок Ю (22 Август 2014 - 11:13) писал:

Здравствуйте. Все получилось) Подскажите еще, как отодвинуть текст от картинки (кнопка "увеличить отступ" не помогает).
Прикрепленный файл Screenshot_7.jpg
Здравствуйте. В main.css замените
.htmlDataBlock .tblBorder tr td:last-child div {
  margin-left: 30px !important;
  padding-right: 8px;
}
на
.htmlDataBlock .tblBorder tr td:last-child div {
  margin-left: 30px !important;
  padding-right: 8px;
}


#36 Новичок Ю

Новичок Ю

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

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

Отправлено 22 Август 2014 - 13:01

Спасибо) Еще вопрос не совсем по теме - куда вставлять коды к фото в таблице
<a href="большое изображение" rel="gallery" target="_blank">
<img alt="" src="маленькое изображение" /> </a>
чтобы фото увеличивались при клике.

#37 Сake

Сake

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

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

Отправлено 23 Август 2014 - 01:26

То что вы приводите - это структура общего вида изображения. Вам необходимо при просмотре исходного кода вашей страницы (через кнопку "Источник"), каждое изображение (тег <img>) заменить на примерно следующий вид - например найдем код

<img style="width: 160px; height: 128px; margin: 5px 20px; border-width: 3px; border-style: solid;" src="http://st.storeland.net/6/1275/056/P1020748.jpg" alt="Чехол жаккард хлопок для матраса.">

и заменим эту строку на

<a href="большое изображение" rel="gallery" target="_blank">
  <img style="width: 160px; height: 128px; margin: 5px 20px; border-width: 3px; border-style: solid;" src="http://st.storeland.net/6/1275/056/P1020748.jpg" alt="Чехол жаккард хлопок для матраса.">
</a>

т.е по сути мы оборачиваем изображение (тег <img>) в ссылку (тег <a>), где в ссылки необходимо указать адрес до большого изображения (в атрибуте href). Например

<a href="http://st.storeland.net/6/1275/056/P1020748-big.jpg" rel="gallery" target="_blank">
  <img style="width: 160px; height: 128px; margin: 5px 20px; border-width: 3px; border-style: solid;" src="http://st.storeland.net/6/1275/056/P1020748.jpg" alt="Чехол жаккард хлопок для матраса.">
</a>


#38 Новичок Ю

Новичок Ю

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

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

Отправлено 23 Август 2014 - 10:59

Cake, спасибо, получается, только открывается на новой странице. Как сделать, чтоб прямо в таблице можно было увеличить?

#39 batta

batta

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

  • Пользователи
  • PipPipPipPip
  • 1 142 сообщений
  • ГородНижний Новгород

Отправлено 24 Август 2014 - 17:52

Просмотр сообщенияНовичок Ю (23 Август 2014 - 10:59) писал:

Cake, спасибо, получается, только открывается на новой странице. Как сделать, чтоб прямо в таблице можно было увеличить?
Здравствуйте.
Попробуйте прочитать данную тему http://forum.storela...едении-курсора/

#40 Новичок Ю

Новичок Ю

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

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

Отправлено 05 Сентябрь 2014 - 10:56

Здравствуйте! Подскажите, как сделать видимыми на сайте внешние и внутренние границы таблицы на странице http://roylwoodshop....ge_edit/543246?




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

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