Resolucion 800x600, o 1024 se me desmonta todo

[martines]

Buenas, cuando cambio la resolucion y pongo una inferior a 1024 se me desmonta todo, la foto del head, el menu y pie se me corta, pero cuando pongo otra resolucion mas grande 1024 todo funciona perfectamente. En internet explorer, el menu se me desplaza hacia la izquierda. Como puedo solucionar todo esto?

Código PHP:

  body {background-color: #91aefe; 
     margin:0px; 
    } 
 
#head { 
      margin:0px;  
      margin-top:0px; 
      background-image: url("../files/head.jpg"); 
      background-position:  left; 
      background-position: relative; 
      background-repeat: no-repeat; 
      height: 140px; 
      width: auto; 
      } 
 
#head p { 
     text-align: center; 
     color: #fff; 
     font: 120% "Trebuchet MS", Arial, Helvetica, sans-serif; 
     font-weight: bold; 
     font-style: oblique; 
     padding-top: 40px; 
     padding-left: 570px; 
     margin-top: 0px; 
      
       } 
       
#menu {   
        width: auto;  
        padding: 0px;   
        float:right;  
        padding:0px; 
        height:auto; 
        font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif; 
        font-weight: bold; 
        background-image: url("../files/menu.jpg"); 
        background-position: relative; 
        background-repeat: no-repeat; 
        height: 40px; 
        margin-top:0px; 
        position: relative; 
                } 
         
#menu ul, li { list-style-type: none; 
        } 
 
#menu ul  
        { width:auto; 
          margin:auto; 
        } 
         
#menu li {   
         display: inline;   
         position:relative; 
          
         }   
 
/* separacio entre boto          
#menu li+li a { 
         border-left: 1px solid #FFF;  
          } 
           
*/           
#menu a {   
      color: #fff; 
      text-decoration: none;   
      text-align: center; 
      width: 1%;  
      margin-left: 130px; 
      float: left;   
      padding: 7px;  
      display: block;  
      outline:none; 
      cursor:pointer; 
      position: relative; 
        }  
 
#menu a:hover { /* background: #FFFFFF; fondo cuadro*/   
               color:#000000; 
             } 
 
 
#contenido { border: 3px solid #FF0000;  
             width:850px;  
             height:600px; 
             padding:3px;  
             margin-top:50px;  
             margin-left: 180px; 
             margin-bottom: 20px; 
             float: left;  
             position: relative; 
             } 
 
#pie { 
     width:auto;  
     background-image: url("../files/pie.jpg"); 
     background-position: relative; 
     background-repeat: no-repeat; 
     height:80px;  
     margin-top:0px;  
     clear: both; 
     padding: 1px; 
     position: relative; 
     padding-bottom: 0px; 
     } 
      
#pie p { 
     text-align: center; 
     color: #fff; 
     font: 120% "Trebuchet MS", Arial, Helvetica, sans-serif; 
     font-weight: bold; 
     margin-bottom: 0px; 
     position: relative; 
     }  
   

[d3xf4ult]

background-position: relative; puede influir aquí el problema.

Lo que puedes hacer es poner las cantidades referenciadas en % en vez de ponerlas en px. Así aunque se visualize en cualquier monitor, cualquier resolución o incluso ajustando el tamaño de la ventana del navegador las cantidades en % harán que el estilo se "adapte al medio".

Salu2

[jomaruro]

Hola:

Es que el background-position: relative no existe.

Saludos.

[martines]

Algunas cosas las e cambiado, pero sigue pasando lo mismo, por ejemplo al poner la resolucion, 800x600 solo se ve una parte, abajo me sale la barra desplazadora, tiro hacia la derecha y entonces no me sigue la imagen del head, se corta alli. Dejo otra vez el codigo.

Gracias a todos

Código PHP:

  body {background-color: #91aefe;
     margin:0%;
    }

#head {
      margin:0%; 
      margin-top:0%;
      background-image: url("../files/head.jpg");
      background-position:  left;
      background-repeat: no-repeat;
      height: 140px;
      width: 100%;
      }

#head p {
     text-align: center;
     color: #fff;
     font: 120% "Trebuchet MS", Arial, Helvetica, sans-serif;
     font-weight: bold;
     font-style: oblique;
     padding-top: 40px;
     padding-left: 570px;
     margin-top: 0%;
     
       }
      
#menu {  
        width: 100%; 
        padding: 0%;  
        float:right; 
        padding:0%;
        height:auto;
        font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
        font-weight: bold;
        background-image: url("../files/menu.jpg");
        background-repeat: no-repeat;
        height: 40px;
        margin-top: 0%;
        position: relative;
                }
        
#menu ul, li { list-style-type: none;
        }

#menu ul 
        { width:auto;
          margin:auto;
        }
        
#menu li {  
         display: inline;  
         position:relative;
         
         }  

/* separacio entre boto         
#menu li+li a {
         border-left: 1px solid #FFF; 
          }
          
*/          
#menu a {  
      color: #fff;
      text-decoration: none;  
      text-align: center;
      width: 1%; 
      margin-left: 130px;
      float: left;  
      padding: 7px; 
      display: block; 
      outline:none;
      cursor:pointer;
      position: relative;
        } 

#menu a:hover { /* background: #FFFFFF; fondo cuadro*/  
               color:#000000;
             }


#contenido { border: 3px solid #FF0000; 
             width:850px; 
             height:600px;
             padding:3px; 
             margin-top:50px; 
             margin-left: 180px;
             margin-bottom: 20px;
             float: left; 
             position: relative;
             }

