alex39x
-
Posts
2 -
Joined
-
Last visited
alex39x's Achievements
Explorer (1/14)
0
Reputation
-
Ребят помогите пожалуйста. Блок со скруглёнными уголками (как здесь 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> <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>Вилфред^а если в качестве ключа взять систему договоренностей о предметах, допустим яблоко и груша это фрукты, а фрукты это ноль. бобер и белочка это 1, ну и так и писать в шифром, "яблоком груша бобра бобром грушила. бобер белку белкой с яблоком яблоко бобра". т.е. типа язык выдумать вообще в принципе новый, с другими понятиями. </p></li> </div> </div> </div> </div> </div> </div> </div> </center> </body> </html> Как можно сделать чтобы высота блока изменялась при выходе за пределы списка?
-
Ребят помогите пожалуйста. Блок со скруглёнными уголками (как здесь 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> Как можно сделать чтобы высота блока изменялась при выходе за пределы списка?