Ir para conteúdo

POWERED BY:

Arquivado

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

kenweb

[Resolvido] Deixar do lado sem aplicar nada.

Por , em Desenvolvimento frontend

Recommended Posts

kenweb    0

kenweb
Postado

bem quero deixar o logo do lado do menu mais ta complicado.... aki vai o html e o css.

ta vendo o logo quero ele do lado mais sem se aplicar a regra do menu...

 

HTML:

<!DOCTYPE html>
<html lang="pt-br">
   <head>
       <link rel="stylesheet" type="text/css" href="css/style.css" />
   </head>
   <body>
       <div class="container"><!--container-->
         <div class="content"><!--content-->
         <ul class="ca-menu">
         <li id="logo" class="logo"><!--logo-->
              <p align="center"><img src="imagens/logo.png" width="190" height="115"></p>
                <h1 align="center">Texto</h1>
                   </li><!--logo-->
                   <li>
                       <a href="#">
                           <span class="ca-icon">A</span>
                           <div class="ca-content">
                               <h2 class="ca-main">Botao1</h2>
                               <h3 class="ca-sub">subbotao</h3>
                           </div>
                       </a>                    </li>
                   <li>
                       <a href="#">
                           <span class="ca-icon">B</span>
                           <div class="ca-content">
                               <h2 class="ca-main">Botao2</h2>
                               <h3 class="ca-sub">subbotao</h3>
                           </div>
                       </a>                    </li>
                   <li>
                       <a href="#">
                           <span class="ca-icon">C</span>
                           <div class="ca-content">
                               <h2 class="ca-main">Botao3</h2>
                               <h3 class="ca-sub">subbotao</h3>
                           </div>
                       </a>                    </li>
               </ul>
         </div><!--content-->
       </div><!--container-->
       <script type="text/javascript" src="js/jquery.min.js"></script>
   </body>
</html>

 

O CSS:

h1 {
   text-align: center;
margin-bottom: 5px;
font-size: 16px;
font-family: Century Gothic;
text-shadow: #000 1px 1px 1px;
}

h2 {
   text-align: center;
margin-bottom: 5px;
font-size: 9px;
font-family: Century Gothic;
text-shadow: #000 1px 1px 1px;
}

h3,h4,h5,h6 {
text-align: center;
margin-bottom: 5px;
font-size: 12px;
font-family: Century Gothic;
text-shadow: #000 1px 1px 1px;
}

a {
font-family: Century Gothic;
font-size: 12px;
color: #000000;
}
a:link {
text-decoration: none;
text-shadow: #000 1px 1px 1px;
}
a:visited {
text-decoration: none;
color: #000000;
text-shadow: #000 1px 1px 1px;
}
a:hover {
text-decoration: none;
color: #0066CC;
text-shadow: #000 1px 1px 1px;
}
a:active {
text-decoration: none;
color: #0066CC;
text-shadow: #000 1px 1px 1px;
}

<!--Menu-->
@font-face {
   font-family: Century Gothic;
}
.ca-menu{
   padding:0;
   margin:20px auto;
   width: 820px;
}

