There is no such thing as a stupid question, until you ask it
Дано: общий div с ограниченной max-width, в нем таблица, в таблице 2 несимметричные (задано через проценты) ячейки: в левой картинка, в правой - текст.
На больших разрешениях все ок, все растягивается, где надо, проблем нет. Но вот насчет маленьких... Так как картинка вставлена со 100% размером, она теснит правую ячейку, и в какой-то момент текст в ней просто не помещается и вываливается за границы div.
Как сделать так, чтобы при маленькой ширине картинка начинала уменьшаться? Взять ее в div с max-width не работает, плюс мне это все надо как-нибудь в процентах от размера браузера...
На больших разрешениях все ок, все растягивается, где надо, проблем нет. Но вот насчет маленьких... Так как картинка вставлена со 100% размером, она теснит правую ячейку, и в какой-то момент текст в ней просто не помещается и вываливается за границы div.
Как сделать так, чтобы при маленькой ширине картинка начинала уменьшаться? Взять ее в div с max-width не работает, плюс мне это все надо как-нибудь в процентах от размера браузера...
-
-
02.05.2014 в 14:32-
-
02.05.2014 в 14:44-
-
02.05.2014 в 21:37-
-
02.05.2014 в 22:06-
-
02.05.2014 в 22:36Черт, этого-то я и боялась :С
Скептичный циник, конечно!
При небольшом разрешении (i.e. ширине браузера) текст справа выезжает.
-
-
02.05.2014 в 22:51[offtop]ps: такая вёрстка – жесть, ад и содомия (: Хоть бы стили в теге style написали.[/offtop]
-
-
03.05.2014 в 01:08Эм ну я так и делаю.
А вообще, извините, но насчет "стиля" и "изящности" этого кода мне класть абсолютно. Понятно, что говно. Я не знаю хтмл и учиться не собираюсь: это вынужденная мера. Работает - и то хорошо
свойство "max-width:100%"
Ну, я так и думал. Понятно, где у меня была ошибка. Спасибо!
-
-
03.05.2014 в 01:17-
-
03.05.2014 в 22:23-
-
04.05.2014 в 14:24Обновлённый пример.
А причина проста – разное понимание одной и той же w3c-спеки разными разработчиками разных браузеров. И это относится, в данном случае, не к картинке, а к ячейке таблицы. W3C живут в своём мире с пони и бабочками (и FF следует за ними), а другие живут в реальном мире (WebKit и его форки).
-
-
04.05.2014 в 14:38Тоже ставила, и лиса не жевала :с
Решила проблему таки с использованием position:relative, хотя код получился довольно массивным.
-
-
04.05.2014 в 14:42-
-
04.05.2014 в 14:4928-я, но тоже самое наблюдалось мной в Опере, например. Лишь Хром вел себя, как надо ._.
-
-
04.05.2014 в 15:17Другой вопрос в том, как обрабатывать ситации, подобные таким (в утрированном виде):
Дело ваше, конечно, но я бы не парился на этот счёт ибо такая ситуация слишком маловерояна и выбивается из юзкейсов адекватных людей.
Слово "номер" имеет фиксированную ширину при заданном font-size, меньше которой правый столбец не будет уменьшаться (и не должен, имхо).
Если там будет два слова ("Foo Bar"), то, при нехватке ширины, они перенесутся сами собою. пример.
Если же там будет неразрывная строка ("FooBarFooBar"), то и минимальная ширина тоже будет значительно больше. пример.
В такой ситуации можете попытаться рвать слово в любом месте (если позволяет логика отображения) с помощью "word-break:break-all;" (для ie7 и древнее нужен префикс -ms-): пример.
В такой ситуации, чтобы были видны и картинка, и текст, я бы задал min-width для всей таблицы и всё.
-
-
04.05.2014 в 15:27Знаю. У человека разрешение 1024*764 - покажите мне второго с таким монитором! Однако ситуация могла бы повториться на планшетах и кпк, например. В итоге, даже когда я добилась сжимаемости, отказалась от этой концепции и переместила текст справа под картинкой v_v
В такой ситуации можете попытаться рвать слово
У меня ничего не рвется и ведет себя как пример два (неразрывная строка)
-
-
04.05.2014 в 15:41Если нужно показывать и картинку, и текст на мобильных устройствах, то ответ лежит за пределами "резиновости", в другой плоскости: я бы использовал media queries чтобы была резина при больших размерах, а при мелких столбец с текстом переносился вниз, под картинку и оба элемента (и картинка, и текст) были во всю ширину в угоду читабельности – тогда мобильные поьзователи не пострадают и смогут получить контент в нормальном виде.
Вот пример – поресайзите фрейм с результатом.
-
-
04.05.2014 в 16:08Жаль, дайри это не поддерживают.
-
-
04.05.2014 в 16:44-
-
16.07.2014 в 20:04Имеется: сжимаемый div, внутри него две таблицы, между таблицами отступы. В каждой таблице по две ячейки - текст и картинка. Таблицы находятся на одном уровне (задано float'ом).
Требуется: прописать свойства таблицы (текста?) так, чтобы:
а) при максимальном размере div'а (т.е., когда обе картинки влезают в одну строку) ширина таблицы определялась шириной картинки
б) когда div становится слишком узким для двух картинок (в размере 100%, конечно же), правая таблица уходила вниз, а ширина обеих таблиц определялась шириной текста, т.е., обе ячейки с текстом становились максимально широкими.
Условие переноса легко выполняется тем же float'ом (:left), а вот с текстом... Левая таблица могла бы просто теснится правой как внешним раздражителем, но что вот сделать с правой, чтобы и она, перенесясь на новую строку, "распрямлялась" - ума не приложу.
Или это невозможно в принципе?
-
-
17.07.2014 в 01:46Не имея кода, максимум могу сказать:
а) Задать одинаковую ширину (с учётом рамок) для картинки и для таблицы
б) 1. Таблица с флоатом падает вниз автоматически – достаточно добавить mix-width
б) 2. Что значит "максимально широкими"? Задавайте ширину картинки и тогда остальные ячейки таблицы (в данном случае, с текстом) растянутся по всей оставшейся доступной ширине
> что вот сделать с правой, чтобы и она, перенесясь на новую строку, "распрямлялась" - ума не приложу
Можете так же использовать @media и при нужных мелких значениях просто убирать у таблиц флоат – когда они в потоке, то будут иметь поведение примерно как блочные элементы (вторая таблица под первой и растяжение на всю ширину).
-
-
17.07.2014 в 02:17Ммм, еще нет, но я нарисовала гифку.
Что значит "максимально широкими"? Задавайте ширину картинки и тогда остальные ячейки таблицы (в данном случае, с текстом) растянутся по всей оставшейся доступной ширине
В том-то и дело, что в случае с "максимально широким" текстом мне надо, чтобы ширина таблицы (и текста) превосходила ширину картинки. А до переноса - нет.
@media
Не могу :с Условия задачи те же - только ресурсы дайри.
-
-
17.07.2014 в 02:54o.0 Круто! Я думал, что код проще написать, чем гифку сделать (:Я плохо разбираюсь в ограничениях диареек (по ним всё ещё ждём знатоков в этом треде), однако, если можно на страницу добавить куда-нибудь тег style, то в него можно писать валидный css и делать вот так.
Если такое дайри ограничивает, то чистым css никак не обойтись – нужно писать скрипты, которые будут использовать те же table.style.float, window.onresize и window.matchMedia(). Или, как вариант, написать нормальный css с @media, а js использовать только чтобы сделать body.appendTo нашего тега со стилями.
-
-
17.07.2014 в 03:40писать валидный css
Увы, не поддерживает :с Платный - да, но я нищеброд, решающий проблемы костылями. Косыми, держащимися вместе только благодаря чуду костылями
чистым css никак не обойтись
Эх, точно-точно? Мб что-то намутить с шириной в процентах.. причем прописать только у второй таблицы... ninelya выше писал(а) насчет сжимаемых картинок чистым цсс, тем более в рамках дайрей, такое невозможно, однако ж оказалось возможным!
-
-
17.07.2014 в 12:11CSS – не язык программирования и такое он не умеет вообще. В нормальных ЯП эти задачи решают конструкции типа if..else.., а в CSS как его автоматический аналог можно использовать разве что только @media.
Ну, или поставить рядом чекбокс и менять ширину в зависимости от его состояния, лол. Например, вот так.Максимум, что сможете выжать из css без @media или без js – это что-то похожее вот на это, что решает задачу, имхо, не полностью.
> причем прописать только у второй таблицы
Тогда первая либо не будет менять свою ширину, либо будет, но в ограниченных пределах (min/max width), либо займёт всё пространство и вытеснит вторую вниз навсегда.
-
-
17.07.2014 в 23:42Эээээх, okay :Y Но да, с парой условий было бы куда проще.
Например, вот так.
Аммм, не знаю, что должен иллюстрировать пример, так как текст при любом разрешении занимает всю ширину.
решает задачу, имхо, не полностью
Да вообще не решает, увы. Будь картинка чуть больше, это была бы ситуация (т.е., когда обе картинки влезают в одну строку) ширина таблицы определялась шириной картинки
но в ограниченных пределах (min/max width)
Хм... попробую поиграться с этим, чтобы в случае с одним столбцом таблицы не оставляли столь по-позорному много свободного места. Алсо я еще заметила, что отступы вы тоже задавали процентно. Смогу ли я через этот путь сделать так, чтобы, как только происходил перенос в один столбец, таблицы отцентрировались?.. (и они у меня все еще float:left, что усложнит задачу).
-
-
18.07.2014 в 03:44> текст при любом разрешении занимает всю ширину
Надо кликнуть на чекбокс чтобы увидеть. Но это "слишком ручное" управление.
> в случае с одним столбцом таблицы не оставляли столь по-позорному много свободного места
Да, именно так и будет – не то, что нужно, поэтому пример даже не пытался написать. Максимум – "на глазок" под конкретное разрешение подобрать чтобы было почти похоже на правду. Но при изменении разрешения сразу будет видно "подставу".
> сделать так, чтобы, как только происходил перенос в один столбец, таблицы отцентрировались
Добавьте ко внешнему блоку width:100% и text-align:center, а к таблицам display:inline-block. Пример.
-
-
18.07.2014 в 05:28Знаю.
Но его не существует
Да, печалька.
Надо кликнуть на чекбокс
Лоооол я его не заметила в первый раз
Добавьте ко внешнему блоку width:100% и text-align:center, а к таблицам display:inline-block
Я так и подумала об отцентровке, но проблема в том, что тогда текст тоже центрируется, а этого хотелось бы избежать. Мне стоит каждую таблицу занести в отдельный блок тогда?
-
-
18.07.2014 в 09:20"text-align: left;", применённый к ячейке с текстом, исправит данную ситуацию (:
-
-
18.07.2014 в 09:41...
//_- ох, простите за столь глупый вопрос. В такой час котелок вообще не варит.
Я обобщу на будущее: форматирование родителя передается потомку, если не прописано другого? Никакого конфликта не происходит? И больший приоритет имеет ближайший тег, верно?
Ноооо (уже в порядке интереса) у меня возник другой.
Есть таблица фиксированной ширины, отцентрированая по левому краю. В одной из ячеек таблицы есть тег MORE, под тегом некий контент. Какими ресурсами можно (и можно ли?) разместить по центру страницы контент МОRE так, чтобы таблица растягивалась вслед за контентом? Всякое центрирование происходит, логично, относительно краев ячейки, а positions: ablosute лишь позволяет контенту выехать за пределы таблицы, так и оставив ее нетронутой.
-
-
18.07.2014 в 22:07По разному: какие-то свойства наследуются, а какие-то нет. Например, цвет текста родителя будет наследован потомками, а настройки границ – уже нет. Запомнить поможет либо опыт/зубрёжка, либо табличка свойств под рукой, либо метод научного тыка.
> И больший приоритет имеет ближайший тег, верно?
Нет. В CSS есть чёткая система приоритетов (даже в названии есть слово "каскадность" же), которая основывается на двух принципах: порядок применения и вес селекторов.
По первому всё очевидно – при одинаковых весах применяется в итоге тот стиль, который был применён ниже всех в коде.
По второму, если кратко, то в селекторах айдишники весомее классов, классы весомее тегов, два класса (или класс и тег) весомее, чем один класс, а important весомее всех. Всё это легко рассчитывается на основе числовых коэффициентов от 0 до 8, рекомендую хотя бы просто прочесть вот эту статью.
[зануда]
> тег MORE
Такого тега в html не существует. BB-код more на диарее заменяется простым "a" и работает с помощью js.
[/зануда]
> Какими ресурсами можно (и можно ли?) разместить по центру страницы контент МОRE так, чтобы таблица растягивалась вслед за контентом?
По умолчанию, так оно и работает в html: ячейка сама растягивается по ширине контента, а таблица тянется по ширине ячеек. Пример.