Foros del Web » Creando para Internet » CSS »

Probleas cuando le doy zoom o cambio de resolucion

Estas en el tema de Probleas cuando le doy zoom o cambio de resolucion en el foro de CSS en Foros del Web. Tengo problemas en el header, al apretar ctrl + / - se corre el header y una imagen que tengo. Código HTML: <div id= "header" ...
  #1 (permalink)  
Antiguo 18/05/2009, 15:43
 
Fecha de Ingreso: marzo-2008
Mensajes: 1.020
Antigüedad: 9 años, 9 meses
Puntos: 21
Probleas cuando le doy zoom o cambio de resolucion

Tengo problemas en el header, al apretar ctrl + / - se corre el header y una imagen que tengo.

Código HTML:
<div id="header">
  <div id="logo"><img src="images/logo.png" />
<h1>nutrición.salud.bienestar</h1>
</div>

<div id="navbar">
<ul class="blue">
    <li><a href="#" title="home" class="current"><span></span>Portada</a></li>
    <li><a href="#" title="products"><span></span>Turnos</a></li>
    <li><a href="#" title="blog"><span></span>Noticias</a></li>
    <li><a href="#" title="contact"><span></span>Fichas</a></li>
    <li><a href="#" title="contact"><span></span>Enlaces</a></li>
    <li><a href="#" title="contact"><span></span>Curriculum</a></li>
    <li><a href="#" title="contact"><span></span>Contacto</a></li>
</ul>
</div>

<div id="mina"></div>
</div> 
y el css

Código HTML:
#header {
position: relative;
height : 260px;
width : 100%;
z-index : 0;
background : url(../images/header_wall.png) repeat-x;
margin:0 auto;
}
#logo {
float : left;
width : 235px;
margin-top : 80px;
position : absolute;
left : 110px;
}
h1 {
margin-top : 15px;
font-family : Calibri;
color : #ffffff;
font-size : 18px;
}
#navbar {
float : left;
width : 685px;
margin-top : 70px;
padding-left : 15px;
position : absolute;
left : 290px;
}
#mina {
position : relative;
left : 940px;
height : 294px;
float : left;
background : url(../images/mina.png) no-repeat;
width : 198px;
z-index : 1;
}
ul.blue {
padding : 5px;
margin : 10px 0;
list-style : none;
float : left;
}
ul.blue li {
float : left;
}
ul.blue li a {
float : left;
text-decoration : none;
color : #ffffff;
padding : 4px 15px 0 0;
margin-right : 8px;
font : 900 14px "Arial", Helvetica, sans-serif;
}
ul.blue li a span {
float : left;
padding-right : 15px;
display : block;
margin-top : -4px;
height : 24px;
overflow : hidden;
}
ul.blue li a:hover, ul.blue li a.current {
color : #0d5f83;
background : url("../images/green.png") no-repeat top right;
}
ul.blue li a:hover span, ul.blue li a.current span {
background : url("../images/green.png") no-repeat top left;
}
saludos.
  #2 (permalink)  
Antiguo 18/05/2009, 19:03
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: Probleas cuando le doy zoom o cambio de resolucion

Saludos!!

No estoy muy seguro, pero creo que el problema es que tienes el width expresado en %. Intenta cambiar tus medidas, por medidas fijas (px) Seguramente eso te ayudará mas...

Tampoco estoy seguro de esto, pero creo que tu imagen se mueve porque tiene una posicion "absoluta". Intenta hacerlo todo con float y posicionar donde quieres el logo con margin y padding.

Espero que te sirva, Hasta Luego!!
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #3 (permalink)  
Antiguo 18/05/2009, 19:55
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 9.741
Antigüedad: 9 años, 4 meses
Puntos: 2113
Respuesta: Probleas cuando le doy zoom o cambio de resolucion

Cita:
Iniciado por CaLiZzZ
... porque tiene una posicion "absoluta". Intenta hacerlo todo con float ...
<offtopic>Gotcha </oftopic>
__________________
- León, Guanajuato
- GV-Foto
  #4 (permalink)  
Antiguo 18/05/2009, 19:57
 
Fecha de Ingreso: marzo-2008
Mensajes: 1.020
Antigüedad: 9 años, 9 meses
Puntos: 21
Respuesta: Probleas cuando le doy zoom o cambio de resolucion

hola,

bueno he probado distintas alternativas y no he dado en la tecla.

el problema principal es que el fondo del header no se repite-x al 100% es decir cdo doy a ctrl + se observa hasta cierto punto y no continua.

este es el sitio y miren cdo dan en ctrl +.

lo que observo yo es que lo que esta debajo del header se va corriendo hacia la derecha y es eso lo que hace que aparezca el scroll en el navegador y ahi se puede observar cdo se corta la imagen del header y no continua.

este es el codigo de la parte de abajo, es el contenedor del bienvenido y del resto de las cajas.
Código HTML:
.ext {
text-align : left;
width : 1000px;
min-height : 1200px;
height : auto;
margin : 0 auto;
margin-top:-100px;
background : url(../images/fnd_tpt.png) repeat;
position: relative;
z-index : 2;
}

Última edición por opzina; 18/05/2009 a las 20:36
  #5 (permalink)  
Antiguo 19/05/2009, 06:46
 
Fecha de Ingreso: marzo-2008
Mensajes: 1.020
Antigüedad: 9 años, 9 meses
Puntos: 21
Respuesta: Probleas cuando le doy zoom o cambio de resolucion

no hay caso, no puedo dar en la tecla con esto :(
  #6 (permalink)  
Antiguo 19/05/2009, 07:05
 
Fecha de Ingreso: marzo-2008
Mensajes: 1.020
Antigüedad: 9 años, 9 meses
Puntos: 21
Respuesta: Probleas cuando le doy zoom o cambio de resolucion

poniendo esto:

Código HTML:
div#total {
background : url(../images/header_wall.png) repeat-x 0 top;
width : 100%;
}
div#total2 {
width : 100%;
min-height : 1200px;
height : auto;
margin : 0 auto;
margin-right : auto;
margin-left : auto;
overflow: hidden;
position : relative;
}
se me soluciona parcialmente el problema, ya que al dar en ctrl +, si bien el header crece a la par de todo, el contenido choca en la pared de la pantalla a la izquierda y al darle mas zoom se corre a la derecha..

todo deberia crecer en forma centrada.

solucionado, tenia un problema de superposicion de divs. con esto ultimo que agregue va de 10 ent todos los navegadores.

Última edición por opzina; 19/05/2009 a las 08:15
  #7 (permalink)  
Antiguo 11/04/2013, 06:04
 
Fecha de Ingreso: marzo-2007
Mensajes: 2
Antigüedad: 10 años, 8 meses
Puntos: 0
Respuesta: Probleas cuando le doy zoom o cambio de resolucion

Hola Amigo,
prueba esto, ami me funcionó

background-size:cover;

Saludos
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.
Tema Cerrado




La zona horaria es GMT -6. Ahora son las 04:30.