Помогите со слоями

ote4ek · February 7, 2009

Всем привет!

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

зы по-моему не в тот раздел запостил,сори,перенесити в *Для начинающих*

Edited February 7, 2009 by ote4ek

Spamol · February 7, 2009

Возможно я что-то не понил или просто ошибусь(позно уже), но по моему так:

CSS

#block1{
width: 100%;
height: 100%
}
#block2{
width: 100%;
height: 100%
}
#block3{
width: 100%;
height: 100%
}

HTML

<div id="block1">Содержание левого блока</div>
<div id="block2">Содержание среднего блока</div>
<div id="block3">Содержание правого блока</div>

Victor Ananiev · February 7, 2009

А как эта штука будет выглядеть, три слоя растянутся на всю высоту экрана, и на всю его ширину) может ты хотел написать px в block1 && block3 но тогда див растянется на всю ширину и два сверху и снизу будут по 100 px шириной) а такое осуществить на слях проблематично, легче в процентах указать) и все таки тут можно поискать:

http://trifler.ru/blog

ote4ek · February 7, 2009

Spamol,не,нужно,чтобы слои распологались горизонтально,один за другим и,чтобы у первого и последнего(из трёх) была фиксированная ширина,а по середине слой резиновый

зы height:150px(у всех слоёв)

Victor Ananiev,спасибо за ссылку,пригодится,н опо теме пока что не нашёл ничего(

Edited February 7, 2009 by ote4ek

Vlad · February 8, 2009

Раздел правильный, это прерогатива CSS.

Подобный макет можно сделать довольно извращенным способом - задать слою границы слева и справа по 100 пикселов. А поверх этих широких границ выводить текст через float.

Вот здесь вид и CSS

http://intensivstation.ch/files/templates/2/template-3.html

Spamol · February 8, 2009

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

Vlad,

Поработал с приведенным вами кодом(который по ссылке), что похожее, но все рано не то, стало самому интересно - не могли бы вы привести конкретный код по сабжу?

Edited February 8, 2009 by Spamol

ote4ek · February 8, 2009

Vlad,
Поработал с приведенным вами кодом(который по ссылке), что похожее, но все рано не то, стало самому интересно - не могли бы вы привести конкретный код по сабжу?

Присоединяюсь.Vlad,если не трудно,объясни,пожалуйста.

NuShiKo · February 9, 2009

Макет действительно можно реализовать через float, только задавать границы по-моему не обязательно, и так должно работать, главное порядок слоёв не перепутать :blink:

#block1{float: left; width: 100px; height: 150px;}

#block2{height: 150px; }

#block3{float: right; width: 100px; height: 150px;}

вот так, в принципе, уже должно работать

Vlad · February 9, 2009

NuShiKo, это сработает, но на картинке колонки одной высоты, поэтому и применяется хитрость с границами.

Вот код с границами, в нем не решена только проблема с высотой контента. Если в колонке 1 текста много, то он отображается поверх цветного блока.

<!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">
  <title>Колонки</title>
  <style type="text/css">
#container {
  width: 100%;
  1overflow: hidden; /* Полоса прокрутки появляется, ее прячем */
}
#colon {
  border-left: 100px solid blue; /* Колонка 1 */
  border-right: 100px solid red; /* Колонка 3 */
  height: 100%;
}
#col1 {
  float: left;
  width: 100px; 
  margin-left: -100px;
  position: relative; /* Для IE6 */	  
}
#col2 {
  position: relative;
}
#col3 {
  float: right;
  width: 100px; 
  margin-right: -100px;
  position: relative; /* Для IE6 */  
}
.clear {
  clear: both;
}
  </style>
 </head> 
 <body>
<div id="container">
  <div id="colon">
   <div id="col1">
	  <h3>Колонка 1</h3>   
	</div>
   <div id="col3">
	  <h3>Колонка 3</h3>
	</div>  
   <div id="col2">
	  <h3>Колонка 2</h3>
	  <p>Согласно ГОСТ 12.1.003-83 ССБТ "Шум. Общие 
	  требования безопасности", шумовой характеристикой рабочих 
	  мест при постоянном шуме являются уровни звуковых давлений в децибелах 
	  в октавных полосах. Совокупность таких уровней называется 
	  предельным спектром, номер которого численно равен 
	  уровню звукового давления в октавной полосе со среднегеометрической 
	  частотой 1000 Гц.</p>
	</div>
  </div>
  <div class="clear"> </div>
</div>	  
</body>
</html>

NuShiKo · February 9, 2009

