Menu user

[Je4n 0]

Eu estou desenvolvendo essa área de opções de Usuário no canto direito do meu header, já fiz a parte dos ícones, porém estou com a dúvida de como fazer na parte que está o avatar com o nome e o link de logout. Faço ainda dentro do nav usuario ? não estou conseguindo desenvolver essa parte

<ul class="area_user">
<nav id="usuario">
<ul>
<li><a href="#">ICON 1</a></li>
<li><a href="#">ICON 2</a></li>
<li><a href="#">ICON 2</a></li>
<li><a href="#">ICON 2</a></li>
</ul>
</nav>
</ul>  

.area_user {
    float: right;
}
#usuario {
padding:0px;
margin: 10px 0 0 0;
list-style:none;
}
#usuario ul li { display: inline; }
#usuario ul li a {
padding: 2px 10px;
display: inline-block;
color: #8F8F8F;
text-decoration: none;
}
#usuario ul li a:hover {
color: #53595F;
}

[Electronic 124]

faz dentro

o que não esta conseguindo e como quer que fique?

[Je4n 0]

faz dentro

o que não esta conseguindo e como quer que fique?

Então, a parte do avatar em si. quero que fique igual no design que eu fiz http://prntscr.com/80521x

<div class="avt-r"><img src="http://r16.imgfast.net/users/1615/40/26/04/avatars/1-73.png" alt=""></div>
<div class=""><a href="/user"><span id="user-info-topo">Admin</span></a><br><a href="#">Sair</a></div>

Tinha feito dessa maneira, mas acho que não seria a correta e ficou bem irregular

[Electronic 124]

o circulo tem que ter float left

tira o print de como ficou

ou poste o html e css num desses editor online e cole o link aki

http://jsfiddle.net/

https://jsbin.com/?html,output

http://codepen.io/

[Je4n 0]

o circulo tem que ter float left

tira o print de como ficou

ou poste o html e css num desses editor online e cole o link aki

http://jsfiddle.net/

https://jsbin.com/?html,output

http://codepen.io/

Aqui está: https://output.jsbin.com/ramagojuye/

[Electronic 124]

primeiro isso ta muito errado

<ul class="area_user">
<nav id="usuario">
<ul>
<li><a href="#">ICON 1</a></li>

 

o primeio UL nao tem nenhum LI, e NAV nao vai dentro de UL e sim o contrario

NAV

UL

LI

 

apaguei algumas tags e editei o CSS

http://codepen.io/anon/pen/Qbzrao

[Je4n 0]

primeiro isso ta muito errado

<ul class="area_user">

<nav id="usuario">

<ul>

<li><a href="#">ICON 1</a></li>

 

o primeio UL nao tem nenhum LI, e NAV nao vai dentro de UL e sim o contrario

NAV

UL

LI

 

apaguei algumas tags e editei o CSS

http://codepen.io/anon/pen/Qbzrao

Ah, certo! muito obrigado.