Because css is not working [closed]

Navigation
-2

I need you to help adjust, there must be some mistake to get so big ... I need this top-of-page notification. Without interfering with the other texts. In case I want the notification to be much smaller and at the top as shown in the image below 

<!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><linkhref='https://fonts.googleapis.com/css?family=Pacifico'rel='stylesheet'type='text/css'><body><scripttype="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>
    
asked by anonymous 29.01.2016 / 14:23

2 answers

0

There is a solution, your code was poorly structured, without seeming arrogant it seems that you are not yet familiar with HTML / CSS so I recommend you to thoroughly researched the technologies. 

$(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><linkhref='https://fonts.googleapis.com/css?family=Pacifico'rel='stylesheet'type='text/css'></head><bodybgcolor="#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>
    
29.01.2016 / 19:46
0

Test this code, maybe you'll have to tweak the margins a bit to get exactly where you want the elements, but basically that's it. Organizing your HTML elements a little better will make it easier to define styles. 

    <!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><linkhref='https://fonts.googleapis.com/css?family=Pacifico'rel='stylesheet'type='text/css'><scripttype="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>
    
29.01.2016 / 16:34
How to get the last generated id in php using angular? Slider by clicking on Fullscreen