帶CSS的浮動邊欄

Question

我設置了一個具有固定位置的特定背景色的邊欄，以便在向下滾動頁面時它會保持原樣。一切看起來都很好，我修改的唯一辦法是刪除列表式樣，以便在側欄中不顯示子彈。我不知道，也許我一路上搞砸了一些東西，但我只是不知道在哪裏！

現在，鏈接顯示在標題旁邊，沒有背景顏色，並且它們沒有處於固定位置。

任何想法？

<!--main container, 
 
gives content area width and centers it horizontally--> <!--width of wrap will be subtracted from width of the browser window (its container)--> #wrap { 
 
    width: 750px; 
 
    margin: 0 auto; 
 
    background: #FFFFFF; 
 
    position: relative; 
 
} 
 
h1 { 
 
    margin: 0; 
 
    background: #cc9 
 
} 
 
#nav { 
 
    padding: 5px 10px; 
 
    background: #FFF; 
 
} 
 
#main { 
 
    float: left; 
 
    width: 480px; 
 
    padding: 10px; 
 
    background: #FFF; 
 
} 
 
h2 { 
 
    margin: 0 0 1em; 
 
} 
 
<!--Setting position to fixed and margin-left will keep sidebar scrolling on page--> #sidebar { 
 
    float: right; 
 
    width: 200px; 
 
    padding: 40px; 
 
    background: #99c; 
 
    position: fixed; 
 
    margin-left: 520px; 
 
} 
 
#footer { 
 
    clear: both; 
 
    padding: 5px 10px; 
 
    background: #cc9; 
 
} 
 
#footer p { 
 
    margin: 0; 
 
} 
 
#nav ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 
#nav li { 
 
    display: inline; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#sidebar ul { 
 
    list-style-type: none; 
 
} 
 
<!--links--> a:link { 
 
    color: black 
 
} 
 
a:visited { 
 
    color: blue 
 
} 
 
a:hover { 
 
    font-weight: bold 
 
} 
 
a:active { 
 
    font-style: italic 
 
} 
 
.topnavlink { 
 
    clear: left; 
 
    margin-left: 1em; 
 
    font-size: 1.1em 
 
} 
 
.sidenavlink { 
 
    font-size: 1em 
 
} 
 
.footer { 
 
    clear: left; 
 
}

<DIV id="sidebar"> 
 
    <ul> 
 
    <li><a href="http://www.google.com">Google</a> 
 
    </li> 
 
    <li> 
 
     <a href="mailto:something@google.edu">Email Me</a> 
 
    </li> 
 
</DIV> 
 
</DIV> 
 

 
<DIV id="footer"> 
 
    <P>&copy;Something 2012</P> 
 
</DIV> 
 
</DIV> 
 
</BODY> 
 

 
</HTML>

Answer 1

意見是CSS shoule是
/* comment */

不

<!--comment-->


也
你的HTML似乎有一些額外的收盤</div>
如果不知道那是因爲它的一些代碼的一部分

Answer 2

您終止<ul>與</div>，而不是</ul>。改正這一點，一切都應該落實到位。

Answer 3

您需要結束標記</UL>，並且您有額外的關閉div坐在底部

<DIV id="sidebar"> 
      <ul> 
       <li><a href="http://www.google.com">Google</a> 
       </li> 
       <li> 
       <a href="mailto:something@google.edu">Email Me</a> 
       </li> 
      </UL> 
     </DIV> 

     <DIV id="footer"> 
      <P> &copy;Something 2012</P> 
     </DIV> 

而你註釋錯了，應該是這樣的

/*main container, gives content area width and centers it horizontally 
width of wrap will be subtracted from width of the browser window (its container)*/ 
#wrap { 
width:750px; 
margin:0 auto; 
background:#FFFFFF; 
position: relative; 
} 

h1 { 
margin:0; 
background:#cc9 
} 

#nav { 
padding:5px 10px; 
background:#FFF; 
} 

#main { 
float:left; 
width:480px; 
padding:10px; 
background:#FFF; 
} 

h2 { 
margin:0 0 1em; 
} 

/*Setting position to fixed and margin-left will keep sidebar scrolling on page */ 
#sidebar { 
float:right; 
width:200px; 
padding:40px; 
background:#99c; 
position:fixed; 
margin-left:520px; 
} 

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

#footer p { 
margin:0; 
} 

#nav ul { 
margin:0; 
padding:0; 
list-style:none; 
} 

#nav li { 
display:inline; 
margin:0; 
padding:0; 
} 

#sidebar ul { 
list-style-type:none; 
} 


<!--links--> 
a:link { 
    color: black 
} 
a:visited { 
color: blue 
} 
a:hover { 
font-weight: bold 
} 
a:active { 
font-style: italic 
} 
.topnavlink { 
clear: left; margin-left: 1em; font-size: 1.1em 
} 
.sidenavlink { 
font-size: 1em 
} 
.footer { 
clear: left; 
}