В сотый раз об одном и том же...

[Aykroyd]

Scorched.dn.ua
Согласен, поддерживаю.

А вот это что:

function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt; }}

function changeImage(pic, overpic) {
if (document.images && (preloadFlag == true)) {
document[pic].src = overpic; }}

var preloadFlag = false;
function preloadImages() {
frame = new Array();
p = preloadImages.arguments;
if (document.images) {
for (i=0; i<p.length; i++) {
if (p[i].indexOf("#")!=0) { frame[i] = newImage(p[i]); }}
preloadFlag = true; }}

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

[Xepec]

После долгого затишья у меня новая проблема:

Проблема с флоатами и клеарами...

Есть: См. рисунок.

В большом диве находятся :
1 див float left
2 просто див
в нем
3. див float right
4. Несколько дивов float right
контент


А теперь проблема:
Как сделать, чтобы h1 (5) не обтекал дивы (3) и (4)?
Если поставить clear: both, то он почему-то влияет на обтекания дива(1), хотя он находится даалеко снаружи (на несколько дивов) от (5).

Надеюсь, что более-менее понятно объяснил .

[Aykroyd]

С этой проблемой столкнулся еще в январе. И тогда так и не нашел никакого решения. Случай, кстати, весьма распространенный... Будем собирать консилиум. ))

P.S. Осел, кстати, как ни странно, ведет себя в данной ситуации нормально (в совокупности с Holly Hack для контейнера с clear: both. Но это не является признаком "правильности"... )

[Zigzag]

блоку номер 4 overflow: hidden

[Aykroyd]

В общем, мы тут провели консилиум с Zigzag-ом, и почетная честь изложить результаты выпала мне... )

Ответ был рядом. Более того, мы таким решением довольно часто пользуемся. В общем, парадокс... смех, да и только... А причина того, что, например, я с января месяца не мог найти решение – просто зациклился на clear. А сказать по правде, я вообще этот clear терпеть ненавижу... Вечно приходится для IE его подхачивать (имеет место быть увеличенный отступ сверху). Кстати, этот глюк в седьмом IE тоже не пофиксили. Так что теперь приходится писать, например, не только:

div {clear: both;}
* html div {height: 1%;}

но и:

*:first-child+html div {height: 1%;}

Это было небольшое лирическое отступление в сторону свойства clear. А оно-то для решения Вашей задачи и не понадобится... Вместо него можно воспользоваться методом, при помощи которого мы обычно "растягиваем" контейнер, содержащий несколько колонок, до высоты самой длинной из них. А именно:

Для нормальных браузеров Ваши "четвертые" флоаты необходимо заключить в один общий div (контейнер) и назначить этому контейнеру свойство overflow: hidden;. Почему этот метод будет работать, писать не буду. Потому как [Только зарегистрированные пользователи могут видеть ссылки. ] [Только зарегистрированные пользователи могут видеть ссылки. ] [Только зарегистрированные пользователи могут видеть ссылки. ] [Только зарегистрированные пользователи могут видеть ссылки. ]. Просто не мог додуматься, что его можно применять не только в тех контекстах, о которых писал ранее, но и данном конкретном случае...

Для "некоторого" браузера решение с overflow: hidden; не подойдет. Он же ведь особенный... И посему для него можно сделать, например, вот так: задать общему div-у (контейнеру), который содержит Ваши "четвертые" флоаты, какую-нибудь ширину (width). Если это сделать не представляется возможным, есть и [Только зарегистрированные пользователи могут видеть ссылки. ]. В свое время данную ссылку любезно [Только зарегистрированные пользователи могут видеть ссылки. ] makeitso.

И никаких clear: both; для Вашего заголовка...

[Xepec]

Спасибо за ответ!

Вроде боле менее работает...

Только есть пару вопросов:

Что такое overflow: hidden на самом деле?
htmlbook пишет

Свойство overflow управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров.
...
hidden
Отображается только область внутри элемента, остальное будет обрезано.

