problema presentación página

Alberto_Mad · #1 (**permalink**) 19/06/2012, 07:49

Buenas tardes,

tengo un problema con la presentación de una página y haber si alguien me puede echar una mano con ella.

Si nos fijamos en la página de foros del web (pongo este ejemplo para situar la escena) se ve como los post están enmarcados en gris y el resto de la página es blanco. Lo que a mi me pasa es algo similar al dibujo que muestro a continuación

Código HTML:

Ver original.__________________________
       |    _______________       |       
            |              | 
       |    |              |      |
         1  |      2       |
       |    |              |      |
            |______________|
       |                          |                                                    
                   3
       |__________________________|

El número 1 está en gris, el número 2 el contenido de la página web y está sobre blanco y el número 3 debería de estar en gris pero me sale en blanco y por más vuelta que le doy nose por qué no lo pinta en gris.

Pongo el CSS de la página:

Código CSS:

Ver originalbody { 
     background-color:#CCCCCC;
}
#general { 
    width: 760px;
    height: 660px;
    margin: 0 auto;
    padding: 5px 10px 10px 10px;
        background:url(../images/bg.gif) top left no-repeat;
    background-color:#FFFFFF;
    
}
...

Agradezco de antemano la ayuda mostrada.

Muchas gracias.

noruas · #2 (**permalink**) 19/06/2012, 17:37

No me queda nada claro lo que intentas hacer pero bueno

Lo que entiendo es que tienes 2 cajas, una dentro de otra, la de fuera es gris y la de dentro blanca no?

O es que el fondo del body es lo gris y solo tines una caja con fondo blanco? Que es lo que aprecio de tu css...

Muestranos el codigo de la pagina para ver mejor que es lo que buscas.

De todas formas te explico:

Puedes poner una caja que englobe a la web tipo "container" con fondo gris, y una caja dentro para el contenido, la centras dandole algo de margin por cada lado y le pones fondo blanco. Visualmente verias una caja blanca rodeada de otra gris.

Alberto_Mad · #3 (**permalink**) 22/06/2012, 07:04

Siento haberme explicado tan mal

Hay una sola caja que es la número 2 y el background de la página es en gris y corresponden a los números 1 y 3, lo que no entiendo es porque la parte que está como número 3 se pinta de blanco en vez de estar pintada de gris que es como debería de estar.

A continuación dejo un poco de código que es donde se pintan estas zonas.

Código PHP:

Ver original...
<body>
    <div id="general">
        <div id="cabecera">
        </div>
           ...
       </div>
</body
</html>

Muchas gracias.

noruas · #4 (**permalink**) 22/06/2012, 11:32

Pues a mi no me pasa lo mismo que a ti, yo veo la caja blanca y cuando termina la caja aparece el fondo gris...

Código:

<html>
<head>
<style type="text/css">
body {
background-color: #CCCCCC;
}
#general {
 width: 760px;
/* height: 660px; <---- Le quito la altura para que veas que la caja solo llena el contenido que le he puesto*/
 margin: 0 auto;
 padding: 5px 10px 10px 10px;
 background:url(../images/bg.gif) top left no-repeat;
 background-color: #FFFFFF;
}
</style>
</head>
<body>
 <div id="general">
  <div id="cabecera">TEXTO CABECERA</div>
  <br />
  TEXTO CAJA
  <br />
  <br />
  TEXTO CAJA
 </div>
</body>
</html>

A ver si lo que te pasa es que has puesto una altura muy grande y en apariencia te parece que el blanco que estas viendo es del fondo... Solo declara altura para una caja si esa caja tiene que tener una altura fija por algun motivo especial... Si no no le pongas altura.

Hay un addon para navegadores muy util que se llama firebug, que te permite entre otras muchas cosas, ver la maquetacion de la pagina.

Hay un truquito tambien para ver hasta donde llegan las cajas, que es poner momentaneamente un borde a cada caja, para ver donde se situa cada una realmente... Suele ser util a veces...

Saludos.