Rony

Bem amigos, faz MUITO tempo que não escrevo aqui, mas hoje é feriado e nada melhor que abrir o Sublime para brincar com HTML e CSS não é mesmo?

O problema de hoje me foi apresentado pelo amigo Aldiran.
Ele precisava criar um menu com as seguintes condições:

• O menu tem duas áreas, uma para um botão de pergunta e outra para uma caixa de pesquisa.
• Essas duas áreas ficam uma do lado da outra.
• Quando o botão de pergunta existir na tela, a caixa de pesquisa deve ficar ao lado dela com o background cinza.
• Quando o botão de pergunta não existir na tela, a caixa de pesquisa deve ocupar 90% da largura da tela, ficar centralizada e receber uma borda vermelha.

Vamos ver isso melhor abaixo?

Esse é o menu completo, com as duas áreas:

Nesse caso, podemos usar algumas regras CSS que funcionam de forma parecida com um IF usado em programação.

Vamos lá.

Primeiro vamos criar uma área para o menu (#menu) e a área onde colocaremos a caixa de pesquisa (#cx-pesquisa).

O código deve ficar assim:

	
			
		
		PESQUISA
	

Feito isso, vamos criar alguns estilos básicos para organizar tudo. Eu vou usar somente o necessário para que os elementos fiquem em seus devidos lugares, não vou usar estilos para colorir ou ‘enfeitar’ o que veremos a seguir.

A primeira coisa é definir os estilos do #menu para que ele mantenha seus filhos #cx-pergunta e #cx-pesquisa lado a lado. Então vamos usar o ‘display: flex’.

#menu{
	display: flex;
	border: 1px solid #ccc;
	padding: 5px;
}

Agora precisamos prestar atenção no que estamos fazendo. Primeiro vamos trabalhar os atributos padrão da nossa caixa de pesquisa, pois é ela que vai mudar quando a caixa de pergunta não existir. Portanto, vamos definir a largura dela como 90% e o margin como ‘margin:0 auto’, dessa forma, ela ficará centralizada naturalmente.

Uma coisa importante também, é definir o ‘display: flex’ do elemento #cx-pesquisa para que seus filhos, input de pesquisa (#input-pesquisa) e botão de pesquisa (#pesquisa), fiquem lado a lado.

#cx-pesquisa{
	display: flex;
	width: 90%;
	margin: 0 auto;
	text-align: right;
}

Agora vamos definir a largura do input (#input-pesquisa) em 100% para que ele acompanhe a largura do pai dele (#cx-pesquisa).

#input-pesquisa{
	width: 100%;
}

Pronto, se você fez isso tudo deve estar com esse código:

	

		
			
			
			PESQUISA
		
	

E seu resultado no Browser deve ser esse:

Se você chegou até aqui, tudo vai ficar mais fácil agora.

Nós precisamos criar um botão de perguntas dentro da área de perguntas (#cx-pergunta) e definir a largura da área de perguntas como 30%. Eu vou usar 30%, mas você pode usar a largura que achar melhor pro seu projeto.

Então, adicionando a área de perguntas (#cx-pergunta) com o botão de perguntas (#pergunta) o código fica assim:

	

		PERGUNTA
	
	
			
		
		PESQUISA
	

Agora vamos criar os estilos. Lembrando que vamos definir a largura da #cx-pergunta como 30%.

#cx-pergunta{
	display: block;
	width: 30%;
}

E agora o macete, o IF no CSS.

Como nós definimos a largura da #cx-pergunta como 30% , vamos criar um IF para que a #cx-pesquisa tenha 70% toda vez que as duas estiverem juntas dentro do #menu e para que ela não tente ficar centralizada, nós vamos substituir o ‘margin: 0 auto’ por ‘margin: 0 0’ e vamos mudar a cor da borda também.

Nós faremos isso usando um sinal + entre os dois elementos no CSS.
Dessa forma, toda vez que #cx-pergunta for um elemento irmão de #cx-pesquisa as novas regras vão se aplicar à #cx-pesquisa.

O código é esse:

#cx-pergunta + #cx-pesquisa {
	width: 70%;
	margin: 0 0;
	border: 1px solid #f00;
}

Bem simples né?

Agora, quando você tiver a área de pergunta e a área de pesquisa dentro do menu, elas vão ficar lado a lado usando um IF no css.

O código final completo deve ser esse:

	




	
COM O BOTAO DE PERGUNTA:

	

		

			PERGUNTA
		
		
			
			
			PESQUISA
		
	


	
SEM O BOTAO DE PERGUNTA:

	

		
			
			
			PESQUISA
		
	

E o resultado final com as duas situações no Browser: