Tema: duda basica css, color bg del body sobre color bg de caja
Ver Mensaje Individual
  #9 (permalink)  
Antiguo 13/08/2011, 10:30
Trapar
 
Fecha de Ingreso: julio-2009
Mensajes: 77
Antigüedad: 15 años, 4 meses
Puntos: 5
Respuesta: duda basica css, color bg del body sobre color bg de caja
Para empezar, el problema era justamente ese, me había comido los "px" y no me daba cuenta... y además no había usado relative...

Cita:
Iniciado por C2am Ver Mensaje
que te parece esta opción que no hace uso de la posicion absoluta:

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.  
  4. <style type="text/css">
  5. /* Estilo principal */
  6.  
  7. *{margin:0;
  8. padding:0;
  9. }
  10. body { background-color:#194e09; }
  11.  
  12. #caja, #cabecera, #principal {
  13.     margin:0 auto;
  14.     width:960px;
  15.     position: relative;
  16.     background-color: #9F6;
  17.     overflow:hidden;
  18. }
  19.  
  20. #logo {
  21.     width:148px;
  22.     height:197px;
  23.     border:1 solid #FFF;
  24.     position:relative;
  25.     background-color: #F96;
  26.     float:left;
  27.     
  28. }
  29.  
  30. #banner {
  31.     width:810px;
  32.     height:147px;
  33.     float:left;
  34.     background-color: #FF0;
  35. }
  36.  
  37. #menu {
  38.     width:810px;
  39.     height:50px;
  40.     float:left;
  41.     background-color: #93C;
  42. }
  43.  
  44. #costado {
  45.     width:21px;
  46.     height:636px;
  47.     float:left;
  48.     background-color: #306;
  49. }
  50.  
  51. #costado2 {
  52.     width:121px;
  53.     height:702px;
  54.     float:right;
  55.     background-color: #CCC;
  56. }
  57.  
  58.  
  59. #contenido {
  60.         width: 688px;
  61.         height: 636px;
  62.         background-color:#cddcc8;
  63.     }
  64.  
  65. #pie {
  66.     width:838px;
  67.     height:66px;
  68.     background-color: #0FF;
  69. }
  70.  
  71.  
  72. </style>
  73. </head>
  74.  
  75.  
  76.  
  77. <body>
  78.     <div id="caja">
  79.  
  80.         <div id="cabecera">
  81.                 <div id="logo">
  82.                 imagen logo
  83.                 <img src="img\logo.gif">
  84.                 </div>
  85.                 
  86.                 <div id="banner">
  87.                 imagen banner
  88.                 <img src="img\banner.gif">
  89.                 </div>
  90.                 
  91.                 <div id="menu">
  92.                 Menu menu menu menu include'menu.php'; ?>
  93.                 </div>
  94.         </div>
  95.         
  96.         
  97.         
  98.         <div id="principal">    
  99.                 <div id="costado">
  100.                     costado costado costado
  101.                     <img src="img\costado.gif">
  102.                 </div>
  103.                 
  104.                 <div id="costado2">
  105.                     <img src="img\costado2.gif">
  106.                 </div>
  107.                 <div id="contenido">
  108.                     php php include'index2.php'; 
  109.                 </div>
  110.               
  111.               
  112.                 <div id="pie">
  113.                     pie pie
  114.                     <img src="img\pie.gif">
  115.                 </div>
  116.          
  117.         </div>
  118.         
  119.         
  120.  
  121.     </div>
  122.  
  123. </body>
  124.  
  125. </html>
En verdad luego de postear mi estilo, le hice modificaciones, cambie todo el tamaño de la web por 960 (y por ende todas las imágenes), etc. Voy a ver lo de usar relative, y también lo de cambiar todo por porcentajes (aunque entiendo que al menos el ancho de la web debe estar definido, ya que para que un porcentaje tenga sentido tiene que basarse en algo definido). Pero... en este caso puedo usar los relative con float y supongo que queda bien (no puedo probarlo ahora) porque tengo definido los tamaños exactos de cada capa, pero yo pensaba dejarlas sin hegiht y width definidos... así que ahí tendría que ver si funciona bien de esa manera.

En cuanto a los overflow sé que me faltan incluirlos, pero como recién empiezo lo voy haciendo por etapas.

Probé lo de poner border: 1 solid; pero no veo ningun cambio, debe ser porque puse las capas con absolute y ninguna distancia entre cada una, por lo que el borde calculo que queda tapado por la otra.. aunque igualmente no quiero que tengan ningún borde, o acaso me ayuda ello en algo? (como si sirve poner bg a todas para identificar errores y trabajar más cómodo).

-----------------------



Cita:
Iniciado por emprear Ver Mensaje
unas duda Trapar,
en que servidor estás trabajando, que tus rutas son algo\algo ?
tus archivos, tienen UTF-8 BOM?
cualquier error o header extraño que te pase php antes del Doctype puede generar un error impredecible.
Para que incluis el Doctype Xhtml, si tu archivo no respeta tal especificación, no alcanza con declararlo, hay que respetarlo.


Saludos
-Trabajo en xampp (apache, mysql). Mi idea es hacer incapie en php y mysql por ahora, pero quiero saber lo necesario de css (y html) para poder trabajar a su vez cómodo con php...
-La verdad no se lo que es UTF-8 BOM ni como saber si lo tienen...
-Sí, sé que mis archivos no respetan las normas como deberían, pero como estoy practicando lo hago por etapas, ahora cuando tenga un minimo de funcionabilidad la web me dedicaré a tratar de ajustarla a las normas y las buenas costumbres.
Por cierto, ¿dónde puedo consultar los distintos doctypes para asi tratar de respetar el Doctype que inclui?

Gracias a ambos.