-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
<!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>
Could you express yourself better? What do you mean "in the middle of the top"?
– Randrade
In case it would be.. at the top of the page
– Cruz
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.
– Randrade
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.
– Cruz
There are a lot of things out of order in this code. I counted 3
body
, saw that you havestyle
within thebody
. Arrange it... and then there’s trouble incss
also.body
withposition: absolute
...– Diego Souza
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
– Cruz
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.
– Cruz
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.
– Cruz
Post as answer the corrected code, can help who needs in the future.
– Diego