Foros del Web » Creando para Internet » CSS »

Resolucion 800x600, o 1024 se me desmonta todo

Estas en el tema de Resolucion 800x600, o 1024 se me desmonta todo en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 11/02/2011, 09:01
 
Fecha de Ingreso: abril-2010
Mensajes: 76
Antigüedad: 7 años, 7 meses
Puntos: 0
Resolucion 800x600, o 1024 se me desmonta todo

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-imageurl("../files/head.jpg");
      
background-position:  left;
      
background-positionrelative;
      
background-repeatno-repeat;
      
height140px;
      
widthauto;
      }

#head p {
     
text-aligncenter;
     
color#fff;
     
font120"Trebuchet MS"ArialHelveticasans-serif;
     
font-weightbold;
     
font-styleoblique;
     
padding-top40px;
     
padding-left570px;
     
margin-top0px;
     
       }
      
#menu {  
        
widthauto
        
padding0px;  
        
float:right
        
padding:0px;
        
height:auto;
        
font100"Trebuchet MS"ArialHelveticasans-serif;
        
font-weightbold;
        
background-imageurl("../files/menu.jpg");
        
background-positionrelative;
        
background-repeatno-repeat;
        
height40px;
        
margin-top:0px;
        
positionrelative;
                }
        
#menu ul, li { list-style-type: none;
        
}

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

/* separacio entre boto         
#menu li+li a {
         border-left: 1px solid #FFF; 
          }
          
*/          
#menu a {  
      
color#fff;
      
text-decorationnone;  
      
text-aligncenter;
      
width1%; 
      
margin-left130px;
      
floatleft;  
      
padding7px
      
displayblock
      
outline:none;
      
cursor:pointer;
      
positionrelative;
        } 

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


#contenido { border: 3px solid #FF0000; 
             
width:850px
             
height:600px;
             
padding:3px
             
margin-top:50px
             
margin-left180px;
             
margin-bottom20px;
             
floatleft
             
positionrelative;
             }

#pie {
     
width:auto
     
background-imageurl("../files/pie.jpg");
     
background-positionrelative;
     
background-repeatno-repeat;
     
height:80px
     
margin-top:0px
     
clearboth;
     
padding1px;
     
positionrelative;
     
padding-bottom0px;
     }
     
#pie p {
     
text-aligncenter;
     
color#fff;
     
font120"Trebuchet MS"ArialHelveticasans-serif;
     
font-weightbold;
     
margin-bottom0px;
     
positionrelative;
     } 
  #2 (permalink)  
Antiguo 11/02/2011, 09:19
d3xf4ult
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Resolucion 800x600, o 1024 se me desmonta todo

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
  #3 (permalink)  
Antiguo 11/02/2011, 09:24
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Resolucion 800x600, o 1024 se me desmonta todo

Hola:

Es que el background-position: relative no existe.

Saludos.

  #4 (permalink)  
Antiguo 11/02/2011, 09:42
 
Fecha de Ingreso: abril-2010
Mensajes: 76
Antigüedad: 7 años, 7 meses
Puntos: 0
Respuesta: Resolucion 800x600, o 1024 se me desmonta todo

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-imageurl("../files/head.jpg");
      
background-position:  left;
      
background-repeatno-repeat;
      
height140px;
      
width100%;
      }

#head p {
     
text-aligncenter;
     
color#fff;
     
font120"Trebuchet MS"ArialHelveticasans-serif;
     
font-weightbold;
     
font-styleoblique;
     
padding-top40px;
     
padding-left570px;
     
margin-top0%;
     
       }
      
#menu {  
        
width100%; 
        
padding0%;  
        
float:right
        
padding:0%;
        
height:auto;
        
font100"Trebuchet MS"ArialHelveticasans-serif;
        
font-weightbold;
        
background-imageurl("../files/menu.jpg");
        
background-repeatno-repeat;
        
height40px;
        
margin-top0%;
        
positionrelative;
                }
        
#menu ul, li { list-style-type: none;
        
}

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

/* separacio entre boto         
#menu li+li a {
         border-left: 1px solid #FFF; 
          }
          
*/          
#menu a {  
      
color#fff;
      
text-decorationnone;  
      
text-aligncenter;
      
width1%; 
      
margin-left130px;
      
floatleft;  
      
padding7px
      
displayblock
      
outline:none;
      
cursor:pointer;
      
positionrelative;
        } 

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


#contenido { border: 3px solid #FF0000; 
             
width:850px
             
height:600px;
             
padding:3px
             
margin-top:50px
             
margin-left180px;
             
margin-bottom20px;
             
floatleft
             
positionrelative;
             }

#pie {
     
width100%; 
     
background-imageurl("../files/pie.jpg");
     
background-repeatno-repeat;
     
height80px
     
margin-top0%; 
     
clearboth;
     
padding1px;
     
positionrelative;
     
padding-bottom0%
     }
     
#pie p {
     
text-aligncenter;
     
color#fff;
     
font120"Trebuchet MS"ArialHelveticasans-serif;
     
font-weightbold;
     
margin-bottom0%;
     
positionrelative;
     } 

Última edición por martines; 11/02/2011 a las 14:21
  #5 (permalink)  
