Box desplegable Me surge la siguiente duda, tengo mi pagina http://megustapero.nohagasclick.net/ en la cual tiene un box que dice: crea tu frase para facebook aqui!!!
Ese box me gustaria que se expanda hacia abajo una vez que las personas escriban y lleguen al borde derecho del box.
Lo mismo necesitaria para cuando se entra a cualquier frase, por ejemplo: http://megustapero.nohagasclick.net/like.php?id=49 que es excesivamente larga, que el box se desplace hacia abajo y no hacia la derecha.
Dejo el index.php - el div en cuestion se llama: <div id="page_details" class="rounded">
Código HTML:
<html lang="es"> <head> <title>Megustapero... publica tu frase en facebook y seras famoso!</title> <link rel="stylesheet" href="styles.css"> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.corner.js"></script> <script type="text/javascript" src="js/main.js"></script> </script> <link href="/favicon.ico" rel="shortcut icon"> <meta property="og:title" content="Megustapero.nohagasclick.net"/> <meta property="og:type" content="website"/> <meta property="og:url" content="http://megustapero.nohagasclick.net/"/> <meta property="og:image" content="Megustapero.nohagasclick.net/images/ilike2.jpg"/> <meta property="og:site_name" content="Megustapero.nohagasclick.net"/> <meta property="fb:admins" content="190534881031651"/> <meta property="og:description" content="Crea tus propias frases para facebook, publicalas, y se famoso, es gratis, rapido, simple y puedes compartirlo con todos tus amigos!"/> </head> <body> <div id="fb-root"></div> <script> window.fbAsyncInit = function() { FB.init({appId: '190534881031651', status: true, cookie: true, xfbml: true}); }; (function() { var e = document.createElement('script'); e.async = true; e.src = document.location.protocol + '//connect.facebook.net/es_LA/all.js'; document.getElementById('fb-root').appendChild(e); }()); </script> <div id="header"> <a href="index.php" id="branding"><span>Megustapero.nohagasclick.net</span></a> <p id="total_pages" class="rounded"><span id="count"> <? $x=mysql_query("SELECT * FROM fblike ORDER BY id DESC LIMIT 0,1"); $nr=0; while ($y=mysql_fetch_assoc($x)) { $id=$y['id']; $like=$y['like']; ?> <?=$id?><? echo substr(0,44);?> <? } ?></span> frases creadas</p> </div> <div id="page_details" class="rounded"> <h2>Crear una nueva frase!</h2> <p id="character_count"><span id="characters">100</span> caracteres habilitados</p> <form method="POST" action="index.php"> <input type="text" name="like" class="comments" maxlength="100" onclick="this.value='';" onblur="this.value=(this.value=='')?'Crea tu frase para facebook aqui!!!':this.value;"> <p id="url"></p> <button id="create_button" type="submit"></button> </form> </div> <div id="popular_pages" class="rounded box_420"> <h2>Top 10 de las frases mas populares</h2> <ul> <? $x=mysql_query("SELECT * FROM fblike ORDER BY hits DESC LIMIT 0,10"); $nr=0; while ($y=mysql_fetch_assoc($x)) { $id=$y['id']; $like=$y['like']; ?> <li><a href='like.php?id=<?=$id?>'><? echo substr($like, 0,44);?></a><br> </li> <? } ?> </ul> </div> <div id="new_pages" class="rounded box_420"> <h2>Nuevas Frases!!</h2> <ul> <? $x=mysql_query("SELECT * FROM fblike ORDER BY id DESC LIMIT 0,10"); $nr=0; while ($y=mysql_fetch_assoc($x)) { $id=$y['id']; $like=$y['like']; ?> <li><a href='like.php?id=<?=$id?>'><? echo substr($like, 0,44);?></a><br></li> <? } ?> </ul> </div> <p id="footer" class="rounded" align="center">Megustapero.nohagasclick.net © 2011. Megustapero.nohagasclick.net no tiene relacion con Facebook <br><script type="text/javascript" src="http://widgets.amung.us/small.js"></script><script type="text/javascript">WAU_small('megustapero')</script></br></p> </body> </html>
Código HTML:
html * {margin: 0; padding: 0;}
body {
margin: 0 auto;
width: 940px;
background-image: url(images/bg.jpg);
font-family: Verdana;
font-size: 62.5%;
line-height: 1.2em;
letter-spacing: 0;
text-align: left;
word-spacing: normal;
text-decoration: none;
color: #444;}
UL {
font-size : 10pt;
font-family : "Trebuchet MS", arial, helvetica, sans-serif;
color : #003366;
;
}
UL UL LI {
font-size : 10pt;
font-family : "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color : #003366;
;
}
UL UL UL LI {
font-size : 10pt;
font-family : "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color : #003366;
;
}
#branding {display: block; width: 600px; height: 97px; background: url('images/logo.png') no-repeat left center; margin-top: 10px;}
#branding span {position: absolute; left: -9999px;}
h2 {color: #464646; font-size: 2em; margin-bottom: 10px;}
ul {}
li {list-style: none;}
input {
font-family: Verdana;
color: #c4c4c4;
font-size: 1.8em;
padding: 8px;
border: #ececec 2px solid;
margin-top: 5px;
}
p {font-size: 1.4em;}
button {width: 124px; height: 21px; border: none; cursor: pointer; display: block;}
.rounded {
background: #fff;
margin-top: 20px;}
.rounded {
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
}
.box_420 {width: 420px; padding: 20px; float: left; overflow: hidden; margin-bottom: 20px;}
.box_420 li {overflow: hidden; border-bottom: #e2e2e2 1px solid;}
.box_420 li .like_button {float: left; margin-right: 30px; width:55px; height:25px; padding-top: 6px;}
.box_420 ul li a {display: block; color: #686868; font-size: 1.2em; text-decoration: none; float: left; padding: 10px 0;}
.box_420 ul li.last {border: none;}
#create_page, #page_details {padding: 20px; overflow: hidden; clear: both;}
#create_page input, #page_details input {width: 880px;}
#character_count {float: right; font-size: 1.2em; color: #7d7d7d; margin: -10px 0 10px 0;}
#url {font-size: 1.4em; margin-top: 10px; color: #aeaeae; display: none;}
#create_button {float: right; margin-top: 10px; width: 124px; height: 21px; background: url('images/create_button.gif') no-repeat left center;}
#create_button span {position: absolute; left: -999px;}
#total_pages {
padding: 20px;
width: 200px;
text-align: center;
font-size: 1.4em;
float: right;
margin: -80px 0 10px 0;}
#total_pages span#count {
font-weight: 700;}
#popular_pages ul li, #new_pages ul li {overflow: hidden;}
#popular_pages ul li a:hover, #new_pages ul li a:hover {color: #464646;}
ul li a.last {border: none !important;}
#popular_pages h2, #new_pages h2 {
padding: 12px 0 12px 45px;
font-size: 1.8em;
margin-top: -20px;
background: url('images/star.gif') left center no-repeat;
}
#new_pages, #statistics, #useful_links {margin-left: 20px;}
#share {overflow: hidden;}
#share li {float: left; margin-right: 10px;}
#share li a {color: #7d7d7d; font-size: 1.2em;}
#footer {padding: 20px; font-size: 1.2em; clear: both; margin-bottom: 20px;}
.expandable_box {
width: 600px;
overflow: auto;
}
