Паспарту

Vlad · January 13, 2008

Хочу сделать в фотографии паспарту, грубо говоря, пустое пространство вокруг картинки, заполненное определенным цветом. Есть два способа реализации - 1. фотография с паспарту располагается по левому или правому краю окна; 2. фотография выравнивается строго по центру. И в том и другом случае никакого обтекания текстом не требуется.

Вариант 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">
.paspartu p {
	float: left; /* Включаем обтекание */
	padding: 20px; /* Поля вокруг изображения */
	margin: 0; /* Убираем отступы */
	background: #f0f0f0; /* Цвет паспарту */
	border: 1px solid #000; /* Рамка вокруг паспарту */
}
.paspartu p img {
	border: 1px solid #000; /* Рамка вокруг изображения */
}
div.clear {
	clear: left; /* Отменяем обтекание */
}
</style>
</head>
<body>
<p>Текст до фотографии</p>

<div class="paspartu">
<p><img src="girl.jpg" width="253" height="377" alt="Портрет девочки с муфтой"></p>
<div class="clear"></div>
</div>

<p>Текст после фотографии</p>
</body>
</html>

Работает в IE6, Opera9 и FF2. Единственное отличие наблюдается в Опере, текст после фотографии слишком близко от нее стоит. Но это считаю непринципиальным моментом.

Вариант 2 похитрее будет. С ним, собственно и возникли проблемы.

<!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">
.paspartu {
	display: table; /* Отображаем блок как таблицу */
	margin: 0 auto; /* Выравниваем по центру страницы */
} 
.paspartu p {
	padding: 20px; /* Поля вокруг изображения */
	background: #f0f0f0; /* Цвет паспарту */
	border: 1px solid #000; /* Рамка вокруг паспарту */
}
.paspartu p img {
	border: 1px solid #000; /* Рамка вокруг изображения */
}
</style>
</head>
<body>
<div class="paspartu">
<p><img src="girl.jpg" width="253" height="377" alt="Портрет девочки с муфтой"></p>
</div>
</body>
</html>

Дело в том, что IE не знает, что такое display: table. Что этому браузеру можно сказать по этому поводу? В том смысле, что я ему уже сказал, что он "дурак непутевый", это само собой. Как сделать, чтобы паспарту занимало определенную ширину без использования width?

WingedFox · January 13, 2008

Можно float:left+position:relative+left:expression()

Scrum · January 13, 2008

Можно float:left+position:relative+left:expression()

фарш то какой получается ))

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
  <title></title>
  <style type="text/css">
  <!--
  .paspartu {
	border: 1px solid gray;
	margin: 0 auto;
	display: table;
	padding: 20px;
	_float: left;
	position: relative;
	left: expression((document.documentElement.offsetWidth/2)-(parseInt(offsetWidth)/2) <0 ? "0" : (document.documentElement.offsetWidth/2)-(parseInt(offsetWidth)/2) +'px');
  }
  .paspartu img {
	padding: 20px;
	border: 1px solid red;
	background: #404040;
  }
  .paspartu img[class="img"] {
	display: block;
  }
  -->
  </style>
</head>

<body>
	<p>text</p>
	<div class="paspartu">
		<img src="girl.jpg" alt="Портрет девочки с муфтой" class="img">
	</div>
	<div style="clear: both;"></div>
	<p>text</p>
</body>

</html>

Vlad · January 14, 2008

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

yopopt · January 14, 2008

Я извиняюсь, но зачем там вообще left? Можно просто с помощью expression вычислять ширину .paspartu. Этого будет достаточно. И без expression, увы, не получится...

.paspartu {
	display: table; /* Отображаем блок как таблицу */
	margin: 0 auto; /* Выравниваем по центру страницы */
	width: expression(this.getElementsByTagName('img')[0].clientWidth);
}

Добавлено:

Что-то я стормозил. Для ie достаточно установить любую ширину, тогда будет работать и не нужен expression.

.paspartu {
	display: table; /* Отображаем блок как таблицу */
	margin: 0 auto; /* Выравниваем по центру страницы */
	_width: 1px;
}

musulman · January 14, 2008

_width: 1px; -- как это понять ?

WingedFox · January 14, 2008

yopopt

1. Смотрели в IE7?

2.

Можно просто с помощью expression вычислять ширину .paspartu.

Как сделать, чтобы паспарту занимало определенную ширину без использования width?

musulman

Это хак для ie 5-6.

Scrum · January 14, 2008

yopopt
1. Смотрели в IE7?

да я кстати то же не посмотрел, мой вариант плывет.

yopopt · January 14, 2008

yopopt
1. Смотрели в IE7?

Не смотрел, но подозреваю что не работает.

2.
Можно просто с помощью expression вычислять ширину .paspartu.
Как сделать, чтобы паспарту занимало определенную ширину без использования width?

Не вижу смысла отказываться от использования width. Можно попробовать так:

width: expression(this.getElementsByTagName('img')[0].clientWidth + 40 + "px");

По идее должно работать и в ie7. Однако учитывая постановку вопроса Ваш вариант правильней.

Scrum · January 14, 2008

Если честно то не совсем понятно почему надо имитировать display: table для EI ?

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

<!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" xml:lang="en" lang="en">

<head>
  <title></title>
  <style type="text/css">
  /*<![CDATA[*/
  div {
	display: table;
	margin: 0 auto;
  }

  img {
	margin: 0 auto;
	display: block;
	border: 1px solid red;
	padding: 20px;
	background: gray;
  }
  /*]]>*/
  </style>
</head>

<body>
	<div>
		<img src="girl.jpg" alt="Портрет девочки с муфтой" class="img" />
	</div>
</body>

</html>

Vlad · January 14, 2008

Scrum, спасибо, твой вариант подходит лучше всего - простой и универсальный. Два замечания только - стиль для div можно убрать вообще, он уже не нужен; нельзя сделать рамку вокруг самой фотографии.

Речь шла не о том, чем заменить display: table для IE, а найти удобоваримое решение для этого браузера. Думаю, мы его нашли.

Немного не по теме. Пришла в голову идея конкурса аналогичная фотокроссу. Кто не знает - это конкурс по фотографии на определенную тему за ограниченное время. Всем участникам в заданный час объявляют тему фотографии и дают часа 3. За это время надо побегать и найти сюжет.

Так вот, конкурс по верстке основан на том же принципе. На сайте (форуме) в определенный час выкладывается n задач на решение которых отводится k часов. Упомянутая задача как раз хорошо относится к разряду конкурсных: что сделать понятно, решить можно, а также имеются определенные изюминки при решении.

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

Scrum · January 15, 2008

Аналогично не по теме, еще можно командный конкурс провести.

Vlad · January 15, 2008

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

Scrum · January 15, 2008

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

Не не это имелось в виду )). Это таже ближе к турниру наверное.

К примеру:

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

2.Рандомом создаться команда из двух человек (верстальщик и дизайнер)

3.И в соответствии со всеми правилами турнира получается Вася end Петя vs Саша end Маша.

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

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

лихо меня крутануло

Emm · January 15, 2008

Я в роли басса, так ребята за дело! )

Sign In

Паспарту

Question

Link to comment

Share on other sites

14 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

Join the conversation

Обсуждения

Important Information