А выглядит вроде не так .

И, на сколько я понял, для того, чтобы в ИЕ работало, нужно чтобы у объекта было св-во hasLayout
которое можно приобрести следующими образами:

display****inline-block * *Это не совсем подходит - в опере по-другому отображает.
height *any value * Это также как и *width 
float****left or right
position****absolute
width****any value
writing-mode****tb-rl
zoom****any value

Походу придется с высотой/шириной либо не валидностью страдать...

[Aykroyd]

Originally posted by Xepec@May 24 2007, 10:19
Что такое overflow: hidden на самом деле?
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
[Только зарегистрированные пользователи могут видеть ссылки. ]

Originally posted by Xepec@May 24 2007, 10:19
И, на сколько я понял, для того, чтобы в ИЕ работало, нужно чтобы у объекта было св-во hasLayout которое можно приобрести следующими образами
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Совершенно верно. На выбор... Проще всего width: 100%, если это представляется возможным в каждом конкретном случае...

[Aykroyd]

Originally posted by Xepec@May 24 2007, 10:19
Походу придется с высотой/шириной либо не валидностью страдать...
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Рекомендую заботиться о валидности (X)HTML. А о валидности CSS можно узнать много интересного вот [Только зарегистрированные пользователи могут видеть ссылки. ].

[Xepec]

С widht: 100% тоже не большая проблема - тогда все, что float left будет помещяться под float right. В принципе, хрен с ним, задам жесткую ширину - мне это не очень принципиально.
Еще раз Спасибо .

PS А почему ФФ подчеркивает кратинки, которые являются ссылками?
Для них отдельный стиль писать?

[Aykroyd]

Originally posted by Xepec@May 24 2007, 10:46
PS А почему ФФ подчеркивает кратинки, которые являются ссылками?
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Потому что хочет он так...

a {outline: none;}

[Рёга]

Originally posted by Aykroyd@Apr 13 2007, 07:53
[b]Четыре вложенных дива (углы) с абсолютным позиционированием внутри контейнера-прямоугольника.

Вот так ?

<html>
****<body>
 *<div style=&#39;width: 100%; height: 100%;&#39;>
 *****<div style=&#39;width: 85%; height: 400px; margin: 10%; background-color: Lime;&#39;>
 * *<div style=&#39;position: absolute; top: 0; left: 0; width: 25px; height: 25px; background-color: red;&#39;>#1</div>
 * *<div style=&#39;position: absolute; top: 0; right: 0; width: 25px; height: 25px; background-color: red;&#39;>#2</div>
 * *<div style=&#39;position: absolute; bottom: 0; left: 0; width: 25px; height: 25px; background-color: red;&#39;>#3</div>
 * *<div style=&#39;position: absolute; bottom: 0; right: 0; width: 25px; height: 25px; background-color: red;&#39;>#4</div>
 *****</div>
 *</div>
****</body>
</html>

А как сделать чтобы пронумерованные красные блоки располагались по углам в салатовом блоке ?

[Aykroyd]

Originally posted by Рёга@May 26 2007, 02:26
А как сделать чтобы пронумерованные красные блоки располагались по углам в салатовом блоке ?
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Задайте салатовому блоку position: relative;

P.S. Одновременное задание ширины (width: 85%) и боковых полей (margin: 10%) может не довести до добра...

[Рёга]

Originally posted by Aykroyd@May 25 2007, 21:31
[b]Задайте салатовому блоку position: relative;

Низкий поклон тебе баярин

[Xepec]

Блин... Два часа бьюсь.
Есть страничка:
В ней менюха + контент 2 колонки.
Менюха: float left
контент: padding: 0 0 0 200;
в контенте:
1я колонка: float left
2я колонк: float right

Теперь проблема:
ИЕ делает не понятный отступ слека от первой колонки и все едет.

вот код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
</head>
<style type="text/css">

