Ir para conteúdo

POWERED BY:

Arquivado

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

joeythai

Como organizar uma imagem com menu

Por , em Desenvolvimento frontend

Recommended Posts

joeythai    0

joeythai
Postado

Boa tarde Rapaziada,

Estou desenvolvendo um cabeçalho do qual possui uma imagem junto com um menu, porém, não estou conseguindo colocar a imagem (logo)ao lado do menu, a imagem está acima, não sei muito de CSS, abaixo tem o código que já fiz:


<code>
<!DOCTYPE html>


<html lang="pt-br">


<head>
<link rel="stylesheet" type="text/css" href="estilo.css">


<meta charset="utf-8">
<title>Controle de PA's</title>
</head>


<body>


<div class="cabecalho" float:"left">
<img src="../controle_pas/icones/gcontax.jpg">
    <nav>
     <ul class="menu">
            <li><a href="#">Pesquisar</a>
             <ul>
                 <li><a href="#">Site</a></li>
                    <li><a href="#">PA</a></li>
                    <li><a href="#">Usuários</a></li>
                </ul>
            </li>             
            <li><a href="#">Relatórios</a></li>
         <li><a href="#">Cadastrar</a>
             <ul>
                 <li><a href="cadastro_site.php">Site</a></li>
                    <li><a href="#">PA</a></li>
                    <li><a href="#">Usuários</a></li>
                </ul>
         </li>
            <li><a href="#">Logar</a></li>
        </ul>
    </nav>
    </div>
    
    </body>
    </html>
</code>


Agora o código do CSS:


<code>


@charset "utf-8";
/* CSS Document */


*{
margin:20;
padding:0;
}
body{
font-family: Arial, Helvetica, sans-serif;
font-size:16px;
}
.menu{
list-style:none;
float:left;
border:1px solid #777;
}
.menu li{
position:relative;
border-right:1px solid #666;
float:left;


}
.menu li a{
color:#333;
text-decoration:none;
padding:5px 10px;
display:block;
}
.menu li a:hover{
background:#06F;
color:#FFF;
-moz-box-shadow:0 3px 10px 0 #033;
-webkit-box-shadow:0 3px 10px #033;
text-shadow:0 0 5px #666;
}
.menu li ul{
position:absolute;
top:25px;
left:0;
background-color:#666;
display:none;
color:#FFF;
}
.menu li ul a{
color:#FFF;
}
.menu li:hover ul, .menu li.over ul{
display:block;
}
.menu li ul li{
border:1px solid #FFF;
display:block;
width:112px; 
} 


</code>



Se alguém que domina o CSS estiver disponível eu agradeço.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Gabriel Heming    766

Gabriel Heming
Postado

Sua dúvida deve ser postada na área de CSS.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Movido

 

PHP :seta: CSS

Compartilhar este post

Link para o post
Compartilhar em outros sites

pedrohsb    6

pedrohsb
Postado

Olá joeythai!

 

Adicione display: inline-block na tag img (logo) e na tag nav.

 

Veja o código abaixo:

<div class="cabecalho">
<img src="../controle_pas/icones/gcontax.jpg" style="display: inline-block">
<nav style="display: inline-block">

Nota: foi removido o float: left. Ele só deve ser usado em no HTML com style="float: left", como eu fiz no código acima com inline-block, e não solto dentro da div.

 

Espero ter ajudado! :grin:

 

Atenciosamente,

Pedro HSB :)

Compartilhar este post

Link para o post
Compartilhar em outros sites

joeythai    0

joeythai
Postado

Olá joeythai!

 

Adicione display: inline-block na tag img (logo) e na tag nav.

 

Veja o código abaixo:

<div class="cabecalho">
<img src="../controle_pas/icones/gcontax.jpg" style="display: inline-block">
<nav style="display: inline-block">

Nota: foi removido o float: left. Ele só deve ser usado em no HTML com style="float: left", como eu fiz no código acima com inline-block, e não solto dentro da div.

 

Espero ter ajudado! :grin:

 

Atenciosamente,

Pedro HSB :)

Obrigado Pedro, funcionou perfeitamente.

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