Перейти из форума на сайт.


Система IP-видеонаблюдения "Линия". Скачать бесплатную демо-версию для 16 камер. НовостиФайловые архивы
ПоискАктивные темыТоп лист
ПравилаКто в on-line?
Вход Забыли пароль? Первый раз на этом сайте? Регистрация
Компьютерный форум Ru.Board » Интернет » Web-программирование » Вопросы по CSS

Модерирует : Cheery

 Версия для печати • ПодписатьсяДобавить в закладки
Страницы: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59

Открыть новую тему     Написать ответ в эту тему

Mavrikii

Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
unreal666
а с чего оно должно выравниваться? vertical-align вообще очень специфичная вещь, работает только при определенных условиях.
если однострочная, то выставить line-height такой же, как и высота - будет по центру.

Всего записей: 4953 | Зарегистр. 20-09-2014 | Отправлено: 23:52 27-05-2017 | Исправлено: Mavrikii, 23:52 27-05-2017
unreal666



Gold Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
просто непонятно, почему для td это работает, а для caption почему то нет. Что в нем такого особенного, что его обломили с vertical-align?

Всего записей: 6486 | Зарегистр. 14-02-2005 | Отправлено: 00:04 28-05-2017
Mavrikii

Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
unreal666

Цитата:
Что в нем такого особенного, что его обломили с vertical-align

потому что работает только с ячейками таблицы (или их имитацией через display) и инлайновыми элементами
http://htmlbook.ru/css/vertical-align
нужна центровка - пробуйте  

Код:
position: relative;
top: 50%;
transform: translateY(-50%);

если размеры фиксированные, то (работает и в CSS2)

Код:
position: relative;
top: 50%;
margin-top: -половина_высоты_элемента;

Всего записей: 4953 | Зарегистр. 20-09-2014 | Отправлено: 00:13 28-05-2017 | Исправлено: Mavrikii, 00:15 28-05-2017
unreal666



Gold Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:
потому что работает только с ячейками таблицы (или их имитацией через display) и инлайновыми элементами  

Про ячейки я как раз и говорил по части облома. Т.к. фактически caption - это помесь ячейки и строки. Могли бы ему и "функциональность" ячейки повесить.
 
Да и непонятно почему даже так нет выравнивания:

Код:
<table><caption style="vertical-align:middle"><span style="vertical-align:middle"> ТЕКСТ ЗАГОЛОВКА </span></caption> <tr><td>текст</td></tr></table>

span - инлайн элемент? Инлайн. Так с какого фига он не выравнивается относительно caption.
 
Добавлено:

Цитата:
transform: translateY(-50%);

А это зачем? На вид и без него выравнялось.
Правда толку все равно нет, если в caption нет тегов, т.е. просто <caption>текст</caption>.

Всего записей: 6486 | Зарегистр. 14-02-2005 | Отправлено: 01:55 28-05-2017 | Исправлено: unreal666, 02:03 28-05-2017
Mavrikii

Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
unreal666

Цитата:
span - инлайн элемент? Инлайн. Так с какого фига он не выравнивается относительно caption

потому, что не дочитали ссылку. смещение инлайнов по отношению к строке, а не центровка по отношению к родителю с какой то высотой.

Цитата:
Т.к. фактически caption - это помесь ячейки и строки

нет. в данной ситуации caption лишь для семантики, в то время как vertical-align очень древний. к тому же вроде читал, что от него хотят отказаться.
 
когда я имел в виду ячейки, то речь была об этом - https://jsfiddle.net/qqbLfu5a/

Всего записей: 4953 | Зарегистр. 20-09-2014 | Отправлено: 02:04 28-05-2017
unreal666



Gold Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:
потому, что не дочитали ссылку. смещение инлайнов по отношению к строке, а не центровка по отношению к родителю с какой то высотой.  

ну там написано:

Цитата:
Выравнивает элемент по вертикали относительно своего родителя, окружающего текста или ячейки таблицы.
...
middle – Выравнивание средней точки элемента по базовой линии родителя плюс половина высоты родительского элемента.

