Probleas cuando le doy zoom o cambio de resolucion

[opzina]

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.

[Calizman]

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!!

[Triby]

Iniciado por CaLiZzZ

... porque tiene una posicion "absoluta". Intenta hacerlo todo con float ...

<offtopic>Gotcha </oftopic>

[opzina]

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;
}

[opzina]

no hay caso, no puedo dar en la tecla con esto :(

[opzina]

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.

[mikirur]

Hola Amigo,
prueba esto, ami me funcionó

background-size:cover;

Saludos