Let's start with the codes
CSS
@charset "utf-8";
/* CSS Document */
* {
margin: 0;
padding: 0;
}
body {
background-image:url(../../_img/fundo.jpg);
background-size:cover;
background-attachment: fixed;
}
ul {
list-style:none;
}
@keyframes cair {
from {
top: -100px;
}
to {
top: 100px;
}
}
.topo, .conteudo, .base, .final {
clear:both;
position:relative;
width: 900px;
margin:0 auto;
/*border: #000 .3px solid;*/
}
.magico, .menu{
display: inline;
vertical-align:top;
}
.magico {
width:250px;
}
.magico img {
position: absolute;
top: 0px;
animation-name: cair;
animation-iteration-count: unique;
animation-duration: 1s;
}
.menu {
width:650px;
height:200px;
border: #000 .3px solid;
}
.menuPrincipal li {
display:inline-block;
width: 130px;
}
.cartola {
/*border: #000 .3px solid;*/
}
.menuItens {
margin-left:-45px;
margin-top:-20px;
}
HTML
<!doctype html>
<html>
<head>
<title>Documento sem título</title>
<link rel="stylesheet" type="text/css" href="_global/css/estilo.css">
<link rel="stylesheet" type="text/css" href="_global/css/site2.css">
<link rel="stylesheet" type="text/css" href="_global/css/menu2.css">
<script src="_global/_js/jquery-2.1.4.min.js"></script>
</head>
<body>
<div class="topo">
<div class="magico"><img src="_img/magico.png" style="width:250px" /></div>
<div class="menu">
<ul class="menuPrincipal">
<li>
<div class="cartola"><img src="_img/cartola.png" height="100px" /></div>
<div class="menuItens"><img src="_img/home.png" height="100px" /></div>
</li>
<li>
<div class="cartola"><img src="_img/cartola.png" height="100px" /></div>
<div class="menuItens"><img src="_img/catalogoVirtual.png" height="100px" /></div>
</li>
<li>
<div class="cartola"><img src="_img/cartola.png" height="100px" /></div>
<div class="menuItens"><img src="_img/colecao.png" height="100px" /></div>
</li>
<li>
<div class="cartola"><img src="_img/cartola.png" height="100px" /></div>
<div class="menuItens"><img src="_img/contato.png" height="100px" /></div>
</li>
<li>
<div class="cartola"><img src="_img/cartola.png" height="100px" /></div>
<div class="menuItens"><img src="_img/quemSomos.png" height="100px" /></div>
</li>
</ul>
</div>
</div>
<div class="conteudo"></div>
<div class="base"></div>
<div class="final"></div>
</body>
</html>
Problems:
1) If I do:
.menuPrincipal li {
display:inline;
width: 130px;
}
instead of display:inline-block ;
% w / NOT goes online. Only with li's Why?
2) When I do:
.magico, .menu{
display: inline;
vertical-align:top;
}
display:inline; and .magico are online. But starting at the same position, ie left: 0. Why?
Here, what I intend is one after another.
This can be seen in:
Thanks to anyone who can help!