8 сторон %(

Cloack · December 23, 2008

Здравствуйте.

У меня следующий код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title>123</title>
   <style type="text/css" media="all">@import "style.css";</style>
  </head>
<body>
<table height="700" width="100%" border="2">
<tr>
  <td align="center">

  <div class="block" align="center">
   <div>

Текст...

   </div>
  </div>

  </td>
</tr>
</body>
</html>

Выглядит так:

Как мне добавить ещё картинки по углам и в верхней и нежней части? (Хочу сделать как здесь http://webimg.ru/ )

Код CSS

   BODY {
	background: #333333; /* Цвет фона веб-страницы */ 
   }
   DIV.block {
	background: #999999 url(l.png) repeat-y;
	width: 750px; /* Ширина блока */
   }
   DIV.block DIV {
	background: url(r.png) repeat-y 100% 0; 
	padding: 10px; /* Поля вокруг текста */
   }

kalyaka-malyaka · December 23, 2008

<div фон левой стороны, repeat-y>
	<div фон правой стороны, repeat-y>
		<div фон верха, repeat-x>
			<div фон низа, repeat-x>
				<div фон - левый верхний уголок, no-repeat>
					<div фон - левый нижний уголок, no-repeat>
						<div фон - правый верхний уголок, no-repeat>
							<div фон - правый нижний уголок, no-repeat>
								контент
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

Edited December 23, 2008 by kalyaka-malyaka

user · December 23, 2008

Там же это и написано.

kalyaka-malyaka · December 23, 2008

Там же это и написано.

и? у вас написано про две стороны - два дива. а надо 8 - 4 стороны и 4 угла. я показала, как.

вы о чем-то другом спрашивали?

Cloack · December 23, 2008

....

Спасибо. :unsure:

kalyaka-malyaka · December 23, 2008

user, Cloack, я еще и перепутала, кому отвечаю :unsure: сорри

Cloack · December 23, 2008

user, Cloack, я еще и перепутала, кому отвечаю сорри

Ничего.

Подскажите плиз я что то совсем оламерел

Делаю значит как написано но прикручиваю к диву класс:

1. { background: url(r.png): repeat-y;}

И нефига неработает =(

Zippovich · December 23, 2008

Ничего.
Подскажите плиз я что то совсем оламерел
Делаю значит как написано но прикручиваю к диву класс:
1. { background: url(r.png): repeat-y;}
И нефига неработает =(

Валидацию css пройдите

Cloack · December 23, 2008

Валидацию css пройдите

Ответьте плиз. Рытся буду дольше чем получу готовый ответ =(

Zippovich · December 23, 2008

background: url(r.png) repeat-y;

kalyaka-malyaka · December 23, 2008

и имя класса с цифры начинать не стоит

Cloack · December 23, 2008

Чё то я непонял нефига...

У меня 8 дивов...

Думаю происходит так:

1. Слева сверху

2. По центру сверху

3. Сверху справа

4. Слева

5. Справа

6. Слева снизу

7. Снизу по центру

8. Справа снизу

КАк на практике???

kalyaka-malyaka · December 23, 2008

Чё то я непонял нефига...
У меня 8 дивов...
Думаю происходит так:
1. Слева сверху
2. По центру сверху
3. Сверху справа
4. Слева
5. Справа
6. Слева снизу
7. Снизу по центру
8. Справа снизу
КАк на практике???

ну ты подумай головой :unsure:

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

Cloack · December 23, 2008

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

Эмм.. Как быть тогда=?(

Zippovich · December 23, 2008

что не понятного? 8 вложенных друг в друга дивов.

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

kalyaka-malyaka · December 23, 2008

Эмм.. Как быть тогда=?(

быть, как я написала в своем первом сообщении. сначала 4 дива с бэкграундом для сторон, потом 4 дива с бэкграундом-уголком, чтобы картинка уголка перекрывала стыки вертикальных фонов с горизонтальными

Zippovich, долго соображала, при чем тут нос :unsure: )) но сообразила все-таки. конец рабочего дня )))))

Cloack · December 23, 2008

