div игнорирует предыдущий div

0

У меня проблема с моими div. По какой-то причине неизвестный мне мой главный div игнорирует nav div и позиции поверх него. Может кто-нибудь помочь?

См. Http://jsfiddle.net/lschoebel/6WuSm/

<body>
<div class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand img-responsive" href="index.html"><img src="img/logo3.png" alt="logo"></a>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="services.html">Services</a></li>
            <li><a href="portfolio.html">Portfolio</a></li>
            <li><a href="company.html">Company</a></li>
            <li><a href="careers.html">Careers</a></li>
            <li><a href="blog.html">Blog</a></li>
            <li><a href="contact.php">Contact</a></li>
          </ul>
        </div><!--/.navbar-collapse -->
      </div>
    </div>




<div id="main-content" style="opacity: 1; display: block;">
    <section id="main" role="main">



<article id="post-4471">



        <div id="intro" class="row">
        <div class="post-4471 page type-page status-publish hentry entry">

            <h1>Mobile Consulting Services—Map Your Mobile Strategy</h1>
<p>A few years ago, the mobile space didnt exist. Today, it is thriving.<br>
Since the inception of mobile, HarborDev has been there. We bring unparalleled mobile strategy expertise to the table, driving engagement programs for leading enterprise and consumer-facing clients.</p>

        </div>
    </div>


    <section class="panel-section">
        <div class="row">
            <div class="post-4471 page type-page status-publish hentry entry narrow-entry">
                <h3>Consulting as a Service (CaaS)</h3>
<p>CaaS is mobile consulting at its finest. It is flexible, on-demand, and customized. There is no "one-size-fits-all" approach. Your needs are your own, your strategy should be too. Here are a few things we can assist you with:</p>
<ul>
<li>Project the size of your mobile market</li>
<li>Define and reach your target audience</li>
<li>Set and realize your mobile vision</li>
<li>Ensure customer value through mobile execution</li>
<li>Integrate your mobile and enterprise strategies</li>
<li>Align mobile goals with IT capabilities.</li>
<li>Translate your ideas into technical specifications.</li>
<li>Understand and weigh your options—<strong><a title="Mobile Web App Development" href="#">mobile sites</a></strong>, <a title="Mobile Web App Development" href="#"><strong>mobile apps</strong></a>, <strong><a title="Native App Development" href="#">native apps</a></strong>, SMS and more</li>
<li>Platform-agnostic</li>
<li>Flexible services; we can develop and execute, work with third parties or simply provide strategic counsel</li>
</ul>
<div class="row"><div class="column large-6 small-12"><p></p>
<h4><strong>Enterprise Level Solutions</strong></h4>
<p>When <strong><a title="GE Intelligent Platforms" href="#">GE</a></strong> approached us with questions about the best mobile operating system to sit on top of their existing hardware and software, we advised them that recent kernel level changes to Androids OS made it the best choice for them. We understand your <a title="Mobile Enterprise" href="#"><strong>enterprise</strong></a> has its own unique blend of web-based and IT architecture. We also know how to work within those systems to incorporate the right mobile platforms for you.</p>
<p></p></div><div class="column large-6 small-12"><p></p>
<h4><strong>Consumer Facing Solutions</strong></h4>
<p>When the <strong><a title="Barclays Center" href="#">Barclays Center</a></strong>, home of the <strong><a title="The Brooklyn Nets" href="#">Brooklyn Nets</a></strong>, asked us how to create a branded mobile experience for sports and music fans,&nbsp;our team suggested <a title="Cloud | API Integration" href="#"><strong>API integration</strong></a> for quick mobile internet connection, advanced streaming functionality, and in-app GPS-enabled location services. We understand your audience demands a compelling mobile experience, and create mobile strategy solutions that drive outstanding user experiences for you and your customers.</p>
<p></p></div></div>
            </div>
        </div>
    </section>


</article>


    </section> <!-- /#main -->


            <div id="single-nav" class="navigation sticky-fixed">
    <ul class="page-nav">
        <li class="close-panel"><a title="Back to Services" href="services.html"></a></li>
                <li class="prev-item"><a href="#" rel="prev">Mobile Design</a></li> </ul>
</div>


                                    <footer class="call-to-action">

                                <a href="#">Contact us to discuss your mobile strategy today. <i class="icon-angle-right"></i></a>

                            </footer>

