Блог

Главная - Вопросы по программированию - Почему мой текст аккордеона перекрывает стрелку?

Почему мой текст аккордеона перекрывает стрелку?

#css #jquery-ui

#css #jquery-пользовательский интерфейс

Вопрос:

Я пытаюсь использовать виджет jquery-ui под названием accordion для отображения двух фрагментов текста пользователю. Как вы можете видеть на скриншоте, текст перекрывает стрелку, и я не знаю почему.

Скриншот

Вот мой HTML:

 #{extends 'main.html' /}
#{set title:'Test A' /}

<div id="accordion">
    <h3>Alpha</h3>
    <div>
        Hi!
    </div>

    <h3>Beta</h3>
    <div>
        Lo!
    </div>
</div>

<script type="text/javascript" charset="utf-8">
    $(function() {
        $("#accordion").accordion({
            autoHeight: false,
            clearStyle: false
        });
    });
</script>

Вот main.html:

 <!DOCTYPE html>

<html>
    <head>
        <title>#{get 'title' /}</title>
        <meta charset="${_response_encoding}">
        <link rel="stylesheet" media="screen" href="@{'/public/stylesheets/main.css'}">
        <link rel="stylesheet" type="text/css" media="screen" href="@{'public/stylesheets/ui-lightness/jquery-ui-1.8.16.custom.css'}" />
        <link href="http://fonts.googleapis.com/css?family=Ultra|Shanti" rel="stylesheet" type="text/css">
        #{get 'moreStyles' /}
        <link rel="shortcut icon" type="image/png" href="@{'/public/images/favicon.png'}">
        <script src="@{'/public/javascripts/jquery-1.6.4.min.js'}" type="text/javascript" charset="utf-8"></script>
        <script src="@{'/public/javascripts/jquery-ui-1.8.16.custom.min.js'}" type="text/javascript" charset="utf-8"></script>
        #{get 'moreScripts' /}
    </head>
    <body>
        <div id="wrap">
            <div id="main">
                #{doLayout /}
            </div>
        </div>
        <div id="footer">
            Some trifling words.
        </div>
    </body>
</html>

Кроме того, у меня возникли проблемы с изменением размера текста заголовка. Я попробовал это в моем main.css, но это не работает, меняется только шрифт, а не размер:

 h3 {
    font-family: 'Ultra', Arial, serif;
    font-weight: 400;
    font-size: 20pt;
}

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

1. Я бы не хотел быть этим парнем, но не могли бы вы добавить это в JFiddle bro?

2. попробуйте добавить немного отступов-слева на h3

3. проверьте порядок загрузки javascripts, у меня были проблемы с проектом o mine в rails 3, когда, если один элемент jquery работает, то второй нет, и обратно, второй работает, а первый нет .. поэтому, играя с файлами js, я понял, что порядок загрузки js имеет значение. правильный порядок должен быть jquery 1.4.4, jquery-ui-1.8.16.custom.min.js — и, кстати, использование последней версии jquery также вызвало у меня проблемы, я взял версию 1.4.4, теперь все работает нормально.

4. Вот jfiddle (очень хороший сайт): jsfiddle.net/L4MEW/4

5. @satur9nine, хорошо, это сработало — #accordion h3 { padding-left: 100px; }

Ответ №1:

Янис Ланковскис ответил на этот вопрос в комментариях. Решение состояло в том, чтобы сделать это в CSS:

 #accordion h3 { padding-left: 100px; }