I am in the process of creating a website dedicated to my "Starcraft II" clan. My goal is to have the navigation bar display the text "ALLOYE" and remain fixed at the bottom of the screen. I attempted to achieve this using the following code:
vertical-align: text-bottom;
However, I noticed that the text appears to be positioned about 10 pixels above the bottom. Could this be due to any hidden borders or other factors? Below is the complete HTML markup for my project:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="nav">
<div class="title">
<strong>ALLOYE</strong>
</div>
</div>
</body>
</html>
Additionally, here is the CSS code in use:
body {
margin: 0;
padding: 0;
color: #fff;
font-family: "Segoe UI", Arial, Sans-Serif;
}
.nav {
position: absolute;
width: 100%;
height: 7%;
background: -webkit-linear-gradient(#FFB441, #FF9A00);
background: -o-linear-gradient(#FFB441, #FF9A00);
background: -moz-linear-gradient(#FFB441, #FF9A00);
background: linear-gradient(#FFB441, #FF9A00);
}
.title {
position: relative;
vertical-align:text-bottom;
font-size: 65px;
}