Народ дайте плиз готовый вариант. Немогу у себя найти ошибку =( Делаю как вы говорите =(

Cloack · December 23, 2008

Дальше этого недохожу =(

kalyaka-malyaka · December 23, 2008

Дальше этого недохожу =(

код:

<!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=windows-1251" />
<title>sample</title>
<style type="text/css">
* {margin:0px; padding:0px; border:none;}
html, body {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#FFFFFF;}
.bg-left {position:relative; margin:100px auto; width:800px; background-color:#0056c0; background-image:url(images/bg-left.gif); background-position: left; background-repeat:repeat-y;}
.bg-right {width:800px; background-image:url(images/bg-right.gif); background-position: right; background-repeat:repeat-y;}
.bg-top {width:100%; background-image:url(images/bg-top.gif); background-position: top; background-repeat:repeat-x;}
.bg-bottom {width:100%; background-image:url(images/bg-bottom.gif); background-position: bottom; background-repeat:repeat-x;}
.bg-left-top {width:100%; background-image:url(images/bg-left-top.gif); background-position: left top; background-repeat:no-repeat;}
.bg-left-bottom {width:100%; background-image:url(images/bg-left-bottom.gif); background-position: left bottom; background-repeat:no-repeat;}
.bg-right-top {width:100%; background-image:url(images/bg-right-top.gif); background-position: right top; background-repeat:no-repeat;}
.bg-right-bottom {width:755px; padding:20px 25px 25px 20px; background-image:url(images/bg-right-bottom.gif); background-position: right bottom; background-repeat:no-repeat;}
p {margin-top:10px;}
</style>
</head>

<body>
<div class="bg-left">
	<div class="bg-right">
		<div class="bg-top">
			<div class="bg-bottom">
				<div class="bg-left-top">
					<div class="bg-left-bottom">
						<div class="bg-right-top">
							<div class="bg-right-bottom">
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mi. Quisque tortor lacus, placerat in, bibendum vel, hendrerit sed, nisl. Aliquam feugiat? Morbi feugiat, massa ut sagittis sollicitudin, arcu tellus suscipit risus, eget porttitor urna sapien in ipsum? Nulla vestibulum sem in ipsum malesuada sagittis. Aliquam malesuada commodo dui. Nam aliquam pretium magna. Sed lectus. Maecenas vitae nisl. Phasellus elit orci, interdum in, ullamcorper sed, convallis nec, enim! Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris dignissim tortor quis ligula? Nunc volutpat, velit vitae luctus vulputate, ipsum nibh aliquet quam, quis facilisis augue magna ac risus. Maecenas ac lectus in turpis tristique fermentum. Proin felis. Vivamus laoreet libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mi.</p>
                                <p>In hac habitasse platea dictumst. Praesent nec nisi vel lectus pharetra sagittis. Duis aliquet bibendum justo. Nam semper ultricies augue. Aliquam interdum neque nec leo luctus pellentesque. Praesent turpis mauris, ultricies vel; dignissim ut, aliquet ut, purus. Duis tortor libero, vulputate rhoncus, dictum nec, ultrices vel, ante? Integer arcu justo, vehicula eget, condimentum ac, eleifend eget, elit. Etiam non purus sed nisl malesuada vulputate? Nulla ligula lacus, lacinia et, pulvinar nec, auctor sit amet, nisl. Nullam cursus velit at sem. Vivamus rhoncus lorem et tellus? Phasellus viverra, magna congue tempor iaculis, nisi velit ullamcorper augue, vel consectetur est nunc quis felis.</p>
                                <p>Etiam id nibh gravida turpis aliquam scelerisque. Praesent vulputate nunc. Nullam arcu. Quisque ultrices cursus est? Mauris vitae lorem sit amet velit accumsan iaculis. Duis pulvinar vulputate pede! Proin in risus? Nunc fermentum augue nec orci. Duis ultrices sapien at dolor. Sed non enim! Vestibulum ut ipsum a urna elementum iaculis. Quisque est augue, faucibus a, auctor id, accumsan consequat, massa. Quisque suscipit eros id metus. Phasellus facilisis ultrices risus. Aenean vestibulum elit et mauris. Fusce ipsum risus, commodo eget, venenatis vitae, tincidunt a, enim. Fusce nisl mauris, tincidunt tristique, sodales ac, feugiat in, lacus! Sed rutrum enim non nisl!</p>
                                <p>Sed tempus imperdiet dolor. Etiam egestas lacinia lacus. Vivamus lobortis. Curabitur et lectus? Nullam accumsan suscipit mi. Pellentesque sed elit id sapien scelerisque mattis. Nunc pulvinar cursus eros. Fusce ac quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam nec felis. Suspendisse vulputate odio eget metus. Nunc nec sem vitae nibh malesuada consectetur. Aliquam euismod, lorem id aliquam imperdiet, ligula libero varius diam, vitae vestibulum ipsum dolor non tellus? Proin at eros. Praesent hendrerit ultrices leo.</p>
                                <p>Sed vitae nunc eu dolor pulvinar pretium. Quisque ut pede. Donec suscipit enim ac neque. Nunc viverra urna at lacus? Nam ullamcorper auctor lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacinia erat a velit? Aliquam pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec vestibulum, lectus vitae malesuada suscipit, lectus tortor accumsan libero, sit amet commodo sem purus eget purus.</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
</body>
</html>

пример

что еще можно объяснить и показать, я не знаю

Edited December 23, 2008 by kalyaka-malyaka

Sign In

8 сторон %(

Question

Link to comment

Share on other sites

18 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

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