Уголки не спускаются.

alex39x · September 3, 2009

Ребят помогите пожалуйста.

Блок со скруглёнными уголками (как здесь http://www.cssplay.co.uk/boxes/curves.html) + js список (отсюда http://ruseller.com/lessons/les155/example/index.html#) . При раскрывании списка - если он выходит за пределы блока с уголками - уголки не опускаются.

Код примерно такой:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
.curvy {position:relative; width:800px; background:#9caf9c; color:#000; margin:1em auto;}
#ctl, #cbl, #ctr, #cbr {position:absolute; width:20px; height:20px; color:#9caf9c; background:#fff; overflow:hidden; font-style:normal; z-index:1;}
#ctl {top:0; left:0;}
#cbl {bottom:0; left:0;}
#ctr {top:0; right:0;}
#cbr {bottom:0; right:0;}
.curvy em b {position:absolute; font-size:150px; font-family:arial; color:#9caf9c; line-height:40px; font-weight:normal;}
#ctl b {left:-8px;}
#ctr b {left:-25px;}
#cbl b {left:-8px; top:-17px;}
#cbr b {left:-25px; top:-17px;}
* {padding: 0;
margin: 0;
}

#menu {

	width: 500px;

	border: 0px solid #;

}



#menu li {

	list-style-type: none;

	border-bottom: 0px solid #9caf9c;

}



#menu li.odd {

	font-size: 100%;

	padding: 2px 9px;

}



#menu a {

	display: block;

	width: 500px;

	color: #800F25;

	text-decoration: none;

	padding: 2px 8px;

}



#menu li.even {

	background-color: #9caf9c;

}



#menu li.odd {

	background-color: #9caf9c;

	display: none;

}



#menu li.odd a {

	color: black;

}



#menu li.last {

	border-bottom: none;

}



p {

	padding-bottom: 20px;

}

.rndbs {

	width:800px;
	min-height:200px;
	}

.servpg .mncont {

	height:auto;

	}	

.servpg .rndrctmid {

	min-height:200px;
	height:auto;

	background-color:#9caf9c;
	}

.fllf {

	float:left;

	}	

.flrg {

	float:right;

	}

.rndcont {

	background-color:#9caf9c;

	width:800px;
	}

body, html{

	margin:0px;

	width:100%;

	height:100%;	

	text-align:center;

	}

.text {

	width:500px;

	text-align:justify;

	font-family:Arial, Helvetica, sans-serif;

	font-size:14px;

	color:#202020;

	line-height:17px;

	padding:0px 20px;

	margin-top:10px;

	}

.picls {

	padding:7px 0px 0px 10px;

	width:200px;

	margin-top:3px;

	}



.picls div {

	border: 2px solid #969696;

	margin-top:10px;

	}
</style>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
	$('#menu li:even').addClass('even');
	$('#menu li:odd').addClass('odd');
	$('#menu li:even:last').addClass('last');

	$('#menu li:even').click( function() {
		$('#menu li:even').toggle(500);
		$(this).toggle(500);
		$(this).next().slideToggle();
	} );
});
</script>
</head>



<body>
<center>
<h3>Локальные вычислительные сети</h3>

<div class="rndbs servpg ">

<div class="curvy">
<em id="ctl"><b>•</b></em>
<em id="cbl"><b>•</b></em>
<em id="ctr"><b>•</b></em>
<em id="cbr"><b>•</b></em>
<div class="rndrctmid">
<div class="fllf rndcont">
<div class="mncont">

<div class="fllf picls">

		<div class="foto1"><img src="images/foto1.gif" alt="" width="181" height="143" /></div>

		<div class="foto2"><img src="images/foto2.gif" alt="" width="181" height="132" /></div>

		<div class="foto3"><img src="images/foto3.gif" alt="" width="181" height="175" /></div>

		<div class="foto4"><img src="images/foto4.gif" alt="" width="181" height="122" /></div>		

</div>
<div class="flrg">
<div class="text">
<p>I know it's been done before, but not this way!<br />A box with curved corners into which you can put text that goes right up to the corners.<br />
Again, no graphics were used in the making of this demonstration.<br />All it takes is four quadrants of a bullet point positioned absolutely in each corner (arial font this time as it's the safest one to use).</p>
	<ul id="menu">
		<li><a href="# return false">Монтаж компьютерных сетей ЛВС СКС</a></li> 
		<li><p>Монтаж сетей ЛВС, СКС и настройка сети под ключ. Беспроводные сети для Вашего удобства. Поможем разобраться с вашим тяжелым случаем: протестировать  прокладку сети, разводка сетей, модернизация локальных компьютерных сетей. Кроссировочные работы. Проектирование и монтаж беспроводных сетей wi-fi е составит более пятидесяти тысяч человек, то мощная СКС, смонтированная еще при строительстве полностью удовлетворить все ваши телекоммуникационные потребности. Разумеется, можно установить и менее мощную систему, однако нас интересует именно «потолок».</p></li>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</center>
</body>
</html>

Как можно сделать чтобы высота блока изменялась при выходе за пределы списка?

Sign In

Уголки не спускаются.

Question

alex39x

Link to comment

Share on other sites

0 answers to this question

Recommended Posts

Join the conversation

Обсуждения

Forums

Important Information