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

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}

strix · August 1, 2007

делаете левый и правый блок плавающими (используйте float и указывайте ширину).

Блок с тянущимся фоном делаете родительским.

Это только пример, в каждой ситуации может быть сво? решение.

Цветков Антон · August 1, 2007

Пример кода трехколоночного шаблона на div'ах. Так много тегов для того, чтобы минимальная ширина сайта была зафиксирована. Пока шаблон тестовый - писал сегодня... так что могут найтись баги...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 <title>Пример</title>
 <meta http-equiv="content-type" content="text/html; charset=windows-1251">
 <meta name="generator" content="HAPedit 3.1">
 <style type="text/css">
 *{padding: 0; margin: 0;}
 #page{
 width: 100%;
 min-width: 800px;
 }
 * html #container1 {
 padding-left: 800px;
 }
 * html #container3 {
 margin-left: -800px;
 position: relative;
 }
 * html #container1, * html #container3, * html #container4, * html #container2{
 height: 1px;
 }
 #main{
 float: left;
 width: 100%;
 }
 #content{margin: 0 200px;}
 #left{
 float: left;
 width: 200px;
 margin-left: -100%;
 }
 #right{
 float: left;
 width: 200px;
 margin-left: -200px;
 }
 #footer{
 clear: left;
 width: 100%;
 }
 </style>
</head>
<body>
 <div id="page">
 <div id="container1">
 <div id="container2">
 <div id="container3">
 <div id="container4">
 <div id="container5">
 <div id="header">Header</div>
 <div id="main">
 <div id="content">
 1
 </div>
 </div>
 <div id="left">
 2
 </div>
 <div id="right">
 3
 </div>
 <div id="footer">Footer</div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
</body>
</html>

maza · August 1, 2007

аааа, вс? вс? вс?.. просто вот так надо было сделать:

<div id="w02"><div id="w01"><img src="w01.jpg"></div><div id="w03"><img src="w03.jpg"></div></div>

yopopt · August 1, 2007

Пример кода трехколоночного шаблона на div'ах. Так много тегов для того, чтобы минимальная ширина сайта была зафиксирована. Пока шаблон тестовый - писал сегодня... так что могут найтись баги...

Зверствуете? Зачем же так много тегов? Неужели чтобы ублажить какого-нибудь динозавра типа ие5? Будьте проще.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 <title>Пример</title>
 <meta http-equiv="content-type" content="text/html; charset=windows-1251">
 <meta name="generator" content="HAPedit 3.1">
 <style type="text/css">
 *{padding: 0; margin: 0;}
 #page{
 width: 100%;
 min-width: 800px;
 }
 #main{
 width: 100%;
 }
 #content{margin: 0 200px;}
 #left{
 float: left;
 width: 200px;
 }
 #right{
 float: right;
 width: 200px;
 }
 #footer{
 clear: both;
 width: 100%;
 }
 </style>
</head>
<body>
 <div id="page">
 <div id="header">Header</div>
 <div id="main">
 <div id="right">
 3
 </div>
 <div id="left">
 2
 </div>
 <div id="content">
 1
 </div>
 </div>
 <div id="footer">Footer</div>
 </div>
</body>
</html>

Просто выбросил из Вашего кода вс? лишнее. Должно работать.

Цветков Антон · August 1, 2007

yopopt, вы, собственно, испортили сам смысл кода... Он предназначался для того, чтобы обеспечить одновременно резиновость и "несжимаемость" дизайна менее, чем на 800px (помним, что в IE6 не работает тег min-width)... Убрав те "лишние" блоки, вы убрали и саму фишку...

yopopt · August 1, 2007

Да, идею я не понял... Лично я не понимаю зачем городить такую гору кода из-за min-width для ие6. Проще(и лучше) использовать expression. Яваскрипт выключен у незначительного числа пользователей. А среди пользователей ие6 думаю таких вообще не найти.

