Tableless
2003 - 2009, tableless.com.br
Quase todos os direitos reservados.
.
Existe quatro propriedades interessantes no CSS que nos permitem definir uma largura e uma altura mínima e máxima para os elementos. Essas propriedades são: min-width, max-width, min-height e max-height.
Vamos supor que você faça um site fluído, mas que se o usuário estiver usando uma resolução muito grande, o layout não vá até o final da janela, para não deixar o layout tão feio. Tipo, se o layout ficasse bom até a resolução de 1152, mas não ficasse tão bom numa resolução de 1280. Mas que se o usuário redimensionasse a janela ou usasse uma resolução menor, o layout também se adequaria perfeitamente.
Logo, para o layout manter sua aparência, seria perfeito se você pudesse definir uma largura máxima cujo o layout não passaria. Para tanto, você usa a propriedade max-width. O valor da propriedade seria a largura máxima que você gostaria que o layout chegasse.
div#geral {max-width: 1150px;}
O mesmo método de utilização é aplicado para as outras propriedades.
Infelizmente, essas propriedades - que salvariam nossa vida - não funcionam no Internet Explorer. E quem sabe se via funcionar nos próximos IEs. Aguardemos.
Leia também o primeiro artigo da série: Coisas úties que não funcionam no IE #1 - Seletor Inteligente
Quem trabalha com Firefox sabe como as extensões podem mudar a vida de um desenvolvedor. Nós separamos algumas extensões e sugerimos para você. Confira.
Leia maisO desenvolvimento com wordpress vem crescendo e sua plataforma está ficando mais robusta a cada dia. Por isso preparamos alguns artigos e tutoriais sobre desenvolvimento e implemetação de Wordpress em sites.
Leia maisHoje não é sorte. Colocar um site em uma boa colocação no Google não é fácil e muitas vezes pode ser uma dor de cabeça sem tamanho. Por isso, manter um código organizado e simples é um bom começo. Separamos algumas dicas para que você consiga otimizar seu código e fazer algumas modificações nos seus sites para que eles não fiquem atrasados.
Leia maisNós falamos muito sobre XHTML e CSS. Então, nada mais justo que ter um lugar onde você consiga aprender melhor as técnicas e metodologias de desenvolvimento com CSS e XHTML.
Leia mais
2003 - 2009, tableless.com.br
Quase todos os direitos reservados.
.
Isso realmente iria permitir fazer coisas muito boas, mas o IE é o IE, e infelizmente não podemos fazer nada, a não ser esperar que um dia o FF e Opera virem o jogo ou o Tio Bil de uma ajuda.
[]’s
O único comentário que posso fazer é:
“ahhh, que falta que o IE não me faz…”
Uma solução já conhecida na net para quem deseja ‘driblar’ a falta disto no IE, é combinando hacks (ou comentários condicionais) com a função expression() que o IE aceita dentro de CSS:
Exemplo:
Para os navegadores padrão:
max-height:200px;
Para os IE:
height: expression(this.scrollHeight > 200 ? “200px” : “auto”);
Espero ter ajudado. Qualquer coisa corrijam aí.
uma saida para este min-width que eu uso é uma expressão regular eheh
salvam a vida.
Também não funciona no IE7?
Realmente são muito úteis… e felizmente o IE7 tem suporte a elas!
Nem testei o IE7 ainda, mas essa notícia do suporte agrada muito ^^
Faltou no post o hack que o Micox passou.
Bom comentário Micox.
boa.
é… ja tentei usar isso a um tempo atras…. ia facilitar um pouco minha vida, mas percebi que nao adiantou :-/
o ie é um atraso em nossa vida…
IE é IE.. o que podemos fazer???
Pensando em nós? (desenvolvedores) já fizemos: Browsers de verdade (FF, Opera, etc)…
Nossos clientes??? Só podemos sentar e chorar.. rsrs a maioria usa essa coisinha chamado IE!
no IE7 funciona, ou é impressão minha…
vou testar aki novamente!
Ainda bem que há o pessoal que “desenvolve” hacks para contornar tais problemas…
Nunca tive que usar as propriedades referentes a largura, mas quanto a altura já, e tive essa péssima experiência.
O típico caso da coluna da esquerda não ter um tamanho proporcional ao da direita.
Descobri a solução no alistapart.com.
O mundo seria bem melhor se não existissem advogados e o IE
Isso é utopia =D
O IE já e pessimo para manipular o tamanho das divs por width e height, observe que no firefox e no opera os tamanhos são totalmente diferentes.
Se este comando realmente funciona-se no IE não seria necessário a utilização tão acentuada do CSS “clear:both;” para conseguir trabalhar com paineis flutuantes.
Gostária de um pouco mais de informações sobre suporte do IE7 para o CSS, se finalmente poderemos trabalhar sem ter de ficar criando mil e um hacks for IE6
TOMARA QUE FUNCIONE NO IE7!!!!!!!
ElMicox, conde consigo referencias sobre tal expressão?
Qual a vantagem de o IE7 suportar se ele só vai ser liberado para windows originais???
–
Rediscover the web.
Caramba! Estou ferrado! Meu site vai sair uma desgraça em resoluções grandes! Ótima dica, principalmente pra quem tem monitor antigo (que nem eu) e não consegue testar em resoluções maiores.
Eis a solução, porém não definitiva, pois a mesma não funciona para Internet Explorer 5.0 para Mac, porém a versão 6.0 do IE para Windows funciona perfeitamente. Funcionou também nos seguintes browsers para Mac: Camino, Firefox, Safari, Netscape. Em windows funcionou também no Firefox.
pagina.htm
dados…
arquivo.css
/* outros navegadores */
#conteudo {
width:450px; /* largura do div */
padding:0px;
min-height:445px; /* altura mínima */
height:auto;
}
/* para Internet Explorer */
/*\*/
* html #conteudo {
height:455px; /* altura pré-definida com 10 pixels a mais */
}
/**/
Comentem sobre o código acima.
eu estava lendo alguns materiais e descobri que o “max” e o “min”, tanto “width” quanto “height” funcionam SOMENTE e PERFEITAMENTE para tags imagem!!!
experimentem
[]’s!
Ola!! no 7 ja funciona! mas no 6 nao!
estava testando td feliz, meu site redimensionavel, porem nao ate o fim em altas resolucoes, quando vi q no 6.0 nao estava funcinando!
vi acima 2 solucoes mas nenhuma dela funcionou no meu caso, q se trata do max width
div#tudo { /* fica sobre toda página*/
border-left:7px solid #cccccc;
border-right:7px solid #cccccc;
background-color:#ff00ff;
margin: 0px 0px auto;
min-width:760px;
max-width:900px;
}
assim n consigo limitar o tamanho maximo e as bordas q eu criei acabam indo ate o fim!
como posso solucionar no 6?
valeu mto grato!
pena q ainda existem pessoas q usam ie6.0
Pessoal,
Para o IE, existe a possibilidade de usar as tags _height e _width, que funcionam exatamente como o min_height e min_width.
Exemplo:
#box {min-width:100px;_width:100px;min-height:200px;_height:200px}