Почему этот рендеринг DIV без измерений? - PullRequest
Новая
       4

Почему этот рендеринг DIV без измерений?

3 голосов
/ 25 июня 2010

http://clifgriffin.com/blockade2/

Хорошо, у меня есть неупорядоченный список, который служит списком ссылок меню. В каждом li есть div, который установлен в абсолютное позиционирование, снизу: 0. Идея в том, что вы наводите курсор мыши на ссылку в li, а jQuery анимирует высоту, чтобы показать скрытый div меню.

Это простая концепция, но я, видимо, запутался.

Проблема, с которой я столкнулся, заключается в том, что div, который содержит раскрывающееся меню, не принимает никаких измерений (в соответствии с информацией о вычисленных стилях Firefox и Chrome), когда я помещаю его в li. Если я помещу это где-нибудь еще на странице, это отдает ОТЛИЧНО. Вы можете понять, что я имею в виду по ссылке. Сверху серое меню выглядит так, как оно должно отображаться внутри библиотеки, но не делает этого. 

<div class="ram">
    <div class="gray_middle">
            <ul>
                    <li><a href="">Guest Services</a></li> 
                    <li><a href="">Concierge / Local Attractions</a></li>
                    <li><a href="">East Restaurant</a></li>
                    <li><a href="">Aquarium Lounge</a></li>
                    <li><a href="">Health Club</a></li>
                    <li><a href="">Sandcampers Program</a></li>
                    <li><a href="">Treasure Chest Gift Shop</a></li>
            </ul>
    </div>
    <div class="gray_bottom">
            <img src="images/top_menu_slidedown_gray_bottom.png" />
    </div>

Существует немного JavaScript, который должен найти высоту div меню и установить id содержащего li равным высоте, чтобы на него можно было ссылаться позже. Не имеет значения ... Дело в том, что когда div находится в li, его вычисленная высота равна 0. Когда он находится снаружи, это правильно.

Есть идеи?

Это сводит меня с ума. У меня никогда не было столько проблем с чем-то таким простым.

Заранее спасибо, Клиф

P.S. Я добавил несколько HTML-комментариев к месту назначения, чтобы вы могли лучше понять, что я имею в виду.

Ответы [ 6 ]

1 голос
/ 25 июня 2010

Абсолютно расположенные элементы находятся "снаружи" контейнера и не могут реально определить его размер.

Относительно расположенные элементы влияют на размер контейнера (и поток содержимого), но затем они перемещаются в другое место.

Кроме того, для абсолютно и относительно позиционированных элементов вы всегда должны указывать явную позицию X, Y. Это позволяет избежать некоторых различий в рендеринге, кросс-браузер.

Во всяком случае, я сделал следующие изменения CSS, и это подменю выглядело нормально на FF 3.6.4:

  1. Для <li id="49"> добавить: height: 230px; overflow: hidden;.

  2. Для div.subMenu добавить: top: 17px; и удалить: bottom:0;.

  3. Для gray_middle добавить: height:160px; top:0; и удалить: padding-top:20px;.

0 голосов
/ 13 июля 2010

Gentleman, Спасибо за все ваши ответы! Мне жаль, что я так долго возвращался к этому сообщению.

Вся эта проблема выявила несколько вещей, которые я еще не понимаю, о способе визуализации элементов HTML.

Мне удалось решить эту проблему, переключив блоки главного меню на элементы div вместо элементов li.

Это не имеет смысла для меня, поскольку оба они отображаются примерно одинаково, насколько я могу судить, просматривая вычисленные стили. Но по какой-то причине, когда контейнер является div, содержащиеся в нем div отображаются с их правильными размерами, что позволило остальной части моего кода работать правильно. Мне даже не пришлось менять прикрепленный CSS!

Поскольку основная цель этого проекта состояла в том, чтобы завершить работу и сделать клиента счастливым, я не стал экспериментировать за этим открытием.

Я приветствую теории о том, почему это так.

Еще раз спасибо. Клиф

0 голосов
/ 28 июня 2010

Извините, что "ненадолго", так или иначе, вот код, который я использовал, чтобы "воссоздать" ваше нижнее меню.Он не работает так, как вы предлагаете, он закрывается после наведения мыши на «пункт меню» или «подменю».Чтобы заставить его работать в верхнем меню, просто измените положение снизу вверх: 

$(document).ready(function() {
$('.indexMenu').mouseover(function(){
$(this).children().show();
$(this).children().mouseover(function(){
$(this).children().show();
});
});

$('.indexMenu').mouseout(function(){
$('.sub_menu').hide();
});
});

Вот «html» 

<div class="indexMenu">
 Menu 1
    <div class="sub_menu">
        Item
        <br />
        Item
        <br />
        Item
    </div>
 </div>

  <div class="indexMenu">
  Menu 2
    <div class="sub_menu">
    Item
    <br />
    Item
    <br />
   Item
    <br />
    Item
    </div>
 </div>

  <div class="indexMenu">

    <div class="sub_menu">
    Menu 3
    <br />
    Item
    <br />
    Item 
    <br />
    Item
    <br />
    Item
    </div>
 </div>

  <div class="indexMenu">
  Menu 4
    <div class="sub_menu">
    Item
    </div>
 </div>

Очевидно, что вы можете «использовать» любойчто-то в подменю ul, ol и т.д ...

И "простой CSS 

.indexMenu {
position: relative;
bottom: 3px;
width: 240px;
height: 32px;
float: left;
line-height: 30px;
border-top: 2px solid #FFFFFF;
text-align:center;
text-transform:uppercase;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 1);
font-weight: 900;
color:#333333;

} 

.sub_menu {
    display: none;
    position: absolute;
    bottom: 33px;
    width: 240px;
    background-color:#DBF3FD;
    opacity:0.8;
    filter: alpha(opacity=80);
}

ОК. Я добавил фильтр вподменю, чтобы иметь определенную прозрачность

0 голосов
/ 26 июня 2010

Клифф Просто "полностью" осознал, что вы пытаетесь сделать здесь - извините, потребовалось так много времени, чтобы "пруть". Хорошо, вы можете сделать это гораздо проще, чем пытаетесь сделать в данный момент.Все, что ему нужно, это немного JQuery и немного базового CSS.Нет необходимости в абсолютных позициях и т. Д.

В вашем CSS используйте {display: none;} поскольку class = "subMenu", как вы знаете, это будет "скрывать" его, я также мог бы испытать желание сделать то же самое в ваших функциях JQuery, чтобы быть "вдвойне уверенным".Затем в JQuery создайте эффект наведения мыши (наведите курсор мыши на «лучше», чем наведите курсор) для класса top_menu_links (я думаю, вы можете убрать классы «aco» и «white_middle» или, по крайней мере, объединить их в css для соответствующего ul)показать .next ('ul);Вы можете сдвинуть его и т. д. Затем функцию мыши на ул.Таким образом, ul остается видимым, пока не произойдет событие мыши.Я сделал это довольно успешно для темы WP, чтобы отобразить «динамический» список категорий при наведении курсора на элемент div, похожий на кнопку.Извините, у вас нет кода для передачи, но мы посмотрим позже и «передадим»

Кроме того, вы можете установить фоновое изображение ul в качестве подтверждения.<img src="images/top_menu_slidedown_white_bottom.png" /> (или серый), просто установив его в фоновое положение: повторение снизу: нет;и нижний отступ для высоты изображения.Нет необходимости в альтернативных тегах и т. Д.

0 голосов
/ 25 июня 2010

Привет, clifgriffin. Быстро взглянул на тебя, HTML, позор, что ты не дал нам CSS, но ... есть некоторые вещи, в которых я не уверен - в заголовке написано, что генератор WordPress 2.9.2, ноHTML выглядит как "знакомый" WordPress.Если это сгенерированный WordPress, проверьте используемые вами теги wp_list_pages & wp_list_categories.Также я настоятельно рекомендую обновить до WP3.0, так как он имеет НАМНОГО больше функциональных возможностей (обычные типы записей / страниц и т. Д.), А также «встроенную» функцию меню.

Я думаю, вы, возможно, используете слишком много CSS.Большую часть того, что вы хотите получить, можно сделать намного дешевле.

Службы гостя Консьерж / Местные достопримечательности Ресторан восточной кухни Aquarium Lounge Оздоровительный клуб Программа Sandcampers Сундук с сокровищами Магазин подарков

Затем вы можете дать ul удостоверение личности (помните, что удостоверение личности необходимобыть уникальным), это поможет с любой Java, которую вы хотите использовать, также добавьте в свой ram-класс фоновое изображение images / top_menu_slidedown_gray_bottom.png.Как вы используете класс оперативной памяти снова без изображения.Например, <div class="ram backgroundimageclass"> Затем вы сохраняете много «кода», время загрузки и т. д.

Если вы даете классу оперативной памяти атрибут «position :lative;»затем вы можете присвоить UL-идентификатору атрибут «position: absolute;»li можно стилизовать, например, 

ul#ID li {line-height 30px; etc ...)
ul#ID li:hover {line-height 30px; etc ...)
ul#ID li:hover a {line-height 30px; etc ...)

и т. д.

Ооооооооооо забыли ... также почему бы не добавить этот код в заголовок 

<meta http-equiv="X-UA-Compatible" content="chrome=1">

Иэто сразу после тега 

    <!-- DO NOT REMOVE  -->

<!-- THIS SECTION SETS THE LAYOUT FOR GOOGLE CHROME FRAME IF YOU NEED FURTHER INFO LOOK HERE http://code.google.com/chrome/chromeframe/ -->
<!-- Google Chrome Frame is a free plug-in that helps you enjoy modern HTML5 web apps within Internet Explorer. -->

<div id="prompt"><!-- if IE without GCF, prompt goes here --></div>

<script type="text/javascript">
    CFInstall.check({
     mode: "inline", // the default
     node: "prompt"
    });
</script> 
<!-- END THE LAYOUT FOR GOOGLE CHROME FRAME -->

Это позволяет «обнаруживать» браузер и дает им возможность (если не установлена) использовать Google Chrome Frame, вы можете: Начать использовать открытые веб-технологии - такие как HTML5тег canvas - сразу же, даже технологии, которые еще не поддерживаются в Internet Explorer 6, 7 или 8. Воспользуйтесь преимуществами улучшения производительности JavaScript, чтобы сделать ваши приложения быстрее и быстрее реагировать.Включить Google Chrome Frame очень просто.Для большинства веб-страниц все, что вам нужно сделать, это добавить один тег на ваши страницы, как указано выше, и определить, установили ли ваши пользователи Google Chrome Frame.Если Google Chrome Frame не установлен, вы можете направить своих пользователей на страницу установки.Если установлен Google Chrome Frame, он обнаружит добавленный вами тег и будет работать автоматически.

0 голосов
/ 25 июня 2010

Когда вы абсолютно позиционируете элемент, размер контейнера не увеличивается до размера, необходимого для его размещения.

Пример

HTML

<div id="outer"><div id="inner">In</div>Out</div>

CSS 

#outer {
    background-color: red;
}

#inner {
    width: 100px;
    position: absolute;
    top: 100px;
    background-color: blue;
}

Посмотри вживую здесь - http://www.jsfiddle.net/r7MgY/86/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...