Граница элемента рисунком.

baklofen · November 20, 2008

Здравствуйте, есть определённый блок, к примеру: <div id="css"><div>, я хочу сделать, что бы у левой, првой и нижней границы фоном был рисунок, например градиент, иле ещё что нить. (Нашёл на вашем сайте, очень полезную статью, но там для таблиц )

Пытался сделать таким образом (это для левой и нижней границы):

<div style="background-image: url('/img/list1.jpg'); background-position: left; background-repeat: repeat-y; background-image: url('/img/list2.jpg'); background-position: bottom; background-repeat: repeat-x;" id="content">

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

Может я всё и глупо делал, но я в html новичок, не бейте сильно

мир

Victor Ananiev · November 20, 2008

можна сдеалть 2 оберточных дива, и каждому задать бэк...

Edited November 20, 2008 by Vindex10

baklofen · November 20, 2008

Vindex10, если не труднj, не мог бы ты расшифровать, что значит "2 оберточных дива", если не сложно, может есть это где в примерах? Или в хэлпе каком?

Victor Ananiev · November 20, 2008

ну так на пальцах:

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

Victor Ananiev · November 20, 2008

CSS

#a1
{
background:url('leftback.jpg') left top repeat-y;
width:250px;
background-color:blue;
float:left;
}
#a2
{
background:url('rightback.jpg') right top repeat-y;
width:225px;
background-color:orange;
float:right;
}
#a3
{
width:200px;
background-color:red;
float:left;
}
#a3 IMG
{
width:200px;
display:block;
}

HTML

<div id="a1">
 <div id="a2">
  <div id="a3"><img src="yourimg.jpg" /></div>
 </div>
</div>

Все работает, надо только знать точную ширину всего этого)

baklofen · November 20, 2008

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

Victor Ananiev · November 20, 2008

сделай на дивах немного подругому, просто сделай один блок шириной А, а внутри еще один блок шириной А-бордер, потом задай внутренему бордеру паддинг шириной бордера, и все. Вроде должен разобратся по моему примеру)

Edited November 20, 2008 by Vindex10

baklofen · November 20, 2008

Перейди по ссылке. Я вот хочу как сделать Там где текст это один <div id="content"></div>

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

Edited November 20, 2008 by baklofen

Victor Ananiev · November 20, 2008

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

Scrum · November 20, 2008

удовольствия не получил.

baklofen

Тестим

Victor Ananiev · November 21, 2008

to scrum, а у тебя вроде больше вложенность чем я предлагал... ща заверстаем)

to baklofen: почитай вот это, я долго не разбирался, но тема похожая: http://forum.htmlbook.ru/index.php?showtopic=11306&hl=

Edited November 21, 2008 by Vindex10

Victor Ananiev · November 21, 2008

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style>
body
{
margin:0;
padding:0;
}
#a1
{
background-color:red;
padding-left:40px;
}
#a2
{
background-color:green;
padding-right:40px;
}
#a3
{
color:white;
background-color:blue;
text-align:center;
}
</style>
</head>
<body>
<div id="a1">
 <div id="a2">
  <div id="a3">
   Блаблаблабла я хочу верстать блаблаблабла Блаблаблабла я хочу верстать блаблаблабла Блаблаблабла я хочу верстать блаблаблабла Блаблаблабла я хочу верстать блаблаблабла Блаблаблабла я хочу верстать блаблаблабла Блаблаблабла я хочу верстать блаблаблабла Блаблаблабла я хочу верстать блаблаблабла Блаблаблабла я хочу верстать блаблаблабла Блаблаблабла я хочу верстать блаблаблабла Блаблаблабла я хочу верстать блаблаблабла Блаблаблабла я хочу верстать блаблаблабла Блаблаблабла я хочу верстать блаблаблабла Блаблаблабла я хочу верстать блаблаблабла Блаблаблабла я хочу верстать блаблаблабла Блаблаблабла я хочу верстать блаблаблабла Блаблаблабла я хочу верстать блаблаблабла Блаблаблабла я хочу верстать блаблаблабла Блаблаблабла я хочу верстать блаблаблабла Блаблаблабла я хочу верстать блаблаблабла Блаблаблабла я хочу верстать блаблаблабла Блаблаблабла я хочу верстать блаблаблабла Блаблаблабла я хочу верстать блаблаблабла 
  </div>
 </div>
</div>
</body>
</html>

вот, только фон подставить)

Тестил в ИЕ6 Мазилла Фаерфокс 3... Опера 9.52

Edited November 21, 2008 by Vindex10

baklofen · November 21, 2008

Спасибо огромное ВСЕМ! У меня получилось, то что задумывал, благодаря вам получил опыт (что бесценно), и новые навыки и мысли

Ещё раз спасибо.

Никогда не видел, что бы на форумах, так быстро откликались, и помогали.

Мир Вам.

Scrum · November 21, 2008

to scrum, а у тебя вроде больше вложенность чем я предлагал... ща заверстаем)

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

Victor Ananiev · November 21, 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