0

98.214.131.200/index.php

<html>
<head>
    <title>Peoria Triathlon Club</title>
    <meta  charset=iso-8859-1" />
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul id="nav">
    <li><a href="http://tri-peoria.org">Home</a></li>
    <li><a href="/forum">Forum</a></li>
    <li><a href="/join">Join</a></li>
    <li><a href="/members">Members</a></li>
    <li><a href="/events">Events</a></li>
    <li><a href="/training">Training</a></li>
    <li><a href="https://www.facebook.com/groups/tripeoria/">Facebook</a></li>
    <ab><a href="/about">Peoria Triathlon Club</a></ab>
</ul>
<ul id=main>
<p>Main</p>
</ul>
</body>
</html>

98.214.131.200/style.css

body {
    background:#000 url(bg.jpg) center top no-repeat;
    background-size: cover;
    color: #c1c1c1;
    font-family: Arial, Verdana, Helvetica, sans-serif;
    margin:0;
}

#nav {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc; 
border-top: 1px solid #ccc;
}

#main{
    display:inline-block;
    float:left;
}

如何使主 div 中的内容显示在背景图片下方，并且顶部仍然有导航栏？当前代码可见 http://98.214.131.200

4

3 回答 3

1

  1. 将您的“主要”容器更改为 adiv而不是 a ul（除非您有令人信服的理由将其设置为 a ul...您始终可以ul在 main中使用 a div）。

  2. 将margin-top属性添加到您的#maincss 以将其从导航栏向下移动适量。

所以在 index.php 中：

<div id="main">
<p>Main</p>
</div>

在 style.css 中：

#main {
    margin-top: 240px; /* Adjust as needed */
}

您可以从主 css 中转储，根据您的后续意图display: inline-block，您可能不需要任何一个。float:left

您可能还需要background-size: cover从身体的 css 中删除 ，否则图像可能会增长到覆盖您的主 div 。

于 2012-09-18T14:03:12.677 回答
0

我无法确切地看到您想要实现的目标，但您可以在您的身体上添加一个等于背景图像高度的“填充顶部”。

身体{填充顶部：50px；} //假设你的 bg.jpg 是 50px 高度

并检查您是否真的需要 #main 上的浮动。

于 2012-09-18T13:22:22.050 回答
0

尝试这个

body {
background-color: #000000;
    background-image: url("bg.jpg");
background-position: center top;
    background-repeat: no-repeat;
color: #C1C1C1;
    font-family: Arial,Verdana,Helvetica,sans-serif;
    margin: 0;
}

#main {
    margin-top: 370px;
}
于 2012-09-18T14:02:56.593 回答