#pie {
     width: 100%; 
     background-image: url("../files/pie.jpg");
     background-repeat: no-repeat;
     height: 80px; 
     margin-top: 0%; 
     clear: both;
     padding: 1px;
     position: relative;
     padding-bottom: 0%
     }
     
#pie p {
     text-align: center;
     color: #fff;
     font: 120% "Trebuchet MS", Arial, Helvetica, sans-serif;
     font-weight: bold;
     margin-bottom: 0%;
     position: relative;
     }  
   

[Tedel]

Hay un diseño "líquido", que se adapte al ancho de la pantalla.

[martines]

como que hay un diseño "liquido"?

[function]

Mira viendo tu codigo te podria decir lo siguiente:

Primero debes de hacer un contenedor

Código CSS:

#contenedorr {
    text-align:left; /* Esto te sirve para IE*/
    width:1000px; /* Aqui pones la resoluciones que quieres trabajar, es decir si deseas hacerlo global, deberias dejarlo en mil o al menos 960, si deseas que tabien se vean en 800x600 deberias ponerle entonces 780 o 760, eso es a tu criterio*/
    margin:auto; /* esto es muy importante, deberias agregarle el 0 antes del auto para que IE6 lo tome sino no sabe que hacer y a veces falla, pero en general lo uso solamente asi, esto indica que 0 para IE debe ser el margen general, y que auto le diga a los navegadores nuevos sobretodo FF que hay un margen automatico pero absoluto, deberias de poner un reset o bien ponerle margin;0; a la etiqueta body */
}
 

despues de hacer esto pones los contendedores #header, etc etc

espero te haya servido, si tienes alguna duda me avisas

[martines]

Algo ha mejorado, en internet explorer en resolucion 1280 funciona casi perfecto, queda a izquierda menos un boton que se me baja a la fila de abajo, lo de la resolucion es lo que me falla, en 1024 queda mejor ahora, en 800x600 seguimos igual, no puede que sea por culpa del contenedor contenido?

Dejo otra vez el codigo por si le puesto mal o algo.

Código PHP:

  html { height: 101%; } 
body { 
  background-color: #91aefe; 
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
  font-size: 15px; 
  margin: 0%; 
} 
 
#contenedorr { 
    text-align:left; /* Esto te sirve para IE*/ 
    width:780px 1000px; /* Aqui pones la resoluciones que quieres trabajar, es decir si deseas hacerlo global, deberias dejarlo en mil o al menos 960, si deseas que tabien se vean en 800x600 deberias ponerle entonces 780 o 760, eso es a tu criterio*/ 
    margin:0px auto; /* esto es muy importante, deberias agregarle el 0 antes del auto para que IE6 lo tome sino no sabe que hacer y a veces falla, pero en general lo uso solamente asi, esto indica que 0 para IE debe ser el margen general, y que auto le diga a los navegadores nuevos sobretodo FF que hay un margen automatico pero absoluto, deberias de poner un reset o bien ponerle margin;0; a la etiqueta body */ 
            } 
             
#head { 
      margin:0%;  
      margin-top:0%; 
      background-image: url("../files/head.jpg"); 
      background-position:  left; 
      background-repeat: no-repeat; 
      height: 140px; 
      width: 100%; 
      } 
 
#head p { 
     text-align: center; 
     color: #fff; 
     font: 120% "Trebuchet MS", Arial, Helvetica, sans-serif; 
     font-weight: bold; 
     font-style: oblique; 
     padding-top: 40px; 
     padding-left: 570px; 
     margin-top: 0%; 
      
       } 
       
#menu {   
        width: 100%;  
        padding: 0%;   
        float:right;  
        padding:0%; 
        height:auto; 
        font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif; 
        font-weight: bold; 
        background-image: url("../files/menu.jpg"); 
        background-repeat: no-repeat; 
        height: 40px; 
        padding-top: 0%; 
        position: relative; 
                } 
         
#menu ul, li { list-style-type: none; 
        } 
 
#menu ul  
        { width:auto; 
          margin:auto; 
        } 
         
#menu li {   
         display: inline;   
         position:relative; 
          
         }   
 
/* separacio entre boto          
#menu li+li a { 
         border-left: 1px solid #FFF;  
          } 
           
*/           
#menu a {   
      color: #fff; 
      text-decoration: none;   
      text-align: center; 
      width: 1%;  
      margin-left: 130px; 
      margin-right: auto; 
      float: left;   
      padding: 7px;  
      display: block;  
      outline:none; 
      cursor:pointer; 
      position: relative; 
        }  
 
#menu a:hover { /* background: #FFFFFF; fondo cuadro*/   
               color:#000000; 
             } 
 
#contenido { border: 3px solid #FF0000;  
             width:850px;  
             height:600px; 
             padding:3px;  
             margin-top:50px;  
             margin-left: 180px; 
             margin-right: 180px; 
             margin-bottom: 20px; 
             float: left;  
             position: relative; 
             } 
 
#pie { 
     width: 100%;  
     background-image: url("../files/pie.jpg"); 
     background-repeat: no-repeat; 
     height: 80px;  
     margin-top: 0%;  
     clear: both; 
     padding: 1px; 
     position: relative; 
     padding-bottom: 0% 
     } 
      
#pie p { 
     text-align: center; 
     color: #fff; 
     font: 120% "Trebuchet MS", Arial, Helvetica, sans-serif; 
     font-weight: bold; 
     margin-bottom: 0%; 
     position: relative; 
     }  
   

[Tedel]

Iniciado por martines

como que hay un diseño "liquido"?

Un diseño líquido es uno que se adapta al ancho de la pantalla del navegador.

[TEPO]

Op, pensaba que habias reabierto el tema y te estaba peleando un poco, pero me equivoque, perdon,.

[martines]

yata, solucionado