body { 
****font-family : Verdana, Arial, sans-serif;
****font-size : 12px;
****padding : 0;
****margin : 0;
}

div#MainContainer
{margin:0px auto; width:990px}

#Middle { 
****text-align : left;
****border : 1px solid #aaaaaa;
****margin: 0px;
****padding:0px;
****position : relative;
****width : 990px;
}


#MenuLeft { 
****float : left;
****width : 185px;
****margin : 0;
****background : #f8f8f8;
****padding : 0 0 220px 10px;
****background : #f8f8f8 url(/test/img/menu_bg.gif) no-repeat right bottom;
****text-align : left;

}

.Content { 
position : relative;
width:790;
padding : 0 1px 90px 197px;

}

#News { 
****float : left;
****margin: 0px 10px 0px 10px;
****width : 375px;
****
}

#Interest { 
****float : right;
****width : 375px;
****margin: 0px 10px 0px 10px;****
****
}
</style>
<body>
<div id="MainContainer">

<div id="Middle">
****
****
****<div class="Content"> *
 *<div id="News">
 *****asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd 
 *</div>
 *<div id="Interest">****
 *****asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd asdasdasd 
 *</div>
****</div>********


</div>****


</div>****

</body>
</html>

Заранее спасибо !

[Aykroyd]

Вопросы на засыпку:

1. Как это Вы умудряетесь впихнуть блок шириной 992px (Middle) в блок шириной 990px (MainContainer)?
2. Какую смысловую нагрузку несет свойство text-align: left; для блоков Middle и MenuLeft?
3. Какую смысловую нагрузку несет свойство position : relative; для блоков Middle и Content? Просто так, чтобы было?
4. .Content {width:790;} 790 ЧЕГО? Килограмм или литров?


Рекомендации:

Одновременное задание элементу явной ширины и боковых отступов/рамок/полей может не довести до добра.

По сабжу:

display: inline; к блокам #News и #Interest. В противном случае IE6 имеет неприятное свойство удваивать поля у элементов с флоат...

[Xepec]

Алилуя!!! Заработало!!!
Спасибо!

[Aykroyd]

А куда оно денется? )

[Xepec]

Очередная проблема:
есть див1 в нем фаукс колонки...
во второй, есть блоки с overflow: hidden; (в них будут флоаты, которые потом не должны вылазить)
Проблема: ИЕ делает отступ слева у блоков которые напротив див2.
Что делать?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<body>
<style type="text/css">
.d1 {
****border : 1px solid #aaaaaa;
****position : relative;
****width : 288px;
}

.d2 {
****float : left;
****display: inline;
****width : 185px;
}
.d3 {
****position : relative;
****padding : 0 1px 90px 210px;
}
.d4 {
****width: 70px;
****border: 1px solid #ff0000;
}
</style>

<div class="d1">
****<div class="d2">
 *div div div div div div div div div div div div div div div div div div div div div div div div div div div div div div 
****</div>
****<div class="d3">
 *<div class="d4">
 *****div div div div div div div div div div div div div div div div div div div div div div div div div div div div div div
 *</div>
 *<div class="d4">
 *****div div div div div div div div div div div div div div div div div div div div div div div div div div div div div div 
 *</div>
 *<div class="d4">
 *****div div div div div div div div div div div div div div div div div div div div div div div div div div div div div div 
 *</div>
****</div>
</div>

</body>
</html>

[Aykroyd]

Добро пожаловать в наш клуб! ))
Я в свое время много об этом писал...

Padding для .d3 рекомендую заменить на margin... Вообще, отступы от флоатов рекомендую делать именно margin-ами...

А трехпиксельные отступы у флоатов в IE6 только вот так лечатся:

* html .d2 {margin-right: -3px;}
.d3 {margin: 0 1px 90px 210px; position: relative;}
* html .d3 {height: 1%; margin-left: 207px;}

[Xepec]

Спасибо!
А height: 1% зачем?