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

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}

Jamesson · February 25, 2010

А как сделать следующую конструкцию из трех блоков - левый (тянется в зависимости от ширины окна), центральный (фиксированная ширина), правый (тянется в зависимости от ширины окна) ?

Типа такой конструкции:

<div>

</div>

murr000 · April 30, 2010

здравствуйте.

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

сайт без использования div, только таблица.

<html>
<head>
<title>текст</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Slices (pract_sait.psd) -->
<table class="webstr" id="________01" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="2" class="top" width="950" height="196">
		<img class="logo" src="logo/logo.png" width="135" height="135" border="0">
			</td>
	</tr>
	<tr>
		<td colspan="2" class="nav" width="950" height="50">
		<A href="main.html" TARGET="glavn">Главная</A>
		<A href="rosatom.html" TARGET="glavn">РОСАТОМ</A>
		<A href="atomen.html" TARGET="glavn">текст</A>
		<A href="struct.html" TARGET="glavn">текст</A>

			</td>
	</tr>
	<tr>
		<td colspan="2" class="toptwo" width="950" height="34">
						</td>
	</tr>
	<tr width="950" height="670">
		<td colspan="1">
		<IFRAME SRC="MAIN.HTML" NAME="glavn" WIDTH="99%" height="700" FRAMEBORDER=NO></IFRAME>
		</td>
		<td width="25%" colspan="1">
		<img src="images/pract_sait_09.gif" width="234" height="51" alt="">
		<p class="info">текст</p>
		</td>
	</tr>
	<tr>
		<td colspan="2" class="copir" width="950" height="50">
			</td>
	</tr>
</table>
<!-- End Slices -->
</body>
</html>

body {margin:0px;
padding:0px;
font-family: Tahoma, Book Antiqua, Arial, Sans-serif;
}
p{
text-indent: 5%;
font-size: 14px;
font-family: Tahoma; 
text-align: justify;
padding-left: 10px;
padding-right: 5px;
}
h4{
padding-left: 10px;
font-family: Tahoma; 
}
li{
font-size: 14px;
font-family: Tahoma; 
text-align: justify;
padding-left: 65px;
padding-right: 5px;
}
a{
color:ffffff;
font-weight: bold;
font-family: Tahoma; 
font-size: 16px;
}
p.info{
text-indent: 3%;
padding-right: 11px;
padding-left: 1px;
text-align: justify;
font-size: 12px;
font-family: Tahoma, 
}
img.logo{
padding-top: 25px;
padding-left: 55px;
}
img.rosat{
padding-left: 10px;
padding-bottom: 5px;
padding-right: 10px;
float: left;
}
img.shem{
padding-left: 10px;
padding-right: 10px;
display: block;
margin-left: auto;
margin-right: auto;
}
body.glavn {
border-collapse: collapse;
background-color: #ffffff;}
html, body {
margin:0px;
padding:0px;
}
table.webstr {
border-collapse: collapse;
width: 100%;
height: 100%;
}
td {
border-collapse: collapse;
padding: 0px;
}
td.top {
background: url(images/pract_sait_01.gif);
width: 20%;
}
td.nav{
width: 5%;
padding-top: 15px;
padding-left: 15px;
background-image: url(images/pract_sait_022.gif);
}
td.toptwo {
width: 4%;
background-image: url(images/pract_sait_03.gif);
}
td.text {
width: 67%;
height: 100%;
}
td.copir{
width: 5%;
background-image: url(images/pract_sait_05.gif);
}
body, input, select, textarea {
background-color: #ffffff;
}
td, input, select, textarea {
font-family: Tahoma;
color: #000000;
vertical-align: top;
}

stars · April 30, 2010

Вам нужно было создать отдельную тему касаемо фона...

background-repeat http://www.htmlbook.ru/css/background-repeat.html

Adlaran · April 28, 2011

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

psywalker · April 28, 2011

Покажи скришноты того, как надо и того, как не надо.

klierik · April 28, 2011

Adlaran,

float: none;

Adlaran · April 29, 2011

Проблема: линия обтекается картинкой.

Если для линии устанавливаешь clear, то становится вот так:

т.к. для боковых колонок установлено обтекание

А нужно вот так:

Edited April 29, 2011 by Adlaran

psywalker · April 29, 2011

А почему так выходит? Линия идёт сразу за картинкой?

Давай ссылку.

sigma77 · April 29, 2011

Adlaran,

Попробуй делать не clear: both, a clear: left или блоку с картинкой overflow: hidden

Adlaran · May 4, 2011

Вот код.(только картинку надо вставить так где src="Sign.jpg")

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

		 <style type="text/css">
  body {
    font: 0.75em Arial-Regular, Helvetica, sans-serif; 
    background: #7592b7; 
    color: #363636; 
	line-height: 14px;
   }

   #container {
    width: 100%; 
    margin: 0 auto; 
    background: #7592b7; 
	height: 100%;
	min-width: 870px;

   }
   #header { 
    background:  #7995b9; 
	height: 166px;
   }
   #center {
    background: #FFF;
    margin: 0 176px 0 0px; 

   }
   #left {
	width: 179px; 
	padding: 0px 6px 6px 0px;
	float: left;
	z-index:1;

   }
   #right_now{
	margin: 0 0 0 186px;
	background: #FFF;
	padding: 5px;
	padding-right: 32px;
	padding-top: 1px;
	display:block;
		z-index: 1;

   }
   #right {
    width: 176px; 
	padding: 0px; 
    float: right; 
	background: #7592b7; 

   }

   #footer { 
    clear: both; 
    background: #666666;
   }
		* {
            margin: 0;
            padding: 0;
        }
  </style>



</head>



<body>

	<div id="container">

		<!-- —————— Верхняя часть ———————- -->
		<div id="header">
		Верх
		</div>
		<!-- —————— /Верхняя часть ———————- -->

		<!-- —————— Правый блок ———————- -->
		<div id="right">
			Право
			<ul>
				<li>2</li><li>2</li><li>2</li><li>2</li><li>2</li><li>2</li><li>2</li><li>2</li><li>2</li><li>2</li><li>2</li><li>2</li><li>2</li><li>2</li><li>2</li><li>2</li><li>2</li><li>2</li><li>2</li><li>2</li><li>2</li>

			</ul>
		</div> 
		<!-- —————— /Правый блок ———————- -->

		<div id="center"> 

			<div id="left">
				Лево
				<ul>
					<li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li>

				</ul>
			</div>

			<!-- —————— Центральный блок ———————- -->
			<div id="right_now" style="display: block; position: relative; ">
				<div style=""><img hspace="2" height="100" align="left" width="117" vspace="2" alt="cover" src="Sign.jpg" ></div> 1231231231231231231231 231231231231231231231 2312312312312312312312312312312312312312312312 3123123123123123123123123 123123123123123123123123123123 123123123123123123123123123123123 1231231231231231231231231 231231231231231231231 23123123123123123123123 12312312312312312312312 3123123123123123 123123123123123123123
				<hr style="margin-top: 27px; clear: both;">
			</div>
			<!-- —————— /Центральный блок ———————- -->

		<div style="clear: both;"></div>
		<div class="marg"></div>
		</div>
		<div id="footer">
		</div>
	</div>

</body>
</html>

Если ставлю clear по левой или правой стороне, то линия устанавливается по высоте соответственно левой или правой колонки. Если для изображения делаю блок и этому блоку ставлю overflow: hidden, то текст перестаёт обтекать изображение.

rushab · May 24, 2011

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

Картинка с широким экраном

Картинка с узким экраном

___

Спасибо buddah

Edited May 24, 2011 by rushab

buddah · May 24, 2011

Зачем заставляете вводить код и скачивать рисунки?

http://hostingkartinok.com/

mitya · July 5, 2011

Можно ли сделать три колонки с шириной в %, или в любом случае придется использовать средний блок, который будет с z-index.

где можно найти хороший пример 3 колонок с шириной в % ?

Kerny · August 19, 2011

Можно ли сделать три колонки с шириной в %, или в любом случае придется использовать средний блок, который будет с z-index.
где можно найти хороший пример 3 колонок с шириной в % ?

Сегодня подробно описал у себя в блоге.

Edited August 19, 2011 by Kerny

Сергей Шолохов · October 5, 2011

http://divhack.com/node/18

Резиновая вёрстка div 3 колонки.

Левая и правая фиксированные, центральная растягивающаяся.

plintus · November 17, 2011

Кто здесь может привести пример резинового сайта на шаблоне http://www.ftemplate.ru/Templa/templatemo_103_guitar.zip

Olekh · December 17, 2011

Не получается сделать резиновый шаблон, на примере - http://www.medtechnika.com.ua/

Создал отдельную тему.

Edited December 17, 2011 by Olekh

Омск · January 28, 2012

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

Вот тут, хочу сделать, чтобы на блоке wrapper были блоки header, left, right. Поместил их туда, сделал левый блок длиннее и он вышел за границы блока wrapper. Как сделать, чтобы wrapper растягивался вместе с этими колонками. Или сразу его на всю страницу сделать?

И вообще, правильно я делаю макет?

Kerny · February 25, 2012

Омск - дайте html, ваша ссылка не грузится

deadhummer · March 25, 2012

Не знаю... В данном случае проще было сделать все через таблицу, поставить ее посередине документа и указать ей ширину 800 пикс. А все остальное добавлять через ксс.

puz · April 2, 2012

Народ. А кто какими редакторами для CSS пользуется? Так чтоб вер. 3.0 поддерживал.

Может и ссылочку скачать дадите?

selevit · September 30, 2012

Можно использовать свойство display:table-сell для столбцов.

Выравнивание колонок с помощью display:table

Edited September 30, 2012 by selevit

SolRus · December 7, 2012

-

Edited December 18, 2012 by SolRus

Matveich · January 1, 2013

При меньших разрешениях правая часть (малоинформативная, но выдержанная в стиле страницы) просто обрезается без возникновения горизонтальной прокрутки. Обрезать, естественно, можно не только правую часть, но и любую другую. Главное, чтобы не обрезался текст.

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

Join the conversation

Обсуждения

Important Information