幫助與CSS導航，文字位置和間隔

http://rich2233.comoj.com/

三件事我想做的事：

我需要的導航欄座標題下方。這大概是一個簡單的修復，但對於我的生活，我無法弄清楚。
我需要導航中的文本垂直居中。
如何在左列和右列之間放置一些空間？

感謝您的幫助！下面是CSS代碼：

body,html { 
    margin:0; 
    padding:0; 
    color:#101010; 
    font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif; 


} 

p { 
    margin-top: 30px; 
    font-size: 16px; 
    line-height: 1.3em; 
    padding-bottom: 10px; 
    text-align: center; 
    color: #ffffff; 

} 

p a{ 
    text-decoration: none; 
    color: #4e6f8c; 

} 


#wrapper { 
    width:960px; 
    margin:0 auto; 
    padding: 0px; 
    background:#fff; 
} 

#header { 
    padding:5px 10px; 
    background:#fff; 
    height:137px; 


} 

#nav { 
    padding:5px 10px; 
    background:#fff; 
    width: 960px; 
    height: 40px; 
    font-size: 15px; 
    color: #7c7c7c; 
    text-align: center; 


} 

#nav ul { 
    margin:0; 
    padding:0; 
    list-style:none; 
    position: absolute; 
    bottom: 5px; 
} 

#nav li { 
    display:inline; 
    margin:0; 
    padding:0; 
    width:160px; 
    height: 45px; 
    float: left; 
    background-color: #f6f6f6; 
    -moz-border-radius: 25px 10px/10px 25px; 
    border-radius: 25px 10px/10px 25px; 
} 


#nav li:hover { 
    background-color: #df220f; 

} 

#nav li:hover a{ 
    color: #ffffff; 
    text-decoration: none; 

} 

#nav a { 

    color: #fff; 
    text-decoration: none; 
} 


#nav a:link { 
    color: #7c7c7c; 
    text-decoration: none; 


} 

#nav a:visited{ 
    color: #ffffff; 
    text-decoration: none; 


} 


#nav a:hover { 
    color: #ffffff; 
    text-decoration: none; 



} 

    #nav a:focus { 
    color: #ffffff; 
    text-decoration: none; 

} 

#nav a:active { 
    color: #ffffff; 
    text-decoration: none; 

} 


#leftcontent { 
    float:left; 
    width:710px; 
    height: 300px; 
    background:#df220f; 
    -moz-border-radius: 1em 4em 1em 4em; 
    border-radius: 1em 4em 1em 4em; 
    background-image:url('./images/main_placeholder.png'); 
    background-repeat:no-repeat; 
    background-position:center; 
} 

h2 { 
    margin:10px 0 0 20px; 
    color: #24389b; 
    font-size: 19px; 
    padding-bottom: 8px; 
} 

#rightcontent { 
    float:left; 
    width:250px; 
    background:#df220f; 
    height: 1%; 
    -moz-border-radius: 1em 4em 1em 4em; 
    border-radius: 1em 4em 1em 4em; 
    height: 300px; 
    background-image:url('./images/side_logo.png'); 
    background-repeat:no-repeat; 
    background-position:bottom center; 

} 


#footer { 
    clear:both; 
    padding:5px 10px; 
    background:#fff; 
} 

#footer p { 
    margin:0; 
    } 

* html #footer { 
    height:1px; 
}

__ _ __ _ _ HTML編輯：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd"> 
    <html lang="en"> 
    <head> 
    <link rel = "stylesheet" type = "text/css" 
href = "./style.css" media = "all" /> 
    </head> 
    <body> 
    <div id="wrapper"> 
<div id="header"><img src="./images/logo.png" alt="Ultrabond Logo" /></div> 
<div id="nav"> 
    <ul> 
     <li><a href="Research">Home</a></li> 
     <li><a href="Research">Service<br />Details</a></li> 
     <li><a href="Research">Service<br />Request</a></li> 
     <li><a href="Research">Crack<br />Repair</a></li> 
     <li><a href="Research">FAQs</a></li> 
     <li><a href="Research">Contact</a></li> 
    </ul> 

</div> 
<div id="leftcontent"> 

</div> 
<div id="rightcontent"> 
    <p>Average cost of a windshield<br />replacement: $240</p><p>Average <i>repair</i> cost: $60</p><p>Just another reason why<br />windshield <i>repair</i> makes sense</p> 

</div> 
<div id="footer"> 
</div> 

</div> 
</body> 
</html>

來源

2011-09-29 Rich2233

您的鏈接導致錯誤頁面。 – Alex

如果你無法恢復你的網站，那麼一些標記呢？ –

謝謝大家。不知道該網站何時會備份，但希望很快。我繼續向網站提出以下列出的一些建議。我將繼續編輯其餘的代碼。再次感謝。 – Rich2233

所有的鏈接首先不起作用

1 ）請勿爲nav ul設置position: absolute

2）使用line-height規則（more detailed here）

3）使用margin或padding。將margin-left: <whatever you want>px添加到#rightcontent

來源

2011-09-29 00:35:42

對於#nav li，您不需要執行display：inline和float：left。我只會使用float：left，然後您可以使用margin調整間距。

不需要在#nav ul上使用position：absolute，但是如果你打算使用它，這裏有一個技巧可以幫助我。如果在未專門設置的容器中使用位置：絕對位置：絕對位置，則將絕對位置設置爲整個頁面。但是，如果您在position div上設置了position：relative，那麼您可以絕對地將子元素放置在該div的任何位置。

像這樣：

#nav 
{ 
width: 500px; 
height: 100px; 
position: relative; 
} 

#nav ul 
{ 
position: absolute; 
top: 20px; 
right: 200px; 
}

這個地方的#nav UL 20像素從#nav專區內右側從上往下200像素和。如果#nav div沒有位置：相對於它，那麼#nav ul將被放置在頁面頂部20px和頁面右邊200px處。

來源

2011-09-29 00:42:39 pfunc

幫助與CSS導航，文字位置和間隔

回答

相關問題