Maquetado

[AWesker]

Amigos conocedores del arte CSS, necesito de su ayuda para realizar un maquetado que me ha complicado más de lo que esperaba.

La cuestión es esta: debo hacer un diseño (compatible con todos los navegadores o por lo menos ie7, ie8, mozilla, chrome y safari).
La complicación es que el diseño debe aparentar ser el clásico contenido encabezado-contenido-pie, pero el contenido debe ser independiente del encabezadoy el pie, pero los tres dentro de un wrapper central para que el contenido se centre automáticamente por cuestiones de presentación. Hice un pequeño modeo de como debería quedar:

El borde negro representa el wrapper central.

Aquí el código del Contenido (que es el más complicado para mi)

Código:

 
#SombraSuperior{
clear:both;
background-image:url(templates/Krome/images/shadowntop.png);
background-repeat:no-repeat;
background-position:left;
margin-left:-8px;
background-color:transparent;
height:24px;
width:962px;
}
#SombraIzquierda{
clear:both;
float:left;
z-index:2;
width:20px;
background-image:url(images/shadownleft.png);
background-position:left;
height:100%;/*200px*/
left:14px;
}
#Cuerpo{
position:absolute;
left:2px;
float:left;
width:942px;
height:100%;
/*background-color:#06C;*/
margin-top:-5px;
left:33px;
}
#SombraDerecha{
z-index:2;
float:left;
background-image:url(images/shadownright.png);
width:10px;
height:100%;/*200px*/
right:22px;
}
 

Código:

 
<div id="SombraSuperior"><!-- Inicio SombraSuperior -->
      </div><!-- Fin SombraSuperior -->  
      <div id="SombraIzquierda"><!-- Inicio SombraIzquierda -->
      </div><!-- Fin SombraIzquierda --> 
      <div id="Cuerpo"><!-- Inicio Cuerpo -->
      &nbsp;
      </div><!-- Fin Cuerpo --> 
      <div id="SombraDerecha"><!-- Inicio SombraDerecha -->
      &nbsp;
      </div><!-- Fin SombraDerecha --> 
 

pero de esta forma me queda así (solo las sombras superior, sombra izquierda, contenido y sombra derecha en escala):

Espero me puedan ayudar. Saludos...

[kseso?]

Típica estructura de un contenedor general centrado que tiene un padding, con las tres secciones interiores separadas en la vertical con ayuda de márgenes superior/inferior o ambas. Y esas tres secciones no necesitarían ir flotadas.

Demasiada escueta la respuesta, pero parece que ya domina bastante el css.

Atentamente

P.D.: no acerté a comprender exáctamente el significado de

pero de esta forma me queda así (solo las sombras superior, sombra izquierda, contenido y sombra derecha en escala):

[moisesra]

Yo lo haría con una imagen de la sombra superior metida en un div al igual para la parte inferior y para los lados que la imagen de la sombra se repita en la vertical, mas sencillo creo yo...

<div> //con la sombra superior mediante css
<div> //con el contenido y que se repita la sombra en Y siempre y cuando tenga un tamaño especifico de ancho mediante css
<div> //con la sombra inferior mediante css

[AWesker]

kseso? gracias por la respuesta. Pensé que nadie le pondría importancia al tema porque al parecer es algo básico de CSS, pero ya que al no ser mi campo se convierte en algo difícil jeje.

en cuanto a

pero de esta forma me queda así (solo las sombras superior, sombra izquierda, contenido y sombra derecha en escala):

me referia a que solo había incluido esos divs en el diseño.

Te comento que probé quitándole los float, pero los divs quedaban uno debajo del otro. Así que tuve que dejarles el atributo.

moisesra en efecto, las sombras superior e inferior son una sóla imagen. Pero tu consejo de colocar los divs de tal forma que se repitan en y me dieron el punto clave para la solución (y te cuento que en mozilla, IE8 e IE7 se ven muy, muy muy parecidos, solo por algunos detalles que se pueden solucionar con unos <!--[if IE 8]>).

Esta es la imagen de cómo me quedó en layout (los colores solo son para efecto de distinguir las partes ):



Y aquí esta el código (sólo lo del Contenido):

Código:

 
#SombraSuperior{
		clear:both;
		background-image:url(images/shadowntop.png);
		background-repeat:no-repeat;
		background-position:left;
		margin-left:-8px;
		background-color:transparent;
		height:24px;
		width:962px;
	}
	#SombraIzquierda{
		float:left;
		clear:both;
		z-index:2;
		width:20px;
		background-image:url(images/shadownleft.png);
		height:/*100%;*/200px;
		margin-left:-17px;
		background-repeat:repeat-y;
	}
	#Cuerpo{
		float:left;
		left:2px;
		width:940px;
		height:100%;
		/**/background-color:#06C;
		margin-top:-5px;
		left:33px;
	}
	#SombraDerecha{
		float:right;
		z-index:2;
		background-image:url(images/shadownright.png);
		width:10px;
		height:/*100%;*/200px;
		right:22px;
		background-repeat:repeat-y;
		margin-right:-9px;
	}
	#SombraInferior{
		clear:both;
		background-image:url(images/ShadownBottom.png);
		height:24px;
		width:964px;
		background-repeat:no-repeat;
		background-position:top;
		margin-top:-5px;
		margin-left:-9px;
	}

Código:

 
<div id="SombraSuperior"><!-- Inicio SombraSuperior -->
        </div><!-- Fin SombraSuperior -->  
        <div id="SombraIzquierda"><!-- Inicio SombraIzquierda -->
        </div><!-- Fin SombraIzquierda --> 
        <div id="Cuerpo"><!-- Inicio Cuerpo -->
        Probando Texto<br />
		Probando texto<br />
        </div><!-- Fin Cuerpo --> 
        <div id="SombraDerecha"><!-- Inicio SombraDerecha -->
        </div><!-- Fin SombraDerecha --> 
		<div id="SombraInferior"><!-- Inicio SombraInferior -->
		</div><!-- Fin SombraInferior -->

Gracias por su ayuda, de no haber preguntado, seguramente estaría a punto de tirar la toalla. Saludos...