три колонки, минимальная ширина, резиновый дизайн

maza · August 1, 2007

не могу допЭтрать.. :/

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

объясните плиз, вот в таблицах вс? просто:

<table width="100%" height="27" cellpadding="0" cellspacing="0" border="1">
<tr>
<td width="528"><img src="w01.jpg"></td>
<td background="w02.jpg"><img src="1px.gif" width="1" height="1"></td>
<td width="418"><img src="w03.jpg"></td>
</tr>
</table>

как это в css сделать?? я блин вообще не шарю, второй день мучаю этот код, ничего не выходит:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Новая страница 1</title>
<style type="text/css">
#w01 {
width: 528px;
height: 27px;
float: left;
}
#w02 {
background: url("w02.jpg");
height: 27px;
}
#w03 {
width: 418px;
height: 27px;
float: right;
}
</style>
</head>

<body>

<div id="w02"><img src="1px.gif" width="1" height="1"></div>
<div id="w01"><img src="w01.jpg"></div>
<div id="w03"><img src="w03.jpg"></div>

</body>
</html>

{...перенесено в Слои kiD}

{...отредактировано kiD}

maza · August 11, 2007

к горизонтали )))

или нормаль по отношению к сфере нашей Земли

kiD · August 11, 2007

Dimitry Wolotko )))

автор, вы пишите

которые понимают min-width не сжималось по вертикали содержимое!

я хотел сделать акцент на "сжатии по вертикали"... наверное, идет речь о сжатии по ширине?... а ширина - это горизонталь.

не суть важно, но смешно получилось)

Dimitry Wolotko · August 11, 2007

kiD,

не суть важно, но смешно получилось)

+1 -)

maza · August 11, 2007

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

Речь идет о высоте, а не ширине. Ещ? раз повторюсь, два обв?ртывающих дива сжимает по высоте вс? содержимое. Вопрос ? какого хрена (извините за выражение) и как избежать этого сжатия?!

newbigmir · August 15, 2007

2 maza

хак

уберай нафиг из кода или прописывай для всех браузеров... у меня ie7, и хак не работает.

pl0x · August 18, 2007

Здравствуйте,

Есть такая необходимость сверстать сайт, с header, footer,а посередине три слоя, причем крайние привязаны к левому и правому краю, а средний(текстовый) идет "внахлест с ними" на пикселей 50.

Подскажите, как это можно сделать и можно ли ?

Таблицами сделал, но там соответственно без нахлестов =(

pl0x · August 18, 2007

Фон градиентом уходит из белого в прозрачный. Надо, чтобы текст слева и справа заезжал на эту полупрозрачность.

Да, нахлест - поверх.

shkoda · August 18, 2007

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

Так ник kiD'а лучше не писать, потому как не любит он этого. Может и обидиться))

maza · August 26, 2007

хак
уберай нафиг из кода или прописывай для всех браузеров... у меня ie7, и хак не работает.

2newbigmir, упс..

А как прописать для всех браузеров?

Так ник kiD'а лучше не писать, потому как не любит он этого. Может и обидиться))

2shkoda, хех.. буду знать!

maza · September 1, 2007

вот так я полагаю нужно указывать для всех интернет эксплореров...

Шурик · September 1, 2007

очень хороший пример трехколоночного резинового макета, еще и одинаковая высота столбцов. Без абсолютного позиционирования, без хаков, без java, работает во всех браузерах. http://www.pixy.cz/blogg/clanky/css-3col-layout/

maza · September 1, 2007

очень хороший, очень хороший.. Опять таки по высоте на 100% не развернут!!! (

p.s.: особенно без явы:

<script type="text/javascript">
// <![CDATA[

function toggleContent(name,n) {
 var i,t='',el = document.getElementById(name);
 if (!el.origCont) el.origCont = el.innerHTML;

 for (i=0;i<n;i++) t += el.origCont;
 el.innerHTML = t;
 }

// ]]>
</script>

Шурик · September 3, 2007

Maza, Вы просто не разобрались, там ява используется не для верстки, а для удобства проверки, как себя ведет макет при разном наполнении колонок. чтобы человек мог нажать кнопочку, и колоки сразу наполнились текстом. То есть для демонстрации.

maza · September 3, 2007

ой.. ну ладно, макет без явы - согласен. но вс?равно не развернут на 100% по высоте! я уже бьюсь головой об клавиатуру неделю!! остановился на

http://forum.htmlbook.ru/index.php?showtopic=4928 (12 пост)

Admin · September 3, 2007

киД

Срочняком это убери!!!

пиши всегда только kiD, а то он банит!

maza · September 3, 2007

шо это за монархия???))

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

p.s.: это соверешенно не справедливо за такое банить

p.p.s.: сори за оффтоп

Шурик · September 3, 2007

вот тут у меня интересная задачка.

надо сделать трехколоночный резиновый дизайн на дивах, не обязательно чтобы колонки были одной высоты, не обязательно чтобы он был до конца экрана.

Но что обязательно: две вещи. Внимание!

Условие 1. чтобы порядок вывода в коде совпадал с порядком на экране. То есть сначала выводился левая колонка, потом центр, потом правая. В приведенных выше макетах, как нетрудно видеть, этот порядок нарушен.

