Question

我正在设计一个网站，我的导航栏和标题出现问题。我编写了CSS，以便在滚动时导航栏和横幅图像保留在页面顶部。

这是成功的，但是身体的文字经过导航栏。我在导航栏周围设置了所有边距和填充。有没有办法我可以设置它，使横幅，导航栏和主体全部跟随？主体文本显然是一个例子，显然页面链接还没有填写等等。

要查看正在发生的事情的示例。请访问：www.jamiewebguy.com

HTML代码：

Keys

CSS代码：

<!DOCTYPE html>

<html lang="en">



<head>

<meta charset="utf-8">

<title>Jamie. The Web Guy</title>

<link rel="stylesheet" type="text/css" href="homep.css">

</head>



<body>

<header>

<span class="banner_h">
<img src="Exbanner.jpg" alt "Banner" height="150" width= 100%/>
</span>

<p><ul>

  <li><a class="active" href="#home">Home</a></li>

  <li><a href="#news">What?</a></li>

  <li><a href="#contact">Pricing</a></li>

  <li><a href="#about">Contact Us</a></li>

<li><a href="#about">Testimonials</a></li>

<li><a href="#about">About</a></li>

</header>

</ul></p>
<div id="main-content">
        <h1>Some Heading</h1>
        <p>Some Text</p>
    <div>A div</div>


<h1>Some Heading</h1>
        <p>Some Text</p>
        <div>A div</div>
 <h1>Some Heading</h1>
        <p>Some Text</p>
        <div>A div</div>
 <h1>Some Heading</h1>
        <p>Some Text</p>
        <div>A div</div>
 <h1>Some Heading</h1>
        <p>Some Text</p>
        <div>A div</div>
 <h1>Some Heading</h1>
        <p>Some Text</p>
        <div>A div</div>
 <h1>Some Heading</h1>
        <p>Some Text</p>
        <div>A div</div>
 <h1>Some Heading</h1>
        <p>Some Text</p>
        <div>A div</div>
 <h1>Some Heading</h1>
        <p>Some Text</p>
        <div>A div</div>
 <h1>Some Heading</h1>
        <p>Some Text</p>
        <div>A div</div>
    </div> 


</body>

Answer 1

你的HTML错了。你有<img src="Exbanner.jpg" alt "Banner" height="150" width= 100%/> 你需要<img src="Exbanner.jpg" alt="Banner" height="150px" width= "100%"/> 然后你有</header>，但在任何地方

都没有开放<header>

也会弄乱<ul> <li>菜单

Answer 2

给标题和无序列表相对位置而不是固定：

 header {
        position: relative;
        top: 0;
        width: 100%;
}

ul {
    position: relative;
    width: 100%;
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center;
    background-color: #f3f3f3;
    border: 1px solid #e7e7e7;
}

Answer 3

您有几个选择：

您可以定义标题的背景，以便内容仍在下方滚动，但您不会看到它：

Route::post('/login', 'Auth\LoginController@authenticate');

您还可以将主文本div放在固定位置div中，并将header: background-color: white设置为滚动。这将使其保持原位，您的内容将滚动到它的顶部而不是页面：

overflow

使用css：

<div id="container"> 
    <div id="main-content">

如何在HTML / CSS中阻止主体与导航栏和横幅重叠

3 个答案: