Foros del Web » Creando para Internet » HTML »

<div> sin limite de alto

 Estas en el tema de <div> sin limite de alto en el foro de HTML en Foros del Web. Hola a todos tengo un eschema de pagina hecha con <div> necessito que los <div> de hizquierda y de derecha tenga el alto(hight) sin limite ...
  #1 (permalink)  
Antiguo 15/07/2012, 03:20
 
Fecha de Ingreso: diciembre-2002
Ubicación: madrid
Mensajes: 111
Antigüedad: 21 años, 11 meses
Puntos: 0
Pregunta <div> sin limite de alto
Hola a todos tengo un eschema de pagina hecha con <div> necessito que
los <div> de hizquierda y de derecha tenga el alto(hight) sin limite por favor anexo una imagenes :

por favor una manita
un saludo
__________________
Novato
  #2 (permalink)  
Antiguo 15/07/2012, 09:15
Avatar de emprear
Colaborador
  
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 17 años, 4 meses
Puntos: 1567
Respuesta: <div> sin limite de alto
No estoy seguro pero creo te referís a esto
http://www.araudi.net/ejemplos/colum...ilibradas.html
Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #3 (permalink)  
Antiguo 15/07/2012, 12:05
 
Fecha de Ingreso: diciembre-2002
Ubicación: madrid
Mensajes: 111
Antigüedad: 21 años, 11 meses
Puntos: 0
Respuesta: <div> sin limite de alto
Gracias por tu tiempo,
no exactamente quiero que la zona roja puedas bajarse hasta "infinito" y evidentemente el pie pagina se queda al fondo
Gracias
__________________
Novato
  #4 (permalink)  
Antiguo 15/07/2012, 12:19
Avatar de emprear
Colaborador
  
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 17 años, 4 meses
Puntos: 1567
Respuesta: <div> sin limite de alto
no se entiende el planteo
no hay inconvenientes al hacer esto
Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
  3. <head>
  4.     <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  5. <title>xxxx</title>
  6. <style type="text/css">
  7. #caja_izq {width: 850px;
  8. margin: 20px auto;
  9. color:#fff;
  10. background-color: #4c9ab1;
  11. overflow: auto;
  12. }
  13. #caja_der {width: 500px;
  14. float: right;
  15. background-color: #82b04d;
  16. border-left: solid 30px #fff;
  17. }
  18. .columna_izquierda {width: 280px;
  19. float: left;
  20. padding: 20px;
  21. position: relative;
  22. margin-left: -350px;
  23. }
  24. .columna_derecha {width: 450px;
  25. float: left;
  26. padding: 20px;
  27. }
  28. </style>
  29. </head>
  30. <body>
  31.     <div style="background: blue; height: 120px; width: 960px; margin: 0 auto;">
  32. header
  33. </div>
  34.     
  35. <div id="caja_izq">
  36. <div id="caja_der">
  37. <div class="columna_izquierda">Lorem ipsum dolor sit amet,  consectetuer adipiscing elit, sed diam nonummy  nibh euismod
  38. tincidunt ut  laoreet dolore  magna aliquam  erat volutpat.  Ut wisi  enim ad  minim veniam,  quis nostrud exerci tation
  39. ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo  consequat. 
  40. molestie consequat.</div>
  41. <div class="columna_derecha">
  42. Lorem ipsum dolor  sit amet, consectetuer  adipiscing elit, sed  diam nonummy nibh  euismod tincidunt ut  laoreet dolore
  43. magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
  44. ut aliquip  ex ea  commodo consequat.  Duis autem  vel eum  iriure dolor  in hendrerit  in vulputate velit esse molestie
  45. consequat, vel illum  dolore eu feugiat  nulla facilisis at  vero eros et  accumsan et iusto  odio dignissim qui blandit
  46. praesent luptatum zzril delenit augue  duis dolore te feugait nulla  facilisi. Lorem ipsum dolor sit  amet, consectetuer
  47. adipiscing elit, sed  diam nonummy nibh  euismod tincidunt ut  laoreet dolore magna  aliquam erat volutpat.
  48. Lorem  ipsum
  49. dolor sit amet, consectetuer adipiscing  elit, sed diam nonummy nibh  euismod tincidunt ut laoreet dolore  magna aliquam
  50.  
  51. </div>
  52. </div>
  53. </div>
  54.  
  55. <div style="background: blue; height: 120px; width: 960px; margin: 0 auto;">
  56. pie
  57. </div>
  58. </body>
  59. </html>
solo restaría ajustar los anchos
Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #5 (permalink)  
Antiguo 15/07/2012, 19:34
Avatar de memoadian
Colaborador
  
Fecha de Ingreso: junio-2009
Ubicación: <?php echo 'México'?>
Mensajes: 3.696
Antigüedad: 15 años, 5 meses
Puntos: 641
Respuesta: <div> sin limite de alto
simplemente no le pongas alto
Código CSS: 
Ver original
  1. div{
  2.     float:left;
  3.     width:600px;
  4. }

el alto dependerá del contenido que tenga.
  #6 (permalink)  
Antiguo 15/07/2012, 19:47
Avatar de emprear
Colaborador
  
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 17 años, 4 meses
Puntos: 1567
Respuesta: <div> sin limite de alto
Cita:
Iniciado por memoadian Ver Mensaje
simplemente no le pongas alto
Código CSS: 
Ver original
  1. div{
  2.     float:left;
  3.     width:600px;
  4. }

el alto dependerá del contenido que tenga.
Es que lo que el quiere me parece, es que tengan el mismo alto aunque varíe el contenido de una a otra y se extiendan conjuntamente, bordes, colores de fondo etc
es lo que se conoce generalmente "equalHeights css", problema que con la tablas, no se produce obviamente.

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #7 (permalink)  
Antiguo 15/07/2012, 19:50
Avatar de memoadian
Colaborador
  
Fecha de Ingreso: junio-2009
Ubicación: <?php echo 'México'?>
Mensajes: 3.696
Antigüedad: 15 años, 5 meses
Puntos: 641
Respuesta: <div> sin limite de alto
Cita:
Iniciado por emprear Ver Mensaje
Es que lo que el quiere me parece, es que tengan el mismo alto aunque varíe el contenido de una a otra y se extiendan conjuntamente, bordes, colores de fondo etc
es lo que se conoce generalmente "equalHeights css", problema que con la tablas, no se produce obviamente.

Saludos

Tu crees? yo le entendi algo totalmente diferente pero bueno, a lo mejor si es eso.
  #8 (permalink)  
Antiguo 15/07/2012, 20:00
Avatar de emprear
Colaborador
  
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 17 años, 4 meses
Puntos: 1567
Respuesta: <div> sin limite de alto
Cita:
Iniciado por memoadian Ver Mensaje
Tu crees? yo le entendi algo totalmente diferente pero bueno, a lo mejor si es eso.
No sé, como no volvió a aparecer (es raro, porque los que andan preguntando los domingos, suelen necesitar respuestas urgentes) a lo mejor me vuela la imaginación ,aparte me basé en la imagen que dejó

SAludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #9 (permalink)  
Antiguo 16/07/2012, 02:46
 
Fecha de Ingreso: diciembre-2002
Ubicación: madrid
Mensajes: 111
Antigüedad: 21 años, 11 meses
Puntos: 0
Respuesta: <div> sin limite de alto
hola a todos
desculpate la demora ma ho tenido un problema de conexion.
lo entente pero nada ve incluio el div de la hizquierda se pasa y se pone atras dep pie de pagina incluyo el codigo:
<?php
// Inicializamos sesion
require_once('class/vetrina.php');
session_start();
// Comprovamos si existe la variable
date_default_timezone_set('Europe/Madrid');
$fechaactual =date('Y-m-d');




?>
<html>
<head>
<title>Home usuario</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="css/home_user.css"/>




<script>
function enviar_formulario(){
document.form1.submit()
}
</script>
<script>
function enviar_formulario(){
document.form1.submit()
}
</script>
<script language="javascript">
<!--
function ClearForm() {
if (form1.ami.value= ""){
document.form1.ami.value= "Buscar amigos";
}else{
document.form1.ami.value= "";
}
}

//-->
</script>

<style type="text/css">
#buscar {
position:relative;
width:380px;
height:153px;
z-index:7;
left: 863px;
top: 210px;
}
#busco {
position:absolute;
width:170px;
height:60px;
z-index:8;
left: 120px;
top: 38px;
background-color: #FF0000;
}
input:focus{
outline:none;
-moz-box-shadow: 0 0px 10px #7DBEF1;
-webkit-box-shadow: 0 0px 10px #7DBEF1;
box-shadow: 0 0px 10px #7DBEF1;
border: 1px solid #7DBEF1;
}

#apDiv1 {
position:absolute;
left:20px;
top:10px;
width:870px;
height:400px;
z-index:1;
}
#bajo {
top: 0px;
position: relative;
border: 6px none #0C6;
width: 1277px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;/* height: 1350px;*/
}
#blomenu {
position:relative;
width:494px;
height:115px;
z-index:9;
left: 290px;
top: 123px;
background-color: #9F3;
}
#apDiv2 {
position:absolute;
width:468px;
height:146px;
z-index:9;
left: 409px;
top: 207px;
}
.body {
margin: 0px;
overflow:auto;
left: 0px;
right: 0px;
bottom: 0px;
top: auto;
}

#apDiv14 {
position:relative;
width:1277px;
height:264px;
z-index:12;
left: -3px;
top: 50px;
background-image: url(images_user/inicio_user_14.gif);
background-repeat: no-repeat;
background-position: left top;
background-color: #303030;
border: 1px solid #303030;
clear: both;
}
#apDiv3 {
position:absolute;
width:200px;
height:115px;
z-index:13;
left: -122px;
top: 1420px;
}
#contenidorbajo {
position:absolute;
width:1279px;
z-index:10;
left: 76px;
top: 344px;
}
#bajos {
/* position:absolute;*/
width:1280px;
/* height:936px;*/
z-index:10;
left: 0px;
top: 0px;
}
#divmenus {
position:absolute;
width:454px;
height:82px;
z-index:10;
left: 354px;
top: -65px;
}
#apDiv12 {
position:absolute;
left:980px;
top:200px;
width:180px;
height:130px;
z-index:11;
}
#apDiv15 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 110px;
}
#apDiv16 {
position:absolute;
width:200px;
height:115px;
z-index:1;
}
#varisess {
position:absolute;
width:240px;
height:35px;
z-index:1;
left: 20px;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: #FFF;
top: 5px;
}
#apDiv17 {
position:absolute;
width:200px;
height:115px;
z-index:13;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}


<!--//.clearfix {display: inline-block;} /* for IE/Mac */#apDiv10 {
position:absolute;
width:200px;
height:115px;
z-index:9;
}
#apDiv11 {
position:absolute;
width:200px;
height:1px;
z-index:9;
left: 100px;
background-color: #0066FF;
top: 24px;
}
#apDiv18 {
position:absolute;
width:200px;
height:35px;
z-index:1;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: #FFF;
top: 5px;
}
-->

</style>
</head>
<body class="body">
<div id="bajo">
<!-- End Save for Web Slices -->

<div id="buscar">
<iframe name="busca" marginwidth="0" marginheight="0" frameborder="0" scrolling="auto" src="php_user/vacio.php" width="99%" height="99%" >
tu navegador no soporta iframes
</iframe>
</div>
<map name="Map">
<area shape="rect" coords="310,11,349,24" href="#">
<area shape="rect" coords="270,11,290,24" href="#">
</map>
<div id="apDiv4" style="position: absolute; left: 0px; top: 0px; width: 481px; height: 46px; z-index: 2;">
<div id="varisess"><?php echo $_SESSION['usuario']?></div>
<img src="images_user/inicio_user_01.gif"> vertical-align: middle"></div>
<div id="apDiv5" style="position: absolute; left: 481px; top: 0px; width: 340px; height: 181px; z-index: 3"><img src="images_user/inicio_user_02.gif" alt="" width="340" height="181" align="top"></div>
<div id="apDiv6" style="position: absolute; left: 821px; top: 0px; width: 459px; height: 46px; z-index: 4">
<div id="apDiv18"><?php echo $_SESSION['ciudad']?></div>
<img src="images_user/inicio_user_03.gif" alt="" width="459" height="46" border="0" usemap="#Map"></div>
<div id="apDiv7" style="position: absolute; left: 0px; top: 46px; width: 481px; height: 149px; z-index: 5; vertical-align: middle"><img src="images_user/inicio_user_04.gif" width="481" height="135" alt=""></div>
<div id="apDiv8" style="position: relative; left: 821px; top: -110px; width: 459px; height: 149px; z-index: 6; background: #FFF; visibility: visible;">
<table width="100%" border="0">
<tr>
<td><img src="images_user/inicio_user_09.gif" width="382" height="149" border="0" align="right" usemap="#Map2"></td>
</tr>
</table>
</div>
<div id="apDiv9" style="position: absolute; left: 0px; top: 195px; width: 321px; height: 149px; z-index: 7"><img src="images_user/INDEX_WEB_06.gif" width="321" height="149" alt=""></div>
<!--<div id="apDiv17"></div>-->
<div id="apDiv22" style="position: relative; left: 0px; top: 0px; width: 1254px; height:2000px; z-index: 10; overflow:scroll vertical-align: top; height: 100%;">

<div id="apDiv42" style="position: relative; left: 0px; top: 70px; width: 852px; height:1130px; z-index: 10;overflow:scroll vertical-align: top;">
<iframe name="vetrina" marginwidth="0" marginheight="0" frameborder="0" scrolling="no" src="php_user/vetrinahome.php" width="99%" height="99%" >
tu navegador no soporta iframes
</iframe>
<div id="apDiv13" style="position: absolute; left: 864px; top: 0px; width: 395px; height:1130px; z-index: 11;">

<iframe name="reserva" marginwidth="0" marginheight="0" frameborder="0" scrolling="no" src="php_user/amigos.php" width="99%" height="99%" >
tu navegador no soporta iframes
</iframe>
</div>
<div id="apDiv14">

<div id="menu">
<ul>

<li><a href="#">Información sobre BeSuite</a></li>

<li><a href="#">Condiciones de servicio</a></li>
<li><a href="#">Informaciones sobre privacidad</a></li>
<li><a href="#">Trabaja con nosotros</a></li>

</ul>
</div>

<div id="menutres">
<ul>
<li><a href="#">Log In</a></li>
<li><a href="#">Inscribete a newsletter</a></li>
<li><a href="#">Date de Baja</a></li>
</ul>
</div>


</div>
</div>
<div id="divmenus">
<div id="hmenuuno" class="hbuttonsuno">
<a href="php_user/fecha.php" target="busca"></a>
</div>
<div id="hmenudos"class="hbuttonsdos">
<a href="php_user/musica.php" target="busca"></a>
</div>
<div id="hmenutres" class="hbuttonstres">
<a href="php_user/fiestas.php" target="busca"></a>
</div>
<div id="hmenucuatro"class="hbuttonscuatro">
<a href="php_user/precio.php" target="busca"></a>
</div>

<div id="hmenucinco" class="hbuttonscinco">
<a href="php_user/sexo.php" target="busca"></a>
</div>

<div id="hmenuseis"class="hbuttonsseis">
<a href="php_user/edad.php" target="busca"></a>
</div>
</div>
<div style="clear:both"></div>
</div>

</div>
</div>



<map name="Map2">
<area shape="rect" coords="34,35,265,70" href="php_user/buscar_form.php" target="busca">
</map>
</body>
</html>
Código PHP:
 
gracias
un saludo
__________________
Novato

Etiquetas: alto, imagenes, limite
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 18:21.