Колонки одинаковой высоты

[gesandte]

Имеем код

.column_block {
    width: 100%;
    overflow: hidden;
}

.column {
    border: 3px solid rgb(150,230,150);
    width: 30%;
    margin: 0 1% 0 1%;
    float: left;
}

    .column .radius_top, .column  .radius_top div,
    .column .radius_bottom, .column .radius_bottom div {
        background: url(../images/radius_column.png) no-repeat;
        height: 20px;
        display: block;
        position: relative;
    }

    .column .radius_top {
         top: -3px;
         left: -3px;
    }

    .column .radius_top div {
        background-position: 100% -20px;
        left: 6px;
    }

    .column .radius_bottom {
        background-position: 0% -60px;
        top: 3px;
        left: -3px;
    }

    .column .radius_bottom div {
        background-position: 100% -40px;
        left: 6px;
    }

<div class="column_block">
    <div class="column">
        <div class="radius_top"><div></div></div>
        <p>column 1</p>
        <div class="radius_bottom"><div></div></div>
    </div>

    <div class="column">
        <div class="radius_top"><div></div></div>
        <p>column 2<br /> column 2</p>
        <div class="radius_bottom"><div></div></div>
    </div>

    <div class="column">
        <div class="radius_top"><div></div></div>
        <p>column 3</p>
        <div class="radius_bottom"><div></div></div>
    </div>
</div>

При попытке зделать колонки одинаковой высоты:

.column {

border: 3px solid rgb(150,230,150);

width: 30%;

margin: 0 1% 0 1%;

padding-bottom: 10000px;

margin-bottom: -10000px;

float: left;

}

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

Спасибо за внимание.

Edited October 26, 2009 by gesandte

[SelenIT]

http://chikuyonok.ru/2009/06/float-columns/

[psywalker]

gesandte

Давай пиши задачу по правилам)) Скрин того, что хочешь получить, с подробным объяснением. Подготовь кстати картинки-углы и т. д. Если будет время, попробую решить, самому интересно

SelenIT

Спасибо за идею, будем изучать

Щас так глянул, вот это меня не порадовало совсем:

	.col-wrap1, .col-wrap2 {
				-moz-border-radius:20px;
				-webkit-border-radius:20px;
			}

Ну а как же Валидность, Опера, ИЕ?.. Нее, так дело не пойдёт, будем думать

Edited October 27, 2009 by psywalker

[gesandte]

Щас так глянул, вот это меня не порадовало совсем:

	.col-wrap1, .col-wrap2 {
				-moz-border-radius:20px;
				-webkit-border-radius:20px;
			}

Ну а как же Валидность, Опера, ИЕ?.. Нее, так дело не пойдёт, будем думать

дааа, штука это прикольная, пробывал как то ради интереса и никих заморочек не надо

[rash]

Ну а как же Валидность, Опера, ИЕ?.. Нее, так дело не пойдёт, будем думать

Опера и ИЕ - да, а валидность… что валидность? Хоть кто-нибудь сможет обосновать мне, зачем соблюдать валидность в стилях, особенно если вендорные префиксы и обработка ошибок определены в спецификации? Может тогда и я начну...

[s0rr0w]

gesandte

Давай пиши задачу по правилам)) Скрин того, что хочешь получить, с подробным объяснением. Подготовь кстати картинки-углы и т. д. Если будет время, попробую решить, самому интересно

SelenIT

Спасибо за идею, будем изучать

Щас так глянул, вот это меня не порадовало совсем:

	.col-wrap1, .col-wrap2 {
				-moz-border-radius:20px;
				-webkit-border-radius:20px;
			}

Ну а как же Валидность, Опера, ИЕ?.. Нее, так дело не пойдёт, будем думать

Валидно по новому стандарту. Опероманы и иешники будут отдыхать. Любишь браузер - люби и на прямоугольники смотреть.

[psywalker]

Опера и ИЕ - да, а валидность… что валидность? Хоть кто-нибудь сможет обосновать мне, зачем соблюдать валидность в стилях, особенно если вендорные префиксы и обработка ошибок определены в спецификации? Может тогда и я начну...

Ладно, хрен с ней, с валидностью, но задача - "Колонки одинаковой высоты с закруглёнными углами полный кросс" не решена и это факт!

Валидно по новому стандарту. Опероманы и иешники будут отдыхать. Любишь браузер - люби и на прямоугольники смотреть.

Ну прям так тоже нельзя, всё же задача есть, а значит и решение должно быть соответствовающее

[Great Rash]

На той страничке в комментах есть ссылка на еще одно интересное решение:

http://matthewjamestaylor.com/blog/equal-h...er-css-no-hacks

Обе ссылки уже у меня в избранном

Сейчас работаю над исправлением отсутствия border-radius в ИЕ с помощью скрипта или .htc (в общем тоже скрипт) и VML. Есть две проблемы которые пока не могу решить: как сделать резину и как заставить элемент <v:fill /> тайлить картинку только по ширине/высоте.

Если есть камрады, готовые помочь решить эту проблему, то велкам в личку.

Опера по прежнему идет лесом...

[gesandte]

немного криво, но смысл ясен.

Вот углы

[s0rr0w]

Ладно, хрен с ней, с валидностью, но задача - "Колонки одинаковой высоты с закруглёнными углами полный кросс" не решена и это факт!

Ну прям так тоже нельзя, всё же задача есть, а значит и решение должно быть соответствовающее

Решить данную задачу можно при помощи таблицы. Будет и полный кросс, и решение задачи.

[gesandte]

Есть такая идейка как, нижние скругления убираем, и растягиваем блок по высоте, который включает верхнее скругление и собственно часть с контентом. А же после того, как мы растянули колонки на одинаковую высоту, мы под ней размещаем, блок с нижним скруглением, соответственно расположив их так, чтобы они совпадали..... но как то не красиво это

Решить данную задачу можно при помощи таблицы. Будет и полный кросс, и решение задачи.

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

[Justnewone]

Есть такая идейка как, нижние скругления убираем, и растягиваем блок по высоте, который включает верхнее скругление и собственно часть с контентом. А же после того, как мы растянули колонки на одинаковую высоту, мы под ней размещаем, блок с нижним скруглением, соответственно расположив их так, чтобы они совпадали..... но как то не красиво это

Если плохо сойдутся звезды (а наверняка так и будет) поймать все уголки в IE6 будет крайне сложно. А скорее всего так и будет, если потянуть при этом окно в ширину и если эти блоки типа резиновые или обертка у них резиновая, то IE будет перебирать не по 1 а по 2 или даже по 3 пиксела.

Так что эту задачу с учетом IE, проверено, делать надо таблицей.

Edited October 27, 2009 by Justnewone

[psywalker]

Great Rash

http://matthewjamestaylor.com/blog/equal-h...er-css-no-hacks

А чёто я тут не нашёл комментов вообще)) Можешь дать ссылочку прям на пример

Сейчас работаю над исправлением отсутствия border-radius в ИЕ с помощью скрипта или .htc (в общем тоже скрипт) и VML. Есть две проблемы которые пока не могу решить: как сделать резину и как заставить элемент <v:fill /> тайлить картинку только по ширине/высоте.

Если есть камрады, готовые помочь решить эту проблему, то велкам в личку.

Опера по прежнему идет лесом...

Если бы я вообще понимал, что такое JS и VML, то возможно и помог-бы, но а так я конеш камрад ещё тот, но помочь не смогу

gesandte

Отлично, забрал всё, кстати скажи, а колонки фикс ширины или какой тогда?

В ближайшее время буду шаманить решение)))

s0rr0w

Решить данную задачу можно при помощи таблицы. Будет и полный кросс, и решение задачи.

Не интересно, нужно решение на Дивах 100%

[gesandte]

psywalker, все резиной, там код без растяжения вверху

[Great Rash]

Как-то форум неправильно отрезал ссылку видимо. Вот ссылка прямо на пример. Правда к скругленным углам это не имеет отношения, но тебе psywalker должно понравиться решение. Довольно элегантно.

http://matthewjamestaylor.com/blog/equal-h...ns-5-column.htm

[gesandte]

Если плохо сойдутся звезды (а наверняка так и будет) поймать все уголки в IE6 будет крайне сложно. А скорее всего так и будет, если потянуть при этом окно в ширину и если эти блоки типа резиновые или обертка у них резиновая, то IE будет перебирать не по 1 а по 2 или даже по 3 пиксела.

все же поробую щас, впринципе отступы везде будут одинаковый(по идее), так что уезжать не должно...

[psywalker]

Justnewone

Если плохо сойдутся звезды (а наверняка так и будет) поймать все уголки в IE6 будет крайне сложно. А скорее всего так и будет, если потянуть при этом окно в ширину и если эти блоки типа резиновые или обертка у них резиновая, то IE будет перебирать не по 1 а по 2 или даже по 3 пиксела.

Так что эту задачу с учетом IE, проверено, делать надо таблицей.

Я всё же попытаю счастье сделать на Дивах, чёж мы, не эксперты чтоли

Great Rash

Спасибо за пример, мне понравилось, позже разберу, щас нужно сообразить))

gesandte

А фон на странице какой будет?

Edited October 27, 2009 by psywalker

[SelenIT]

над исправлением отсутствия border-radius в ИЕ с помощью скрипта или .htc (в общем тоже скрипт) и VML.

У того же Сергея Чикуенка есть замечательная библиотечка rocon, где это уже решено. Я пробовал, мне нравится

[gesandte]

gesandte

А фон на странице какой будет?

все белое

[psywalker]

Цените, Чекуёнок отдыхает

http://psywalker.ru/Forum/Column_height/main.html

[Justnewone]

Цените, Чекуёнок отдыхает

http://psywalker.ru/Forum/Column_height/main.html

Это ФФ3.5, именно поэтому не люблю я дивы-блоки, неговоря про то что основной плюс таблицы в том, что она будет держать их всех одинаковой высоты. А твой приммер рафинированый и в жизни встретить крайне сложно.

[psywalker]

Странно, у меня в ФФ3.5 всё в порядке, может колёсико крутанёшь на деление?

я када кручу туда сюда, у меня также получается

Edited October 27, 2009 by psywalker

[mishka]

Цените, Чекуёнок отдыхает biggrin.gif

http://psywalker.ru/Forum/Column_height/main.html

Заполни колонки разным содержимым. Чтобы высота текста была разная.

[psywalker]

Заполни колонки разным содержимым. Чтобы высота текста была разная.

Ок, будем считать, что это был тест. Надо доделать, согласен! Идею считаю неплохой всёже Есть идея, дайте время

Edited October 27, 2009 by psywalker

[gesandte]

Цените, Чекуёнок отдыхает

http://psywalker.ru/Forum/Column_height/main.html

Да, отлично сделал

А вот он топорный и примитивный метод, о котором я думал выше

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>column</title>
<style type="text/css">

*{
    margin: 0;
    padding: 0;
}

p {
    padding: 0 20px 0 20px;
}

.block {
    width: 80%;
    margin: 0 auto;
    margin-top: 50px;
}

.column {
    width: 100%;
    overflow: hidden;
}

.column_top {
    border-top: 3px solid rgb(150,230,150);
    border-right: 3px solid rgb(150,230,150);
    border-left: 3px solid rgb(150,230,150);
    width: 30%;
    margin: 0 1% 0 1%;
    padding-bottom: 10000px;
    margin-bottom: -10000px;
    float: left;
}

.column_bottom {
    border-right: 3px solid rgb(150,230,150);
    border-bottom: 3px solid rgb(150,230,150);
    border-left: 3px solid rgb(150,230,150);
    width: 30%;
    margin: 0 1% 0 1%;
    float: left;
}

    .column .radius_top, .column  .radius_top div,
    .column .radius_bottom, .column .radius_bottom div {
        background: url(images/radius_column.png) no-repeat;
        height: 20px;
        display: block;
        position: relative;
    }

    .column .radius_top {
         top: -3px;
         left: -3px;
    }

    .column .radius_top div {
        background-position: 100% -20px;
        left: 6px;
    }

    .column .radius_bottom {
        background-position: 0% -60px;
        top: 3px;
        left: -3px;
    }

    .column .radius_bottom div {
        background-position: 100% -40px;
        left: 6px;
    }
</style>
</head>
<body>

<div class="block">

    <div class="column">
       <div class="column_top">
            <div class="radius_top"><div></div></div>
            <p>
                 Колонка 1
            </p>
       </div>

       <div class="column_top">
           <div class="radius_top"><div></div></div>
           <p>
	   Колонка 2 <br />
	   Топорный метод это, но работает вроде как....
            </p>
       </div>

       <div class="column_top">
           <div class="radius_top"><div></div></div>
           <p>
	    Колонка 3
           </p>
       </div>
    </div>

    <div class="column">
        <div class="column_bottom">
             <div class="radius_bottom"><div></div></div>
        </div>
        <div class="column_bottom">
            <div class="radius_bottom"><div></div></div>
        </div>
        <div class="column_bottom">
             <div class="radius_bottom"><div></div></div>
         </div>
    </div>
</div>			

</body>
</html>

С кодом psywalkera даже несравним полный хлам

проверен фф3.5 , опера 10, хром, осел 8......

под 6 осла не писал

[psywalker]

С кодом psywalkera даже несравним laugh.gif полный хлам

Нее, нихрена, медведь прав, у меня полное говно, надо думать дальше

блин, а жаль, хороший вариант был Значит пока Чекуёнок на коне

Edited October 27, 2009 by psywalker