Mi header se distorsiona cuando se encoje la pantalla.

[xFantaSx]

Hola.
Tengo un problema con mi página, y es que cuando tengo la pantalla maximizada se ve todo correcto, incluso cuando se encoje hasta cierto punto se sigue viendo bien, pero cuando se reduce bastante se comienza a distorsionar todo y los elementos quedan mal.
Para ilustrar lo que sucede dejo estas imágenes:
Así está bien:


y esto es lo que sucede cuando la redimensiono.


Lo que creo que pasa es que el header no tiene un ancho fijo, pero si lo dejo fijo entonces no sé qué medida utilizar, pues digamos si dejo este de 1200px, y alguien ve la página con un screen de 1600, pues se verá horrible, entonces no sé como arreglar esto.

Espero que me puedan ayudar.
Muchas gracias.

[C2am]

hola
Tal vez algo como esto:

Código HTML:

<!-- inicio cabecera -->
<div id="fondonegrocabecera">
      <div >cabecera logo etc</div>
<div id=top>menu</div>
 
</div>
<!-- fin cabecera-->
 
 
<div>CONTENTIDO</div>
 
<!-- inicio pie --->
<div id="fondonegropie">
  <div>pie</div>
 
</div>
<!-- fin pie --->
 

Luego a fondonegrocabecera le das un width:100%, y lo mismo para el fondonegropie.
En cambio para el contenido (logo, menu, pie ) de esos le das el ancho que decidas (1000px, 1200px o lo que quieras) y lo centras.

Es una manera.
Saludos

[xlos_mas_pro]

yo la veo perfectamente quizas es problema tuyo

[xFantaSx]

Hola, pues realmente no me sirvió, sigue siendo lo mismo.
Por ejemplo si redimensionas esta página de forosdelweb a la mitad, la barra superior negra, llena el 100% del medio espacio, pero si corres el scroll hacia la derecha entonces se ve como esta barra solo queda hasta la mitad, y no llena el resto del espacio. Lo mismo sucede con el footer.

Haciendo lo que me dijiste no me sirve aún :S, sabes otro método?.

[C2am]

Pues, tienes razón.
Mi respuesta iba en sentido contrario, es decir para resoluciones mayores, que ese fondo negro se vea al 100% del ancho de la ventana.
En cuanto a lo que comentas de este foro, y que es lo que también te pasa a ti, es que estamos diciendo que sea el 100% del ancho de la ventana, y eso es lo que obtienes y no más, ya que lo que queda fuera de ella es 100% + scroll. Lógico no?

Soluciones: si te molesta, declara un ancho mayor para ese fondo negro, algo como el 200%, para que cuando reduzcan la ventana al 50% y luego hagan scroll el fondo siga siendo negro. O un ancho de 5000px, no sé, por decir algo. Aunque no verifique que si esto hace que aparezca el scroll horizontal siempre. Supongo que así será.


Otra es incursionar con las @medias query que se van ajustando al ancho del navegador.
Yo estoy adaptando mi web con ellas (www.puebloyreforma.org.ar), porque quiero llevarla a un diseño para moviles. Fijate que al achicar la pantalla, en intervalos de 1280, 1024,640,480,320px aprox, se van reacomodando las cosas (eso creo, espero, si Dios así lo quiere, jajaja)

Bueno, más allá de eso, debes tomar una decisión, cual será tu resolución máxima, y cual la mínima, y luego no importarte lo que pueda pasar cuando a alguien se le ocurre mirar tu web al 50% del ancho del navegador, no sé si me explico.

Saludos

[brai_lf]

Hola, yo tube el mismo problema. lo que tenes que hacer es ponerlo como imagen en el body es decir:

body{
background: #F2F2F2 url(images/header.png) repeat-x 0 0;
}