В любом случае использовать такое большое количество блоков ни к чему.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 <title>Пример</title>
 <meta http-equiv="content-type" content="text/html; charset=windows-1251">
 <meta name="generator" content="HAPedit 3.1">
 <style type="text/css">
 *{padding: 0; margin: 0;}
 #page{
 width: 100%;
 min-width: 800px;
 }
 * html #page {
 width:auto;
 padding-left: 800px;
 }
 * html #container2 {
 margin-left: -800px;
 position: relative;
 }
 * html #page, * html #container1, * html #container2{
 height: 0;
 }
 #main{
 width: 100%;
 }
 #content{margin: 0 200px;}
 #left{
 float: left;
 width: 200px;
 }
 #right{
 float: right;
 width: 200px;
 }
 #footer{
 clear: both;
 width: 100%;
 }
 </style>
</head>
<body>
 <div id="page">
 <div id="container1">
 <div id="container2">
 <div id="header">Header</div>
 <div id="main">
 <div id="right">
 3
 </div>
 <div id="left">
 2
 </div>
 <div id="content">
 1
 </div>
 </div>
 <div id="footer">Footer</div>
 </div>
 </div>
 </div>
</body>
</html>

Цветков Антон · August 1, 2007

В любом случае использовать такое большое количество блоков ни к чему.

Ну, я ведь говорю - это был тестовый вариант...

Проще(и лучше) использовать expression.

Инфу можно?

yopopt · August 1, 2007

expression - это некоторый javascript в css который понимает ие. Поисковый запрос "expression min-width" даст кучу результатов...

А вот так может выглядеть expression для нашего примера:

#page{ (или body)
 width: expression((document.documentElement.clientWidth || document.body.clientWidth) < 800 ? "800px" : "auto");
}

Цветков Антон · August 1, 2007

А, ну так не интересно... Просто у меня почему-то возникла ассоциация с некоторым стандартным дополнением (expression - расширение), которое можно подключить к странице и все будет отображаться нормально... Типо как модули в программировании.

PS: JS не люблю... потому что не знаю его...

kiD · August 1, 2007

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 <title></title>
 <meta HTTP-EQUIV='Content-Type' CONTENT='text/html; CHARSET=utf-8' />
 <style type="text/css">
* html .minwidth {
 border-left: 770px solid #FFEDE3;
 position: relative; 
 float: left; 
 z-index: 1;
}
* html .container {
 margin-left: -770px;
 position: relative; 
 float: left; 
 z-index: 2; 
}
 </style>
</head>
<body>

<div style='width:99%; margin:0 auto; min-width:770px; border:1px solid #0F0;'>

<!??[if IE 6]>
<div class='minwidth'>
<div class='container'>
<![endif]??>

<div>контент</div>

<!??[if IE 6]>
</div>
</div>
<![endif]??>

</div>

</body>
</html>

Цветков Антон · August 1, 2007

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

Fu-tai · August 1, 2007

Блин! Ребят статей на данную тему как грязи на помойке! Последнее время даже не замрачиваясь пишется! Вы чего блин?

yopopt · August 1, 2007

Читать лень... Есть лень... Спать лень...

Цветков Антон · August 2, 2007

Fu-tai, интерес именно в самом процессе самостоятельного поиска решений...

maza · August 2, 2007

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

Вот случайно наткнулся на этот интереснейший материал, в тему! http://cssing.org.ua/2005/09/02/min-width-for-ie/

maza · August 2, 2007

лично я приш?л к выводу, что самый оптимальный вариант это такой:

* html body{
margin: 0 0 0 40px;
}
/*для всех броузеров что понимают min-width */
#min-width {
min-width:1000px;
}
/* для IE */
* html .minwidth {
border-left:1000px solid #fff;/*min-width*/
position:relative;
float:left;
z-index:1;
}
* html .container {
margin-left:-1000px; /*-min-width*/
position:relative;
float:left;
z-index:2;
}

