CSS still can't align hyper link with bottom-left of window
I'm just trying to make a hyperlink (which is the div .t2) appear in the bottom left corner, and I'm assuming it has something to do with the dimensions of the body, but I can't figure it out.
my html is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> Incident Report Page </title>
<link rel="stylesheet" href="http://....">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div class="header">
Incident Report Page
</div>
<div class="t1">
<form action="connect_database.php" method=post >
<p>
username <input type="text" name = "un"> <br><br>
password <input type="password" name = "pw"> <br><br>
<input type="submit" name = "subby" value = "Enter">
</p>
</form>
</div>
<div class="t2">
<p><b><a href="http://....">HTTP exchanges</a></b></p>
</div>
</body>
</html>
and the CSS is:
body {
font-family: Century Gothic, Arial;
background-color: #836FFF;
position: relative;
height: 100%;
width: 100%;
}
.t2 {
position: absolute;
bottom:0;
left:0;
}
.header {
margin: 0 auto;
w开发者_开发技巧idth: 910px;
background-color: #6A5ACD;
font-size: 60px;
color: #473C8B;
text-align: center;
}
.t1 {
margin: 20px auto 0px auto;
padding: 10px;
font-size: 16px;
font-weight: bold;
color: #473C8B;
text-align: center;
padding-top: 20px;
}
If you want it fixed in the bottom/left corner of the viewport, then simply change .t2 to position:fixed;
.t2 {
position: fixed;
bottom:0;
left:0;
}
Here is a Demo...
http://jsfiddle.net/h2qFU/
加载中,请稍侯......
精彩评论