Я поняла, в чем фишка :blink: А вот чтобы они у Вас не наползали в конце, надо все же ширину ограничить минимальную. Для лучшего восприятия контента опять же. Как то так может: min-width: 600px; width:expression(this.scrollWidth < 600? "600px" : "auto");

Edited February 9, 2009 by NuShiKo

ote4ek · February 9, 2009

NuShiKo,Работает :blink: Спасибо Большое!

Vlad,Благодарю за помощь,но с Вашим кодом пока ещё не разобрался,там слева/справа получается вообще граница в 100px,для меня трудно понять сейчас зачем с границами,я только учусь)

Edited February 9, 2009 by ote4ek

NuShiKo · February 9, 2009

NuShiKo,Работает Спасибо Большое!
Vlad,с Вашим кодом не разобрался,там слева/справа получается вообще граница в 100px,для меня трудно понять сейчас зачем с границами,я только учусь)

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

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

Vlad · February 9, 2009

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

1 способ. Рисуется картинка как в первом посте без текста только и вставляется фоном для общего контейнера. Колонки через float добавляются. Они располагаются поверх рисунка и создается впечатление, что это цветные колонки. Недостаток - при отключении картинок все сразу станет понятно.

2 способ. Фон контейнера заливается красным цветом, для средней колонки цвет фона устанавливается синим. Работает только если контент средней колонки не превышает по высоте две крайние колонки.

NuShiKo · February 9, 2009

Про цвет я тоже подумала :blink: просто когда проверяю как слои ложатся ставлю им бордер, чтобы видно было, а потом подумала - ведь если бордера не будет как кто догадается где колонка заканчивается? Можно и цветом выделить. Но тогда да, контент бесконтрольно добавлять не получится.

ote4ek · February 15, 2009

Макет действительно можно реализовать через float, только задавать границы по-моему не обязательно, и так должно работать, главное порядок слоёв не перепутать
#block1{float: left; width: 100px; height: 150px;}
#block2{height: 150px; }
#block3{float: right; width: 100px; height: 150px;}
<div id="block1"></div>
<div id="block3"></div>
<div id="block2"></div>
вот так, в принципе, уже должно работать

Привет ещё раз

Подскажите,что можно сказать об этом,есть ли какие то подводные камни или впринципе и это тоже должно работать:

#block1{
	float: left;
	width: 200px;
	height: 100%;


}
#block2{
	height: 100%;
	margin-left: 210px;
	margin-right: 210px;
	background-color: #0033FF;
}
#block3{
	float: right;
	width: 200px;
	height: 100%;

}

<div id="block1"></div>
<div id="block3"></div>
<div id="block2"></div>

Edited February 15, 2009 by ote4ek

Vlad · February 16, 2009

100% - это высота как у родителя. Но если у родителя высота явно не задана, то height будет равно auto, т.е. в зависимости от контента вычисляться, значения полей и др.

NuShiKo · February 16, 2009

Подводные камни они такие... внезапные :rolleyes: сама всё время удивляюсь

Great Rash · February 16, 2009

ote4ek

Берем ваш код, заходим на http://www.lipsum.com/, генерим там около 5 абзацев текста и вставляем в таком порядке:

block1 - 2 абзаца

block2 - 3 абзаца

block3 - 5 абзацев

Любуемся подводными камнями.

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

Glebr · February 16, 2009

ote4ek
Берем ваш код, заходим на http://www.lipsum.com/, генерим там около 5 абзацев текста и вставляем в таком порядке:
block1 - 2 абзаца
block2 - 3 абзаца
block3 - 5 абзацев
Любуемся подводными камнями.
Согласем с Владом в том, что одинаковые по высоте колонки - это дебильный архаизм времен табличной верстки... К сожалению, как показывает практика, люди быстро привыкают к дебильному и никак не могут отвыкнуть...

Хотите сказать что лучше смотрится сайт, где, скажем, колонка с меню короче колонки с основным содержимым?

NuShiKo · February 16, 2009

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

Например так:

#all {min-width: 800px; width:expression(this.scrollWidth < 800? "800px" : "auto"); }

Great Rash · February 17, 2009

Glebr

Хотите сказать что лучше смотрится сайт, где, скажем, колонка с меню короче колонки с основным содержимым?

Еще бы! Все зависит от дизайна, а не от высоты меню по отношению к контенту. Если дизайнер беспомощен, то одинаковые колонки не спасут.

Посмотрите css-дизайны тут:

http://www.freecsstemplates.org/

или тут:

http://www.csszengarden.com/

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

Sign In

Помогите со слоями

Question

Link to comment

Share on other sites

20 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

Join the conversation

Обсуждения

Important Information