min-width em div com width de 100%

[fred silva 1]

Olá pessoal,

Estou tentanto atribuir um min-width de 700px a uma div que tem o width de 100%, mas não funciona. Quando a resolução da tela é diminuída a div obedece sempre a width de 100%.

Tem alguma forma de fazer com que a div fique 100% somente com width acima de 700px?

Agradeço a ajuda!

[Francispansa 6]

Por algum acaso você está testando sua aplicação no IE?

Peço isso porque o IE não entende min-width..

 

Coloque o min-width e teste em outro navegador caso venha testando no IE. E para o problema com min-width aqui tem uma forma de resolver o problema.

 

http://francis-g.com.br/blog/min-height-e-max-heigth-para-ie/

 

Abrass

[fred silva 1]

Por algum acaso você está testando sua aplicação no IE?

Peço isso porque o IE não entende min-width..

 

Coloque o min-width e teste em outro navegador caso venha testando no IE. E para o problema com min-width aqui tem uma forma de resolver o problema.

 

http://francis-g.com.br/blog/min-height-e-max-heigth-para-ie/

 

Abrass

Na verdade eu estou testando no Firefox e Chrome

[Francispansa 6]

Teria algum link onde possa ser visualizado o erro?

[_Leandro_ 0]

Como que você está escrevendo seu css? Posta ai...

 

Já tentou colocar o min-width:700px depois do width:100%? Algo do tipo:

 

.test{

width:100%;

min-width:700px;

}

 

Até mais

Leandro

http://www.maisumpixel.com.br

[fred silva 1]

Meu CSS

div #geral{width: 100%;min-width:700px;height:auto}
#geral #topo{width:100%;min-width:700px;height:150px}

É mais ou menos assim

Leandro já tentei colocar assim: min-width:700px depois do width:100%

Mas também não deu resultado.

[crf_h0m3r 5]

Já tentou: width:auto; min-width:700px;? Se não conseguir assim, tente atribuir um valor máximo: width:auto; max-width:950px; min-width:700px;

[fred silva 1]

Já tentou: width:auto; min-width:700px;? Se não conseguir assim, tente atribuir um valor máximo: width:auto; max-width:950px; min-width:700px;

O width:auto dá o mesmo problema e eu não posso atribuir um valor max-width, pois quero que quando o usuário tiver uma resolução alta a div tome toda a tela na horizontal e quando a resolução for baixa fique com no mínimo 700px de largura.

[_Leandro_ 0]

Cara, acho que você está com algum problema na aplicação das regras de css...

 

Testa assim e veja se é o que você quer:

<style>

* {margin:0;}

#geral{width:100%;min-width:960px;height:auto;background:#ff0000;}

#topo{width:100%;height:150px;margin:0 auto;background:#ffcc00;}

</style>

<div id="geral">

<div id="topo"> TOP </div>

</div>

 

Att

Leandro Rodeghiero

http://www.maisumpixel.com.br

[fred silva 1]

Não funcionou!

Se eu coloco o width com um tamanho fixo funciona, porem colocando em % não acompanha. Fica com uma barra de rolagem no navegador e o espaço entre a div e restante da página fica em branco.

[William Bruno 1501]

o espaço entre a div e restante da página fica em branco.

então tem mais alguma coisa interferindo!!

 

poste um link para o teu site, pois somente o código sugerido funciona sim.

[_Leandro_ 0]

Cara, poste teu HTML, CSS e se possível uma imagem com o que você deseja pois não estou te entendendo...

No exemplo que postei pra você, a DIV topo fica com 100% de largura até chegar ao mínimo de 960px ai gera barra de rolagem na horizontal, não era isso que você desejava?

 

Att

Leandro

[fred silva 1]

Pessoal, infelizmente não tem como eu mandar o link,mas estou enviando a tela para que vcs entendam qual é o problema. O css é basicamente aquele que eu passei.

Como vcs podem ver na imagem abaixo, eu diminui a resolução para 1024x768 e ficou um espaço entre a div topo e o restante da página.

OBS: De todas a divs que aparecem na imagem esta é a única com width 100%.

Tela:

Grato.

[fred silva 1]

Galera, resolvi aqui. Depois de muito quebrar a cabeça!

Solução simples, apenas centralizei as divs que estão no meio, ou seja, o menu e a div do conteúdo.

Assim:

position:absolute;
left:50%;
margin-left:-475px;

Qualquer resolução que for colocada o topo e rodapé toma 100% da tela e restante fica centralizado.

OBS: O único problema é que como estou usando margin-left negativo, quando a resolução é muito baixa a parte esquerda aparece pela metade, mas diminuindo o zoom da tela fica perfeito. Isso ocorre apenas em resoluções abaixo de 1024X768.

Fica a dica, caso alguém precise futuramente.

Obrigado a todos! T+

[João Prado 64]

Então tem algo errado ai né?

 

Se na resolução 1024x768 fica errado, seu código não tem como estar certo ;)

 

1º - não use margin negativo

2º - é necessário utilizar o position:absolute?

3º - provavelmente existe algum erro de estrutura no seu código, se quiser poste seu código que o pessoal pode dar umas dicas para melhorar, ou então deixa assim mesmo sem funcionar :)

 

 

:thumbsup: