CSS: ¿Diseño fijo o flotante? [cerrado]

Question

Mi pregunta gira en torno al diseño fijo CSS frente a un diseño flotante que se extiende para llenar el ancho del navegador.

En este momento, el problema con el que me encuentro es cambiar el tamaño del masthead dependiendo del ancho de la página (algo que entiendo no es posible dada la implementación actual del navegador de CSS3 background-image: size; ). En este punto, siento que he llegado a un punto muerto: ¿Relaboro el sitio para usar un diseño CSS fijo o mantengo el diseño actual e intento hacer que la imagen del masthead se expanda para ocupar la mayor parte del espacio provisto? ? Además, ¿cuáles son los pros y los contras de pasar a un diseño de ancho fijo y las otras ramificaciones (invisibles) de usar un diseño sobre otro?

El sitio en cuestión se proporcionará como un comentario a esta pregunta. No quiero que se vea que intento aumentar el tráfico hacia él.

Editar: ¿Alguna otra idea?

Answer 1

¿Qué pasa con revelar más o menos de la imagen a medida que se cambia el tamaño del navegador, en lugar de escalar la imagen? No es exactamente el mismo efecto, pero es una manera fácil de llenar todo un espacio con una imagen.

Supongamos, por el bien del ejemplo, que la imagen de fondo de su masthead contiene un logotipo de algún tipo encima de, digamos, una fotografía del horizonte de una ciudad. Esto es, en general, 1600px de ancho. El logotipo se encuentra a la izquierda de la imagen, mientras que el paisaje urbano se extiende muy a la derecha. Y asumiremos que su marcado se ve más o menos así:

<div id="page">
  <div id="masthead">...</div>
  <div id="navigation">...</div>
  ...
</div>

Podemos establecer el elemento #page en un elástico y aplicar una imagen de fondo para el elemento #masthead:

#page {
  max-width: 1600px;
  min-width: 800px;
  width: 80%;
}

#masthead {
  background: url('path/to/image.jpg') no-repeat left top;
  height: 100px;
  width: auto;
}

Lo que sucede aquí es que el elemento #masthead se expandirá al ancho del elemento #page, que tendrá entre 800px y 1600px de ancho (inclusive) dependiendo de qué tan ancha sea la ventana del navegador. Cuando el elemento #page tiene 800px de ancho, solo se ven los 800px más a la izquierda del horizonte; cuando tiene 1600px de ancho, ves todo el horizonte. De esa manera, su logotipo siempre está visible y cuando se cambia el tamaño del navegador, se revela más del paisaje urbano.

Esto requiere tener una imagen más grande para comenzar (al menos tan ancho como su ancho máximo, si se va elástico), pero el resultado es una cabecera que se verá bien sin importar el tamaño, sin depender en, como Strager mencionó, los algoritmos de cambio de tamaño de la imagen de los navegadores.

Answer 2

¿Qué tipo de imagen es? ¿Alguna parte de ella es repetible? A veces se usan dos capas, una o la etiqueta para un elemento repetitivo de la imagen y otra para el elemento fijo.

¿Podemos ver un ejemplo? Sería más fácil llegar a la respuesta correcta para su problema.

Answer 3

Si está intentando expandir su imagen de fondo al ancho de su página, es mejor usar un diseño de tamaño fijo ya que no existe un método de navegador cruzado para hacer que una imagen de fondo se expanda a diferentes tamaños que sean depende de la resolución de los visitantes.

Los diseños de ancho fijo proporcionan más flexibilidad para el diseñador, pero no para el visitante. Si crea un diseño de X píxeles de ancho, podrá ajustar su sitio web píxel por píxel a su gusto, mientras que & Quot; float & Quot; Los diseños (los llamo diseños líquidos) se basan completamente en valores porcentuales y, por lo tanto, difieren de una computadora a otra. Esto me resulta difícil porque puede probar el diseño en su pantalla y no saber cómo aparece en el de otra persona, y (por ejemplo) un margen de 20 píxeles tiene más efecto en un diseño de ancho fijo de 768 píxeles o 960 píxeles que en un diseño de ancho fijo. una pantalla de computadora de 1280 px de líquido.

La principal desventaja, IMO, para un diseño de ancho fijo es el hecho de que parece demasiado pequeño en pantallas más grandes y demasiado grande en pantallas más pequeñas. 768px solía ser un diseño de ancho fijo bastante estándar, pero ahora eso es demasiado pequeño ya que el mundo se aleja de 800x600. Ahora 960px es bastante estándar, que es demasiado grande para 800x600 pero aún demasiado pequeño en 1280x1024.

Todo depende de tu audiencia y de cómo se ajusta tu sitio. Algunos diseños pueden hacerse líquidos y funcionan perfectamente bien, mientras que otros deben arreglarse (como el que describió).

Answer 4

¿Por qué no usar una etiqueta < img > para su imagen de encabezado (cabecera) en lugar de usar una imagen de fondo?

Sugeriría no escalar el gráfico del encabezado; la mayoría de los navegadores son terribles en el escalado de imágenes (¿el vecino más cercano qué?) y no se verá bien para muchas personas.

Estoy para diseños de fluidos / flotadores / líquidos. De hecho, la mayoría de mis sitios usan una sola columna, así que no tengo que preocuparme por todas las complejidades & "; Normal &"; diseños de sitio tienen.

Answer 5

Generalmente es una mala idea crear un diseño donde las columnas de texto se expandan al navegador con. El texto se vuelve difícil de leer si las líneas crecen demasiado. Recomiendo establecerse en un fijo para la columna de texto, tal vez alrededor de 50 letras de ancho.