个人中心
gpt4 book ai didi

html - CSS 重叠

转载 作者：太空宇宙 更新时间：2023-11-03 18:02:30 26 4
gpt4 key购买 nike

我正在使用 Bootstrap 开发一个网站，我拥有的是:

Site fullscreen

然而，当我缩小屏幕时，我得到了这个:

Site smaller screen

为了让您看得更清楚，我会将我的代码发布到 hastebin 上。

HTML:http://hastebin.com/cexizavule.xml

CSS:http://hastebin.com/tivuwonigu.css

那么我该如何使元素不重叠呢？元素重叠的原因是什么？

如果您不想单击链接，请单击此处。

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<?php
session_start();
?>

<html>
<head>
    <title>DarkHorizon</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href = "css/bootstrap.min.css" rel = "stylesheet">
    <link href = "css/styles.css" rel = "stylesheet">

<body>

<div class = "navbar navbar-inverse navbar-static-top">
    <div class = "container">

        <a href = "/index.php" class = "navbar-brand">DarkHorizon</a>

        <button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse">
            <span class = "icon-bar"></span>
            <span class = "icon-bar"></span>
            <span class = "icon-bar"></span>
        </button>

        <div class = "collapse navbar-collapse navHeaderCollapse">

            <ul class = "nav navbar-nav navbar-right">

                <li><a href = "/index.php">Home</a></li>
                <li><a href = "/gallery.php">Gallery</a></li>
                <li class = "dropdown">

                    <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">Social Media<b class = "caret"></b></a>
                    <ul class = "dropdown-menu">
                        <li><a href = "https://www.facebook.com/adsfionsfwAFASFAS?ref=hl">Facebook</a></li>
                        <li><a href = "http://steamcommunity.com/groups/DarkHorizonCommunity">Steam</a></li>

                    </ul>

                </li>


                <li><a href = "/about.php">Staff/About</a></li>



                <li><a href = "#contact" data-toggle ="modal">Apply/Contact us</a></li>

                <?php
                if (isset($_SESSION['loggedin'])) {?>
                    <li class = "dropdown">

                        <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown"><?php echo ($_SESSION['username']) ?><b class = "caret"></b></a>
                        <ul class = "dropdown-menu">
                            <li><a href = "/logout.php">Logout</a></li>
                            <li><a href = "/user/loginhome.php">User Home</a></li>

                        </ul>

                    </li>
                <?php }
                else{?>

                    <li><a href = "/login.php">Log in</a></li>
                    <li><a href = "/signup.php">Sign up</a></li>
                <?php
                }
                ?>



            </ul>

        </div>

    </div>
</div>
<!--WEBSITE GOES HERE-->

<div class="navbarbg">
        <div class="usernavbar">

            <ul class="nav nav-pills nav-stacked">
                <li class="active"><a href="loginhome.php">Home</a></li>
                <li><a href="profile.php">Profile</a></li>
                <li><a href="inbox.php">Messages</a></li>
            </ul>
        </div>
</div>



<div class="pagedevwarn">
<div class='alert alert-danger'>Hello <?php echo $_SESSION['username'] ?>! This page is still in development, Please be patient! </div>
</div>

<div class="title" align="center">
    <h1>Welcome, <?php echo ($_SESSION['username'])?>!</h1>
    <div class="line">
        <hr>
    </div>
</div>

<div class="moneybox">
    <div class="dhmoneyz">
        <p><h4>Balance - $ 0.00</h4></p>


    </div>
</div>


<!--Website ends here-->

<div class = "navbar-default navbar-fixed-bottom">
    <div class = "container">
        <p class = "navbar-text">Site built by Derk</p>
    </div>
</div>

<div class = "modal fade" id = "contact" role = "dialog">
    <div class = "modal-dialog">
        <div class = "modal-content">
            <div class = "modal-header">
                <h1>Contact us or apply for moderator!</h1>
            </div>
            <div class = "modal-body">
                <form name ="contact-us" method = "post" action ="emailsent.php">
                    <label for = "contact-name" class = "col-lg-2 control-label">Name:</label>
                    <input type = "text" class = "form-control" name = "contact-name" placeholder = "Full Name">
                    <br />

                    <label for = "contact-email" class = "col-lg-2 control-label">Email:</label>
                    <input type = "email" class = "form-control" name = "contact-email" placeholder = "you@example.com">
                    <br />

                    <label for = "contact-msg" class = "col-lg-2 control-label">Message:</label><br />
                    <textarea class = "form-control" rows = "8" name="contact-msg"></textarea>

                    <br />
                    <a class = "btn btn-default" data-dismiss = "modal">Close</a>
                    <input class="btn btn-primary" type="submit" name="submit" value="Submit">
                </form>
            </div>
        </div>
    </div>
</div>
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src = "js/bootstrap.js"></script>

</body>
</html>

CSS:

.usernavbar{
    width: 140px;
    padding-left: 5px;
    border-radius: 0px;
    padding-top: 10px;
    position: fixed;
}

.navbarbg{
    background-color: #3c3c3c;
    width: 160px;
    height: 100%;
    position: fixed;
    top: 49px;

}

.pagedevwarn{
    width: 500px;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    position: relative;
    top: 160px;
    margin-right: auto;
    margin-left: auto;
}

.alert{
    border-radius: 0;
}
.navbar{
    border: none;
}

.title{
    width: 100%;
    text-align: center;
    position: relative;
    bottom: 80px;

}

.line{
    width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.moneybox{
    background-color: #adadad;
    width: 150px;
    position: relative;
    border-radius: 3px;
    margin-left: 5px;
    text-align: center;
    height: 60px;
}

.dhmoneyz{
    padding-top: 11px;
}

最佳答案

CSS 不是为单一集合定义的显示而设计的。它涉及多个平台、屏幕尺寸、打印布局、纵向/横向等。您需要为您希望观众能够使用的任何这些设计风格。它本身确实是一种语言。一旦你学会了它，你就会发现这些目标平台中的每一个都有自己的怪癖，即使你使用定义的 W3C 定义也会在某些地方破坏事物。

这是一项很好的学习工作，但是为了快速适应，请使用 jquery 和 jqueryUI 小部件。这本身并不是万能的，您仍然需要知道发生了什么。

关于html - CSS 重叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25214550/

26 4 0
文章推荐： python - 通过Python在Kivy中设置动态Id
文章推荐： ruby-on-rails - 不同命名空间内的 Ruby on Rails 模型和 Controller
文章推荐： c# - Winform变得不响应，异步编程，C#
文章推荐： python - Flask-login is_active 不会保持更改
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com