Foros del Web » Creando para Internet » CSS »

Maquetado

Estas en el tema de Maquetado en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 22/08/2010, 23:31
Avatar de AWesker  
Fecha de Ingreso: octubre-2008
Mensajes: 177
Antigüedad: 9 años, 1 mes
Puntos: 27
Maquetado

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...
  #2 (permalink)  
Antiguo 23/08/2010, 12:48
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Maquetado

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
Cita:
pero de esta forma me queda así (solo las sombras superior, sombra izquierda, contenido y sombra derecha en escala):
  #3 (permalink)  
Antiguo 23/08/2010, 13:10
 
Fecha de Ingreso: noviembre-2007
Mensajes: 159
Antigüedad: 10 años
Puntos: 1
Respuesta: Maquetado

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
__________________
Mis proyectos:
-Anuncios Clasificados Gratis
-Anuncios del Motor en Canarias
  #4 (permalink)  
Antiguo 23/08/2010, 15:55
Avatar de AWesker  
Fecha de Ingreso: octubre-2008
Mensajes: 177
Antigüedad: 9 años, 1 mes
Puntos: 27
Respuesta: Maquetado

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
Cita:
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...

Etiquetas: maquetado
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 20:00.