Не могу найти родительский элемент в теме WordPress

Question

Я целый день доводил себя до статуса Arkham Asylum, пытаясь выяснить, почему мои div в верхней части этого сайта работают неправильно

touchoflunacy.com

Элементы div, содержащие ссылки и результаты поиска, выстроены неправильно. Я попробовал обычные подозрения, такие как добавление границы 20px разных цветов вокруг div в заголовке, чтобы определить, какой из них нужно отредактировать, но границы не отображаются, поэтому что-то переопределяет их, и я могу это сделать » не понять, что.

Я также попытался добавить переполнение: скрыто; ко всем элементам в заголовке (div # search, div # header, div # head bar и т. д.) и, кроме того, элемент #body и #wrapper безрезультатно.

Я довольно новичок в css, поэтому, если кто-нибудь скажет мне, какой элемент изменить и что я буду использовать, я благословлю вас вечной благодарностью и определенным голосом за правильный ответ (ы)!

Спасибо!

Answer 1

Вы пробовали проверять элементы в инструментах Chrome dev или Firebug?Это покажет вам все стили CSS, которые применяются в настоящее время, и позволит вам редактировать их в режиме реального времени, чтобы выяснить, какие изменения вам нужно внести.

Для проверки просто щелкните правой кнопкой мыши элемент / область ввопрос и выберите элемент проверки.

Answer 2

Эти ребята верны, вам нужно научиться использовать Firebug!Это сэкономит вам часы времени.

Например, в firebug с 10 секундами я вижу, что изменение вашего CSS-файла находится здесь /wp-content/w3tc/min/e4c7880c.00cd94.css в строке 2095 наверхняя граница: от 14 до 0 пикселей;заставит ваше окно поиска быть встроенным в меню навигации.

Я бы также убрал очистить: оба;из поискового элемента.Это не нужно из того, что я вижу.Вместо этого я бы добавил ясность: оба;вокруг строки 2054 до #inner, чтобы следующий горизонтальный div не перекрывал ваши плавающие элементы заголовка.

Затем я удалил бы вершину -22px из элемента "#header #inner #logo a" в строке 2062 какэто вызывает больше дублирующих вопросов.Вместо отрицательной вершины я бы отрегулировал высоту элемента логотипа в соответствии с вашим графическим файлом.Таким образом, в строке 2058 я бы изменил высоту: 99 пикселей на высоту: 122 пикселей, которая является правильной высотой для вашего логотипа.(Либо так, либо измените размер вашего логотипа до высоты 99 пикселей).

Итак, я протестировал все эти изменения на вашем сайте в прямом эфире с Firebug!

Answer 3

Первое, что я заметил, это то, что ты плывешь по своим дивам. Мне больше повезло, используя позиционирование, чтобы поместить div, куда я бы хотел, чтобы они пошли. Вот пример кода (обычно стиль будет в CSS-файле)

<div style="position:relative;width:500px;height:28px;"><!-- Wrapper -->
 <div style="position:abolute;top:0;left:0;width:100px;">CONTENT</div> <!--first div located top left -->
 <div style="position:abolute;top:0;left:400px;width:100px;">CONTENT</div> <!--second div located top right -->
</div>

Это позволит вам выстроить div в соответствии с вашим точным макетом.

Answer 4

Чтобы убедиться, что границы, которые вы устанавливаете, отображаются, попробуйте установить их!Это должно помочь вам отладить проблему.

div {
    border: 1px solid #F00 !important;
}