Как отрегулировать ширину 3х ячеек в таблице?

Semreg · September 10, 2009

У меня 3и ячейки в таблице фиксированной ширины... Не могу млин грамотно их выровнять. Ширина таблицы 400 пикселей. Вот как должно быть:

|<—-ячейка1 (ширина зависит от длины текста в ячейке) —->|<—-ячейка2 (заполняет оставшуюся область таблицы) —->|<—-ячейка3 (фиксировано 100 пик) —->|

Подскажите, как корректно добиться поставленной задачи?

psywalker · September 10, 2009

попробуй второй ячейке поставить ширину 100%

Semreg · September 10, 2009

Спасибо. Удалось.

Пришлось правда добавить первой ячейке атрибут nowrap, т.к. иначе переносил слова на следующие строки.

А насколько вообще такая форма таблицы коректна?

<tr>

<td>

<tr>

<td bgcolor="#333333" width="" align="left" nowrap>Ячейка1 (текст)</td>

</tr>

</table>

</td>

<td width="100" bgcolor="#dddddd" valign="center" align="left">Ячейка3</td>

</tr>

</table>

psywalker · September 10, 2009

Спасибо. Удалось.
Пришлось правда добавить первой ячейке атрибут nowrap, т.к. иначе переносил слова на следующие строки.
А насколько вообще такая форма таблицы коректна?
<table width="400" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<table border="0" width="300"cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#333333" width="" align="left" nowrap>Ячейка1 (текст)</td>
<td bgcolor="#777777" width="100%" align="left">132</td>
</tr>
</table>
</td>
<td width="100" bgcolor="#dddddd" valign="center" align="left">Ячейка3</td>
</tr>
</table>

Вот то что ты делаешь, давно уже некорректно, так как такую конструкцию давно уже пора делать блочной, а у тебя ещё табличная гадость 2000 года! Ты посмотри на эти атрибуты: "bgcolor="#777777"" - это же 1999 год, CSS уже давно доказал своё превосходство, неужели самому не хочется познать этот кайф?

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

Semreg · September 10, 2009

СSS я потихоньку изучаю.

В настоящий момент шапку сайта верстаю, чтоб ее потом через SSI или PHP инклудить.

Хорошо буду учиться на дивах.

Я ток пока не понял, чем они лучше таблиц, но сейчас буду изучать.

Ты не пропадай )

Проверишь мое домашнее задание.

psywalker · September 10, 2009

СSS я потихоньку изучаю.
В настоящий момент шапку сайта верстаю, чтоб ее потом через SSI или PHP инклудить.
Хорошо буду учиться на дивах.
Я ток пока не понял, чем они лучше таблиц, но сейчас буду изучать.
Ты не пропадай )
Проверишь мое домашнее задание.

Обязательно проверю!

Semreg · September 11, 2009

Удалось решить поставленную задачу с помощью дивов.

psywalker, появишься - проверь домашку!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<style type="text/css">

#container-big, #container-small, #left-col, #center-col, #right-col {
  color: white;
}

#container-big {
  width: 400px;
  background: #555555;
}

#container-small {
  width: 300px;
  float: left; 
  background: #444444;
}

#left-col {
  float: left; 
  background: #777777; 
}

#center-col {
  background: #222222;
}

#right-col {
  width: 100px; 
  float: right; 
  background: #999999;
}

</style>

</head>

<body bgcolor="#FFFFFF">

  <div id="container-big">
	<div id="container-small">
	  <div id="left-col">1й фрагмент</div>
	  <div id="center-col">2й фрагмент</div>
	</div>
	<div id="right-col">3й фрагмент</div>
  </div>

</body>
</html>

Тут есть один "косяк": в случае когда, содержимое центральной ячейки (2-й фрагмент) превышает свободную область в ячейке - она начинает обтекать 1й (левый) фрагмент. Задачу можно было бы решить с помощью 3х дивов, но в этом случае центральный фрагмент обтекал бы оба других.

Есть какой то другой способ решения подобной задачи или нет? И вообще правильно ли я ее решил?

Edited September 11, 2009 by Semreg

psywalker · September 11, 2009

Удалось решить поставленную задачу с помощью дивов.
psywalker, появишься - проверь домашку!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<style type="text/css">

#container-big, #container-small, #left-col, #center-col, #right-col {
  color: white;
}

#container-big {
  width: 400px;
  background: #555555;
}

#container-small {
  width: 300px;
  float: left; 
  background: #444444;
}

#left-col {
  float: left; 
  background: #777777; 
}

#center-col {
  background: #222222;
}

#right-col {
  width: 100px; 
  float: right; 
  background: #999999;
}

</style>

</head>

<body bgcolor="#FFFFFF">

  <div id="container-big">
	<div id="container-small">
	  <div id="left-col">1й фрагмент</div>
	  <div id="center-col">2й фрагмент</div>
	</div>
	<div id="right-col">3й фрагмент</div>
  </div>

</body>
</html>
Тут есть один "косяк": в случае когда, содержимое центральной ячейки (2-й фрагмент) превышает свободную область в ячейке - она начинает обтекать 1й (левый) фрагмент. Задачу можно было бы решить с помощью 3х дивов, но в этом случае центральный фрагмент обтекал бы оба других.
Есть какой то другой способ решения подобной задачи или нет? И вообще правильно ли я ее решил?

Так, молодец, вот это уже другое дело, во первых что-бы убрать твой косяк, нужно на контейнер #center-col повесить overflow: hidden;, а во вторых теперь задача усложняется! Подведём итоги и получаем новое Д/З

Итог:

1) Вот эти атрибуты мы больше не пишем, просто забываем о них и если рука к ним потянется, бьём по руке! bgcolor="#FFFFFF"

2) Стараемся не назначать блокам ID, а пользуемся классами

3) Много лишних элементов, стараемся уменьшить их количество до 3-х.

Задача:

1) Сделать такую же задачу, но использовав при этом максимум 4 элемента "div" (так как мало опыта)

2) Делаем резиновую конструкцию, тоесть что-бы крайние колонки были по краям и фиксированного размера(допустим 300пк), а середина что-бы тянулась

3) Обзываем блоки классами, а не идентификаторами

Офигенная подсказка:

Решение есть!

Edited September 11, 2009 by psywalker

Semreg · September 11, 2009

Как ты заказывал.

3-и дива:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<style type="text/css">

.container {
  width: 400px;
  background: #555555;
}

.left-col {
  float: left;
  background: #777777;
}

.right-col {
  width: 100px;
  float: right;
  background: #999999;
}

.container, .left-col, .right-col {
  color: white;
}

</style>

</head>

<body>

  <div class="container">
	<div class="left-col">1й фраг.</div>
	<div class="right-col">3й фраг.</div>2й фраг.
  </div>

</body>
</html>

1) Вот эти атрибуты мы больше не пишем, просто забываем о них и если рука к ним потянется, бьём по руке! bgcolor="#FFFFFF"

Ты имеешь ввиду, что bgcolor для body нужно выносить в css или тебя смутило наличие background: #999999 в css?

что-бы убрать твой косяк, нужно на контейнер #center-col повесить overflow: hidden;

Добавил так, как ты сказал, но не работает!

Если текст во 2й ячейке не умещается в 1у строку и начинает переходить во вторую строку - то он начинает обтекать 1ю ячейку.

Кстати так же выглядит и ситуация с моим новым кодом на 3х дивах: если текста во 2й ячейке мало - то все в норме, если много - то косяк.

2) Делаем резиновую конструкцию, тоесть что-бы крайние колонки были по краям и фиксированного размера(допустим 300пк), а середина что-бы тянулась

Крайние блоки фиксированного размера - не трудно

Сложность заключается в том, что размер 2го блока зависит в том числе от размера 1го блога (от количества в нем текста).

Edited September 11, 2009 by Semreg

psywalker · September 11, 2009

1)

1) Вот эти атрибуты мы больше не пишем, просто забываем о них и если рука к ним потянется, бьём по руке! bgcolor="#FFFFFF"
Ты имеешь ввиду, что bgcolor для body нужно выносить в css или тебя смутило наличие background: #999999 в css?

Я имею ввиду именно bgcolor для body и прочие атрибуты html, которые уже пора заменить на стили CSS background: #999999 - это правильно!

2)

Добавил так, как ты сказал, но не работает! sad.gif
Если текст во 2й ячейке не умещается в 1у строку и начинает переходить во вторую строку - то он начинает обтекать 1ю ячейку.
Кстати так же выглядит и ситуация с моим новым кодом на 3х дивах: если текста во 2й ячейке мало - то все в норме, если много - то косяк.

Так, в первом твоём примере у меня лично работало, я проверял, а вот во втором уже дело в неправильном подходе и я просил сделать резину, а не фикс! Тоесть на всю ширину экрана!

3)

Крайние блоки фиксированного размера - не трудно biggrin.gif
Сложность заключается в том, что размер 2го блока зависит в том числе от размера 1го блога (от количества в нем текста).

Говорю, у тебя неправильный подход к делу, выйди, подумай ещё, есть решение, и оно работает, думай!

Semreg · September 11, 2009

Проверь 2й пример на всю ширину браузера =)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<style type="text/css">

.container {
  width: auto;  
  background: #555555;
}

.left-col {
  width: 200px;
  float: left;
  background: #777777;
}

.center-col {
  margin-left: 200px;
  margin-right: 200px;
  background: #444444;
}

.right-col {
  width: 200px;
  float: right;
  background: #999999;
}

.container, .left-col, .center-col, .right-col {
  color: white;
}

</style>

</head>

<body>

  <div class="container">
	<div class="left-col">1й фраг.</div>
	<div class="right-col">3й фраг.</div>
	<div class="center-col">2й фраг.</div>
  </div>

</body>
</html>

Так, в первом твоём примере у меня лично работало, я проверял, а вот во втором уже дело в неправильном подходе и я просил сделать резину, а не фикс! Тоесть на всю ширину экрана!

В файрфоксе 1й пример работает корректно, в ие6 - косячит

Edited September 11, 2009 by Semreg

psywalker · September 11, 2009

Проверь 2й пример на всю ширину браузера =)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<style type="text/css">

.container {
  width: auto;  
  background: #555555;
}

.left-col {
  width: 200px;
  float: left;
  background: #777777;
}

.center-col {
  margin-left: 200px;
  margin-right: 200px;
  background: #444444;
}

.right-col {
  width: 200px;
  float: right;
  background: #999999;
}

.container, .left-col, .center-col, .right-col {
  color: white;
}

</style>

</head>

<body>

  <div class="container">
	<div class="left-col">1й фраг.</div>
	<div class="right-col">3й фраг.</div>
	<div class="center-col">2й фраг.</div>
  </div>

</body>
</html>

В файрфоксе 1й пример работает корректно, в ие6 - косячит

Воо, вот это уже лучше, несколько нюансов:

1) width: auto; у главного контейнера лишнее, да и он сам необязателен

2) Учись группировать и сокращать свойства, что-бы не писать лишнего кода, например у тебя можно было сделать так:

.left-col,

.right-col { width: 200px; float: left; background: #999;}

.right-col { float: right; }

3) Всегда выноси все стили в отдельный файл лист, специально предназначенный для них

4) Старайся соблюдать вложенность, тоесть делай семантически правильный код, в принципе у тебя похожая ситуация, молодец!

5) А вот тебе от меня пример, поучись на нём делать как нужно и сам сделай из него конфетку

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<style type="text/css">
body{ min-width: 750px; margin: 0;}
 .l,.r { width: 300px; background: red; }
 .l { float: left;}
 .r { float: right;}
 .content { overflow: hidden; background: #CF3; zoom:1; /* для ИЕ6 */ }
</style>

</head>

<body>
<div class="l">LEFT</div>
<div class="r">RIGHT</div>
<div class="content">
Добавил так, как ты сказал, но не работает! sad.gif Если текст во 2й ячейке не умещается в 1у строку и начинает переходить во вторую строку - то он начинает обтекать 1ю ячейку. Кстати так же выглядит и ситуация с моим новым кодом на 3х дивах: если текста во 2й ячейке мало - то все в норме, если много - то косяк.
</div>


</body>
</html>

Итог:

1) Мы подвязали со старыми атрибутами и оформлением в html, и научились вынасить его в CSS, как и должно быть

2) Мы отбросили таблицы, поняв, что это вчерашний день и научились пользоваться слоями

3) Мы научились делать трёхколоночный макет используя наименьшее количество элементов

4) На это нам понадобился один день, а значит если углубиться в эту тему и посвятить ей например год, можно стать профи в прямом смысле и верстать любые вещи с пол пинка

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

Edited September 11, 2009 by psywalker

Semreg · September 11, 2009

Пасибо, за уделенное время и консультацию!

Вопросы обязательно появятся )

Буду учиться и переодически что-нибудь спрашивать.

Semreg · September 11, 2009

Как однако прикольно верстать дивами =)

Побежал за билетом в Вилларибо...

psywalker · September 11, 2009

Semreg

1)

Пасибо, за уделенное время и консультацию!
Вопросы обязательно появятся )
Буду учиться и переодически что-нибудь спрашивать.

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

2)

Как однако прикольно верстать дивами =)
Побежал за билетом в Вилларибо...

И самое главное, что ты это ещё не осознал в полной мере, а когда поймёшь это на 100%, то тебя сами позовут в Вилларибо

Semreg · September 12, 2009

Появился вопрос:

Для верстки шапки использовал следующую конструкцию:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<style type="text/css">

.header, .content { position: relative; width: 900px; height: 300px; background: red; }
.content { height: 400px; background: orange; }
.header-part-1, .header-part-2, .header-part-3 { position: absolute; width: 100px; background: #CF3; }
.header-part-1 { height: 100px; left: 10px; top: 10px; }
.header-part-2 { height: 150px; left: 310px; top: 50px; }
.header-part-3 { height: 200px; left: 610px; top: 90px; }

</style>

</head>

<body>

<div align="center">
  <div class="header">
	<div class="header-part-1">Врезка 1</div>
	<div class="header-part-2">Врезка 2</div>
	<div class="header-part-3">Врезка 3</div>
  </div>
  <div class="content">Контент</div>
</div>

</body>
</html>

Набросал схематично. У меня код немного другой, но смысл передал.

Первоначально планировалось, что высота 2й врезки будет фиксированной, но в настоящий момент хотелось бы, чтобы высота 2й врезки зависела от объема информации в ней, т.е. хочется убрать height: 150px;

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

Если я убираю из кода высоту блока .header - то он полностью пропадает с экрана и все находящиеся в нем врезки не видны.

Спасите, помогите... :rolleyes:

Как заставить блоки вести себя нужным образом?

psywalker · September 12, 2009

Всё правильно, у тебя внутренние блоки абсолютно позиционированные, поэтому нужно полюбому задавать высоту родителя. Делай на float внутренние, или сделай сначала у главного блока, что-бы он бесконечно тянулся вниз, тогда его внутренние блоки будут всегда видны :rolleyes:

Semreg · September 12, 2009

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

Попробую сделать чтобы бесконечно тянулся вниз.

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

Edited September 12, 2009 by Semreg

psywalker · September 12, 2009

Попробую сделать чтобы бесконечно тянулся вниз.
В этом случает он перестанет тянуться в случае окончания длины вставленных блоков или нет?

Смотря, как надёжно сделаешь :rolleyes:

Semreg · September 14, 2009

psywalker, совета прошу :rolleyes:

Я планирую на всех страницах сайта с правой стороны сделать блок с новостями, а именно: публиковать там превьюшки последних 5-и новостей.

Дык вот такой вопрос как их лучше на каждую страницу сайта вставлять? Через php include, через ssi или как-то иначе? И еще вопрос в каком типе файлов эти новости хранить? В txt?

Searcher · September 14, 2009

Новости лучше хранить в базе данных на сервере, начинай с mySQL - самая распространенная и простая база.

А по верстке уже придумано много вариантов многоколоночной:

http://layouts.ironmyers.com/

http://www.dynamicdrive.com/style/layouts/category/C10/

http://www.code-sucks.com/css%20layouts/faux-css-layouts/

http://tjkdesign.com/articles/one_html_mar...css_layouts.asp

http://blog.html.it/layoutgala/

не изобретайте велосипед :rolleyes:

Semreg · September 14, 2009

Searcher, спасибо за совет!

Действительно в БД хранить будет удобно. И сортировать проще... В БД и буду сувать! :rolleyes:

По поводу верстки: шаблоны я эти рассматривал... Но для себя их приспособить не смог.

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

Поэтому местами приходится изобретать велосипед.

Опыта в верстке у меня мало, но есть усидчивость и трудолюбие.

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

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

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

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

psywalker · September 14, 2009

psywalker, совета прошу
Я планирую на всех страницах сайта с правой стороны сделать блок с новостями, а именно: публиковать там превьюшки последних 5-и новостей.
Дык вот такой вопрос как их лучше на каждую страницу сайта вставлять? Через php include, через ssi или как-то иначе? И еще вопрос в каком типе файлов эти новости хранить? В txt?

Вот тут друг я тебе уже не советчик, я сам тока CSS знаю, вёрстку в частности, поэтому если чё нужно по CSS, обращайся

BassEast · September 14, 2009

psywalker, совета прошу
Я планирую на всех страницах сайта с правой стороны сделать блок с новостями, а именно: публиковать там превьюшки последних 5-и новостей.
Дык вот такой вопрос как их лучше на каждую страницу сайта вставлять? Через php include, через ssi или как-то иначе? И еще вопрос в каком типе файлов эти новости хранить? В txt?

эмм.. странно, что вы о ssi говорите.

Может быть вам с помощью движка какого-нибудь это реализовать? К примеру Word Press... я не знаю, Drupal или Joomla?

Justnewone · September 14, 2009

Новости лучше хранить в базе данных на сервере, начинай с mySQL - самая распространенная и простая база.
А по верстке уже придумано много вариантов многоколоночной:
http://layouts.ironmyers.com/
http://www.dynamicdrive.com/style/layouts/category/C10/
http://www.code-sucks.com/css%20layouts/faux-css-layouts/
http://tjkdesign.com/articles/one_html_mar...css_layouts.asp
http://blog.html.it/layoutgala/
не изобретайте велосипед

Вам, милейший, пора в подпись ссылки размещать! )))

Semreg · September 15, 2009

эмм.. странно, что вы о ssi говорите.
Может быть вам с помощью движка какого-нибудь это реализовать? К примеру Word Press... я не знаю, Drupal или Joomla?

Я не вижу смысла в движке.

У меня каждая страница сайта индивидуальна. Поэтому верстать приходится и контентную область для большинства страниц.

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

Sign In

Как отрегулировать ширину 3х ячеек в таблице?

Question

Link to comment

Share on other sites

26 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