Jump to content
  • 0

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

dedmene

Asked by dedmene,

 Share

Question

dedmene Explorer

dedmene

Posted
Posted

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

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

1.jpg

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

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

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

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

Link to comment
Share on other sites

16 answers to this question

Recommended Posts

  • 0
dedmene Explorer

dedmene

Posted
  • Author
Posted

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

<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) Как сделать поле с кнопками, чтобы оно не мешало полю с аватаром, чтобы было не под ним, а от него

Link to comment
Share on other sites
  • 0
Микель Explorer

Микель

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

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

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

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

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

Edited by Микель
Link to comment
Share on other sites
  • 0
dedmene Explorer

dedmene

Posted
  • Author
Posted

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

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

Link to comment
Share on other sites
  • 0
Alastor Explorer

Alastor

Posted
Posted (edited)

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

prim.png

<!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 by Alastor
Link to comment
Share on other sites
  • 0
dedmene Explorer

dedmene

Posted
  • Author
Posted

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

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

Link to comment
Share on other sites
  • 0
Alastor Explorer

Alastor

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

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

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

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

P.S.

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

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

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

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

Link to comment
Share on other sites
  • 0
Alastor Explorer

Alastor

Posted
Posted (edited)

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

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

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

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

Alastor

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