Проблемы с макетом и прокруткой в iFrame

0

Я разрабатываю сайт для внутреннего использования в нашей компании. Таким образом, seo/optimization и т.д. Не являются проблемой из-за того, что они удаляются из локальных машин, а не из Интернета.

То, что я пытаюсь сделать, - это меню слева (ширина 250 пикселей), которое при нажатии открывается вторым рядом с ним. Когда элемент в этом меню щелкнут, он открывается в рамке в сторону второго меню. Если вы посмотрите на прикрепленную картинку, это даст лучшее представление о макете.

http://rhinoaustralia.com/application/layoutProblems.jpg

Я поставил основной сайт здесь: http://rhinoaustralia.com/application/

(обратите внимание, что контент отсутствует, и работает только несколько вещей, но я пытаюсь сначала запустить макет). Файлы css можно найти через firebug и т.д.

Что есть одна страница, содержащая первое меню, в котором есть iframe рядом с ним. Когда кто-то нажимает на элемент меню, он открывает новую страницу рядом с ним. На этой новой странице также есть меню с iframe рядом с ним, так что, когда что-то в этом меню нажата, оно отображается в новом iframe.

Такие работы, но у меня возникают проблемы с получением фреймов в полноэкранном режиме и настройкой на разные размеры экрана. По какой-то причине в IE он также не скрывает границы.

Может быть, есть лучший способ сделать это, кроме вложенных iframe?

Это главная страница/первая страница:

<div id="container" style="width:100%">

<div id="header" style="background-color:#222;">
    <h1>Rhino Australia Rugby Union</h1></div>

    <div id="menu" style="background-color:#222;width:250px;float:left;">
      <ul class="ca-menu">
                <li>
                    <a href="rugby-union-scrum-menu.html" target="iframe_rugby-union-menu">
                        <span class="ca-icon"><img src="images/rugby-union/collision-king.jpg" width="100" height="100" alt=""/></span>
                        <div class="ca-content">
                            <h2 class="ca-main">Scrum & <br/>Breakdown</h2>
                        </div>
                    </a>
                </li>
                <li>
                    <a  href="rugby-union-tackle-bag-menu.html" target="iframe_rugby-union-menu">
                        <span class="ca-icon"><img src="images/rugby-union/low-bag-grip-and-rip.jpg" width="100" height="100" alt=""/></span>
                        <div class="ca-content">
                            <h2 class="ca-main">Tackle Pads <br/> & Bags</h2>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="rugby-union-balls-menu.html" target="iframe_rugby-union-menu">
                        <span class="ca-icon"><img src="images/rugby-union/vortex-pro.jpg" width="100" height="100" alt=""/></span>
                        <div class="ca-content">
                            <h2 class="ca-main">Balls</h2>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="rugby-union-training-equipment-menu.html" target="iframe_rugby-union-menu">
                        <span class="ca-icon"><img src="images/rugby-union/rhino-body-armour.jpg" width="100" height="100" alt=""/></span>
                        <div class="ca-content">
                            <h2 class="ca-main">Training <br/> Equipment</h2>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="rugby-union-accessory-menu.html" target="iframe_rugby-union-menu">
                        <span class="ca-icon"><img src="images/rugby-union/water-bottle-carrier-metal.jpg" width="100" height="100" alt=""/></span>
                        <div class="ca-content">
                            <h2 class="ca-main">Accessories</h2>
                        </div>
                    </a>
                </li>
            </ul>
        </div>

    <div id="content" style="background-color:#222; color:#FFF;float:left; width:80%; height:700px ">
    <iframe src="rugby-union-scrum.html" name="iframe_rugby-union-menu" width="100%" height="90%" frameborder="0"></iframe>
    </div>
</div>

И вот новая страница, которая открывается в iFrame:

<div id="container" style="width:100%">

    <div id="menu" style="background-color:#222;height:400px;width:300px;float:left;">
      <ul class="ca-menu">
                <li>
                    <a href="bulldog-sled.html" target="iframe_rugby-union">
                        <span class="ca-icon"><img src="images/rugby-union/scrum-sled.jpg" width="100" height="100" alt=""/></span>
                        <div class="ca-content">
                            <h2 class="ca-main">Scrum Sled <br/> Machine</h2>
                            <h3 class="ca-sub">$7080</h3>
                        </div>
                    </a>
                </li>
                <li>
                    <a  href="collision-king.html" target="iframe_rugby-union">
                        <span class="ca-icon"><img src="images/rugby-union/collision-king.jpg" width="100" height="100" alt=""/></span>
                        <div class="ca-content">
                            <h2 class="ca-main">Collision King</h2>
                            <h3 class="ca-sub">$3590</h3>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="ca-icon"><img src="images/rugby-union/one-man-portable-scrum.jpg" width="100" height="100" alt=""/></span>
                        <div class="ca-content">
                            <h2 class="ca-main">Portable Scrum <br/> Machine</h2>
                            <h3 class="ca-sub">$2770</h3>
                        </div>
                    </a>
                </li>
            </ul>
        </div>

    <div id="content" style="background-color:#222; color:#FFF;float:left; width:800px; height:700px">
    <iframe src="rugby-union.html" name="iframe_rugby-union" width="100%" height="90%" frameborder="0" marginwidth="0" marginheight="0" scrolling="auto" onload="" allowtransparency="false">></iframe>
    </div>
</div>

Любая помощь ценится!

Теги:
iframe
layout

1 ответ

0

Я думаю, что использование iFrames для этой функции - не самая лучшая идея, поскольку, по сути, она все еще заполняет 100% ширину iFrame div, как это говорит CSS, но при меньших размерах экрана второй iFrame doesn У меня есть место, чтобы поместиться и исчезнуть.

Возможно, вы могли бы просто сделать это, разместив активы внутри divs локально? Или, для более гладкого решения, попробуйте использовать библиотеку jQuery Mega Menu: http://designingmedia.com/html/fbar/?theme=FHMM

Удачи!

Сообщество Overcoder
Наверх
Меню