Antiguo 11/02/2011, 16:38
Avatar de Tedel  
Fecha de Ingreso: enero-2011
Ubicación: Lima
Mensajes: 2.728
Antigüedad: 6 años, 10 meses
Puntos: 442
Respuesta: Resolucion 800x600, o 1024 se me desmonta todo

Hay un diseño "líquido", que se adapte al ancho de la pantalla.
  #6 (permalink)  
Antiguo 11/02/2011, 17:45
 
Fecha de Ingreso: abril-2010
Mensajes: 76
Antigüedad: 7 años, 7 meses
Puntos: 0
Respuesta: Resolucion 800x600, o 1024 se me desmonta todo

como que hay un diseño "liquido"?
  #7 (permalink)  
Antiguo 11/02/2011, 17:55
Avatar de function  
Fecha de Ingreso: abril-2010
Mensajes: 278
Antigüedad: 7 años, 7 meses
Puntos: 13
Respuesta: Resolucion 800x600, o 1024 se me desmonta todo

Mira viendo tu codigo te podria decir lo siguiente:

Primero debes de hacer un contenedor
Código CSS:
Ver original
  1. #contenedorr {
  2.     text-align:left; /* Esto te sirve para IE*/
  3.     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*/
  4.     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 */
  5. }

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

espero te haya servido, si tienes alguna duda me avisas
__________________
~# echo Hemos logrado la independencia, pero no la libertad >> SimonBolivar
  #8 (permalink)  
Antiguo 12/02/2011, 06:11
 
Fecha de Ingreso: abril-2010
Mensajes: 76
Antigüedad: 7 años, 7 meses
Puntos: 0
Respuesta: Resolucion 800x600, o 1024 se me desmonta todo

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 height101%; }
body {
  
background-color#91aefe;
  
font-family"Trebuchet MS"ArialHelveticasans-serif;
  
font-size15px;
  
margin0%;
}

#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-imageurl("../files/head.jpg");
      
background-position:  left;
      
background-repeatno-repeat;
      
height140px;
      
width100%;
      }

#head p {
     
text-aligncenter;
     
color#fff;
     
font120"Trebuchet MS"ArialHelveticasans-serif;
     
font-weightbold;
     
font-styleoblique;
     
padding-top40px;
     
padding-left570px;
     
margin-top0%;
     
       }
      
#menu {  
        
width100%; 
        
padding0%;  
        
float:right
        
padding:0%;
        
height:auto;
        
font100"Trebuchet MS"ArialHelveticasans-serif;
        
font-weightbold;
        
background-imageurl("../files/menu.jpg");
        
background-repeatno-repeat;
        
height40px;
        
padding-top0%;
        
positionrelative;
                }
        
#menu ul, li { list-style-type: none;
        
}

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

/* separacio entre boto         
#menu li+li a {
         border-left: 1px solid #FFF; 
          }
          
*/          
#menu a {  
      
color#fff;
      
text-decorationnone;  
      
text-aligncenter;
      
width1%; 
      
margin-left130px;
      
margin-rightauto;
      
floatleft;  
      
padding7px
      
displayblock
      
outline:none;
      
cursor:pointer;
      
positionrelative;
        } 

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

#contenido { border: 3px solid #FF0000; 
             
width:850px
             
height:600px;
             
padding:3px
             
margin-top:50px
             
margin-left180px;
             
margin-right180px;
             
margin-bottom20px;
             
floatleft
             
positionrelative;
             }

#pie {
     
width100%; 
     
background-imageurl("../files/pie.jpg");
     
background-repeatno-repeat;
     
height80px
     
margin-top0%; 
     
clearboth;
     
padding1px;
     
positionrelative;
     
padding-bottom0%
     }
     
#pie p {
     
text-aligncenter;
     
color#fff;
     
font120"Trebuchet MS"ArialHelveticasans-serif;
     
font-weightbold;
     
margin-bottom0%;
     
positionrelative;
     } 
  #9 (permalink)  
Antiguo 15/02/2011, 16:26
Avatar de Tedel  
Fecha de Ingreso: enero-2011
Ubicación: Lima
Mensajes: 2.728
Antigüedad: 6 años, 10 meses
Puntos: 442
Respuesta: Resolucion 800x600, o 1024 se me desmonta todo

Cita:
Iniciado por martines Ver Mensaje
como que hay un diseño "liquido"?
Un diseño líquido es uno que se adapta al ancho de la pantalla del navegador.
  #10 (permalink)  
Antiguo 15/02/2011, 20:30
Avatar de TEPO  
Fecha de Ingreso: febrero-2010
Mensajes: 235
Antigüedad: 7 años, 10 meses
Puntos: 23
Respuesta: Resolucion 800x600, o 1024 se me desmonta todo

Op, pensaba que habias reabierto el tema y te estaba peleando un poco, pero me equivoque, perdon,.
  #11 (permalink)  
Antiguo 16/02/2011, 09:30
 
Fecha de Ingreso: abril-2010
Mensajes: 76
Antigüedad: 7 años, 7 meses
Puntos: 0
Respuesta: Resolucion 800x600, o 1024 se me desmonta todo

yata, solucionado

Etiquetas: todo
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 02:30.