Лента Каталог Файлы Форумы Услуги
ОсновноеRadiotalkПользовательское
Программирование
6   •   Посмотреть все темы

DIV problem..

 
1

6703
Андрей @ZloVeЩиЙ
Вот уже в который раз сталкиваюсь, при верстке дивами, с проблемой которая заключается в резиновости именно высоты...
Сообственно верстка блоками и построена на прижиманиях (float) проще говоря без неё никак.
При верстке полноценного сайта таких флоатов может быть от 3 и больше, именно тут и возникают проблемы, блоки которые состоят в других блоках начинают вылазить за их пределы - только в том случае когда высота резиновая, с .рх проблема нет.
Приходится выкручиватся, прописывая дополнительные блоки со своими класами и их описаниями, может есть выход из данной ситуации намного проще?

...
<div class='news'>

<div style='min-height: 80px; height: auto !important;'>
<div style='float: left; background-color: #000; width: 150px; height: 99px; color: #fff;'>#1</div>
<div style=' background-color: #ccc;'>#2</div>
</div>

</div>
Если бы был один блок или несколько без float`ов высота блока бы тянулась не вылазя за его основные границы, если же задать парочку с float будь то в лево или право, блоки начинают вылазить за пределы...
Сообственно все на скрине..

6703
Андрей @ZloVeЩиЙ
...

1080
Денис @RuleZ-DM
ZloVeЩиЙ пишет:

...

попробуй прописать overflow: auto;


<div class='news'>

<div style='min-height: 80px; height: auto !important; overflow: auto;'>
<div style='float: left; background-color: #000; width: 150px; height: 99px; color: #fff;'>#1</div>
<div style=' background-color: #ccc;'>#2</div>
</div>

</div>

Отредактировано RuleZ-DM - 25.08.2010
6703
Андрей @ZloVeЩиЙ
RuleZ-DM пишет:

ZloVeЩиЙ пишет:

...

попробуй прописать overflow: auto;


<div class='news'>

<div style='min-height: 80px; height: auto !important; overflow: auto;'>
<div style='float: left; background-color: #000; width: 150px; height: 99px; color: #fff;'>#1</div>
<div style=' background-color: #ccc;'>#2</div>
</div>

</div>

иди я тебя расцелую 😁

1080
Денис @RuleZ-DM
ZloVeЩиЙ пишет:

RuleZ-DM пишет:

ZloVeЩиЙ пишет:

...

попробуй прописать overflow: auto;


<div class='news'>

<div style='min-height: 80px; height: auto !important; overflow: auto;'>
<div style='float: left; background-color: #000; width: 150px; height: 99px; color: #fff;'>#1</div>
<div style=' background-color: #ccc;'>#2</div>
</div>

</div>

иди я тебя расцелую 😁

ой ну я не знаю, это всё так неожиданно, что люди то добрые подумают то... ой-ой-ой 🤣

6703
Андрей @ZloVeЩиЙ
Когда прописываешь прозрачность для блока
opacity: 0.2;
содержимое этого блока становится тоже полупрозрачным, как можно избавится от прозрачности содержимого?
Пробовал создать еще один блок внутри и ему задать opacity: 1.0; но даже с !important все равно текст, содержимое в моем случае, остается полупрозраным.
Гугл помог скриптом, но и он не идеален, в некоторых браузерах не коректно отображается...
Вообщем надеюсь на Вашу помощь (:

Отредактировано ZloVeЩиЙ - 15.09.2010
1897
Александр @I-believe
ZloVeЩиЙ пишет:

Когда прописываешь прозрачность для блока
opacity: 0.2;
содержимое этого блока становится тоже полупрозрачным, как можно избавится от прозрачности содержимого?
Пробовал создать еще один блок внутри и ему задать opacity: 1.0; но даже с !important все равно текст, содержимое в моем случае, остается полупрозраным.
Гугл помог скриптом, но и он не идеален, в некоторых браузерах не коректно отображается...
Вообщем надеюсь на Вашу помощь (:

Тоже интересно услышать ответ на этот вопрос.

6703
Андрей @ZloVeЩиЙ
I-believe пишет:

ZloVeЩиЙ пишет:

Когда прописываешь прозрачность для блока
opacity: 0.2;
содержимое этого блока становится тоже полупрозрачным, как можно избавится от прозрачности содержимого?
Пробовал создать еще один блок внутри и ему задать opacity: 1.0; но даже с !important все равно текст, содержимое в моем случае, остается полупрозраным.
Гугл помог скриптом, но и он не идеален, в некоторых браузерах не коректно отображается...
Вообщем надеюсь на Вашу помощь (:

Тоже интересно услышать ответ на этот вопрос.

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

Отредактировано ZloVeЩиЙ - 15.09.2010
6703
Андрей @ZloVeЩиЙ
I-believe, если еще интересует, как вариант:
**********
но не идеален, все таки решил бекграунд полупрозраным изображением задать(:

6703
Андрей @ZloVeЩиЙ
Опять я со своими "тараканами" (:
Есть два блока:
1. Основной с содержимым. (картинка)
2. Второстепенный с информацией. (текст - 111)
Нужно второй блок наложить на первый... на первое усмотрение ничего сложного, взять то же позиционирование position: relative; bottom: npx; - готово.
Но данный способ имеет свой недочет, второй блок накладывается на первый но оставляет вместо себя пустое место которое равно самому позиционированию:
-->


Второй способ обычное позиционирование margin`ами marrgin-top: -npx; отличный вариант для ИЕ8 в мозиле и опере накладывается только содержимое, а вот например бекгрануд упускается или, предполагаю, уходит под первый блок.

Вообщем надеюсь на вашу помощь, товарищи вэб-мастера (:

Отредактировано ZloVeЩиЙ - 12.10.2010