Foros del Web » Creando para Internet » CSS »

centrar cuerpo principal y dejar extendidas algunas formas

Estas en el tema de centrar cuerpo principal y dejar extendidas algunas formas en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 15/07/2009, 14:07
Avatar de arielcasanova  
Fecha de Ingreso: octubre-2004
Ubicación: Bahía Blanca - Argentina
Mensajes: 332
Antigüedad: 13 años, 2 meses
Puntos: 1
centrar cuerpo principal y dejar extendidas algunas formas

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?
__________________
Ariel Casanova
diseño y desarrollo web estratégico
www.emporia.com.ar
  #2 (permalink)  
Antiguo 15/07/2009, 14:28
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: centrar cuerpo principal y dejar extendidas algunas formas

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
  1. <link href="estilos.css" rel="stylesheet" type="text/css">
va entre tu <head>
  #3 (permalink)  
Antiguo 15/07/2009, 15:36
Avatar de arielcasanova  
Fecha de Ingreso: octubre-2004
Ubicación: Bahía Blanca - Argentina
Mensajes: 332
Antigüedad: 13 años, 2 meses
Puntos: 1
Respuesta: centrar cuerpo principal y dejar extendidas algunas formas

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?
__________________
Ariel Casanova
diseño y desarrollo web estratégico
www.emporia.com.ar
  #4 (permalink)  
Antiguo 15/07/2009, 15:45
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: centrar cuerpo principal y dejar extendidas algunas formas

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!...
  #5 (permalink)  
Antiguo 15/07/2009, 16:06
Avatar de arielcasanova  
Fecha de Ingreso: octubre-2004
Ubicación: Bahía Blanca - Argentina
Mensajes: 332
Antigüedad: 13 años, 2 meses
Puntos: 1
Respuesta: centrar cuerpo principal y dejar extendidas algunas formas

Excelente, ya casi lo tengo... pero como centro el contenido del pie y del coso amarillo?
El text-align:center no me hace caso.
__________________
Ariel Casanova
diseño y desarrollo web estratégico
www.emporia.com.ar
  #6 (permalink)  
Antiguo 15/07/2009, 16:38
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: centrar cuerpo principal y dejar extendidas algunas formas

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

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

Copialo y pegalo en un archivo nuevo para ver si es la estructura que quieres.
__________________
WFC
codigo82
  #7 (permalink)  
Antiguo 15/07/2009, 16:38
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: centrar cuerpo principal y dejar extendidas algunas formas

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!...
  #8 (permalink)  
Antiguo 15/07/2009, 16:56
Avatar de arielcasanova  
Fecha de Ingreso: octubre-2004
Ubicación: Bahía Blanca - Argentina
Mensajes: 332
Antigüedad: 13 años, 2 meses
Puntos: 1
Respuesta: centrar cuerpo principal y dejar extendidas algunas formas

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!
__________________
Ariel Casanova
diseño y desarrollo web estratégico
www.emporia.com.ar
  #9 (permalink)  
Antiguo 16/07/2009, 07:41
Avatar de arielcasanova  
Fecha de Ingreso: octubre-2004
Ubicación: Bahía Blanca - Argentina
Mensajes: 332
Antigüedad: 13 años, 2 meses
Puntos: 1
Respuesta: centrar cuerpo principal y dejar extendidas algunas formas

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!
__________________
Ariel Casanova
diseño y desarrollo web estratégico
www.emporia.com.ar
  #10 (permalink)  
Antiguo 16/07/2009, 09:20
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: centrar cuerpo principal y dejar extendidas algunas formas

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.
__________________
WFC
codigo82
  #11 (permalink)  
Antiguo 16/07/2009, 09:35
Avatar de arielcasanova  
Fecha de Ingreso: octubre-2004
Ubicación: Bahía Blanca - Argentina
Mensajes: 332
Antigüedad: 13 años, 2 meses
Puntos: 1
Respuesta: centrar cuerpo principal y dejar extendidas algunas formas

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,
__________________
Ariel Casanova
diseño y desarrollo web estratégico
www.emporia.com.ar
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 00:26.