Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Detonador PHP

[Resolvido] Como alinhar no segundo bloco as DIVs?

Recommended Posts

Olá pessoal. Estou com o seguinte problema!

Tenho esta organização no meu cabeçalho:

 

DIV Dados do Usuário

DIV Opções do Usuário

DIV Logo do Cliente

DIV Menu

 

Eu gostaria que na linha superior do site, a DIV Dados do usuário ficasse a esquerda e DIV Opções do Usuário ficasse a direita! Até ai beleza!

O problema que quando coloco DIV Logo do Cliente e DIV Menu, ao invés deles irem para baixo, eles ficam em cima tb! Tem como colocar eles em baixo, como se fosse outro bloco?

 

Tipo, eles teriam que ficar assim:

DIV Dados do Usuário --------------------------------------- DIV Opções do Usuário

DIV Logo do Cliente ----------------------------------------------------- DIV Menu

 

E eles estão ficando assim:

DIV Dados do Usuário - DIV Logo do Cliente ------ DIV Menu - DIV Opções do Usuário

 

Vou colocar meu CSS aqui pra estudos!

Abraço a todos!

 

 

CSS

#dados_usuario_logado{ /*estilo dos dados do usuário logado (superior esquerda)*/
	float:left;
	font-size:9px;
	background-image:url(../imagens/cabecalho/dados_usuario_logado_canto_esq.jpg);
	background-position:left;
	background-repeat:no-repeat;
	background-color:#145589;
	color:#A1BBD0;
	line-height:20px;
	padding-left:8px;
	margin-top:10px;
}

#dados_usuario_logado strong{ /*estilo do nome do usuário logado (estilo serve para colocar o canto direito arredondado)*/
	background-image:url(../imagens/cabecalho/dados_usuario_logado_canto_dir.jpg);
	background-position:right;
	background-repeat:no-repeat;
	padding:5px 8px 5px 0px;
}

#opcoes_usuario_logado{ /*estilo das opções do usuário logado (ajuda | meus dados | logout)*/
	float:right;
	font-size:10px;
	color:#fff;
	line-height:20px;
	margin-top:3px;
}

#logo_cliente{
	float:left;
	color:#fff;
}

#menu_nivel_01{
	float:right;
	color:#fff;
}

 

HTML

<div id="dados_usuario_logado">logado como <strong>Giancarlo Pereira da Rosa</strong></div>
<div id="opcoes_usuario_logado"><a href="#">Ajuda</a> | <a href="#">Meus Dados</a> | <a href="#"><span>Logout</span></a></div>
<div id="logo_cliente">Logo do Cliente</div>
<div id="menu_nivel_01">Primeiro Nível de Menus</div>

Compartilhar este post


Link para o post
Compartilhar em outros sites

Muitas pessoas se esquecem da propriedade CLEAR, ela é muito importante, lembre-se disso.

 

#logo_cliente{
        float:left;
        color:#fff;
        clear: left;
}

#menu_nivel_01{
        float:right;
        color:#fff;
        clear: right;
}

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.