Ir para conteúdo

POWERED BY:

Arquivado

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

Juliano.net

[Resolvido] posicionar imagem e UL dentro da mesma DIV

Por , em Desenvolvimento frontend

Recommended Posts

Juliano.net    2

Juliano.net
Postado

Preciso criar o cabeçalho de uma aplicação web que terá a logomarca verticalmente centralizada à esquerda e o menu (através de UL) alinhado à direita e na posição inferior, mas infelizmente não consigo este resultado (quanto ao posicionamento).

 

 

 

Nesta imagem tem a ilustração do que preciso http://i39.tinypic.com/v2z6g1.jpg

 

 

 

Obrigado

Compartilhar este post

Link para o post
Compartilhar em outros sites

Juste    0

Juste
Postado

O que eu fiz deve funcionar, mas não tenho certeza se é a melhor maneira.

Você só vai precisar mexer um pouco no estilo , mas o posicionamento deve atender a sua necessidade. Sugiro que estude a propriedade "position" para não ter mais este tipo de dificuldade.

<style type="text/css">

           body{
               margin:0px auto;
           }

           #header{
               position:relative;
               width: 700px;
               height: 200px;
               margin-left:0px;
               background-color:#666666;
           }

           #logo{
              position:absolute;
              top:70px;


           }

           #nav{
               position:absolute;
               right:100px;
               bottom:0px;
               padding:10px;

           }

           #nav a{
               padding: 10px;
               border:1px solid;
               margin: 5px;
           }

       </style>
   </head>

   <body>

       <div id="container">
           <header id="header">

           <div id="logo">
               <img src="http://placehold.it/150x50" />
           </div>

           <nav id="nav">
               <a href="#">LINK 1</a>
               <a href="#">LINK 2</a>
               <a href="#">LINK 3<a>
           </nav>

       </header>

   </div>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

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

  Aceito