Question

我已经在互联网上找到了解决这个问题的答案。我有一个div应该是我的页面的标题 - 它将托管其中包含链接的其他div。这个div应该有一个＆＃34; master＆＃34;内部＆＃34; link divs＆＃34;应该发生。

当我第一次创建页面时，这个div已启动并正在使用＆＃34; position：fixed＆＃34;和＆＃34;转换：翻译（-50％， - 50％）＆＃34;因为我已经在StackOverflow的某个地方看到并开始喜欢。我添加了一个＆＃34;容器＆＃34;标签和一些JqueryUI代码使它工作得很好，它停止工作 - 看起来它没有识别类，甚至没有放置边框。

这是HTML：

<html>
    <head>
        <title>Page</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="styles.css">
        <SCRIPT type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></SCRIPT>
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
        <SCRIPT type="text/javascript" src="scripts.js"></SCRIPT>
    </head>
    <body>
        <div class="navbar" id="navprinc">
            <div class="navbutton" id="btnini">Main</div>
            <div class="navbutton" id="btnsobre">About</div>
            <div class="navbutton" id="btnconv">Invitation</div>
            <div class="navbutton" id="btnlista">List</div>
            <div class="navbutton" id="btnfoto">Pics</div>
            <div class="navbutton" id="btncont">Contact</div>
        </div>
        <div class="contentReceiver">
            <iframe src="" frameborder="0">
        </div>

    </body>
</html>

现在重要的Css：

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #ffbdc7; 

}
div.navbar{
    position:fixed;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

    width: 65%;
    height: 120px;
    background-color: #ffc4cd;
    border-radius: 50px;
    border: 3px black solid;
    box-shadow: 2px 2px 2px black;
    text-align: center;
    overflow:hidden;
}

.navbutton{
    display: inline-block;
    height: 110px;
    padding-top: 1px;
    width: 170px;
    border: 1px solid black;
    border-radius: 50%;
    text-align: center;


    background-color: #cc919a;
}

.contentReceiver{
    position: fixed;
    top: 54%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

    width: 63%;
    height: 80%;
    background-color: #ffc4cd;
    border-radius: 50px;
    border: 3px black solid;
    border-top: none;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;    
    box-shadow: 2px 2px 2px black;
    text-align: center;
}

然后一些脚本只是为了知道发生了什么：

$(document).ready(function() {
    // Hidings
    $('#navprinc').hide();
    $(document).ready(function(){
        setTimeout(function() {        
            $('#navprinc').toggle( "blind", {direction:'left'}, 2500);
        }, 500);
    });

});

如果不重要，请不要使用额外未使用的ID和iframe - 我稍后会在其中添加内容。

感谢您愿意提供帮助！

EDIT1：它在小提琴上工作正常，但是课程没有被应用到它之外！我已经改变了剧本，试图让它看起来更像我拥有的东西。我觉得那里有一些超越班级的东西，是唯一的答案！但我仍然无法找到它！

Answer 1

要使转换工作，你必须告诉固定的div在哪里。

JSfiddle Demo

可能修订 CSS

div.navbar{
    position:fixed;
    top:0; /* be at the top */
    left:50%; /* put top left of div at 50% over */

    -webkit-transform: translate(-50%, 0%); /* bring it back 505 of it's own width */
    transform: translate(-50%, 0%);

    width: 65%;
    margin:0 auto;
    height: 120px;
    background-color: #ffc4cd;
    border-radius: 50px;
    border: 3px black solid;
    box-shadow: 2px 2px 2px black;
    text-align: center;
    overflow:hidden;
}

Answer 2

好吧，我明白了：某种程度上＆＃34; Navbar＆＃34;不是可以为我定义的类名（我不知道为什么，这种情况时有发生）。我刚刚解决了一个新的课程，保持那个＃34;活着＆＃34;，复制它并将div分配给另一个类。顺便说一句：使用镀铬检查元件在解决这种麻烦时非常酷。

类中包含的CSS规则不适用于div

2 个答案: