Блог

Главная - Вопросы по программированию - Правила CSS, содержащиеся в классе, не применяются к div

Правила CSS, содержащиеся в классе, не применяются к div

#jquery #html #css #rules

#jquery #HTML #css #Правила

Вопрос:

Я был по всему Интернету, чтобы найти ответ на эту проблему, с которой я столкнулся. У меня есть div, который должен быть заголовком моей страницы — на нем будут размещены другие разделы со ссылками внутри. У этого div должно быть «основное» позиционирование, в пределах которого должны выполняться внутренние «ссылки divs».

Когда я впервые создал страницу, этот div был запущен и работал с использованием «position: fixed» и «transform: translate (-50%, -50%)», как я где-то видел в StackOverflow и начал любить. После того, как я добавил тег «container» и некоторый код 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);
    });

});

Если это не важно, пожалуйста, не добавляйте дополнительные неиспользуемые идентификаторы и iframe — я добавлю туда содержимое позже.

Спасибо за вашу готовность помочь!

EDIT1: он отлично работает на скрипке, но класс не применяется за его пределами! Я изменил сценарий, чтобы попытаться сделать его более похожим на то, что у меня есть. Я думаю, что есть что-то, переопределяющее класс, это единственный ответ! Но я все равно не могу найти, где!

Комментарии:

1. Можете ли вы создать JSFiddle, показывающий проблему?

2. Что это должно делать $('principal.html').ready(function(){ ?

3. @j08691 Предполагается, что он создает слепой эффект при загрузке страницы principal.html это страница, на которую включен код.

Ответ №1:

Чтобы преобразование сработало, вы должны указать фиксированному div, где он должен быть первым.

Демонстрация JSfiddle

Вероятно, пересмотренный 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;
}

Комментарии:

1. В Fiddle это работает почти идеально — вы напомнили мне о верхнем и левом, которые я убрал из-за noobness (я долгое время не касался кода, поэтому забыл, для чего он нужен). Но это все еще не работает в моем коде, может быть, скрипт каким-то образом вмешивается в это?

Ответ №2:

Ну, я понял: каким-то образом «Navbar» не является именем класса, которое можно определить для меня (я не знаю почему, это происходит время от времени). Я только что решил создать новый класс, сохранив его «живым», скопировав его и присвоив div другому классу. Кстати: использование элемента проверки chrome действительно здорово для решения подобных проблем.