centrar cuerpo principal y dejar extendidas algunas formas

arielcasanova · #1 (**permalink**) 15/07/2009, 13:07

El título quizá no sea muy revelador, pero la idea es la siguiente:

http://pruebas.emporia.com.ar/automotor

teniendo en cuenta esa página, lo que yo quisiera es que la franja de color amarillo oscuro (que tiene el aviso destacado y la publicdad) se extendiera hacia ambos lados de la pantalla, llegando a los extremos, y lo mismo con la franja casi negra que sirve para el pie de página.

He probado de todo, pero nada me funciona.

¿alguna ayuda?

alexk · #2 (**permalink**) 15/07/2009, 13:28

es que tienes un contenedor que encierra todo con un ancho de "70%" ponlo a "100%" luego tus otros "div" quita les el float... y ponles "margin:auto" y luego la barra amarilla y el footer ponles "100%"; y listo, pero bueno creo que sale sobrando tu div contenedor... jeje... yo así lo haría, bueno chao y suerte

PD: Esto

Código html:

Ver original<link href="estilos.css" rel="stylesheet" type="text/css">

va entre tu <head>

arielcasanova · #3 (**permalink**) 15/07/2009, 14:36

Gracias Alexk, pero me quedá todo hacia la izquierda, mirá:

http://pruebas.emporia.com.ar/automotor/index2.php

El link a la css está dentro del head... dos veces! Tenía un include del encabezado que volvía a cerrar el head. Gracias por marcarme el error.

¿Alguna pista?

alexk · #4 (**permalink**) 15/07/2009, 14:45

ok... a tu "encabezado" dale un margin:auto;
luego a tu "armarilla-central" lo mismo margin:auto; y un ancho no se width:872px;
luego a tu div "cuadros" igual dale un margin:auto; y quitale el float:left;
y ya... chao y suerte!...

arielcasanova · #5 (**permalink**) 15/07/2009, 15:06

Excelente, ya casi lo tengo... pero como centro el contenido del pie y del coso amarillo?
El text-align:center no me hace caso.

willyfc · #6 (**permalink**) 15/07/2009, 15:38

Si no lo entiendo mal esta sería la estructura que quieres lograr:

Código html:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#cabecera{width:70%; height:150px; background:#999; margin:0 auto;}
#franja_amarilla{width:100%; height:100px; background-color:#CCCC00;}
#contenido{width:70%; margin:0 auto; min-height:300px; height:auto!important; height:300px; overflow:auto; border:1px solid #333;}
#pie{width:100%; height:70px; background:#333;}
    #pie span{display:block;margin:0 auto; width:70%; text-align:center;/*si quieres de esta manera*/ }
</style>
</head>
 
<body>
<div id="cabecera"></div>
<div id="franja_amarilla"></div>
<div id="contenido">
    <p>Aqui va tu contenido</p>
</div>
<div id="pie">
    <span>El texto centrado</span>
</div>
</body>
</html>

Copialo y pegalo en un archivo nuevo para ver si es la estructura que quieres.

alexk · #7 (**permalink**) 15/07/2009, 15:38

cuando tienes un "div" contenedor al 100% de ancho... los divs que estan dentro deben tener un ancho menor obvio, y un "margin:auto;" para centrarse hasta donde te di con mi mensaje anterior centraba todo menos el footer, que por alguna razon no me deja ver el codigo con Firebug nose por que, pero bueno chao y suerte!...

arielcasanova · #8 (**permalink**) 15/07/2009, 15:56

willyfc, es exactamente eso!
gracias.
intentaré aplicarlo a mi código.
Alexk entiendo tu punto.
hago las pruebas en casa y mañana les cuento.
chau!

arielcasanova · #9 (**permalink**) 16/07/2009, 06:41

Willyfc: Pude centrar el pie, pero utilizando la misma técnica, no pude centrar la barra amarilla.
utilizando el mismo código que pegaste en el post, no me funciona el overflow en mi sitio (no sé si porque el contenido es dinámico y lo itoma de una db), por eso lo descarté, pero como el que me pasaste para el pie sí funcionó, traté de aplicarlo y no hay caso.
¿Los puedo molestar pidiendo más ayuda?
gracias!

willyfc · #10 (**permalink**) 16/07/2009, 08:20

Estube mirando tu css y es lógico que no te funcione:

1.- El body no necesita un margin:0 auto, ya que quieres que dos de tus franjas ocupen todo el ancho.

2.- No es necesario un contenedor principal y menos con ese ancho monumental que estas utilizando, además el ancho lo estas declarando 2 veces en el mismo id, como te digo para esta estructura no es necesario y si lo llegaras a utilizar para que no haya problemas de scroll horizontal solo es necesario un ancho de 100%.

3.- Para hacer una declaración de alto mínimo y que funcione en IE6 también es necesario este orden con la palabra !important

Código:

min-height:300px; height:auto!important; height:300px;

4.- Las propiedades margin y padding se pueden hacer en una solo línea, por ejemplo en el encabezado tienes 2 padding que deberían ir así:

Código:

padding:15px 0 0 10px

y lo mismo pasa con la propiedad background:

Código:

background:url(elementos/menu-recuadro.jpg) no-repeat;

5.- En la estructura principal no necesitas elementos flotantes, como vez en el ejemplo que te he puesto en mi anterior post, y cuando los utilizes tienes que limpiarlos ya que estos se salen del flujo del HTML haciendo que las cosas alrededor de el se descoloquen.

No me lo tomes a mal, son solo unos consejos para que te des cuenta de que es lo que va yendo mal en tu maquetación, la estructura que te pase es como entendí tu problema y creo que lo sigo entendiendo de la misma forma, así que te sugiero usar la maqueta que te pase e ir metiendo tus cosas ahí para que te vayas dando cuenta de como va quedando.

Aquí hay una explicación de como utilizar elementos flotantes.

Si tenes tiempo le echo una mirada más a fondo que ahora ando ocupado.

arielcasanova · #11 (**permalink**) 16/07/2009, 08:35

Willy, me has dado una clase MAGISTRAL de CSS, gracias por la buena voluntad.
REvisaré todo el código más tarde y te cuento cómo me fue con las modificaciones.
Saludos,