Верстка блока

artwalek · April 16, 2009

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

Как на картинке.

HTML:

<div class="b-feedback">
 <dl class="position">Текст 1
  <dt class="line">
   <i class="g-png">
	<img alt="" src="pancil.jpg"; />
   </i>
  </dt>
  <dd class="name">Текст 2</dd>
 </dl>
</div>

В CSS прописываю так:

.b-feedback
{
clear: both;
}

.b-feedback .line
{
margin: 12px 0px 15px;
position: relative;
}

.b-feedback .g-png
{
position: absolute;
left: -30px;
top: 0.2em;
}

.b-feedback .name
{
margin: 0px 0px 25px 30px
}

В моем CSS проблема в линии под Текст 1, если вставить border-bottom для .b-feedback .line линия съезжает намного вниз.

Помогите пожалуйста.

Спасибо!

wxcee · April 16, 2009

Если я правильно понял, то вот попробуй:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Hello, artwalek</title>
		<meta http-equiv="content-type" content="text/html; charset=windows-utf-8" />
		<link rel="stylesheet" media="screen, projection" href="styles.css" />
	</head> 
	<body>
		<dl class="artwalek">
			<dt>Текст 1</dt>
			<dd>Текст 2</dd>
			<dd>Текст 2</dd>
			<dd>Текст 2</dd>
		</dl>
	</body> 
</html>

.artwalek {
	width: 200px;

}
	.artwalek dt {
		font-size: 1.5em;
		text-align: center;
		padding-bottom: 10px;
		border-bottom: 1px solid #000;
	}
	.artwalek dd {
		background: url("note.jpg") no-repeat left top;
		height: 25px;
		padding: 10px 0;
		margin-top: 10px;
		text-align: right;
	}

artwalek · April 16, 2009

Спасибо, но на мой взгляд ваш вариант не гибкий.

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

Nekromancer · April 16, 2009

да картинку сувать в бэкграунд на мой взгляд неправильно.

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

wxcee · April 16, 2009

А что тут не гибкого?

Для справки: картинки через тег img следует вставлять только для иллюстраций к статьям и т.д.

artwalek · April 16, 2009

Хорошо.

Это так скажем тестовый вариант, если вместо:

— текст 1 будет Должность (Директор, к примеру)

— текст 2 будет ФИО

— вместо картинки фото директора

и таких людей будет скажем 10, как сверстать правильно?

s0rr0w · April 16, 2009

Хорошо.
Это так скажем тестовый вариант, если вместо:
— текст 1 будет Должность (Директор, к примеру)
— текст 2 будет ФИО
— вместо картинки фото директора
и таких людей будет скажем 10, как сверстать правильно?

Инлайн стили уже отменили?

wxcee · April 17, 2009

Попробуй так

.artwalek {
	position:absolute; 
}
	.artwalek dt {
		font-size: 1.5em;
		text-align: center;
		padding-bottom: 10px;
		border-bottom: 1px solid #000;
	}
	.artwalek dd {
		background: url("note.jpg") no-repeat left top;
		height: 25px;
		padding: 10px 0 10px 50px;
		margin-top: 10px;
		text-align: right;
	}

Justnewone · April 17, 2009

Я для себя лично так различаю картинку от бекграунда. Если это изображение, которое важно для повествования, которое очень бы не хотелось потерять при печати, которому, наконец, так и просится грамотный и вразумительный alt - тогда это IMG. Все остальное для себя отношу в элементы декоративного оформления, лишенные семантического смысла. И если уж изображение, допустим, попало в бекграунд, в этом случае ни в коем разе не аргумент, что придеца, дескать, придумывать какие-то классы и прочее.

Edited April 17, 2009 by Justnewone

Nekromancer · April 17, 2009

Justnewone, кажется в первые я с тобой согласен

Sign In

Верстка блока

Question

artwalek

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

wxcee

Link to comment

Share on other sites

artwalek

Link to comment

Share on other sites

Nekromancer

Link to comment

Share on other sites

wxcee

Link to comment

Share on other sites

artwalek

Link to comment

Share on other sites

s0rr0w

Link to comment

Share on other sites

wxcee

Link to comment

Share on other sites

Justnewone

Link to comment

Share on other sites

Nekromancer

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information