Значит чего-то не совсем корректно написано.

Цитата:
когда я имел в виду ячейки, то речь была об этом - https://jsfiddle.net/qqbLfu5a/

ну по части "display: table-cell;" я думал. Но в таком случае caption окажется ниже thead, что неприемлемо, т.к. у меня и thead используется.

Всего записей: 6486 | Зарегистр. 14-02-2005 | Отправлено: 02:16 28-05-2017
Mavrikii

Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
unreal666

Цитата:
ну там написано:

 

Цитата:
Применяется    К встроенным элементам или ячейкам таблицы.

ну почитайте это еще - https://web-standards.ru/articles/vertical-align/
 

Цитата:
Но в таком случае caption окажется ниже thead, что неприемлемо, т.к. у меня и thead используется

показывайте полный пример тогда.

Всего записей: 4953 | Зарегистр. 20-09-2014 | Отправлено: 02:35 28-05-2017 | Исправлено: Mavrikii, 02:36 28-05-2017
unreal666



Gold Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:
Применяется    К встроенным элементам или ячейкам таблицы.

ну так span (родителем которого является caption) вполне себе встроенный элемент. (у него же для теста я тоже указывал vertiacal-align:middle)

Цитата:
показывайте полный пример тогда.

ну полный пример юзает почти все табличные элементы. Упрощенный вид

Код:
 
<table>
    <caption> ИМЯ ТАБЛИЦЫ (тут может быть и рисунок) </caption>
    <thead><tr><th> загол. 1 </th><th> загол. 2 </th></tr></thead>
    <tfoot><tr><td colspan="2">  Сноски для таблицы  </td></tr></tfoot>
    <tr><td> ячейка 1 </td> <td> ячейка 2 </td></tr>   (или <tr><th colspan="2> подзаголовок 1 </th></tr>)
    ....
    <tr><th colspan="2> подзаголовок 1 </th></tr>
    ....
    <tr><td> ячейка 1 </td> <td> ячейка 2 </td></tr>
</table>
 

Всего записей: 6486 | Зарегистр. 14-02-2005 | Отправлено: 02:54 28-05-2017 | Исправлено: unreal666, 02:59 28-05-2017
Mavrikii

Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
unreal666

Цитата:
ну так span (родителем которого является caption) вполне себе встроенный элемент.  

еще раз повторю, что плохо прочитали и не вникли.
вот в вашем примере картинку как раз можно выровнять относительно текста - https://jsfiddle.net/qqbLfu5a/1/
но могут быть проблемы в случае многострочного содержимого
 
в данном случае идет выравнивание именно inline элемента (img) относительно строки.
table-cell и другой код работает для выравнивания содержимого "ячейки" относительно ее центра.

Всего записей: 4953 | Зарегистр. 20-09-2014 | Отправлено: 03:24 28-05-2017 | Исправлено: Mavrikii, 03:26 28-05-2017
HeT BonpocoB



Advanced Member
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
unreal666, и охота возиться с этим капшеном? я если делал таблицы всегда без этой устаревшей муры, стандартными строками-ячейками. а там уже через child можно какие  угодно  стили вешать хоть на каждую отдельно...
 
и вообще надо уже на flex; переходить.
вот где продумано со всякими центровками

Всего записей: 1268 | Зарегистр. 30-03-2003 | Отправлено: 12:07 28-05-2017 | Исправлено: HeT BonpocoB, 12:19 28-05-2017
unreal666



Gold Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:
я если делал таблицы всегда без этой устаревшей муры, стандартными строками-ячейками. а там уже через child можно какие  угодно  стили вешать хоть на каждую отдельно...  

Дело в том, что таблицы у меня разные, могут быть капшены, могут не быть. Как и заголовки-ячейки и им подобное. На все варианты таблиц не охота создавать классы.

Цитата:
и вообще надо уже на flex; переходить.

у меня не прокатит, т.к. это используется не в самих браузерах, а в проге outwiker, юзающей браузерный движок. А в винде эта прога юзает движок IE, которые в разных версиях винды будет разный (для Win 7 у меня стоит IE 11).

Всего записей: 6486 | Зарегистр. 14-02-2005 | Отправлено: 23:17 28-05-2017 | Исправлено: unreal666, 00:05 29-05-2017
Weinaum



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Приветствую,  
пару месяцев назад получил задание сделать респонсивной одну таблицу, таблица эта выводит последние товары в xtcommerce, изначально идет именно как таблица и без респонсива.  
Расширив вот это решение, сверстал в принципе что то более менее сносное,  
вот результат.
На хедер-футер внимания не обращайте, для наглядности оставил, таблица внутри.
 
Вчера программер сообщил, что натянул эту таблицу на xtcommerce, и вот что вышло.
 
Вроде бы сам делал, и сам не могу найти, как говорится, 10 отличий.
Проблема в картинке продукта - уменьшение при уменьшении экрана, и синей кнопке цены для мобильного разрешения.
 
Проверяю, вроде он тупо все мои стили добавил, и все, но то ли что то сверху перебивает, то ли что - вчера вечером час искал, сегодня с утра смотрю и не вижу, не то ослеп, не то что...
 
Плз, поднимите мне веки © )))

