Flottante, barre latérale avec les CSS

J'ai créé une barre latérale avec une certaine couleur d'arrière-plan avec une position fixe de sorte qu'il serait rester en place lorsque vous défilez vers le bas de la page. Tout semblait bien aller jusqu'à maintenant, et la seule chose que j'ai modifié a été prise de loin le list-style-type, de sorte qu'aucune des balles apparaissent dans la barre latérale. Je ne sais pas, peut-être que je vis quelque chose le long du chemin, mais je ne vois pas où!!

Droit maintenant, les liens s'affichent à droite à côté de la tête, pas de couleur d'arrière-plan, et ils ne sont pas dans une position fixe.

Des idées?

CSS:

<!--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;
}

HTML:

<DIV id="sidebar">
<ul>
<li><a href="http://www.google.com">Google</a>
</li>
<li>
<a href="mailto:[email protected]">Email Me</a>
</li>
</DIV>
</DIV>
<DIV id="footer">
<P>&copy;Something 2012</P>
</DIV>
</DIV>
</BODY>
</HTML>

InformationsquelleAutor jackie | 2012-05-31
  1. 2

    commentaires est le CSS shoule être
    /* comment */

    NON

    <!--comment-->


    également

    votre html semble avoir une certaine supplémentaire de clôture </div>

    vous ne savez pas si c'est parce que la partie de code plus

    • ahhhh, je n'aurais jamais supposé que le format a été <! > XD
    InformationsquelleAutor t q
  2. 2

    Vous avez besoin de balise de fermeture pour </UL> et vous avez plus de la fermeture de la div assis au fond

    <DIV id="sidebar">
<ul>
<li><a href="http://www.google.com">Google</a>
</li>
<li>
<a href="mailto:[email protected]">Email Me</a>
</li>
</UL>
</DIV>
<DIV id="footer">
<P> &copy;Something 2012</P>
</DIV>

    Et vous commentez à tort façon dont il devrait ressembler à ceci

    /*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;
}
    • merci 🙂 C'était idiot..
    InformationsquelleAutor Dips
  3. 0

    La fin de votre <ul> avec </div> au lieu de </ul>. Correct et que tout devrait se mettre en place.

    • Essayé, rien n'a changé. Merci pour cette réponse XD
    InformationsquelleAutor Niet the Dark Absol