Jump to content
  • 0

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


maza
 Share

Question

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

таблица ,в ней 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}

Link to comment
Share on other sites

  • Answers 74
  • Created
  • Last Reply

Top Posters For This Question

Recommended Posts

  • 0

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

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

<div>

<div style="min-height; //height:500px; float:left"></div>

<div style="width:1000px; min-height; //height:500px;;"></div>

<div style="min-height; //height:500px; float:right"></div>

</div>

<div style="clear:both"></div>

Link to comment
Share on other sites

  • 0

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

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

1077770m.jpg

сайт без использования 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;
}

Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

  • 0

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

2532475m.jpg

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

2535547m.jpg

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

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

2545787m.jpg

Edited by Adlaran
Link to comment
Share on other sites

  • 0

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

  Reveal hidden contents

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

Link to comment
Share on other sites

  • 0

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

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

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

___

Спасибо buddah

Edited by rushab
Link to comment
Share on other sites

  • 0

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

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

Link to comment
Share on other sites

  • 0
  On 7/5/2011 at 12:13 PM, mitya said:

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

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

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

Edited by Kerny
Link to comment
Share on other sites

  • 0

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

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

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

Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share


×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy