Foros del Web » Creando para Internet » CSS »

maquetado css+ contenido dinamico

Estas en el tema de maquetado css+ contenido dinamico en el foro de CSS en Foros del Web. hola como estan? bueno la pregunta es la siguiente, estoy realizando un sitio con un maquetado bastante comun titulo, dos columnas y pie, venia todo ...
  #1 (permalink)  
Antiguo 02/07/2008, 17:51
Avatar de JAK^  
Fecha de Ingreso: octubre-2005
Ubicación: ^^CaMiNiTo Al CoSTaDo DeL
Mensajes: 850
Antigüedad: 12 años, 1 mes
Puntos: 4
Pregunta maquetado css+ contenido dinamico

hola como estan? bueno la pregunta es la siguiente, estoy realizando un sitio con un maquetado bastante comun titulo, dos columnas y pie, venia todo bien, pero ahora el problema llego cuando tube que insertar contenido dinamico, por lo tanto ya no puedo fijar el alto de las capas, el problema que tengo es que el contenido sale del div... para que se entienda mejor dejo partes del codigo.

estructura basicamente es asi

<div id="title"></div>
<div id="cuerpo">

<div id="col-izq"> "aqui una tabla que se genera dinamicamente"</div>
<div id="col-der"></div>
</div>
<div id="pie"></div>

las dos columnas tienen un float:left, el maquetado funciona perfecto cuando puedo darle el tamaño fijo pero al variar cuando sobrepasa se sale. lo ideal seria que cuerpo se agrande junto con las colum, el problema es que al estar flotadas no lo hace... bueno espero se entienda la duda

saludos!!!!
__________________
hola . . .
  #2 (permalink)  
Antiguo 02/07/2008, 18:04
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: maquetado css+ contenido dinamico

Un problema comentado mil y una veces: las cajas flotadas no hacen crecer a su contenedor.

Prueba añadiendo esta caja:

<div id="col-izq"> "aqui una tabla que se genera dinamicamente"</div>
<div id="col-der"></div>
<div class="corte"></div>
</div>
<div id="pie"></div>

justo ahí, y en la css añade:

.corte {clear: both;}

Mikel.
  #3 (permalink)  
Antiguo 02/07/2008, 18:22
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: maquetado css+ contenido dinamico

¿Un .corte {clear: both;} haría lo mismo que un .cuerpo {overflow:hidden;}? Creo que haría lo mismo, o la verdad no se que intenta hacer...
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #4 (permalink)  
Antiguo 02/07/2008, 18:40
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: maquetado css+ contenido dinamico

No, no hace lo mismo, y básicamente la clave está en si la caja principal tiene alto definido o no (e imagino que te refieres a overflow auto).

- Si no tiene alto, con overflow en FF crecerá, pero en IE no
- Si tiene alto, en IE crecerá, pero en FF no

Con el corte, si no tiene alto crecerá en ambos.

Mikel.
  #5 (permalink)  
Antiguo 02/07/2008, 18:41
Avatar de JAK^  
Fecha de Ingreso: octubre-2005
Ubicación: ^^CaMiNiTo Al CoSTaDo DeL
Mensajes: 850
Antigüedad: 12 años, 1 mes
Puntos: 4
Respuesta: maquetado css+ contenido dinamico

exelente, pido mil disculpas por publicar un tema que ya se trato, pero la verdad no tenia idea como buscarlo, en realidad lo busque de todas las formas que se me ocurrieron pero nada..

muchas gracias mikel!!

daPhyre, probe anteriormente con overflow y nada, igual gracias por el interes
saludos!!
__________________
hola . . .
  #6 (permalink)  
Antiguo 02/07/2008, 18:43
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: maquetado css+ contenido dinamico

Bueno, lo cierto es que aunque se ha repetido muchas veces no es fácil de buscar, porque no sabes poner palabras exactas a tu problema. No pasa nada, lo ponía para que supieras que es un problema muy común.

Mikel.
  #7 (permalink)  
Antiguo 02/07/2008, 18:47
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: maquetado css+ contenido dinamico

Se habrá repetido miles de veces, pero al parecer se me había escapado, pues tenía curiosidad de saber como se hacía y no lo encontraba

Después de todo, ya le funcionó a dos el post. Gracias
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #8 (permalink)  
Antiguo 03/07/2008, 09:30
Avatar de JAK^  
Fecha de Ingreso: octubre-2005
Ubicación: ^^CaMiNiTo Al CoSTaDo DeL
Mensajes: 850
Antigüedad: 12 años, 1 mes
Puntos: 4
Pregunta Respuesta: maquetado css+ contenido dinamico

hola yo de nuevo, pense que se habia solucionado pero ahora me doy cuenta ke nop, miren el codigo esta asi

Código HTML:
<div id="contenedor"> 
     <div id="title"><? include("titulo-sa.php");?></div>
     <div id="menu"> <? include ("menu-bar.php");?></div>
     <div id="cuerpo">
              <div id="col-izq">
                    <div id="baner-sup">banner 1 600x100  </div>
                    <div id="filtrado">
                            <div id="titulo-result">Resultados: </div>
                    </div>
                    <div id="central">
                            <div class="pest-selec" id="item1">item 1</div>
                            <div class="pest" id="item2"><a href="#" class="linkpest">item 2</a> </div>
                            <div class="pest" id="item3">item 3 </div>
                             <div id="cuerpo-pest" class="cuerpo-pest">

                                     <table width="623" border="0" cellpadding="2" cellspacing="0"></table>

				  		
                            
                            </div>
					 
                    </div>
					
            </div>
            <div id="col-der">a</div>
             <div class="corte"></div>	    
     </div>
     <div id="pie"> <? include("pie-sa.php"); ?></div>
</div> 
el css de esto seria

Código:
body, html, #contenedor, #cuerpo {

height:100%;
}
.corte {clear: both;}
#contenedor {
width: 900px;
}
#cuerpo {
background-color:#FFFFFF;
padding-top:10px;
}
#pie {
background:#666666;
color:#FFFFFF;
font-size:8px;
text-align:center;
height:13px;
padding-top:3px;}

#cuerpo {
height:100%;
}
#col-izq {
float:left;
margin-left:15px;
width:625px;
border-right:#CCCCCC solid 1px;
padding-right:5px;

}
#col-der {
width:240px;
height:100%;
float:left;
text-align:center;
height:600px;
}

#baner-sup {
width:625px;
height:100px;
border-bottom:#CCCCCC solid 1px;
text-align:center;
background:#EAFFEF;
}
#filtrado {
margin-top: 5px;
width:625px;
height:170px;
border-bottom:#CCCCCC solid 1px;

}
#central {
margin-top: 5px;

width:625px;
}
el contenido dinamico va dentro de la tabla, la cantidad de filas son las que varian
el tema es que a cuerpo le doy un 100% de alto porke es el que me da el fondo, necesito que llegue hasta el final siempre,
muchisimas gracias por la atencion,
__________________
hola . . .
  #9 (permalink)  
Antiguo 03/07/2008, 10:16
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: maquetado css+ contenido dinamico

¿Y cuál es ahora el problema?

Mikel.
  #10 (permalink)  
Antiguo 03/07/2008, 14:48
Avatar de JAK^  
Fecha de Ingreso: octubre-2005
Ubicación: ^^CaMiNiTo Al CoSTaDo DeL
Mensajes: 850
Antigüedad: 12 años, 1 mes
Puntos: 4
Respuesta: maquetado css+ contenido dinamico

pues ke que las capas no se redimencionan y la tabla se sale, traspasa inclusive a PIE, no se si me explico,

saludos
__________________
hola . . .
  #11 (permalink)  
Antiguo 03/07/2008, 15:56
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: maquetado css+ contenido dinamico

Creo que sería mejor que pusieras el código generado con contenido para poder ver claramente el problema.

Mikel.
  #12 (permalink)  
Antiguo 03/07/2008, 16:20
Avatar de JAK^  
Fecha de Ingreso: octubre-2005
Ubicación: ^^CaMiNiTo Al CoSTaDo DeL
Mensajes: 850
Antigüedad: 12 años, 1 mes
Puntos: 4
Respuesta: maquetado css+ contenido dinamico

es exactamente igual, la unica diferencia es que en la tabla esa que esta en el div cuerpo-pest, se insertan unas 20 filas y 5 column. yo las borre para que no kede tan largo el codigo, pero es eso nomas. al insertar esa cantidad de filas se desfasa todo. lo probe sin el codigo dinamico, coloque una tabla de 20 filas para ver que pasaba y ahi el problema, los div no se redimensionan
__________________
hola . . .
  #13 (permalink)  
Antiguo 03/07/2008, 16:39
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: maquetado css+ contenido dinamico

Prueba con esta css:

Cita:
<style type="text/css">
html, body {
height:100%;
}
#contenedor {
width: 900px;
}
#cuerpo {
background-color:#FFFF00;
padding-top:10px;
min-height: 100%;
height: auto!important;
height:100%;
}
#pie {
background:#666666;
color:#FFFFFF;
font-size:8px;
text-align:center;
height:13px;
padding-top:3px;
}
#col-izq {
float:left;
margin-left:15px;
width:625px;
border-right:#CCCCCC solid 1px;
padding-right:5px;
}
#col-der {
height:100%;
text-align:center;
height:600px;
}
#baner-sup {
width:625px;
height:100px;
border-bottom:#CCCCCC solid 1px;
text-align:center;
background:#EAFFEF;
}
#filtrado {
margin-top: 5px;
width:625px;
height:170px;
border-bottom:#CCCCCC solid 1px;
}
#central {
margin-top: 5px;
width:625px;
}
.corte {clear: both;}
</style>
Te he hecho varios cambios, porque también tenías otro problemilla con las columna derecha en IE6.

Mikel.
  #14 (permalink)  
Antiguo 04/07/2008, 08:46
Avatar de JAK^  
Fecha de Ingreso: octubre-2005
Ubicación: ^^CaMiNiTo Al CoSTaDo DeL
Mensajes: 850
Antigüedad: 12 años, 1 mes
Puntos: 4
Respuesta: maquetado css+ contenido dinamico

mikel gracias lo probe y anda perfecto!! gracias! ahora me pongo a analizarlo para entenderlo bien, asi no molesto mas jeje...

saludos!!
__________________
hola . . .
  #15 (permalink)  
Antiguo 04/07/2008, 09:05
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: maquetado css+ contenido dinamico

Me alegro, y me parece muy buena idea; estúdialo y pregunta lo que necesites.

Saludos.

Mikel.
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




La zona horaria es GMT -6. Ahora son las 08:04.