Ozan Kurt Ozan Kurt - 6 months ago 9
Javascript Question

How can I display my "bar" div on the top of the page?

I created a school presidentship voting system.

But I want to improve the user interface by styling my website.

In my administrator view there are many codes to display, so sometimes I need to scroll down.

Here is my code for the administrator.php and I have a header divice called "header".

I want that even if I scroll down this "header" stays with me.

If you wish to have all files to try it on your browser, I can upload to the Internet; just comment.

<?php
require_once('admin-auth.php');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<link rel="SHORTCUT ICON" href="images/log.png">
<title>DSI Voting System</title>
<style>
#tbl
{
font-family: Tahoma, Geneva, sans-serif;
border-collapse: collapse;
margin-bottom: 20px;
width: 885px;
}
#tbl td, #tbl th
{
font-size: 11px;
border: 1px solid #094f4b;
padding: 3px 7px 2px 7px;
background-color: #ffffff;
color: #4b4b4b;
font-family: Tahoma, Geneva, sans-serif;
}
#tbl th
{
font-size: 14px;
text-align: left;
padding-top: 5px;
padding-bottom: 4px;
background-color: #116763;
color: #ffffff;
}
</style>
</head>

<body>
<div id="header">
<div id="bar">
<div style="width:900px; margin:auto; padding-top:8px;">
<img src="img/aclc-logo.png" /></div>
</div>
<div id="subbar">
<table style="padding-top:80px; width:890px; margin:auto; text-align:right;">
<tr>
<td id="bold" style="color:#FFF; padding-left:10px;">
<a href="administrator.php">Passcodes</a> | <a href="generating.php">Election Results</a> | <a href="print.php">Save/Print</a> | <a href="admin-logout.php">Logout</a>
</td>
</tr>
</table>
</div>
</div>
<div id="content">
<center>
<div id="scroll">
<table style="margin-top:0px;">
<tr>
<td colspan="2" style="font-family:Tahoma, Geneva, sans-serif; font-size:16px; padding-bottom:10px;"><b>ADMINISTRATOR</b></td>
</tr>
<tr>
<td colspan="2" style="font-family:Tahoma, Geneva, sans-serif; font-size:11px; color:#116763;"><a href="registered.php"><b style="color:#116763;">Generate New Passcode</b></a></td></tr>
<tr>
<td colspan="2" style="font-family:Tahoma, Geneva, sans-serif; font-size:11px; color:#116763;"><a href="registerednumber.php"><b style="color:#116763;">Generate New 5 Passcodes at once</b></a></td></tr>
<tr>
<td colspan="2" style="font-family:Tahoma, Geneva, sans-serif; font-size:11px; color:#116763;"><a href="registerednumber2.php"><b style="color:#116763;">Generate New 10 Passcodes at once</b></a></td></tr>
<tr>
<td colspan="2">
<?php

//databse connection
include_once 'config.php';

//Connect to mysql server
$link = mysql_connect(DB_HOST, DB_USER, DB_PASSWORD);
if(!$link) {
die('Failed to connect to server: ' . mysql_error());
}

//Select database
$db = mysql_select_db(DB_DATABASE);
if(!$db) {
die("Unable to select database");
}

//Create query
$row="SELECT * FROM registered";
$result=mysql_query($row);

echo "<table id='tbl'>
<tr>
<th width='60'>Number</th>
<th>Generated Password</th>
<th>Full Name</th>
<th>Signature</th>
</tr>";

while($row = mysql_fetch_array($result))
{
echo "<tr>";
echo "<td><b>" . $row['id'] . "</b></td>";
echo "<td><b style='color:red;'>" . $row['voters'] . "</b></td>";
echo "<td><b style='color:red;'></b></td>";
echo "<td><b style='color:red;'></b></td>";
echo "</tr>";
}
echo "</table>";
mysql_close($link);
?>
</td>
</tr>
</table>
</div>
</center>
</div>
<div id="footer">
Ozan Kurt Voting System &copy; 2014
</div>
</body>
</html>


Here is my CSS file code:

@charset "utf-8";
/* CSS Document */
*
{
padding:0px;
margin:0px;
}
html, body
{
background-color:#edf0f5;
}
#bar
{
background-image:url(../images/feln-crowd.png);
height:80px;
width:100%;
-moz-box-shadow:0px 0px 1px #005073;
-webkit-box-shadow:0px 0px 1px #005073;
box-shadow:0px 0px 1px #005073;
padding:0px;
border-bottom:1px solid #0c0d0a;
position:absolute;
}
#subbar
{
background-image:url(../images/feln-crowd.png);
height:100px;
width:100%;
}
#header {
position:fixed;
top:0px;
width:100%;
}
#content
{
width:100%;
height:auto;
margin-bottom:5px;
}
#textbox
{
background:#FFC;
border: 1px solid #ddd;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
outline: none;
padding: 5px;
width: 250px;
font-family:Tahoma, Geneva, sans-serif;
}
#dropdown
{
background:#116763;
border: 1px solid #ddd;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
outline: none;
padding: 10px;
width: 250px;
font-family:Tahoma, Geneva, sans-serif;
color:#FFF;
}
#button
{
background: #116763;
border: 1px solid #ddd;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
outline: none;
width: 77px;
font-family:Tahoma, Geneva, sans-serif;
color:#FFFFFF;
font-weight:bold;
padding:3px;
margin-bottom:5px;
cursor:pointer;
}
#scroll
{
width:900px;
height:auto;
border-right:1px solid #CCC;
border-bottom:1px solid #CCC;
border-left:1px solid #CCC;
background-color:#edf0f5;
text-align:left;
padding-left:10px;
padding-top:10px;

}
#bold
{
font-weight:bold;
font-size:12px;
font-family:Tahoma, Geneva, sans-serif;
color:#116763;
}
a:link {color:#fff; text-decoration:none}
a:visited {color:#fff;}
a:hover{ text-decoration:none; color:#ccc;}
a:active {color:#3b5998;text-decoration: fff}
#footer
{
background: #edf0f5;
height:20px;
width:900px;
color:#116763;
margin:auto;
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
font-weight:bold;
text-align:right;
}
h3, li
{
color:#116763;
}

Answer

It's simple - just add position: fixed and top 0px to your elem. Something like this:

#bar
{
    background-image:url(../images/feln-crowd.png);
    height:80px;
    width:100%;
    -moz-box-shadow:0px 0px 1px #005073;
    -webkit-box-shadow:0px 0px 1px #005073; 
    box-shadow:0px 0px 1px #005073;
    padding:0px;
    border-bottom:1px solid #0c0d0a;
    position: fixed;
    top: 0px;
}