Условие 2. (поясняет цель условия 1.) Надо, чтобы исключением первой части кода, макет превращался в двухколоночный. То есть, просто вырезаем кусок кода в начале, и ничего не разрушается, а просто не выводится левая колонка, центальная занимает все место от левой до правой. Это условие не дает нам возможности в классах для центральной колонки прописывать левый маргин.

Нужно все это для динамического сайта, где некоторые страницы трехколоночные, а некоторые двухколоночные. Система работает так - если у нас есть содержание левой колонки, оно выводится, если нет, просто не обрабатывается файл, в котором есть участок html кода.

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

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

Обернуть центальный див еще в один див, для которого прописать левый маргин. И для трансформации трехколоночного в двухколоночный, вырезать кусок кода, где не только див этой левой колонки, но еще и начинается этот оберточный див. Думаю, все будет работать, но в двухколоночном варианте в коде останется закрывающий тег для дива, которого нет.

У кого какие будут мысли?

maza · September 4, 2007

Шурик, я думаю, что лучше всего, добавить в свою смаллу пару темплейтов

з.ы.: я уже давно это сделал и радуюсь жизни :-D

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

Шурик · September 4, 2007

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

Я нигде в сети не могу найти такого макета. Или порядок нарушен, или дизайн не резиновый.

maza · September 4, 2007

вот нормальный шаблон:

http://trifler.ru/blog/post_1184599195.html

+ есть возможность создать свои темплейты и запихнуть туда код, который должен исчезать.

вс?. дальше только моск осталось включить.

Шурик · September 4, 2007

шаблон я знаю, хороший, простой, рабочий. НО!

ОН НЕ РЕЗИНОВЫЙ. Его и ему подобные я и имел ввиду,когда писал "либо порядок нарушен, либо дизайн не резиновый".

Все попытки сделать у него резиновой центральную колонку, убрав значение ширины, приводят к тому, что правая колонка перепрыгивает вниз под левую при сужении окна. Но это еще полбеды, предположим мы задали ширину центральной колонки в процентах, и добились ширины экрана, при которой правая колонка встает на место, а чтобы она не прыгала ограничим минимальную ширину. Проблем нет. Но вот теперь при расширении экрана, поскольку ширина центральной колонки задана в процентах, растет и ширина вне этой центральной колонки, т.е. ползет пространство справа центральной колонки. То есть, надо опять же ограничивать расширение экрана, по сути мы возвращаемся к фиксированному дизайну. Может и можно что-то сделать, но я не смог.

При установки для правой колонки float-right, она прыгает вправо, но размещается все время в нижней части экрана, собственно до этого я и сам доходил в своих шаблонах. Поднять ее вверх не удалось.

Пробовал другие варианты - задание центральному диву маргинов, и т.д. - бесполезно, все разваливается, причем, как это водится, в осле и фаерфоксе разваливается по-разному.

maza · September 5, 2007

Блин Шурик!!!! ты меня просто убиваешь! нафига тебе менять последовательность?Да поменяй ты вывод своих темплейтов в ядре и капец! в корне системы ? header.php и footer.php ты открывал эти файлы???

создал например темплейт в котором левая колонка, темплейт в котором правая и темплейт в котором центральная.

дальше открываешь header.php а там уже выстраиваешь парсинг темплейтов как тебе душе угодно! сначала парсится левая колонка, потом центральная потом правая. ЗАЧЕМ ТЫ ИЗОБРЕТАЕШЬ ВЕЛОСИПЕД???

Шурик · September 5, 2007

Блин Шурик!!!! ты меня просто убиваешь! нафига тебе менять последовательность?Да поменяй ты вывод своих темплейтов в ядре и капец! в корне системы ? header.php и footer.php ты открывал эти файлы???
создал например темплейт в котором левая колонка, темплейт в котором правая и темплейт в котором центральная.
дальше открываешь header.php а там уже выстраиваешь парсинг темплейтов как тебе душе угодно! сначала парсится левая колонка, потом центральная потом правая. ЗАЧЕМ ТЫ ИЗОБРЕТАЕШЬ ВЕЛОСИПЕД???

Для меня все это не новость, но не хочется корежить ядро только ради возможности верстки слоями. А если кто-то захочет сверстать таблицами? Что иметь два ядра? Глупость. Это противоречит самому глобальному смыслу - разделения оформления и контента, разделение php и html+CSS. Данное решение было бы самым простым и я бы давно сделал так, пять минут работы. Но такое решение неверно идеологически. А при работе не над конкретным сайтом, а над системой, это очень важно.

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

maza · September 5, 2007

Ты вообще нифига не понимаешь...

Кто тебе говорил "кор?жить ядро"??!!

Парсинг темплейтов продумана под таблицы - это во первых.

Во вторых, тот парсинг и те темплейты, что есть в системе пытались сделать универсальным, для большинства дизайнов! Абсолютно для любого дизайна он не подойдет.

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

p.s.: если кто-то захочет ПЕРЕВЕРСТАТЬ дизайн, пусть не поленится и подправит 2 несчастных файла, там и школьник разберется

Шурик · October 2, 2007

вот, сделал сайт на слоях, и порядок вывода совпадает с порядком расположения на экране, как я хотел, и резиновый дизайн с минимальной шириной, и колонки одинаковой высоты.

www.ligastroy.com

Sign In

три колонки, минимальная ширина, резиновый дизайн

Question

Link to comment

Share on other sites

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Days

74 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information