CSS3 2 Problems

Asked

Viewed 53 times

0

Let’s start with the codes

HTML and 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;
}
<!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>

instead of display:inline-block;

as li's NAY are online. Only with display:inline; Because?

2) When I do:

.magico, .menu{ 
  display: inline;
  vertical-align:top;
}

.magico and .menu are online. But starting at the same position, ie left: 0. Why? Here, what I want is one after the other.

This can be seen in:

http://www.dinamicaimoveis.com.br/mfb/index2.php

Thanks to those who can help!

css css3

  • Solved: it was a question of size of dis’s and . magico img was with position: Absolute; so over the screen

  • 1

    I don’t quite understand what your difficulty is, if you can edit the question.

1 answer

0

If that’s what I understand, I’ve removed the unnecessary from the CSS:

<style>
* {
  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;
}

.magico,
.menu {
  display: inline-block;
  vertical-align: top;
}

.magico {
    width: 250px;
}

.magico img {
  animation-name: cair;
  animation-iteration-count: unique;
  animation-duration: 1s;
}

.menu {
    width: 650px;
    height: 100% auto;
    border: #000 3px solid;
}

.menuPrincipal li {
  display: inline-block;
}
<style>

Browser other questions tagged css css3

You are not signed in. Login or sign up in order to post.