When it comes to aligning my login page with CSS, I've encountered a problem distinguishing between the margin-top and top properties. While margin-top pushes the login page based on the first element, top defines its position. This has led me to avoid using margin-top in my media query codes, as unfortunately, top does not seem to be effective either.
In an attempt to utilize the top property in my CSS, I added the following:
#loginpage {
position: absolute;
width: 100%;
top: -42%;
}
This implementation did not work for me.
The only successful method was adjusting the margin-top as follows:
margin-top: -20%;
Above my login page, there is a slideshow header and a Twitter Bootstrap navbar defined as:
#twitterbootstrap {
position: relative;
}
#SlideshowHome {
position: absolute;
left: 0%;
width: 100%;
top: 6%;
height: 20%;
}
This is how my login page is structured:
<div id="loginpage">
<table id="loginpage1" width="100%">
<tr>
<td>
<h2>Login</h2>
<br />
</td>
</tr>
<tr>
<td>
<b>Username:</b> <asp:TextBox ID="txtUsername" runat="server"></asp:TextBox>
<br />
<br />
</td>
</tr>
<tr>
<td>
<b>Password:</b> <asp:TextBox ID="txtPassword" runat="server" TextMode="Password"></asp:TextBox>
<br />
<br />
</td>
</tr>
</table>
</div>
Here are the details of the Twitter Bootstrap and Slideshow Header sections:
<div id="SlideshowHome">
<img src="image/s1.jpg" name="slide" style="width: 100%; height: 150%">
</div>
<div id="twitterbootstrap">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">iPolice's Menu</a>
<div class="nav-collapse">
<ul class="nav">
<li class="divider-vertical"></li>
<li><a href="Login.aspx">Login</a></li>
<li class="divider-vertical"></li>
<li><a href="RecoverPassword.aspx">Recover Password</a></li>
<li><a href="https://www.facebook.com/singaporepoliceforce?ref=ts&fref=ts"><img src="image/facebook.jpg" style="width: 100px; height: 30px"></a></li>
<li><a href="https://twitter.com/SingaporePolice"><img src="image/twitter.jpg" style="width: 100px; height: 30px"></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
Given these implementations, I'm curious why changing the margin-top affects the position while adjusting the top property doesn't seem to have any impact?