<div id="min-width">
 <div class="minwidth">
 <div class="container">

Тут уже городишь вс? , что захочешь....

 </div>
 </div>
</div>

правда, если честно я не доконца понимаю как оно работает :|

почему маргин 0 0 0 40, почему именно 40, как это посчитали, что 40 нужно?

потом мы ставим границу размером в 1000 а потом на него накладываем слой с контентом?!

kiD · August 2, 2007

kiD, простой прямоугольник создать несложно...

а три прямоугольника создать сложно?)

maza, вы о чем?

Цветков Антон · August 2, 2007

а три прямоугольника создать сложно?)

Чтобы при этом два из них были фиксированными - уже сложнее...

kiD · August 2, 2007

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

понятие трехколоночный дизайн пришло из таблиц.

зачем делать трех колоночный дизайн слоями?

спортивный интерес?

maza · August 10, 2007

Вопрос знатокам

Почему, когда пользуешься методом обертывания двумя DIV'ами сжимается по вертикали вс? содержимое в них и КАК этого избежать?

простейший код, для примера:

html:

<body>

<!--[if IE 6]>
<div class='minwidth'>
<div class='container'>
<![endif]-->

<div id="backcenter">
<div id="backleft"><img src="1px.gif" width="1" height="1" alt=""></div>
<div id="w22"><div id="w11"><img src="11.jpg" alt=""></div><div id="w33"><img src="33.jpg" alt=""></div></div>
<div id="backright"><img src="1px.gif" width="1" height="1" alt=""></div>
<div id="w55"><div id="w44"><img src="44.jpg" alt=""></div><div id="w66"><img src="66.jpg" alt=""></div></div>
</div>

<!--[if IE 6]>
</div>
</div>
<![endif]-->

</body>

css:

body {
 min-width: 1000px;
 margin-top: 0px;
 margin-left: 0px;
 margin-right: 0px;
 margin-bottom: 0px;
}

* html .minwidth {
 border-left: 1000px solid #FFEDE3;
 position: relative; 
 float: left; 
 z-index: 1;

}
* html .container {
 margin-left: -960px;
 position: relative; 
 float: left; 
 z-index: 2; 
}

#w11 {
height: 220px;
}
#w22 {
background: url("22.jpg");
height: 100%;
float: left;
}
#w33 {
height: 226px;
}

#w11,#w22,#w33 {width: 33px; z-index: 3;}

#w44 {
height: 220px;
}
#w55 {
background: url("55.jpg");
height: 100%;
float: right;
}
#w66 {
height: 251px;
}

#w44,#w55,#w66 {width: 39px; z-index: 3;}

#backcenter {
 background-image: url("backinfo.jpg"); 
 height: 100%;
}

#backleft {
 background-color: #6e655c;
 float: left;
 width: 171px;
 height: 100%;
}

#backright {
 background-color: #6e655c;
 background-image: url('backright.jpg');
 background-position: top left;
 background-repeat: repeat-x;
 float: right;
 width: 76px;
 height: 100%;
}

или вот страница в нэте:

http://www.bulatnvr.com.ua/polyana/testing.html

Maslakoff · August 10, 2007

maza,

Зачем ты используеш проверку на IE (

maza · August 10, 2007

не знаю, где ты там ХАК наш?л, но

kiD · August 10, 2007

не знаю, где ты там ХАК наш?л, но

maza · August 11, 2007

вертикаль.... это свеху вниз... или с низу вверх?

Как понять??!! Вертикаль это направление под углом 90?.....

если ты хотел спросить, как сжимает содержимое, то можно посмотреть в пост ?21, в котором я и код приводил и ссылку на страницу. Сжатый контент, естественно с вверху.

Dimitry Wolotko · August 11, 2007

вертикаль.... это свеху вниз... или с низу вверх?
Как понять??!! Вертикаль это направление под углом 90?.....

90? к чему?

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