</div>      



<footer id="footer">
    <div class="row" style="margin-right:388px; margin-left:388px;">
        <section id="text-4" class="widget widget_text"><h4 class="widget-title">Contact Us</h4>            <div class="textwidget"><address>2907 State Road 590 Suite#19<br>
Clearwater, FL 33659</address>
<p>(888) 604-0030</p>
</div>
        </section>
        <section id="nav_menu-2" class="widget widget_nav_menu">
            <h4 class="widget-title">Inside HarborDev</h4>
                <div class="menu-inside-harbordev-container">
                    <ul id="menu-inside-harbordev" class="menu">
<li id="menu-item-4302" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4302"><a href="#">About</a></li>
<li id="menu-item-4303" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4303"><a title="HarborDev Blog" href="#">Blog</a></li>
<li id="menu-item-6753" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6753"><a href="#">Technology Partners</a></li>
<li id="menu-item-7827" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7827"><a href="#">Press Materials</a></li>
</ul>
</div>
</section>

<section id="nav_menu-3" class="widget widget_nav_menu">
    <h4 class="widget-title">Follow Us</h4>
        <div class="menu-social-media-container">
            <ul id="menu-social-media" class="menu">
            <li id="menu-item-4305" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-4305"><a target="_blank" href="http://twitter.com/harbordev">Twitter</a></li>
<li id="menu-item-4306" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-4306"><a target="_blank" href="#">Facebook</a></li>
<li id="menu-item-4307" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-4307"><a target="_blank" href="#">LinkedIn</a></li>
<li id="menu-item-4308" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-4308"><a target="_blank" href="#">Google+</a></li>
</ul>
</div>
</section>

<section id="text-6" class="widget widget_text">
    <h4 class="widget-title">Careers</h4>           
        <div class="textwidget"><p>Join our team and learn how we grew to become one of the top mobile app development companies worldwide.</p>
<p><a href="#">View all open positions</a></p>
</div>
        </section>  
        </div>

</footer>


    <div class="footer-bar-section">
        <p class="copyright"> 2014 HarborDev, LLC. All Rights Reserved.</p>
    </div>
    <div class="footer-bar-section">
        <ul id="menu-footer-menu" class="menu">
            <li class="menu-item">
                <span id="obf"><a href="mailto:[email protected]?subject=Support request via harbordev.com">Support</a>
<noscript>&lt;span style="unicode-bidi:bidi-override;direction:rtl;"&gt;moc.sppaeertwolliw@troppus&lt;/span&gt;</noscript></span>
            </li>
        </ul>
    </div>



</body>
</html>

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

  • 0
    Пожалуйста, воссоздайте его, используя jsfiddle.net, и вставьте ссылку в свой вопрос (отредактировав его) ... нет абсолютно никакого способа, которым кто-либо собирается прочитать весь этот код
  • 0
    Кратко изучив код, который вы предоставили, я подозреваю, что устанавливаются определенные размеры, будь то в CSS или в изображениях, и на экране недостаточно места для определенного основного div и навигационной панели.
Показать ещё 4 комментария
Теги:
overlay

3 ответа

0

Это ожидается, так как вы использовали класс "navbar-fixed-top" для navbar. Он применяет фиксированное позиционирование CSS.

Теперь у вас есть два варианта.

  1. Удалите "navbar-fixed-top", но в этом случае ваша навигация станет прокручиваемой.
  2. Добавьте верхнюю прописку, равную высоте навигации, вверху тега тела.

Дополнительные сведения см. В разделе "Загрузка исходных текстов".

0

Я понял. я добавил

#main {
width: 100%;
position: relative;
}
.main {
top: -72px;
overflow: hidden;
width: 1024px;
margin-bottom: -72px;
font-size: 1.333em;
line-height: 1.85;
} 
#post-4471 {
    margin-top: 90px;
}

к моему CSS, и внезапно все это исправлено. Я не совсем уверен, почему, но сделал это. Спасибо всем, кто участвовал.

0

Это как выглядит ваш макет? Рабочий скрипт

#main-content {
color: #000;
overflow:hidden;
}
  • 0
    Привет, ребята, спасибо за ваши комментарии. Есть ли способ загрузить скриншоты? Это показало бы проблему намного лучше.

Ещё вопросы

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