Resolvendo o problema do FLOAT e BACKGROUND no CSS

Algumas vezes, para conseguir chegar ao ponto que você queria, é necessário alguns “trambiques”.

Veja como consertar erros de backgrounds quando se usa elementos flutuantes dentro de um elemento com um background.

Um exemplo do problema:

Conteúdo do box 1
Conteúdo do box 2

#boxes {
	min-width: 400px;
	width: 400px;
	text-align: left;
	padding: 10px;
	margin: 0px;
	background-color: #FFC;
}

#box1 {
	float: right;
	width: 273px;
	height: 170px;
	padding: 5px;
	border: 1px solid #099;
}

#box2 {
	float: left;
	width: 73px;
	height: 170px;
	padding: 5px;
	border: 1px solid #6CC;
}

RESULTADO:

errado

Ruim, não?!

Veja que eu criei uma div pai chamada boxes e nela foi adicionada uma propriedade background. E suas filhas box1 e box2 estão flutuando. E a div pai está deslocada com relação as suas filhas box1 e box2.

Agora vamos adicionar um código no CSS para corrigir este problema:

#boxes {
	min-width: 400px;
	width: 400px;
	text-align: left;
	padding: 10px;
	margin: 0px;
	background-color: #FFC;
}

#box1 {
	float: right;
	width: 273px;
	height: 170px;
	padding: 5px;
	border: 1px solid #099;
}

#box2 {
	float: left;
	width: 73px;
	height: 170px;
	padding: 5px;
	border: 1px solid #6CC;
}

/* INICIO limpa as floats */
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

.clearfix { display: inline-block; }

html[xmlns] .clearfix { display: block; }

* html .clearfix { height: 1%; }

/* FIM limpa as floats */

E alterar no HTML:

Conteúdo do box 1
Conteúdo do box 2

RESULTADO:

certo

Agora sim!

Use e abuse!

Layouts Semânticos

Um layout fixo permite ter mais controlo sobreo website porque as páginas terão sempre a mesma largura e os conteúdos irão comportar-se sempre da mesma maneira.
Um layout líquido ou fluído permite que a página se adapte à largura do ecrã do utilizador, ocupando todo o espaço visível em vez de ficar encostada a um canto ou centrada como acontece com os layouts fixos.
Um layout elástico é uma mistura do layout fixo com o layout líquido/fluído. Ou seja, a largura da página é extensível até um certo ponto a partir do qual se torna fixa.

Cada site teu seu estilo de “vida”, e o layout pode ajudar muito na hora de apresentar o site ao público. Por exemplo, eu costumo seguir esse padrão que eu mesmo criei para os meus desenvolvimentos:

Púbico-alvo jovem e/ou que tem o nível intermediário-avançado na internet: Layout Líquido ou Elástico com a resolução de 800 pixels de largura.

Púbico-alvo de mais idade e/ou que tem o nível básico na internet: Layout Fixo ou Elástico com a resolução de 1024 pixels de largura.

Um layout fixo permite ter mais controlo sobre o website porque as páginas terão sempre a mesma largura e os conteúdos irão comportar-se sempre da mesma maneira.
Um layout líquido ou fluído permite que a página se adapte à largura do ecrã do utilizador, ocupando todo o espaço visível em vez de ficar encostada a um canto ou centrada como acontece com oslayouts fixos.

Ambas as soluções têm os seus pontos positivos e negativos.

Layout Fixo

Pontos positivos:

  • O webdesigner tem controlo sobre a forma como a informação é apresentada;
  • As linhas de texto têm uma largura fixa e curta, o que facilita a leitura de texto no ecrã;

Pontos negativos:

  • Num ecrã com uma resolução grande, o website fica encostado a um dos lados ou centrado na página, com muito espaço disponível à sua volta;
  • Menor acessibilidade, uma vez queo layout não se adapta às necessidades do utilizador;

Layout Líquido/Fluído

Pontos positivos:

  • Maior acessibilidade. Os conteúdos adaptam-se melhor à resolução de ecrã do utilziador;
  • Os conteúdos ocupam toda a área visível do ecrã, permitindo transmitir mais informação;
  • Deixa de haver espaço vazio à voltado website;

Pontos negativos:

  • Maior dificuldade na leitura de linhas de texto demasiado longas;
  • Perde-se o controlo sobre o posicionamento de alguns elementos na página;

Não sepode dizer que um doslayouts seja melhor do que o outro porqueambossão opções válidas, dependendo do contextodo website queestamosa desenvolver. No entanto, existe um ponto intermédio: o layout elástico.

Layout Elástico

Este tipo de layout é uma mistura do layout fixo com o layout líquido/fluído. Ou seja, a largura da página é extensível até um certo ponto a partir do qual se torna fixa. Na prática, isto significa que podemos ter uma página que tenha uma largura mínima de 800px e uma largura máxima de 1280px. A partir dos 800px para baixo ou dos 1280px para cima (valores de exemplo), a largura não se altera e a página funciona como uma páginacom layout fixo.

Isto permite ter, ao mesmo tempo, controlo dos elementos na página por parte do webdesigner e controlo da largura da janela por parte do utilizador, eliminando assim alguns pontos negativosidentificados nosdois tipos delayouts anteriores.

Outro factor interessante é o facto de, num monitor com uma largura muito grande(vamos imaginar um ecrãcom 2028px de largura ;)) o nosso website elástico ocuparia cerca de metade do ecrã e o texto poderia tornar-se demasiado pequeno para se conseguir ler. Ao aumentar o tamanho do textono browser (Firefox: CTRL+), a largura da página irá aumentar na mesma escala. Desta forma, o website irá aumentar a sua largura máxima consoante o tamanho do texto!

Para conseguir este efeito, basta definir a largura máxima da página em unidades “EM”. Desta forma, a largura da página irá comportar-se da mesma forma como o tamanho do texto, ouseja, responde aos comandos do utilizador para aumentar ou diminuir o seu tamanho.

Se tiverem um monitor com uma resolução grande (superior a 1024px) podem experimentar aumentar o tamanho do texto agora e verão que a largura desta mesma página irá acompanhar o aumento do texto. Caso a largura da janela seja inferior a 1024px, a página mantém-se fixa e o texto aumenta.