Как "такое" сделать в div`ах

dedmene · March 6, 2010

Здравствуйте форумчане и форумчанке.

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

Вся проблема заключается в том что не знаю как сделать такое без абсолютного позиционирования. (и конечно без таблиц)

Как видно из рисунка, это пост на форуме, который будет повторятся. Если делать в абсолютном позиционировании, то каждое новое сообщение будет наслаиваться на предыдущие. В итоге 10 сообщений выглядит как одно.

+ всё должно тянутся, за исключением фиолет. и зелен.полей. Поле с аватором (фиолет) должно тянуться только по высоте (height), а поле с логином (зелен) только по ширине (width).

Заранее спасибо.

shvv · March 6, 2010

Можно сделать на флоатах и релейтивах.

dedmene · March 6, 2010

вот примерно набросал

<div style=" background-color:#99CC33;height:400px;">
<div style="background-color: #FF6666; height:30px;  float: right; position:relative; width:100%;">ник</div>
<div style=" background-color:#0099FF; width:50px; float:left; height:100%; position:relative;">аватар</div>

ТЕКСТ сообщения</div>
<div style=" background-color: #6699FF; width:50px; float:right; height:20px;">Кнопки</div>
</div>

Но:

1) Как сделать чтобы слой с аватаром был не под слоем с ником. Чтобы было как на картинке.

2) Как сделать чтобы у ТЕКСТа сообщения был оступ от верха и от левого края. Если делать падинг то все слои будут с отступом.

3) Как сделать поле с кнопками, чтобы оно не мешало полю с аватаром, чтобы было не под ним, а от него

dedmene · March 6, 2010

да и далее выявляются проблемы

Микель · March 6, 2010

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

А чем плохо абсолютное позиционирование? Надо просто чтобы содержимое позиционировалось относительно контейнера, а не относительно body (т.е., например, margin-top, а не top)

1) Как сделать чтобы слой с аватаром был не под слоем с ником. Чтобы было как на картинке.
2) Как сделать чтобы у ТЕКСТа сообщения был оступ от верха и от левого края. Если делать падинг то все слои будут с отступом.
3) Как сделать поле с кнопками, чтобы оно не мешало полю с аватаром, чтобы было не под ним, а от него

Есть замечательное свойство z-index, позволяющее указать, какой слой под каким находится.

Отступ у текста можно сделать заключив текст в ОТДЕЛЬНЫЙ див, а дальше играться со его свойствами padding и margin

Edited March 6, 2010 by Микель

Alastor · March 6, 2010

Ниже смотри

Edited March 6, 2010 by Alastor

dedmene · March 6, 2010

позиционирование плохо так как тут этот шаблон будет повторяться и наслаиваться на предыдущий. И он будет находиться на слое без абсолютного позиционирования. К тому же как сделать чтобы слой тянулся по высоте и был 100% по ширине. Если задать высоту и ширину в 100% то ничего не измениться.

То есть я сейчас делаю шаблон для сообщения на форуме. Если к примеру будет 2 сообщения, то они будут лежать друг на друге (это я щас про верстку шаблона сообщения с обсол. позиционированием), а не идти последовательно друг за другом.

Alastor · March 6, 2010

Ниже смотри.

Edited March 6, 2010 by Alastor

Alastor · March 6, 2010

Вот, даже оформил чтобы понятней было.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Пример</title>

<style type="text/css">

* {margin:0; padding:0;}

html,body {width:100%; height:100%;}

#mainpage {font: normal 62.5% Verdana, Geneva, sans-serif;}

#wrap {width:100%; height:100%; min-height:100%; height:auto !important;}

#left-shift {width:250px; margin-top:-150px; background: #A7B1C5; float:left;}

.left-shift-inside-top {position:relative; margin: 0 auto; margin-top:30px; margin-bottom: 80px; border: 1px solid #666; background:#FFF; width:150px; height:100px;}

.left-shift-inside-bottom {position:relative; margin: 0 auto; margin-top:80px; margin-bottom: 80px; border: 1px solid #666; background: #FFF; width:150px; height:400px;}

#head-layout {height:150px; background: #81C460;}

.username {float:left; margin-left: 250px; _margin-left:125px; margin-top:60px; padding-left: 30px; font: bold 1.2em Arial, serif;color: #fff;}

.name {float:right; margin-right: 50px; margin-top:60px; font: bold 1.2em Arial, serif; color: #fff;}

#middle-wrap {padding-left:250px;}

h3 {padding-bottom:14px; color:#2D4248; font: normal 1.6em Arial, Serif; }

.content {font: normal 1.3em Arial, serif #666; padding-bottom: 10px;}

#middle-wrap-inside {padding: 50px 50px 0px 30px;}

.clear {clear:both;}

#bottom-layout {height:150px; background: #fff;}

.left-bottom-layout {width:250px; height:150px; background:#A7B1C5; float:left;}

.buttons {position:relative; width:88px; height:31px; background: #425397; float:right; margin-right:30px; margin-top:119px;}

</style>

</head>

<body id="mainpage">

<div id="wrap">
  <div id="head-layout">   



				   <div class="username">
				   <p>Ник пользователя</p>
					</div> 

	  <div class="name">
	  <p>Номер сообщения: #1</p>

	  </div>
		</div><div id="left-shift">
		  <div class="left-shift-inside-top">
			</div>
			  <div class="left-shift-inside-bottom">
				</div>
				  </div>


			 <div id="middle-wrap">
				 <div id="middle-wrap-inside">
					<h3>Хрень всякая</h3>
					  <p class="content">позиционирование плохо так как тут этот шаблон будет повторяться и наслаиваться на предыдущий. И он будет находиться на слое без абсолютного позиционирования. К тому же как сделать										  чтобы слой тянулся по высоте и был 100% по ширине. Если задать высоту и ширину в 100% то ничего не измениться.</p>

					  <p class="content">То есть я сейчас делаю шаблон для сообщения на форуме. Если к примеру будет 2 сообщения, то они будут лежать друг на друге (это я щас про верстку шаблона сообщения с обсол.										 позиционированием), а не идти последовательно друг за другом.</p>

						 </div>
						 </div>
   <div class="clear">
	 </div>
	   <div id="bottom-layout">
		 <div class="left-bottom-layout">
		 </div>
		<div class="buttons">
		 </div>
		   <div class="buttons">
		 </div>

</div>
</div>
</div>





</body>
</html>

Edited March 6, 2010 by Alastor

dedmene · March 6, 2010

Alastor, не знаю что и сказать, круто

Единственная проблема, серый блок который слева, не тянется по высоте. В нем блок с высотой 400px. И если, текст сообщения очень большой (высокий), то серый блок так и остается одной высоты.

Alastor · March 6, 2010

Alastor, не знаю что и сказать, круто
Единственная проблема, серый блок который слева, не тянется по высоте. В нем блок с высотой 400px. И если, текст сообщения очень большой (высокий), то серый блок так и остается одной высоты.

Тянется серый блок.

Просто это я так сделал высоту фиксированную, чтобы наглядно было. Удали height:400px; совсем, напихай туда текста всякого, поймешь. Будет тянуться как миленький.

P.S.

А вообще я не верстальщик.

dedmene · March 6, 2010

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

psywalker · March 7, 2010

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

Возьми и сделай левый фон и пусти по оси вниз, повесь его на боди например и на html

rus · March 7, 2010

Блин, я фигею!

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

Alastor · March 7, 2010

А вообще, если честно, я не понимаю, зачем такую задачу как создания блока сообщения на форуме делать слоями.

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

Основные контейнеры делаются таблицами, а внутренние - блоками.

Edited March 7, 2010 by Alastor

rus · March 7, 2010

Основные контейнеры делаются таблицами, а внутренние - блоками.

Все правильно, только с точностью до наоборот.

Alastor · March 7, 2010

Все правильно, только с точностью до наоборот.

Да можно как хочешь навертеть. Только кому это надо.

А вообще-то мне все равно, тема неинтересна, задача скучна, конечный результат, я уверен, будет какашкой.

Sign In

Как "такое" сделать в div`ах

Question

Link to comment

Share on other sites

16 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

Join the conversation

Обсуждения

Important Information