CSS來使文本顯示如下圖

98.214.131.200/index.phpCSS來使文本顯示如下圖

<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

來源

2012-09-18 Tyler Siegrist

您的意思是按z-順序排列，還是沿着y-軸排列（垂直）？ –

我的意思是在y軸 –

泰勒，請提供標記，而不僅僅是風格。 – amn

更改你的「主」容器的div而不是ul（除非你有一個令人信服的理由，使之成爲ul ......你總是可以有一個ul在你的主div內）。
將margin-top屬性添加到您的#main css從適當的數量從導航欄中取消。
```
<div id="main"> 
<p>Main</p> 
</div> 
```
而且在style.css中：
```
#main { 
    margin-top: 240px; /* Adjust as needed */ 
} 
```
您可以從主css轉儲display: inline-block，你可能不需要float:left

中的index.php

所以要麼取決於你後來的意圖。

您可能還需要從您身體的CSS中刪除background-size: cover，或者圖像可能會增長以覆蓋您的主div。

來源

2012-09-18 14:03:12

看到我不能看到你到底想要達到什麼，但是你可以添加一個「填充頂部」到你的身體等於你的背景圖片。

body {padding-top：50px; } //假設你的bg.jpg是50px高度

然後檢查你是否真的需要浮動在你的#main上。

來源

2012-09-18 13:22:22 rafaelbiten

如果我向身體添加填充，它也會將導航欄向下移動。如果你去98.214.131.200/index.php，你會看到我目前的設計。現在我試圖移動「游泳，自行車，跑步」照片下面的「主要」文本。 –

試試這個

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-18 14:02:56 webCoder

CSS來使文本顯示如下圖

回答

相關問題