-2

Preciso que ajudem a ajustar,deve está havendo algum erro pra ficar tão grande... preciso dessa notificação topo da página. Sem interferir os outros textos. No caso quero que a notificação fique bem menor e no topo como demostra na imagem abaixo http://i.imgur.com/nvVp00l.png

<!DOCTYPE html>

<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta charset="utf-8">
  <title>haxP v2</title>
  <link rel="shortcut icon" href="./favicon.png">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>

  <body>
    <script type="text/javascript">
      $("").ready(function() {
        $("div.success").fadeIn(300).delay(1500).fadeOut(400);
      });
    </script>
    <style type="text/css">
      .alert-box {
        padding: 15px;
        margin-bottom: 20px;
        border: 1px solid transparent;
        border-radius: 4px;
      }
      .success {
        color: #3c763d;
        background-color: #dff0d8;
        border-color: #d6e9c6;
        display: none;
      }
    </style>

    <div class="alert-box success">Successful Alert !!!</div>
    <body bgcolor="#3CB371" />
    <center>
      <style>
        body {
          left: 0;
          line-height: 200px;
          margin: auto;
          margin-top: -100px;
          position: absolute;
          top: 50%;
          width: 100%;
          color: #ffffff;
          font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
          font-size: 56px;
        }
        #frase {
          left: 0;
          line-height: 200px;
          margin: auto;
          margin-top: -100px;
          position: absolute;
          top: 65%;
          width: 87%;
          ;
          font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
          font-size: 8px;
        }
        #rodape {
          left: 0;
          line-height: 200px;
          margin: fixed;
          margin-top: 0px;
          position: absolute;
          bottom: 0;
          top: 110%;
          width: 100%;
          ;
          font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
          font-size: 10px;
        }
      </style>
</head>

<body>

  <div id="texto">
    <font face="Pacifico">Welcome Underground</font>
  </div>

  <div id="frase">
    Cada sonho que você deixa pra trás, é um pedaço do seu futuro que deixa de existir.
  </div>
  <div id="rodape">
    Powered by <b><font face="Pacifico" size="2">Cruz</font></b>
  </div>

</body>

</html>
</center>

9
  • Poderia se expressar melhor? Como assim "no meio do topo"?
    – Randrade
    Commented 29/01/2016 às 13:29
  • No caso seria.. no topo da página
    – Cruz
    Commented 29/01/2016 às 13:32
  • 1
    Sim, mas como? Só essa barra no topo? Tamanhos, etc... Se puder adicionar uma imagem da forma que quer que fique ajudará a te ajudar.
    – Randrade
    Commented 29/01/2016 às 13:33
  • Quero aquela barra Bem menor no topo.. sem interferir nos outros textos pode ser qualquer tamanho que possa editar mais tarde,mas.. que fique no topo e não interfira os outros textos.
    – Cruz
    Commented 29/01/2016 às 13:45
  • Tem um monte de coisa fora de ordem nesse código. Contei 3 body, vi que tem style dentro do body. Organiza isso... e depois tem problemas no css também. body com position: absolute... Commented 29/01/2016 às 13:58

2 Respostas 2

0

Segue uma solução, seu código estava pessimamente estruturado, sem parecer arrogante parece que você ainda não está familiarizado com HTML/CSS portanto recomendo que você de uma pesquisada a fundo nas tecnologias.

$(document).ready(function() {
  $("div.success").fadeIn(300).delay(1500).fadeOut();
});
body {
  margin: auto;
  padding: 0;
  width: 100%;
  color: #ffffff;
  font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
  position: relative;
}
#texto {
  margin-top: 40px;
  text-align: center;
  font-size: 56px;
}
#frase {
  text-align: center;
  margin: 0 auto;
  width: 87%;
  line-height: 20px;
  font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
  font-size: 8px;
}
#rodape {
  text-align: center;
  left: 0;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
  font-size: 10px;
}
.alert-box {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
  line-height: 1;
  font-size: 14px;
  top: 0;
  width: 100%;
  position: fixed;
  text-align: center;
}
.success {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
  display: none;
}
<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta charset="utf-8">
  <title>haxP v2</title>
  <link rel="shortcut icon" href="./favicon.png">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
</head>

<body bgcolor="#3CB371">

  <div class="alert-box success">Successful Alert !!!</div>


  <div id="texto">
    <font face="Pacifico">Welcome Underground</font>
  </div>

  <div id="frase">
    Cada sonho que você deixa pra trás, é um pedaço do seu futuro que deixa de existir.
  </div>
  <div id="rodape">
    Powered by <b><font face="Pacifico" size="2">Cruz</font></b>
  </div>

</body>

</html>

0

Testa esse código, talvez vai ter que ajustar um pouco as margens para ficar exatamente onde você quer os elementos, mas basicamente é isso. Organize um pouco melhor seus elementos HTML ficara mais fácil de definir os estilos.

    <!DOCTYPE html>

<html>
    <head>
      <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
      <meta charset="UTF-8">
      <title>haxP v2</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
      <script type="text/javascript">
          $("").ready(function() {
            $("div.success").fadeIn(300).delay(1500).fadeOut(400);
          });
      </script>
      <style type="text/css">
          .alert-box {
            padding: 15px;
            margin-bottom: 20px;
            border: 1px solid transparent;
            border-radius: 4px;
            text-align: center;
            width: 100%;
            float: right;
          }
          .success {
            color: #3c763d;
            background-color: #dff0d8;
            border-color: #d6e9c6;
            display: none:
          }
            body {
              left: 0;
              margin: auto;
              position: absolute;
              width: 100%;
              color: #ffffff;
              font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
              font-size: 56px;
              text-align: center;
              background-color: #3CB371;
            }
            #frase {
                left: 0;
                margin: auto;
                width: 100%;
                font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
                font-size: 8px;
                margin-left: -75px;
                margin-top: -15px;
            }
            footer {
                margin-top: 200px;
                font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
                font-size: 10px;
            }
            .c {
                margin-top: 25%;
            }
     </style>
</head>

<body>
    <div class="alert-box success">Successful Alert !!!</div>
    <div class='c'> 
        <div id="texto">
            <font face="Pacifico">Welcome Underground</font>
            <div id="frase">
                Cada sonho que você deixa pra trás, é um pedaço do seu futuro que deixa de existir.
            </div>
        </div>
    </div>
</body>
<footer>
    Powered by <b><font face="Pacifico" size="2">Cruz</font></b>
</footer>
</html>

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .