导航栏覆盖以下文本

我有一个简单的标题与img和导航栏。我希望导航栏出现在img下面（这是发生了什么），但导航栏出现在下面的文本后面。我无法弄清楚如何让文本在导航栏下面并停止覆盖它（已经尝试了清楚）。导航栏覆盖以下文本

我想提一提我是新来的，所以我可以看看很简单。

精彩的jsfiddle链接：http://jsfiddle.net/k2qQN/

然后，这里是我的html：

< 

header role="banner"> 
     <img src="../assets/images/autologo.png" alt="A and B automotive logo" /> 
     <nav role="navigation"> 
      <ul> 
       <li><a href="#about-us/about-us.html">Services</a></li> 
       <li><a href="#getting-in-touch">Getting in Touch</a></li> 
       <li><a href="about-the-shop/about-the-shop.html">About Us</a></li> 
      </ul> 
     </nav> 
    </header> 
    <div role="main"> 
     <section id="services" title="Small overview of service"> 
      <h1>Title for content</h1> 
      <p> At <a href="getting-in-touch">Some shop</a> Some random text following infoome random text following infoome random text following infoome random text following infoome random text following infoome random text following infoome random text following infoome random text following infoome random text following infoome random text following info</p> 

     </section>

这里是CSS：

html, body, #container { 
    height: 100%; 
    width: 100%; 
    border: 1px solid black; 
    font-size: 1.1em; 
    } 

header { 
    height: 20%; 
    width: 100%; 
    } 

img { 
    height: 100%; 
    width: auto; 
    }

来源

2013-03-05 user2093601

您在浏览哪个浏览器？ – Techmonk 2013-03-05 09:23:52

Chrome和火狐 – user2093601 2013-03-05 09:25:43

Firefox上的小提琴看起来不错...它可能是图像高度的原因：100％也许？由于图像没有加载的课程 – Techmonk 2013-03-05 09:27:12

给与role="main"上边距股利。给它一个ID或类第一，所以你可以参考它更容易，那么这样做：

#main-div { 
    margin-top: 100px; 
}

来源

2013-03-05 09:25:37

这将完全工作，但即时通讯尝试做我的第一个“响应式网页设计”网站，并保持百分比，使该网站扩展到高清电视和智能手机相同。也许我可以做一个百分比而不是100px。 – user2093601 2013-03-05 09:33:41

是的，百分比边际可能会起作用，尽管最好用@uruk给出的解决方案，他是最好的方法，我只是给出一个可能的替代方案:) – 2013-03-05 09:37:51

头有height:20%，这就是为什么它是重叠的下方股利。让img高度max-height:100%和标题为height:auto

header { 
    height:auto; 
    width: 100%; 
    } 

img { 
    max-height: 100%; 
    width: auto; 
    }

DEMO

来源

2013-03-05 09:27:41 Sowmya

这将完全工作，但图像是一个巨大的文件，以便它可以扩展到高清电视大小。如果我做了100％，它会占用整个屏幕。这就是为什么它在20％的标题，所以100％的IMG总是20％的页面。 – user2093601 2013-03-05 09:35:18

你的头内图像使用所有头的高度。因此，无论使用该CSS改变图像的高度：

header img { 
    height:123px; /* or another value smaller than the header's height of 100% */ 
}

或不设置页眉的高度：

header { 
    width:100%; 
}

来源

2013-03-05 09:28:29 uruk

这是因为你的头有一个固定的高度。导航已满溢，但内容未被推下。要么让标题获取所需的高度，要么设置overflow: hidden;以隐藏溢出的内容。

来源

2013-03-05 09:28:41

导航栏覆盖以下文本

回答

相关问题