Maquetacion de la pagina web

[carlosferdo]

Buenas tardes.
Me gustaria que me ayudarais en lo que quiero hacer.



A traves del marco que tengo creado quiero añadirselo a mi web de tal forma que sea la resolucion que sea se estire o se reduzca.

Por lo que llevo enrreado he visto que tengo que dividir el marco en (EsquinaIzquierda, centro y EsquinaDerecha) y ampliarlo segun porcentaje.. pero no soy capaz.

Lo siento si no me he explicado bien... a ver si alguien me ayuda

[cristian_cena]

Hola carlos.
No veo la imagen pero podes trabajar la capa del centro en porcentaje (width: ...%;) y el resto en píxeles.

Saludos.

[carlosferdo]

Gracias por responder Cristian.

Ya que no aparece lo que busco es algo parecido a esto:

|---------------------------------------------------|

Un marco dividido en (esquina superior derecha, esquina superior izquierda y centro) que varie segun la resolucion de la pantalla.

Si trabajo con pixeles y porcentajes no consigo hacer que cuadre la Esquina superior derecha con el central...

[cristian_cena]

Calculo que si definis las esquinas en pixeles y el centro en porcentajes no habría problemas pero si ponés el código (html+css) va a ser mejor, así lo vemos bien.
Trabajar para múltiples resoluciones va a depender del diseño, éste te pedirá usar media-queries o solo maquetación líquida.

[carlosferdo]

Ok, aqui te dejo el codigo CSS y HTML unicamente de eso que quiero formar:

CSS:

Código:

.esquinaIzquierda{
	background-image :url("esquinaBarrainferiorIzq.png" ) ;
	background-repeat:no-repeat;
	margin-left:200px;
	height:30px;
	width:1000px;

}


.esquinaDerecha{
	background-image:url("esquinaBarrainferiorder.png") ;
	background-repeat:no-repeat;
	background-position:right;
	margin-right:200px;
	height:30px;
	width:1000px;
}


.centro{
	background-image:url("partecentralBarrainferiorr.png") ;
	background-repeat:no-repeat;
	height:100%;
	width:100%;
}

HTML:

Código:

 <div class="esquinaIzquierda">
 	<div class="centro">
		<div class="esquinaDerecha">
        </div>
    </div>
</div>

Las dos esquinas me salen muy bien ajustadas con el pixel pero el central se me superpone al a "ESQUINA-IZQUIERDA".

[cristian_cena]

sospecho que puede haber una mejor forma de hacerlo, postea una captura de tu diseño.

[carlosferdo]

Aqui os dejo una captura de la web.

Código:

http://subir-imagenes.es/?v=tt.png

El cuadro rojo seria donde quiero meter el marco con fondo blanco que os estoy contando... iria colocado debajo del menu principal horizontal.

[carlosferdo]

Ya lo he solucionado mas o menos... ¿Esta correcta esta forma?

CSS

Código:

<style type="text/css">
.lateral { background-image: url(esquinaBarraSuperiorIzq.png);
			background-repeat: no-repeat;
            float:left;
            width:20px;
            height:80px;
			margin-left: 15%;
}
#central { 
			background-image: url(partecentralBarraSUperior.png);
			background-repeat: repeat; 
               float:left;
               width:60%;
			   height:50px;
               
}


#lateral2 { 
			background-image: url(esquinaBarraSuperiorder.png);
			background-repeat: no-repeat; 
            float:left;
            width:25px;
            height:80px;
			margin-right: 15%;
}
</style>

HTML:

Código:

<div class="lateral"></div>
<div id="central"></div>
<div id="lateral2"></div>

Código:

http://subir-imagenes.es/?v=marcosuper.png

[carlosferdo]

Ya tengo perfecto la maquetacion y el diseño como queria. (HTML-CSS)

Alguien me podria guiar de que paso debo realizar ahora...
Yo vengo de manejar webs con gestores de contenido y me estoy iniciando en la creacion de webs... si alguien hiciese el favor de irme guiando se lo agradeceria.