堆栈内存溢出
  简体   繁体   English

如何在页面顶部显示“ bar” div？

[英]How can I display my “bar” div on the top of the page?

 原文  2014-02-02 20:56:29  8   2    javascript/ jquery/ html/ css

问题描述

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". 这是我用于administrator.php的代码，并且我有一个标题为“ 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; 如果您希望所有文件都可以在浏览器上进行尝试，可以将其上传到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: 这是我的CSS文件代码： 

@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;
}

2 个解决方案

解决方案1
 1  2014-02-02 21:00:46

Try adding: 尝试添加： 

position: fixed;

This will make sure it stays at the same spot of your site. 这样可以确保它位于您网站的同一位置。

You can then use 然后，您可以使用 

top: 0px;

For example to position it at the right spot 例如将其放置在正确的位置

解决方案2
 0 已采纳  2014-02-02 20:59:30

It's simple - just add position: fixed and top 0px to your elem. 很简单-只需添加位置即可：将elem固定并置顶0px。 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;
}

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在特定的“ div”内而不是在页面顶部显示角度加载条？ - How to display the angular loading bar within a particular 'div' instead of on the top of the page? 我怎样才能使页面顶部的加载器栏做出反应 - How can i make the loader bar in the top of page in react 如何在页面顶部隐藏导航栏 - How can I hide nav bar when on top of page 我如何使用底部位置为div动画到页面顶部 - how can i use position bottom to animate a div to the top of page 如何在点击时让 div 滚动到页面顶部？ - How can I make a div scroll to the top of the page on click? 如何将我的导航栏显示为粘性？ - How can I display my navigation bar as sticky? 我的div无法到达页面的顶部和侧面 - Can't get my div to reach the top and sides of my page 如何在地址栏中隐藏我的页面名称和扩展名？ - How can I hide my page name and extension in the address bar? 如何基于页面上的按钮创建进度栏？ - How can i create progress bar based on buttons on my page? 如何在全屏视频上方显示自定义HTML视频控件（或div）？ - How do I display my custom HTML video controls (or a div) on top of a full screen video?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM