Why css is not working

Asked

Viewed 649 times

-2

I need you to help adjust, there must be some mistake to get this big... I need this top-of-the-page notification. Without interfering with the other texts. In case I want the notification to be much smaller and at the top as demonstrated in the image below 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>

javascript jquery css css3

  • Could you express yourself better? What do you mean "in the middle of the top"?

  • In case it would be.. at the top of the page

  • 1

    Yes, but how? Just this bar at the top? Sizes, etc... If you can add an image the way you want it to stay will help you.

  • I want that Much smaller bar at the top.. without interfering with other texts can be any size you can edit later, but.. stay at the top and do not interfere with other texts.

  • There are a lot of things out of order in this code. I counted 3 body, saw that you have style within the body. Arrange it... and then there’s trouble in css also. body with position: absolute...

  • line-height: 200px; removed and height set, actually decreases but still does not look like I want it Result: http://i.imgur.com/Xviil5g.png

  • Dear zoom friend: I know absolutely nothing about css and I don’t know how to fix this error, so I asked for help from more experienced users.

  • Doubt resolved, in place of the <style> body I put a missing text #re-organized the comic and everything was correctly as I wanted, Thanks to all who commented.

  • Post as answer the corrected code, can help who needs in the future.

Show 4 more comments

2 answers

0

Test this code, maybe you’ll have to adjust the margins a little bit to stay exactly where you want the elements, but basically that’s it. Organize your HTML elements a little better and it will be easier to define the 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>
      <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>

0


Follow a solution, your code was poorly structured, without looking arrogant it seems that you are not yet familiar with HTML/CSS so I recommend you to a deep research in 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>
  <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>

Browser other questions tagged javascript jquery css css3

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