@logo li{
   margin: 0px;

}
.ca-menu li{
   width: 200px;
   height: 300px;
   overflow: hidden;
   position: relative;
   float:left;
   background: #fff;
   -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
   -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
   box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
   margin-right: 4px;
   -webkit-transition: all 300ms linear;
   -moz-transition: all 300ms linear;
   -o-transition: all 300ms linear;
   -ms-transition: all 300ms linear;
   transition: all 300ms linear;
}
.ca-menu li:last-child{
   margin-right: 0px;
}
.ca-menu li a{
   text-align: left;
   width: 100%;
   height: 100%;
   display: block;
   color: #000;
   position: relative;
}
.ca-icon{
   font-family: Century Gothic;
   font-size: 60px;
   color: #333;
   text-shadow: 0px 0px 1px #333;
   line-height: 150px;
   position: absolute;
   width: 100%;
   height: 50%;
   left: 0px;
   top: 0px;
   text-align: center;
   -webkit-transition: all 400ms linear;
   -moz-transition: all 400ms linear;
   -o-transition: all 400ms linear;
   -ms-transition: all 400ms linear;
   transition: all 400ms linear;
}
.ca-content{
   position: absolute;
   left: 0px;
   width: 100%;
   height: 50%;
   top: 50%;
}
.ca-main{
   font-size: 30px;
   opacity: 0.8;
   text-align: center;
   -webkit-transition: all 200ms linear;
   -moz-transition: all 200ms linear;
   -o-transition: all 200ms linear;
   -ms-transition: all 200ms linear;
   transition: all 200ms linear;
}
.ca-sub{
   text-align:center;
   font-size: 14px;
   color: #0066CC;
   line-height: 40px;
   opacity: 0.8;
   position: absolute;
   bottom: 0;
   width: 100%; 
   -webkit-transition: all 200ms linear;
   -moz-transition: all 200ms linear;
   -o-transition: all 200ms linear;
   -ms-transition: all 200ms linear;
   transition: all 200ms linear;
}
.ca-menu li:hover{
   background-color: #000;
}
.ca-menu li:hover .ca-icon{
   color: #ff2020;
   -webkit-animation: moveFromBottom 300ms ease;
   -moz-animation: moveFromBottom 300ms ease;
   -ms-animation: moveFromBottom 300ms ease;
}
.ca-menu li:hover .ca-main{
   color: #0066CC;
   -webkit-animation: smallToBig 300ms ease;
   -moz-animation: smallToBig 300ms ease;
   -ms-animation: smallToBig 300ms ease;
}
.ca-menu li:hover .ca-sub{
   color: #ffffff;
   background-color: #0066CC;
   -webkit-animation: moveFromBottom 500ms ease;
   -moz-animation: moveFromBottom 500ms ease;
   -ms-animation: moveFromBottom 500ms ease;
}
@-webkit-keyframes smallToBig{
   from {
       -webkit-transform: scale(0.1);
   }
   to {
       -webkit-transform: scale(1);
   }
}
@-moz-keyframes smallToBig{
   from {
       -moz-transform: scale(0.1);
   }
   to {
       -moz-transform: scale(1);
   }
}
@-ms-keyframes smallToBig{
   from {
       -ms-transform: scale(0.1);
   }
   to {
       -ms-transform: scale(1);
   }
}

@-webkit-keyframes moveFromBottom {
   from {
       -webkit-transform: translateY(100%);
   }
   to {
       -webkit-transform: translateY(0%);
   }
}
@-moz-keyframes moveFromBottom {
   from {
       -moz-transform: translateY(100%);
   }
   to {
       -moz-transform: translateY(0%);
   }
}
@-ms-keyframes moveFromBottom {
   from {
       -ms-transform: translateY(100%);
   }
   to {
       -ms-transform: translateY(0%);
   }
}
<!--Fim Menu-->

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

hein?!

 

de qual lado ? do lado de quem ?

que "regra do menu"? tá difícil oque ?

 

 

explique melhor.

Compartilhar este post

Link para o post
Compartilhar em outros sites

kenweb    0

kenweb
Postado

pow mandei o css achei q voces era prodigio.... mas beleza..

 

entao kra no <ul> se aplica uma regra q ta no css pro menu, ele tem um espaçamento q entra o logo mas para conseguir deixar o logo do lado esquerdo ao menu, ele entra um uma <il> do menu q fica certinho, mas com isso o css pega ele e o efeito do menu acontece emcima do logo *___*

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

tipo.. não conheço o teu site, não sei como seria "o certo".

 

se você não explicar, nunca vamos entender. E eu tb não tinha como adivinhar, que você não queria o efeito sobre o logo.

 

 

Então não coloca o logo como LI, ue. Qual a dúvida ?

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