Bara laterală plutitoare cu CSS

Am creat o bară laterală cu o anumită culoare de fundal, cu o poziție fixă, astfel încât să rămână în poziție atunci când ați derulat pagina. Totul părea bine până acum, și singurul lucru pe care l-am modificat era să scot tipul de listă, astfel încât să nu apară gloanțe în bara laterală. Nu știu, poate că am făcut ceva pe drum, dar nu văd unde!

În momentul de față, link-urile apar imediat lângă antet, fără culoarea de fundal și nu se află într-o poziție fixă.

Vreo idee?

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

<!--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">
  
  • Google
  • Email Me
  • </div> </div> <div id="footer">

    ©Something 2012

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

3 răspunsuri

comments is CSS shoule be
/* comment */

NOT

<!--comment-->


also
your html seems to have some extra closing </div>
not sure if thats because its part of some more code

2
adăugat
ahhhh nu ar fi trebuit să presupun că acest format a fost XD
adăugat autor jackie, sursa

You need closing tag for and you have extra closing div sitting at the bottom

<div id="sidebar">
            
        </div>

        <div id="footer">
            
©Something 2012 </div>

Și comentați greșit că ar trebui să arate așa

/*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;
}
2
adăugat
vă mulțumesc :) Asta a fost prostie ..
adăugat autor jackie, sursa

You end your

    with </div>instead of
. Correct that and everything should fall into place.
0
adăugat
Am încercat asta, dar nimic nu sa schimbat. Vă mulțumim pentru că ați arătat că, deși XD
adăugat autor jackie, sursa