Foros del Web » Creando para Internet » CSS »

Estructura en capas

Estas en el tema de Estructura en capas en el foro de CSS en Foros del Web. Muy buenas. Qué facil era todo con tablas ( ), pero hay que adaptarse a los estándares y dale al CSS... Bueno, la cuestión es ...
  #1 (permalink)  
Antiguo 20/04/2010, 07:56
Avatar de Bravenap  
Fecha de Ingreso: noviembre-2002
Ubicación: Los Arroyos, El Escorial, Madrid
Mensajes: 2.084
Antigüedad: 15 años, 1 mes
Puntos: 4
Estructura en capas

Muy buenas. Qué facil era todo con tablas (), pero hay que adaptarse a los estándares y dale al CSS...

Bueno, la cuestión es la estructura de un sitio organizado con capas. La plantilla base para todo el sitio la tengo desarrollada y se ajusta bien. Partiendo de esta plantilla base, a una página determinada (la principal ni más ni menos) le quiero añadir nuevas capas para estructurar tres nuevas columnas y ahí es donde se me descuadra todo.

Lo primero el CSS de estructura:
Código CSS:
Ver original
  1. /*ESTRUCTURA GENERAL*/
  2.  
  3. #cabecera {background-position: left top; background-repeat: no-repeat; padding-left: 300px;
  4.     height: 85px;}
  5. #contenedorMedio { float: left; width:100%; clear: both; display: block;}
  6. #menuNav { float: left; margin-left: -100%; width: 190px; padding: 15px 3px 15px 2px;
  7.     background-repeat: no-repeat;}
  8. #contenido { margin: 0 0 0 190px; padding: 10px 20px 0 20px; background-color: #FFFFFF;}
  9. #contenido #contenedorInterno { float: left; width:100%; clear: both; display: block;}
  10. #contenido #colIzquierda { float: left; margin-left: -100%; width: 150px; padding-right: 5px; border-right: solid 1px #CCCCCC;}
  11. #contenido #colContenido { float: left; padding: 0 0 0 5px; margin: 0 230px 0 160px;}
  12. #contenido #colDerecha { float: right; border-left: solid 1px #CCCCCC; margin-left: 5px; padding-left: 5px; width: 200px; position: relative;}
  13. #contenido #cierreColContenido{  /*float: left; clear: both; width: 200px; min-width: 150px;*/}
  14.  
  15. #pie { clear: both; text-align: center; margin: 10px auto 2px auto;}
La página base (simulada con tablas sería):
Código HTML:
Ver original
  1. <table width="100%">
  2.         <tr>
  3.             <td height="85" id="cabecera">Cabecera (100% ancho x 85 px alto)</td>
  4.         </tr>
  5.         <tr>
  6.             <td id="contenedorMedio">
  7.                 <table width="100%">
  8.                     <tr>
  9.                         <td width="190" id="menuNav">Menú (190 px ancho)</td>
  10.                         <td id="contenido">Contenidos</td>
  11.                     </tr>
  12.                 </table>
  13.             </td>
  14.         </tr>
  15.         <tr>
  16.             <td>Pie (100% ancho)</td>
  17.         </tr>
  18.     </table>
Y la que se descuadra debería tener tres columnas dentro de la capa contenido:
Código HTML:
Ver original
  1. <table width="100%" border="1" cellpadding="0" cellspacing="0">
  2.         <tr>
  3.             <td height="85" id="cabecera">Cabecera (100% ancho x 85 px alto)</td>
  4.         </tr>
  5.         <tr>
  6.             <td id="contenedorMedio">
  7.                 <table width="100%">
  8.                     <tr>
  9.                         <td width="190" id="menuNav">Menú (190 px ancho)</td>
  10.                         <td id="contenido">
  11.                             [B]<table id="contenedorInterno" width="100%" border="1" cellpadding="0" cellspacing="0">
  12.                                 <tr>
  13.                                     <td id="colIzquierda" width="150">Columna Izquierda (150 px ancho)</td>
  14.                                     <td id="colContenido">Columna Contenido</td>
  15.                                     <td id="colDerecha" width="200">Columna Derecha (200 px ancho)</td>
  16.                                 </tr>
  17.                             </table>[/B]
  18.                         </td>
  19.                     </tr>
  20.                 </table>
  21.             </td>
  22.         </tr>
  23.         <tr>
  24.             <td>Pie (100% ancho)</td>
  25.         </tr>
  26.     </table>
colContenido se me desplaza para abajo hasta que acaba colDerecha.

Gracias de antemano y un saludo.
__________________
¡¡NO A LA GUERRA!!
Si ponemos a nuestros mensajes títulos adecuados, la gente se animará más a abrirlos y resultarán más útiles en las busquedas. ¡No a los ayuuudaaa, urgenteee y similares!
  #2 (permalink)  
Antiguo 20/04/2010, 08:57
Avatar de sublime_style  
Fecha de Ingreso: junio-2008
Mensajes: 69
Antigüedad: 9 años, 5 meses
Puntos: 1
Respuesta: Estructura en capas

Como andas? Si podes pone alguna captura o un ejemplo de lo que queres lograr.
vi que tenes bastantes float left y right en mi experiencia personal solo los uso cuando es super nesesario xq te pueden hacer agarrarte los pelos un largo rato.
  #3 (permalink)  
Antiguo 21/04/2010, 02:13
Avatar de Bravenap  
Fecha de Ingreso: noviembre-2002
Ubicación: Los Arroyos, El Escorial, Madrid
Mensajes: 2.084
Antigüedad: 15 años, 1 mes
Puntos: 4
Respuesta: Estructura en capas

Gracias sublime_style por tu sugerencia.

Puse la tabla en HTML para simular fácilmente lo que quería hacer porque no puedo poner una captura de mi estructura.

Un saludo.
__________________
¡¡NO A LA GUERRA!!
Si ponemos a nuestros mensajes títulos adecuados, la gente se animará más a abrirlos y resultarán más útiles en las busquedas. ¡No a los ayuuudaaa, urgenteee y similares!
  #4 (permalink)  
Antiguo 21/04/2010, 02:29
Avatar de Bravenap  
Fecha de Ingreso: noviembre-2002
Ubicación: Los Arroyos, El Escorial, Madrid
Mensajes: 2.084
Antigüedad: 15 años, 1 mes
Puntos: 4
Respuesta: Estructura en capas

Pues sí, sí puedo
http://www.flickr.com/photos/[email protected]/4539650293/
__________________
¡¡NO A LA GUERRA!!
Si ponemos a nuestros mensajes títulos adecuados, la gente se animará más a abrirlos y resultarán más útiles en las busquedas. ¡No a los ayuuudaaa, urgenteee y similares!

Etiquetas: capas, estructura
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 14:37.