eo_corbijn Posted February 21, 2011 Share Posted February 21, 2011 HolaEstoy volviéndome loco, intento que la columna central se adapte en función de si tenemos columnas laterales o no...Algo como ésto:http://eloyortega.com/columna_central_adaptable/ <html> <head> <style> #contenedor{ width: 760px; } #encabezado{ height: 80px; background: #CCCCCC; } #contenido{ overflow: hidden; /*esta la clave!*/ } #col_izq{ float: left; width: 150px; height: 400px; background: #dddddd; } #col_der{ float: right; width: 150px; height: 400px; background: #dddddd; } #pie{ clear: both; background: #dddddd; } </style> </head> <body> encabezado col izq col der contenido pie </body> </html> Si quitamos alguna de las columnas laterales (o las 2) la central se adapta a la anchura resultante. El problema es que para ello debemos modificar en el html el orden de las columnas, primero left_column, después right_column y por último central_column, y al modificar header.tpl y footer.tpl se pierden datos por el camino como el " ..." etc¿Alguna solución?? Link to comment Share on other sites More sharing options...
4webs.es Posted February 21, 2011 Share Posted February 21, 2011 entiendo que lo que quieres hacer es el bloque central ancho al máximo#contenido{ overflow: hidden; /*esta la clave!*/width:100%;}Personalmente creo que ahí le faltaría un floar. Link to comment Share on other sites More sharing options...
eo_corbijn Posted February 21, 2011 Author Share Posted February 21, 2011 Gracias por tu respuesta. Si le pongo un width: 100% desplaza hacia abajo la columna de la derecha...La idea es que la anchura la capa central ocupe el 100% si no hay más columnas y sino que se adapte al hueco resultante.El código funciona pero no puedo aplicarlo en Prestashop, tendría que poner primero el right_column y después el center_column y cuando cambio los archivos header y footer.tpl parece que se pierden datos... Link to comment Share on other sites More sharing options...
4webs.es Posted February 21, 2011 Share Posted February 21, 2011 más facil pues, create un div que sea para un columna y otro para dos, dependiendo de la página en la que estes imprime ese div. Link to comment Share on other sites More sharing options...
eo_corbijn Posted February 21, 2011 Author Share Posted February 21, 2011 Bueno si, en la home he aprovechado la etiqueta index <body id="index"> para dejar solo la columna central dandole toda la anchura. Así: #index #page #columns #center_column { width: auto; } Lo que no sabría es como diferenciar otras páginas ya que tienen la misma etiqueta <body id="cms">¿Hay alguna otra manera de identificar con CSS la página en la que estamos? He leído que se podría hacer con un condicional con PHP, pero la verdad es que no tengo mucha idea de prgramción soy más diseñador y maquetador. Link to comment Share on other sites More sharing options...
eo_corbijn Posted February 21, 2011 Author Share Posted February 21, 2011 Bueno! ya está solucionado. Como movía un div de footer.tpl a header.tpl , había que mover también el hook de footer.php a header.php.A las columnas laterales les he puesto width: auto; Link to comment Share on other sites More sharing options...
Recommended Posts