рамка вокруг фото в постах

htmlkatt · September 3, 2010

Тема wordpress "Default", искала на форумах, есть статьи только о создании одной рамки. Нужна двойная рамка разных цветов для фотографий в постах, как на фото, т.е. белая широкая и тонкая по краям.

данные файла css:

p img {

padding: 0;

max-width: 100%;

}

img.centered {

display: block;

margin-left: auto;

margin-right: auto;

}

img.alignright {

padding: 4px;

margin: 0 0 2px 7px;

display: inline;

}

img.alignleft {

padding: 4px;

margin: 0 7px 2px 0;

display: inline;

}

.alignright {

float: right;

}

.alignleft {

float: left;

}

a img {

border: none;

}

.wp-caption {

border: 1px solid #ddd;

text-align: center;

background-color: #f3f3f3;

padding-top: 4px;

margin: 10px;

-moz-border-radius: 3px;

-khtml-border-radius: 3px;

-webkit-border-radius: 3px;

border-radius: 3px;

}

.wp-caption img {

margin: 0;

padding: 0;

border: 0 none;

}

swetlana · September 3, 2010

Такое делается свойством padding.

То есть, примерно так:

figure {
	border: 1px solid #333;
	padding: 4px;
	background: #fff;
}

и в коде html:

<figure>
	<img src="pic.png" />
</figure>

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

htmlkatt · September 3, 2010

Такое делается свойством padding.
То есть, примерно так:
figure {
	border: 1px solid #333;
	padding: 4px;
	background: #fff;
}
и в коде html:
<figure>
	<img src="pic.png" />
</figure>
Таким образому обрамляющего элемента будет тонкая рамка, а роль широкой белой рамки сыграет отступ.

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

swetlana · September 3, 2010

Капитан Очевидность подсказывает, что такого кода не нашлось потому что его там нет.

Но там же есть картинка. И вокруг неё должен быть обрамляющий элемент. Любой. Если его нет, то надо создать.

И уже к нему применять стили.

s0rr0w · September 3, 2010

Насколько я помню, я такой эффект без дополнительных контейнеров делал.

swetlana · September 3, 2010

s0rr0w, аж интересно стало: как?

Приходят в голову какие-то варианты, но настолько кривые…

Vlad · September 4, 2010

Тоже в свое время искал простые решения, для других целей, но сути это не меняет. К сожалению, так и не придумал универсального стиля, чтобы обойтись одним тегом. Получилось такое

<!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=utf-8">
  <title>Паспарту</title>
  <style type="text/css">
   IMG.passe-partout {
	padding: 30px; /* Ширина паспарту */
	background: #f0f0f0; /* Цвет фона  паспарту */
	border: 1px solid #666; /* Параметры рамки */ 
   }
  </style>
 </head>
 <body>
  <p><img src="figure.jpg" width="200" height="293" alt="Девочка с муфтой" class="passe-partout"></p>
 </body>
</html>

Более универсальное решение очевидно, вложить <img> внутрь какого-нибудь <div>

<!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=utf-8">
  <title>Паспарту</title>
  <style type="text/css">
   .passe-partout {
	padding: 40px 0; /* Размер паспарту по горизонтали и вертикали */
	background: #f0f0f0; /* Цвет фона паспарту */
	border: 2px solid #800000; /* Параметры рамки */
	text-align: center; /* Выравнивание по центру */
	width: 284px; /* Ширина блока */
   }
   .passe-partout IMG {
	border: 2px solid #666; /* Рамка вокруг изображения */
   }
  </style>
 </head>
 <body>
   <div class="passe-partout"><img src="figure.jpg" width="200" height="231" alt="Полярник"></div>
 </body>
</html>

s0rr0w · September 4, 2010

s0rr0w, аж интересно стало: как?
Приходят в голову какие-то варианты, но настолько кривые…

В смысле как?

Vlad · September 4, 2010

Рамка вокруг самой картинки так не получится.

s0rr0w · September 4, 2010

Рамка вокруг самой картинки так не получится.

display: inline-block; margin: 20px;

Sign In

рамка вокруг фото в постах

Question

htmlkatt

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

swetlana

Link to comment

Share on other sites

htmlkatt

Link to comment

Share on other sites

swetlana

Link to comment

Share on other sites

s0rr0w

Link to comment

Share on other sites

swetlana

Link to comment

Share on other sites

Vlad

Link to comment

Share on other sites

s0rr0w

Link to comment

Share on other sites

Vlad

Link to comment

Share on other sites

s0rr0w

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information