Всего записей: 1864 | Зарегистр. 18-06-2006 | Отправлено: 10:09 30-05-2017
HeT BonpocoB



Advanced Member
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
Weinaum

Цитата:
и синей кнопке цены для мобильного разрешения.

 
у меня вроде как в версии сайта последняя колонка td class="last" -  width: 15% !important;
а на проекте не указано
по идее этого  достаточно чтоб вся таблица изменилась...
 
да и первая колонка product-img тоже фиксированная ширина в % на сайте...
 
или ап чём речь?  

Всего записей: 1268 | Зарегистр. 30-03-2003 | Отправлено: 12:22 30-05-2017
Weinaum



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
HeT BonpocoB
 
об этом, спасибо )

Всего записей: 1864 | Зарегистр. 18-06-2006 | Отправлено: 13:58 30-05-2017
Weinaum



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
HeT BonpocoB
 
Еще парочка не совсем понятных моментов с этой же таблицей.
 
Почему то съезжают хедер и футер - если посмотреть на любую другую страницу шопа - например, на главную, то #HeaderBlue, #HeaderBlack и #Footer растянуты на всю ширину экрана, а на странице с таблицей появились отступы.  
Методом исключения и такой то матери нашел, что влияет вот эта строчка стилей -  
 

Код:
@media (min-width: 480px) { .rwd-table th, .rwd-table td { display: table-cell; padding: .25em .5em; }

Причем не изменение этих стилей, а полное удаление этой строчки убирает эти отступы.
Как бы можно принудительно добавить для хедеров и футера  position:absolute и display:block,  
но хотелось бы просто разобраться, почему вообще это влияет..
И еще - тут похоже таблица не причем, в самом нижнем блоке перед футером- с зелеными иконками. Если сравнить опять же с главной страницей, то ощущение такое, что где то потерялся отступ в 5 пикс. по кругу. Просто вижу, что стили элемента .uspitem и там и там одни, но при этом длина и ширина элемента уменьшились на 10 пикселей.  
На всякий случай картинки.


Всего записей: 1864 | Зарегистр. 18-06-2006 | Отправлено: 17:03 30-05-2017
Mavrikii

Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Weinaum

Цитата:
но при этом длина и ширина элемента уменьшились на 10 пикселей.  

В css3 уже можно избавиться от float вообще - display: inline-block поддерживается всеми браузерами и даже IE9, если не ошибаюсь.
 
в вашем случае решение проще - уберите  

Цитата:
.uspitem {
height: 60px;

оно там не нужно
 
а основная причина в том, что bootstrap добавляет это

Цитата:
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

поэтому размеры элементов считаются иначе, с учетом рамки - http://htmlbook.ru/css/box-sizing
 
 
для остального - совет: идем всегда сюда https://validator.w3.org/#validate_by_input и проверяем код страницы на ошибки. сначала исправляем их, а потом уже разбираемся почему что то отображается не так. у вас

Цитата:
Result:    72 Errors, 27 warning(s)

что очень много, пусть не все значительны, но лучше чтобы их вообще не было
 

Цитата:
Методом исключения и такой то матери нашел, что влияет вот эта строчка стилей -

и это не нужно.. в любом современном браузере есть панель разработчика, которая показывает всю информацию об элементе, какие и откуда стили применены и тд и тп. можно даже поменять и посмотреть как будет выглядеть (конечно же в локальной версии) показываю в вашем случае
   
видите, что в самой странице есть <style>, в котором для body применен ненужный padding? уберете его и будет полная ширина
 

Цитата:
            .rwd-table { margin: 1em 0; min-width: 300px; } .rwd-table tr { border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; } .rwd-table th { display: none; } .rwd-table td { display: block; } .rwd-table td:first-child { padding-top: .5em; } .rwd-table td:last-child { padding-bottom: .5em; } .rwd-table td:before { content: attr(data-th) " "; font-weight: bold; width: 6.5em; display: inline-block; } @media (min-width: 480px) { .rwd-table td:before { display: none; } } .rwd-table th, .rwd-table td { text-align: left; } @media (min-width: 480px) { .rwd-table th, .rwd-table td { display: table-cell; padding: .25em .5em; } .rwd-table th:first-child, .rwd-table td:first-child { padding-left: 0; } .rwd-table th:last-child, .rwd-table td:last-child { padding-right: 0; } } body { padding: 0 2em; font-family: Montserrat, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; color: #444; background: #eee; } h1 { font-weight: normal; letter-spacing: -1px; color: #34495E; } .rwd-table { background: #34495E; color: #fff; border-radius: .4em; overflow: hidden; } .rwd-table tr { border-color: #46637f; } .rwd-table th, .rwd-table td { margin: .5em 1em; } @media (min-width: 480px) { .rwd-table th, .rwd-table td { padding: 1em !important; } } .rwd-table th, .rwd-table td:before { color: #dd5; }  

ну и шрифт задается другой, поэтому отличается местами от других страниц

Всего записей: 4953 | Зарегистр. 20-09-2014 | Отправлено: 21:17 30-05-2017 | Исправлено: Mavrikii, 22:04 30-05-2017
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Просьба подсказать, что и куда (или как) дописать, чтобы сделать текст и звёзды рейтинга разного цвета. Сама страница, интересует замена цвета у звёзд рядом с надписью "Average Rating" и именем пользователя.

Всего записей: 2174 | Зарегистр. 30-06-2002 | Отправлено: 18:54 05-06-2017 | Исправлено: WONDROUS, 18:55 05-06-2017
vs6262



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
WONDROUS
ищите в
"files/backsnap/content.php"

Всего записей: 1281 | Зарегистр. 25-02-2013 | Отправлено: 20:02 05-06-2017
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
vs6262
Спасибо за совет! Правда, не пойму, что и где там искать. Хотя, если в браузере изменять, через "Исследовать элемент", то всё меняется, но если в программе дописывать код, ничего не меняется, всё то же самое остаётся. Скриншот.

Всего записей: 2174 | Зарегистр. 30-06-2002 | Отправлено: 20:58 05-06-2017
vs6262



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
WONDROUS
просмотрите все css файлы ещё раз насчёт .stars

Всего записей: 1281 | Зарегистр. 25-02-2013 | Отправлено: 22:44 05-06-2017
Открыть новую тему     Написать ответ в эту тему

Страницы: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59

Компьютерный форум Ru.Board » Интернет » Web-программирование » Вопросы по CSS

Имя:
Пароль:
Сообщение

Для вставки имени, кликните на нем.

Опции сообщенияДобавить свою подпись
Подписаться на получение ответов по e-mail
Добавить тему в личные закладки
Разрешить смайлики?
Запретить коды


Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.Board
© Ru.Board 2000-2017

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru