Jump to content
  • 0

Высота 3х колонок - 100% (проблема)

Chin

Asked by Chin,

 Share

Question

Chin Explorer

Chin

Posted
Posted

Грубо говоря надо дивами получить то, что получится такими вот табличками:

<html>
<head>
<style type="text/css">
html,body{
	padding: 0;
	margin: 0;
	height: 100%;
	width: 100%;
}
</style>
</head>

<body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center" height="100%">
  <tr>
	<td height="70" bgcolor="#FFFFCC"> </td>
  </tr>
  <tr>
	<td height="30" bgcolor="#FFFF99"> </td>
  </tr>
  <tr>
	<td valign="top">
	  <table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%">
		<tr>
		  <td bgcolor="#FFCCFF"> </td>
		  <td bgcolor="#FF99FF"> </td>
		  <td bgcolor="#FF66FF"> </td>
		</tr>
	  </table>
	</td>
  </tr>
</table>
</body>
</html>

Можно бы конечно просто фоновым гифом сделать было например визуальное разделение, но в сайдбарах контент будет внизу и вверху, а по середке будет "разрыв" :)

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

Как это сделать таблицами я знаю с завязанными глазами.

Как в дивах - хоть убей не догоняю :P

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

Это вообще возможно или как минимум комбинировать дивы с таблицами придется?

Link to comment
Share on other sites

17 answers to this question

Recommended Posts

  • 0
Vlad Explorer

Vlad

Posted
Posted

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

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

Макет что ты привел на слоях сверстать легко. Только если не цепляться за табличное представление. Во-первых, колонки не должны быть одной высоты, а должны зависеть от контента. Во-вторых, высота макета не должна занимать 100%, а должна варьироваться, опять же в зависимости от контента. Короче говоря, идеология различается. Если сумеешь выкинуть из головы старые представления, научишься верстать быстро. Нет - будешь подобно Дон Кихоту бороться с ветряными мельницами.

Link to comment
Share on other sites
  • 0
Chin Explorer

Chin

Posted
  • Author
Posted

1) Я ничего ничем заменять не хочу, я хочу решить конкретную задачу.

Стили у меня может и устаревшие, но вполне решающие задачу. Вертолет несомненно технологичнее телеги, но иногда для перемещения из пункта А в пункт Б вполне и телега подойдет.

2) Я как раз из макета и исхожу

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

4) при всем при этом высота самих блоков именно таки по макету должна визуально быть равной. Т.е. оба сайдбара и центр должны по высоте быть равны высоте максимального из них. Если центрблок 600 пикселей, а сайдбары по 200 - значит они должны тянуться вниз до 600 пикселей. Если центрблок 200 пикселей а сайдбары 600 - центрблок своим фоном должен тянуться до самого низа.

5) Высота макета именно что варьируется, но высота колонок должна быть равна между собой в случае "удлиннения" одной из них.

Решить задачу с неравной высотой колонок я могу, если что. Сэмплов в сети полно.

Так решение рабочее есть или мне пойти почитать Сервантеса де Сааведра?

Link to comment
Share on other sites
  • 0
Chin Explorer

Chin

Posted
  • Author
Posted
Имхо, лучше таблицами, зачем корячить страницу стилей для дивов, когда это можна сделать таблицей, и тремя строчками цсс.

Ну типа как

1) для ускорения рендеринга и отображения страницы, т.к. таблиц там еще много будет с большими вложенностями

2) контент в коде можно расположить ближе к началу страницы

Так есть решение вообще в природе? Таблицами я сам могу, за 2 минуты, дивами то с цсс это решается? Ну или хотя бы комбинацией дивов+цсс с таблицами :)

Link to comment
Share on other sites
  • 0
Victor Ananiev Explorer

Victor Ananiev

Posted
Posted

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

Link to comment
Share on other sites
  • 0
Chin Explorer

Chin

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

Угу.

Все это может и будет тянуться, это раз.

Колонки разноцветные, это два.

Фон подложить не катит (как мне кажется), т.к. в колонках есть прижатые к верху и к низу объекты, а "дырка" между ними плавает, это три.

Link to comment
Share on other sites
  • 0
Vlad Explorer

Vlad

Posted
Posted

Все решения на дивах отдают извращениями, так что лучше таблицами такую задачу решать. Например, одно из решений предполагает, что слева и справа от блока будет граница толщиной... 300px. Типа это и будет колонка. А текст в эту псевдоколонку добавляется через float.

Link to comment
Share on other sites
  • 0
Chin Explorer

Chin

Posted
  • Author
Posted

Чтобы понятнее было - это примерно должно выглядеть вот так

контент - контент - контент

контент - контент - контент

———-- - контент - контент

———-- - контент - ———--

———-- - контент - ———--

———-- - контент - ———--

контент - ———-- - ———--

контент - контент - контент

Ну т.е. я правильно понимаю что по нормальному без изврата эту задачу не решить? :)

Блин, я знал что у дивов ограничения есть по сравнению с таблицами некоторые, но чтобы вот такие примитивные вещи было нельзя сделать без мозгоклюйства и извращений :)

Link to comment
Share on other sites
  • 0
Chin Explorer

Chin

Posted
  • Author
Posted

Я не прошу меня переубеждать вроде как?

Я описал задачу и спрашиваю можно ли это решить дивами + цсс без таблиц и без JS.

Дивами таблицы я заменить хочу только в том случае, если ими можно решить поставленую задачу. Без JS.

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

Я вообще про дивы забуду тогда для данного макета.

Ты же пишешь то

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

то

Никто тебя здесь переубеждать не будет. Используй таблицы дальше.

так чем на твой взгляд мою задачу лучше решать то?

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

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

Если возможно, но не знаешь как - по моему так сказать тоже не проблема. Я вот пришел и говорю что чего-то не знаю, прошу помочь. Вроде не страшно говорить "я не знаю" :)

Если знаешь как - может уже просто дашь рецепт или ткнешь носом в пример решения?

Сижу пытаюсь понять - толи я невнятно формулирую вопросы, толи... на этом мысль заканчивается...

Link to comment
Share on other sites
  • 0
rus Explorer

rus

Posted
Posted
Я не прошу меня переубеждать вроде как?

Я описал задачу и спрашиваю можно ли это решить дивами + цсс без таблиц и без JS.

Дивами таблицы я заменить хочу только в том случае, если ими можно решить поставленую задачу. Без JS.

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

Я вообще про дивы забуду тогда для данного макета.

Ты же пишешь то

то

так чем на твой взгляд мою задачу лучше решать то?

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

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

Если возможно, но не знаешь как - по моему так сказать тоже не проблема. Я вот пришел и говорю что чего-то не знаю, прошу помочь. Вроде не страшно говорить "я не знаю" :)

Если знаешь как - может уже просто дашь рецепт или ткнешь носом в пример решения?

Сижу пытаюсь понять - толи я невнятно формулирую вопросы, толи... на этом мысль заканчивается...

Давненько не видел столь подробного и четкого отпора.

Влад, мне кажется автор в чем-то прав, если есть решения и ты его знаешь - стоит написать об этом?

2 АВТОР:

У вас кстати тоже отличаются примеры, то что вы таблицами привели код я посмотрел и то что вы здесь отобразили:

контент - контент - контент

контент - контент - контент

———-- - контент - контент

———-- - контент - ———--

———-- - контент - ———--

———-- - контент - ———--

контент - ———-- - ———--

контент - контент - контент

Link to comment
Share on other sites
  • 0
Chin Explorer

Chin

Posted
  • Author
Posted
Давненько не видел столь подробного и четкого отпора.

Влад, мне кажется автор в чем-то прав, если есть решения и ты его знаешь - стоит написать об этом?

2 АВТОР:

У вас кстати тоже отличаются примеры, то что вы таблицами привели код я посмотрел и то что вы здесь отобразили:

Разве отличаются? По моему фигулька с надписью "контент - контент - контент" просто уточняет что как внутри таблиц приведенных может отображаться :)

Т.е. первая строка - это шапка

вторая - верхнее меню

можно представить вот таким видом напрмер еще

— шапка шапка шапка —

— меню - меню - меню —

меню1 -- контент - новости

меню1 -- контент - новости

———-- - контент - новости

———-- - контент - ———--

———-- - контент - ———--

спонсир - контент - ———--

контент - контакт - копирйт

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

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

Link to comment
Share on other sites
  • 0
Vlad Explorer

Vlad

Posted
Posted

Еще раз повторю, что решение указанной задачи для дивов существует, но решается задача через задницу. Решать не буду и приводить код тоже по двум причинам:

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

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

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

Link to comment
Share on other sites
  • 0
Chin Explorer

Chin

Posted
  • Author
Posted (edited)

Вот например возьмем дефолтный скин вордпресса.

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

И под всем этим идет футер.

А теперь представим, что нам надо к нижней границе сайдбара прицепить логотип спонсора.

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

При том если контент выше в 5 раз чем содержимое сайдбара - логотип спонсира должен все равно быть в сайдбаре спозиционирован по нижней кромке (аккурат над футером).

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

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

Друзья, может я действительно схожу с ума и нефиг это дивами верстать?

Или может вам готовый табличный макет дать чтобы было понятно что я хочу если я не смог мысль донести?

Если это очень проблематично или вообще невозможно - вы скажите, я вам поверю, тут же спецы сидят :)

Но дайте плиз тогда четкий однозначный ответ - "низя!". И я для данной задачи про дивы просто забуду.

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

UPD.:

Vlad, спасибо, вопросов по верстке этого макета больше не имею. Пока писал свой пост - появился ваш :)

Задача снимается, сворганю табличками.

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

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

(хотя если я все правильно понимаю - имея одну таблицу верхнего уровня, в которую все уже втыкается - особо не поможет)

Что скажете? :)

З.Ы. спасибо за сайт, уже несколько лет подсматриваю всякие свойства для css :)

Edited by Chin
Link to comment
Share on other sites
  • 0
Vlad Explorer

Vlad

Posted
Posted

Да в тот-то и дело, что нельзя дать однозначный ответ. Слишком много нюансов накладывается, поэтому надо исходить из конкретного макета. Допустим если взять вышеприведенный и поставленные условия задачи, то да, так и скажу - "низя". А если речь пойдет о скине вордпресса и его модификации, то здесь придется думать, что же лучше применить.

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

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
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • 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

  I accept