2017-02-21 28 views
-1

我的測試頁面的鏈接(我的測試是在對nav-ul-li進行居中測試的過程中)如下所示: http://bramh.coornhert.website/startpagina.html我希望我的導航欄居中,但我沒有做任何事情似乎會影響它

的代碼如下:

header { 
 
color: GhostWhite; 
 
text-align: center; 
 
font-size: 60px; 
 
margin: 0px; 
 
font-family: courier new; 
 
} 
 
body {background-image: url("images/wallpapermain.jpg"); 
 
color: white; 
 
} 
 
p { border-width: 3px; 
 
    border-style: groove; 
 
    border-color: light-blue; 
 
    background-color: black; 
 
    border-radius: 10px; 
 
    height: 1200px; 
 
    width: 1000px; 
 
    text-align: center; 
 
    font-family: "verdana"; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    margin-bottom: 50px; 
 
    margin-top: 50px; 
 
} 
 

 
img {border-radius:10px; 
 
} 
 
a:link.img { color:#007DC5; 
 
text-decoration:none; 
 
font-weight:bold; 
 
} 
 
a:visited.img { color:#007DC5; 
 
text-decoration:none; 
 
font-weight:bold; 
 
} 
 
a:hover.img { color: red; 
 
text-decoration:underline; 
 
font-weight:bold; 
 
} 
 
/* menu */ 
 
a:link,a:visited { 
 
font-weight: bold; 
 
color: white; 
 
background-color: black; 
 
border: 2px #033 ridge; 
 
border-radius: 10px; 
 
width: 140px; 
 
text-align: center; 
 
padding: 4px; 
 
margin-bottom: 10px; 
 
text-decoration: none; 
 
} 
 
a:hover,a:active { 
 
background-color: dark-grey; 
 
color: orange; 
 
width: 140px; 
 
} 
 
nav { 
 
width: 800px; 
 
height: 30px; 
 
padding-top: 0px; 
 
} 
 
ul { 
 
margin:0; 
 
position: fixed; 
 
list-style-type: none; 
 
padding: 0; 
 
text-align: center; 
 
} 
 
nav{ 
 
text-attachment: fixed; 
 
} 
 
a.huidig_blauw { 
 
background-color: white; 
 
color: black; 
 
} 
 
a.huidig_rood { 
 
background-color: green; 
 
color: black; 
 
width: auto; 
 
} 
 
a.tweede_menu { 
 
background-color: red; 
 
color: blue; 
 
width: auto; 
 
} 
 
/* CSS Document */
<!DOCTYPE html> 
 
<head> 
 
    <title>Website Bram</title> 
 
    <link href="shoop.css" rel="stylesheet" type="text/css"> 
 
</head> 
 
<body> 
 
    <header>Bram Heesen</header> 
 
    <nav> 
 
     <ul> 
 
      <li> 
 
       <a class="huidig_blauw" href="startpagina.html">HOME</a> 
 
       <a class="huidig_rood" href="paginainformatica.html">Pagina Informatica</a> 
 
       <a class="huidig_rood" href="paginamijzelf.html">Over Mij</a> 
 
       <a class="huidig_rood" href="paginakeuzeonderwerp.html">PaginaKeuzeonderwerp</a> 
 
      </li> 
 
     </ul> 
 
    </nav> 
 
    <p> 
 
     <br><br> 
 
    \t <audio controls="controls"autoplay="autoplay"> 
 
      <source src="music/chiptune.ogg" type="audio/ogg" /> 
 
      <source src="music/chiptune.mp3" type="audio/mpeg" /> 
 
      Sorry, je internetprogramma kan deze muziek niet laten horen. 
 
     </audio> 
 
    </p> 
 
</body> 
 
</html>

+0

請提供您的[最小的,完整的,和可覈查的示例]代碼(http://stackoverflow.com/help/mcve) 。 – APAD1

回答

1

在未來,你應該在您的文章直接提供你的代碼,這樣,如果有人在以後的日子絆倒你的問題,他們可以看到問題。如果您鏈接到您的網站,然後在網站上解決您的問題,或者網站不再運行,則鏈接與問題無關。

也就是說,您可以通過刪除float:left;並將text-align:center;添加到ul來居中您的菜單元素。

ul { 
    list-style-type: none; 
    padding: 0; 
    text-align: center; 
} 

歡迎來到SO!

更新以OP的CODE

header { 
 
color: GhostWhite; 
 
text-align: center; 
 
font-size: 60px; 
 
margin: 0px; 
 
font-family: courier new; 
 
} 
 
body {background-image: url("images/wallpapermain.jpg"); 
 
color: white; 
 
} 
 
p { border-width: 3px; 
 
    border-style: groove; 
 
    border-color: light-blue; 
 
    background-color: black; 
 
    border-radius: 10px; 
 
    height: 1200px; 
 
    width: 1000px; 
 
    text-align: center; 
 
    font-family: "verdana"; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    margin-bottom: 50px; 
 
    margin-top: 50px; 
 
} 
 

 
img {border-radius:10px; 
 
} 
 
a:link.img { color:#007DC5; 
 
text-decoration:none; 
 
font-weight:bold; 
 
} 
 
a:visited.img { color:#007DC5; 
 
text-decoration:none; 
 
font-weight:bold; 
 
} 
 
a:hover.img { color: red; 
 
text-decoration:underline; 
 
font-weight:bold; 
 
} 
 
/* menu */ 
 
a:link,a:visited { 
 
font-weight: bold; 
 
color: white; 
 
background-color: black; 
 
border: 2px #033 ridge; 
 
border-radius: 10px; 
 
width: 140px; 
 
text-align: center; 
 
padding: 4px; 
 
margin-bottom: 10px; 
 
text-decoration: none; 
 
} 
 
a:hover,a:active { 
 
background-color: dark-grey; 
 
color: orange; 
 
width: 140px; 
 
} 
 
nav { 
 
height: 30px; 
 
padding-top: 0px; 
 
} 
 
ul { 
 
margin:0; 
 
list-style-type: none; 
 
padding: 0; 
 
text-align: center; 
 
} 
 
nav{ 
 
text-attachment: fixed; 
 
} 
 
a.huidig_blauw { 
 
background-color: white; 
 
color: black; 
 
} 
 
a.huidig_rood { 
 
background-color: green; 
 
color: black; 
 
width: auto; 
 
} 
 
a.tweede_menu { 
 
background-color: red; 
 
color: blue; 
 
width: auto; 
 
} 
 
/* CSS Document */
<header>Bram Heesen</header> 
 
<nav> 
 
<ul> 
 
<li> 
 
<a class="huidig_blauw" href="startpagina.html">HOME</a> 
 
<a class="huidig_rood" href="paginainformatica.html">Pagina Informatica</a> 
 
<a class="huidig_rood" href="paginamijzelf.html">Over Mij</a> 
 
<a class="huidig_rood" href="paginakeuzeonderwerp.html">PaginaKeuzeonderwerp</a> 
 
</li> 
 
</ul> 
 
</nav> 
 
<p> 
 
<br><br> 
 
<audio controls="controls"autoplay="autoplay" > 
 
<source src="music/chiptune.ogg" type="audio/ogg" /> 
 
<source src="music/chiptune.mp3" type="audio/mpeg" /> 
 
Sorry, je internetprogramma kan deze muziek niet laten horen. 
 
</audio> 
 

 
</p>

+0

好的,我明白了,其他地方更喜歡鏈接,所以這就是爲什麼我這樣做,但我會牢記在心。即使新添加的代碼不起作用,我仍會將所有代碼再次發佈到新評論中。 –

+0

從你的'nav'中刪除'width'並從'ul'中移除'position:fixed;'。查看更新的答案。 – APAD1

+0

它似乎沒有什麼區別,有沒有其他想法? –

相關問題