Pergunta

Eu tenho uma página da web com um layout de fluido com uma largura de 100%.

Quando redimensionei a janela do navegador, os elementos na página se sobrepõem.

Eu criaria um efeito semelhante a este site http://bologna.bakeca.it/ que quando a janela é menor que uma parada de largura fixa redimensionando.

Foi útil?

Solução

Você pode definir a propriedade Min-larguth do CSS para a etiqueta corporal. Como esta propriedade não é suportada pelo IE6, você pode escrever como:

body{
   min-width:1000px;        /* Suppose you want minimum width of 1000px */
   width: auto !important;  /* Firefox will set width as auto */
   width:1000px;            /* As IE6 ignores !important it will set width as 1000px; */
}

Ou:

body{
   min-width:1000px; // Suppose you want minimum width of 1000px
   _width: expression( document.body.clientWidth > 1000 ? "1000px" : "auto" ); /* sets max-width for IE6 */
}

Outras dicas

Bem, você praticamente se deu a resposta. No seu CSS, dão ao elemento contendo uma largura de min. Se você precisar suportar o IE6, pode usar o truque de largura de min:

#container {
    min-width:800px;
    width: auto !important;
    width:800px;
}

Isso fornecerá efetivamente a você 800px de largura no IE6 e quaisquer navegadores atualizados.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top