[SOLUCIONADO] Centrar fondo sobre contenedor

[Diego506]

Hola amigos!

El tema es este:

Tengo mi contenedor principal con un width:100% con un background color grey y el contenedor de información, la página en sí, con el ancho definido width:1170px y un background color white.

Puedo centrarlos con el margin auto en el contenedor principal pero el color gris del primero me tapa el blanco, ya me maree de las opciones que probe de position relative, absolute y solo se vé como quiero cuando les colocó float pero no queda centrada sino marginada a la izquierda.

Les pongo parte del código a ver si es más explicativo:

#contenedor_prin{

width:100%;
background-color:#dddddd;
position:relative;



}

#contenedor_sitio{

background-color:white;
margin:auto;
width:1170px;
float: left;



GRACIAS POR LA AYUDA!

[NueveReinas]

Bienvenido a FDW. Te recomiendo utilizar las etiquetas Highlight para evitar leer todo es texto plano y pasar a leer código.



Ahora, respecto al tema: Por favor, añade el respectivo HTML.

[GemliosG]

En mi caso lo hice con una imagen. No se si es lo que buescas pero este fue mi código

background: url(../Image/fondos/!!1.jpg) center no-repeat fixed;

[Diego506]

Gracias por el dato del código, no puedo o no sé editar el tema para agregarlas....

En cuanto a la imagen, es buen dato pero no es lo que busco en este momento.

Gracias igualmente!

Les envio el link del sitio para que vean el error en vivo jajaja y noten que en algunos links el fondo se ve perfectamente.

[URL="http://www.encendidoferman.com.ar/descargas/prueba/index.php?page=main"]

[NueveReinas]

Iniciado por Diego506

Gracias por el dato del código, no puedo o no sé editar el tema para agregarlas....

En cuanto a la imagen, es buen dato pero no es lo que busco en este momento.

Gracias igualmente!

Les envio el link del sitio para que vean el error en vivo jajaja y noten que en algunos links el fondo se ve perfectamente.

[URL="http://www.encendidoferman.com.ar/descargas/prueba/index.php?page=main"]

No se porque, pero no se puede editar el primer post (#1) después de haber recibido una respuesta en el tema.

Por otra parte, en el enlace no veo nada raro. ¿No me harías una flechita al menos con Paint para ver el problema? Y de paso explicas un poco mejor qué quieres.

[Diego506]

fijate que en el home del link, el fondo como se ve (todo gris) y en el link actividades (blanco sobre gris) Yo lo que quisiera es que sea así para todos los links.

[GemliosG]

Diego506 yo no veo ningún problema, todos me salen igual

[NueveReinas]

Iniciado por Diego506

fijate que en el home del link, el fondo como se ve (todo gris) y en el link actividades (blanco sobre gris) Yo lo que quisiera es que sea así para todos los links.

No te entiendo. ¿Te refieres a esto?

http://oi59.tinypic.com/2090b4y.jpg

[GemliosG]

No se si es problema del navegador?

Yo uso chrome y firefox, y salen bien.

Cuál usas tú?

[NueveReinas]

Iniciado por GemliosG

No se si es problema del navegador?

Yo uso chrome y firefox, y salen bien.

Cuál usas tú?

Uso Chrome en una pantalla de 1920 x 1200
Así que imagino que lo blanco es el fondo del body.

[GemliosG]

Cuando hice más pequeña la página si pude ver que el fondo grís dejaba ver por debajo el fondo blanco, pero eso no se resolvería poniendo el backgraund gray en cover o 100%

[Diego506]

exacto! si ves el home, esta todo gris. Como que se monta sobre el blanco.

[GemliosG]

Lo último es una pregutna o una afirmación?

[Diego506]

Les colocó la parte del código con el contenedor al 100% de width gris y el contenedor con 1170px width blanco.

lo de exacto, me refería a que la imagen que colgo NueveReinas es del link ACTIVIDADES del sitio y es como quiero que se vean todos los link. por ejemplo, el link del HOME, no se vé así, fijate la imagen que colgue anteriormente.

Código CSS:

#contenedor_prin{
 
    width:100%;
    background-color:#dddddd;
    position:relative;
    
 
 
 
}
 
#contenedor_sitio{
 
    background-color:white;
    margin:auto;
    width:1170px;
    
    
 
/*
box-shadow: 0 .1em 1em black;
-webkit-box-shadow: 0 .1em 1em black;
-moz-box-shadow: 0 .1em 1em black;
-o-box-shadow: 0 .1em 1em black
*/
 
}
 

[Diego506]

Lo que dices GemliosG, no lo había notado. Al reducir la vista del navegador se ve el fondo blanco por debajo ¿?¿?¿?¿?¿? eso me pone más loco jajajaaj. No sé como resolverlo y llegar a lo que quiero.

[NueveReinas]

Prueba esto:

Código CSS:

body {
    background: /*aquí el color de tu gris, que creo que es #dddddd */ ;
}
 

Y también en "#contenedor_sitio":

Código HTML:

background-color: /*aquí el color de tu gris, que creo que es #dddddd */ ;
 

[Diego506]

No entiendo, en cual pondría el blanco?

Lo que quieres decirme es que ponga un color de fondo mediante CSS y el otro directamente en las etiquetas HTML de los include de PHP.

Porque olvide mencionar que tengo el index con los llamados a los difetentes links con includes: foot, home, header.....

Pongo el fondo gris del contenedor 100% en la hoja de estilos y el blanco del sitio en la etiqueta html de cada include ?

[NueveReinas]

Iniciado por Diego506

No entiendo, en cual pondría el blanco?

Lo que quieres decirme es que ponga un color de fondo mediante CSS y el otro directamente en las etiquetas HTML de los include de PHP.

Porque olvide mencionar que tengo el index con los llamados a los difetentes links con includes: foot, home, header.....

Pongo el fondo gris del contenedor 100% en la hoja de estilos y el blanco del sitio en la etiqueta html de cada include ?

Te estás complicando mucho

El color de fondo de tu "#contenedor_prin" es "#dddddd", que es gris.

Entonces, el color de fondo de tu "#contenedor_sitio" y del body (cuerpo) de la página deben ser del mismo color para que no haya "espacios blancos".

¿Se entiende?

[GemliosG]

iginal

#contenedor_prin{

width:100%;
background:#dddddd no-repart cover;
}
No se si esto te ayude pero mira a ver

[Diego506]

puse esto y se ve todo blanco ahora .....

Código CSS:

#contenedor_prin{
 
    width:100%;
    
    background:#dddddd no-repart cover;
    position:relative;
    
}
 
#contenedor_sitio{
 
    background-color:white;
    margin:auto;
    width:1170px;
    
 
}
 

[Diego506]

NueveReinas, no entiendo lo que me quieres decir, si pongo los dos con el mismo color no logro lo que quiero y yo necesito el blanco del sitio sobre el gris del contenedor al 100%. Como la imagen que colque del link actividades.

[NueveReinas]

Iniciado por Diego506

NueveReinas, no entiendo lo que me quieres decir, si pongo los dos con el mismo color no logro lo que quiero y yo necesito el blanco del sitio sobre el gris del contenedor al 100%. Como la imagen que colque del link actividades.

Entonces el blanco ya lo tenías.

[Diego506]

Si, para mi es un tema con los include, porque el link actividades esta perfecto, el problema son los demas... en servicios y galería, el blanco se ve pero no llega hasta el foot del sitio.

Resumiendo: Quisiera, que todos los links se vieran con los colores de fondo como el link de ACTIVIDADES.

[NueveReinas]

Iniciado por Diego506

Si, para mi es un tema con los include, porque el link actividades esta perfecto, el problema son los demas... en servicios y galería, el blanco se ve pero no llega hasta el foot del sitio.

Resumiendo: Quisiera, que todos los links se vieran con los colores de fondo como el link de ACTIVIDADES.

Con "links"/"link" quizá te refieras a las páginas.
Pero es que tu página de ACTIVIDADES tiene un fondo blanco porque el footer no llega hasta el final de la página. O lo que es lo mismo; el resto de páginas tienen la altura necesaria como para que no llegues a ver el fondo blanco.

[fede5426]

Tenes elementos flotados dentro de los articles, colocale "overflow:hidden" a article y se soluciona el problema.

[Diego506]

Es verdad, eso puede ser, yo no le di el alto definido a ninguna página (sí, con links me refiero a las secciones de la pág, de la botonera principal).

Pensé que lo debía dejar libre y según el contenido que contenga se definia su alto.

[fede5426]

[NueveReinas]

Iniciado por Diego506

Pensé que lo debía dejar libre y según el contenido que contenga se definia su alto.

Es que eso ya lo hace automáticamente...

[Diego506]

SIIIIIIIIIIIIIIII fede5426, era eso, cree una clase con el overflow:hidden y se la apliqué a los article o main de cada include y santo remedio!!!.

Si no es tanta molestia me gustaría saber que hice realmente, que oculte y para que? jajajajaj así aprendo.

MUCHISIMAS GRACIAS A TODOS POR SU TIEMPO AMIGOS! les estoy muy agradecido.

[NueveReinas]

Iniciado por Diego506

SIIIIIIIIIIIIIIII fede5426, era eso, cree una clase con el overflow:hidden y se la apliqué a los article o main de cada include y santo remedio!!!.

Si no es tanta molestia me gustaría saber que hice realmente, que oculte y para que? jajajajaj así aprendo.

MUCHISIMAS GRACIAS A TODOS POR SU TIEMPO AMIGOS! les estoy muy agradecido.

Aquí tienes más info: http://www.w3schools.com/cssref/pr_pos_overflow.asp