Работа с DIVами

KorPaEv · 12.07.2011

Всем привет!
Вопрос следующий.
У меня есть 4 блока:

<div id="carusel">

<div id="carusel_l">


<div id="carusel_r">


<div id="carusel_img">



</div>

</div>

</div>

</div>

вот цсс

#carusel

{
background-color:red;
border:inset 1px;
width:50px;
height:50px;
}

#carusel_l

{
border:inset 1px;
width:40px;
height:40px;
background-color:blue;
}

#carusel_r

{
border:inset 1px;
width:30px;
height:30px;
background-color:green;
}

#carusel_img

{
border:inset 1px;
width:20px;
height:20px;
background-color:grey;
}

Соответственно, красный блок - главный 50пкс, затем синий, зеленый и серый.
Сейчас они пирамидкой накладываются каждый на предыдущий, самый верхний получается серый - он, как я понимаю, зависит от всех предыдущих.
Помогите разобраться с позиционированием - не понимаю. Значит вопросы следующие.
Красный блок - фиксированного размера - с ним все понятно(сам задаю его размер), далее как сделать так чтобы синий блок был прижат к левому углу крастного, а зеленый к правому углу красного? Далее, как сделать, чтобы последний див был между прижатыми блоками?
Причем серый блок не должен перекрывать крайние блоки. Плюс не понимаю как делаются тянущиеся блоки, подскажите.
Заранее спасибо!

motek · 12.07.2011

KorPaEv сказал(а):
Всем привет!
Вопрос следующий.
У меня есть 4 блока:...

...Соответственно, красный блок - главный 50пкс, затем синий, зеленый и серый.
Сейчас они пирамидкой накладываются каждый на предыдущий, самый верхний получается серый - он, как я понимаю, зависит от всех предыдущих.
Помогите разобраться с позиционированием - не понимаю. Значит вопросы следующие.
Красный блок - фиксированного размера - с ним все понятно(сам задаю его размер), далее как сделать так чтобы синий блок был прижат к левому углу крастного, а зеленый к правому углу красного? Далее, как сделать, чтобы последний див был между прижатыми блоками?
Причем серый блок не должен перекрывать крайние блоки. Плюс не понимаю как делаются тянущиеся блоки, подскажите.
Заранее спасибо!

Код:

<!doctype html>
<html>
	<head>
			<meta charset="utf-8"/>
			<style>
				#carusel
				{
				background-color: red;
				border: inset 1px;
				height: 112px;
				display: table; <!-- указываем вместо ширины -->
				}

				#carusel_l
				{
				border:inset 1px;
				width: 18px;
				height: 32px;
				background-color: blue;
				float:left;
				margin: 40px 1px 0px 0px; <!-- отодвигаем кнопку на нужное расстояние -->
				}

				#carusel_r
				{
				border: inset 1px;
				width: 18px;
				height: 32px;
				background-color: green;
				float: right;
				margin: 40px 0px 0px 1px; <!-- отодвигаем кнопку на нужное расстояние -->
				}

				#carusel_img
				{
				border: inset 1px;
				width: 106px;
				height: 110px;
				background-color: grey;
				float: left;
				}
			</style>
	</head>
	<body>
		<div id="carusel">
			
			<div id="carusel_r">
				<!--<img src="images/carusel_r.gif" height="32" width="18" alt="Стрелка правая" title="Стрелка правая" /> -->
			</div>
			<div id="carusel_l">
				<!--<img src="images/carusel_l.gif" height="32" width="18" alt="Стрелка левая" title="Стрелка левая" /> -->
			</div>
			<div id="carusel_img">
				<!--<ul>
					<li><img src="images/carusel_1.jpg" height="110" width="106" alt="Картинка" title="Картинка" />
					<li><img src="images/carusel_2.jpg" height="110" width="106" alt="Картинка" title="Картинка" />
					<li><img src="images/carusel_3.jpg" height="110" width="106" alt="Картинка" title="Картинка" />
					<li><img src="images/carusel_4.jpg" height="110" width="106" alt="Картинка" title="Картинка" />
					<li><img src="images/carusel_5.jpg" height="110" width="106" alt="Картинка" title="Картинка" />
					<li><img src="images/carusel_6.jpg" height="110" width="106" alt="Картинка" title="Картинка" />
					<li><img src="images/carusel_7.jpg" height="110" width="106" alt="Картинка" title="Картинка" />
				</ul> -->
			</div>
		</div>
	</body>
</html>

KorPaEv · 14.07.2011

Спасибо, очень помогло, но я не понимаю в чем моя ошибка была - почему вложенные дивы друг в друга так себя ведут???в Вашем примере все просто в одном родительском диве подряд идут независимо 3 дива, но еще не понятно зачем дисплэй тэйбл надо??

motek сказал(а):
KorPaEv сказал(а):

Всем привет!
Вопрос следующий.
У меня есть 4 блока:...

...Соответственно, красный блок - главный 50пкс, затем синий, зеленый и серый.
Сейчас они пирамидкой накладываются каждый на предыдущий, самый верхний получается серый - он, как я понимаю, зависит от всех предыдущих.
Помогите разобраться с позиционированием - не понимаю. Значит вопросы следующие.
Красный блок - фиксированного размера - с ним все понятно(сам задаю его размер), далее как сделать так чтобы синий блок был прижат к левому углу крастного, а зеленый к правому углу красного? Далее, как сделать, чтобы последний див был между прижатыми блоками?
Причем серый блок не должен перекрывать крайние блоки. Плюс не понимаю как делаются тянущиеся блоки, подскажите.
Заранее спасибо!

Нажмите, чтобы раскрыть...

Код:

<!doctype html> <html> <head> <meta charset="utf-8"/> <style> #carusel { background-color: red; border: inset 1px; height: 112px; display: table;  } #carusel_l { border:inset 1px; width: 18px; height: 32px; background-color: blue; float:left; margin: 40px 1px 0px 0px;  } #carusel_r { border: inset 1px; width: 18px; height: 32px; background-color: green; float: right; margin: 40px 0px 0px 1px;  } #carusel_img { border: inset 1px; width: 106px; height: 110px; background-color: grey; float: left; } </style> </head> <body> <div id="carusel"> <div id="carusel_r">  </div> <div id="carusel_l">  </div> <div id="carusel_img">  </div> </div> </body> </html>

Работа с DIVами

KorPaEv

Member

motek

злой как @

KorPaEv

Member

Онлайн статистика

Статистика форума

Новые пользователи

Поделиться этой страницей