Hola, estuve buscando mucho por internet mi problema, pero no hay una explicacion clara, antes que nada quiero aclarar, que mi conocimiento de php y css es basico, pero me arreglo para aprender.
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> y el archivo css:
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;
}
Desde ya les agradesco su ayuda, he intentado varios metodos sin exito...
