CSS: Fixo ou Flutuante layout? [fechadas]

Question

A minha pergunta gira em torno CSS fixo layout vs um Float layout que se estende para preencher a largura do navegador.

Agora o problema que eu estou correndo em é ter o redimensionamento mastro dependendo da largura da página (algo que eu entendo não é possível dada a implementação atual do navegador de o CSS3 background-image: size; ). Neste ponto, eu sinto como se tivesse chegado a um impasse em todo: Do ??I refazer o site para usar um layout CSS fixo, ou faço para manter o layout atual e tentar fazer a imagem mastro expandir para preencher a maior parte do espaço previsto ? Além disso, quais são os prós e contras de se mudar para um layout de largura fixa, e as outras ramificações (invisíveis) de usar um esquema em detrimento de outro?

O site em questão será dado como um comentário a esta pergunta -. Eu não quero ser visto como uma tentativa de aumentar o tráfego para ele

Edit:? Quaisquer outros pensamentos

Answer 1

O que sobre revelar mais ou menos a imagem que o navegador é redimensionada, em vez de dimensionamento da imagem? Não é bem o mesmo efeito, mas é uma maneira fácil de preencher um espaço inteiro com uma imagem.

Vamos supor, por causa do exemplo, que a imagem de fundo do seu mastro contém um logotipo de algum tipo em cima de, digamos, uma fotografia de um skyline da cidade. Esta é, em geral, 1600px de largura. O logotipo senta à esquerda da imagem, enquanto a paisagem urbana se estende muito certo. E vamos supor sua aparência de marcação mais ou menos assim:

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

Podemos definir o elemento #page a um largura elástica e aplicar uma imagem de fundo para o 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;
}

O que acontece aqui é que o elemento #masthead irá expandir a largura do elemento #page, que será em algum lugar entre 800px e 1600px de largura (inclusive), dependendo de como ampla janela do navegador é. Quando o elemento #page é 800px de largura, você verá apenas o mais à esquerda 800px do horizonte; quando é 1600px de largura, você vê todo o horizonte. Dessa forma, o seu logotipo é sempre visível e quando o navegador é redimensionada, mais da paisagem urbana é revelado.

Isto não necessita de ter uma imagem maior para começar com (pelo menos tão grande como o seu max-width, se você vai elástica), mas o resultado é um cabeçalho que vai ficar bem, não importa o tamanho que é - sem depender on, como strager mencionado, a imagem dos navegadores redimensionamento algoritmos.

Answer 2

Que tipo de imagem é? É qualquer parte dela se repete? Às vezes usando duas camadas, uma ou a etiqueta para um elemento de repetição da imagem e outro para o elemento fixo.

Podemos ver um exemplo? Seria mais fácil para chegar à resposta certa para o seu problema.

Answer 3

Se você está tentando expandir a sua imagem de fundo para a largura da página, é melhor usar um layout de tamanho fixo como não existe um método cross-browser para fazer uma imagem de fundo expandir em diferentes tamanhos que são dependente da resolução visitantes.

Largura fixa layouts proporcionar mais flexibilidade para o designer, mas não para o visitante. Se você criar um layout que está a X pixels de largura, então você é capaz de afinar o seu site pixel por pixel para seu gosto enquanto layouts "flutuar" (Eu os chamo de layouts líquidos) são inteiramente baseadas em valores percentuais e, portanto, diferem de computador a computador. Eu acho isso difícil porque você pode testar o layout na tela e não sei como ele aparece em alguma outra pessoa, e (para ex.) Uma margem de 20px tem mais de um efeito sobre um layout 768px ou 960px de largura fixa do que na uma tela de computador 1280px-líquido.

A maior con, IMO, para um layout de largura fixa é o fato de que parece muito pequeno em telas maiores e muito grande em telas menores. 768px costumava ser um layout de largura fixa bastante normal, mas agora que é muito pequeno como o mundo se move longe de 800x600. Agora 960px é bastante normal, que é muito grande para 800x600, mas ainda muito pequeno em 1280x1024.

Tudo depende do seu público e como seu site se encaixa. Alguns layout pode ser feito líquido e trabalho perfeitamente bem, enquanto outros devem ser fixados (como o que você descreveu).

Answer 4

Por que não usar uma tag para a sua imagem de cabeçalho (mastro) em vez de usar uma imagem de fundo?

Eu sugeriria não escalar o seu cabeçalho gráfico; a maioria dos navegadores são terríveis em escala de imagem (vizinho mais próximo o quê?) e ele não vai ficar bem para muitas pessoas.

Eu sou para fluido / float / layouts líquidos mim mesmo. verdade eu, a maioria dos meus sites usam uma única coluna, então eu não precisa se preocupar com todas as complexidades layouts "normais" do site têm.

Answer 5

Em geral, é uma má idéia para criar um layout em que o texto-colunas expandir para o navegador com. Texto torna-se difícil de ler se as linhas crescem muito tempo. Eu recomendo se decidir sobre um fixo com o texto da coluna, talvez em torno de 50 letras de largura.