J'essaie d'afficher des cercles de liste à puces sur ma page Web, mais cela ne semble pas apparaître, et j'ai essayé d'utiliser firebug mais je ne trouve pas ce qui ne va pas, j'ai parcouru tout mon fichier css, et je ne ' t voir où est le problème, je veux que la liste soit verticale avec des cercles!
Pouvez-vous m'aider, voici le code:
/* Browser resets. */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, nav, section {
margin: 0;
padding: 0;
border: 0;
font-weight: inherit;
font-style: inherit;
font-size: 1em;
font-family: inherit;
vertical-align: baseline;
line-height: 1.5em;
}
#fancy_ajax .note{ cursor:default; }
/* Three styles for the notes: */
.yellow{
background-color:#FDFB8C;
border:1px solid #DEDC65;
}
.blue{
background-color:#A6E3FC;
border:1px solid #75C5E7;
}
.green{
background-color:#A5F88B;
border:1px solid #98E775;
}
/* Each note has a data span, which holds its ID */
span.data{ display:none; }
/* Green button class: */
a.green-button,a.green-button:visited{
color:black;
display:block;
font-size:10px;
font-weight:bold;
height:15px;
padding:6px 5px 4px;
text-align:center;
width:60px;
text-shadow:1px 1px 1px #DDDDDD;
background:url(../img/button_green.png) no-repeat left top;
}
a.green-button:hover{
text-decoration:none;
background-position:left bottom;
}
.author{
/* The author name on the note: */
bottom:10px;
color:#666666;
font-family:Arial,Verdana,sans-serif;
font-size:12px;
position:absolute;
right:10px;
}
#main{
/* Contains all the notes and limits their movement: */
margin:0 auto;
position:relative;
width:980px;
height:500px;
z-index:10;
background:url(img/add_a_note_help.gif) no-repeat left top;
}
h3.popupTitle{
border-bottom:1px solid #DDDDDD;
color:#666666;
font-size:24px;
font-weight:normal;
padding:0 0 5px;
}
#noteData{
/* The input form in the pop-up: */
height:200px;
margin:0px 0 0 0px;
width:350px;
}
.note-form label{
display:block;
font-size:10px;
font-weight:bold;
letter-spacing:1px;
text-transform:uppercase;
padding-bottom:3px;
}
.note-form textarea, .note-form input[type=text]{
background-color:#FCFCFC;
border:1px solid #AAAAAA;
font-family:Arial,Verdana,sans-serif;
font-size:19px;
font-weight: bold;
height:60px;
padding:5px;
width:300px;
margin-bottom:0px;
}
.note-form input[type=text]{ height:auto; }
.color{
/* The color swatches in the form: */
cursor:pointer;
float:left;
height:10px;
margin:0 5px 0 0;
width:10px;
}
#note-submit{ margin:20px auto; }
body {
height:100%;
background-color: white;
font-size: 14px;
color: #333333;
font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
}
/* custom selection colors */
::-moz-selection {
color: #fff;
color: rgba(255,255,255,.85);
background: #ea4c88;
}
::selection {
color: #fff;
color: rgba(255,255,255,.85);
background: #ea4c88;
}
/* Links */
a {
text-decoration: none;
color: #19558D;
font-size: inherit;
}
a:hover {
text-decoration: underline;
}
a:visited {
text-decoration: none;
background-color: inherit;
color: #336699;
}
a img {
border: none;
}
/* Input fields + label */
input, textarea {
border: 1px solid #999999;
padding: 5px;
}
label {
float: left;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 0pxpx;
width: 120px;
font-size: 22px;
color: inherit;
font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
}
#error {
font-size: 14px;
}
/* Lists */
li {
font-size: 14px;
margin-left: 10px;
list-style-type: circle;
display:inline;
}
li a {
margin-left: inherit;
}
#like_text {
float: left;
color: #0099CC;
cursor: pointer;
font-size: inherit;
}
.like_list_element {
width: 681px;
float: left;
padding-top: 15px;
margin-left: 0px;
height: 35px;
border-bottom: 1px solid #999999;
}
.like_list_element:hover {
width: 681px;
float: left;
padding-top: 15px;
margin-left: 0px;
height: 35px;
border-bottom: 1px solid #999999;
background-color: #EDEDED;
}
.micro_avatar {
float: left;
width: 30px;
height: 30px;
margin-right: 15px;
margin-top: -7px;
padding: 2px;
background-color: #ffffff;
-moz-box-shadow: 2px 2px 4px #D1D1D1;
-webkit-box-shadow: 2px 2px 4px #D1D1D1;
box-shadow: 2px 2px 4px #D1D1D1;
-moz-border-radius: 2px;
border-radius: 2px;
}
/* "Super" headline */
h1 {
font-weight: bold;
font-style: italic;
font-size: 38px;
color: #666666;
font-family: Georgia, "Times new roman", serif;
}
/* "Medium (bold)" headline */
h2 {
font-size: 20px;
font-weight: bolder;
color: inherit;
font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
}
/* Normal headline (used on profile page) */
.normal_headline {
font-size: 22px;
float: left;
font-weight: bold;
color: inherit;
font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
}
/* "Standard" headline */
h3 {
font-size: 15px;
color: inherit;
font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
}
/* page structure */
/* Container - main content goes here */
#container {
min-height: 100%;
height:100%;
width: 897px;
margin-bottom: 30px;
margin: 0 auto;
}
/* Left (main) content */
#left_content {
float: left;
width: 485px;
font-size: 1em;
padding-left: -15px;
}
ul.statuses{
margin:10px 0;
}
ul.statuses li {
position:relative;
padding:15px 15px 15px 10px;
list-style:none;
font-size:12px;
}
div.tweetTxt{
float:left;
width:400px;
overflow:hidden;
}
ul.statuses a img.avatar{
float:left;
margin-right:10px;
border:1px solid #446600;
}
div.date{
line-height:18px;
font-size:10px;
color:#999999;
}
.question_link{
float:left;
font-weight: bold;
margin-left:40px;
color:blue;
}
#answerText {
float:left;
width:480px;
margin-left:40px;
margin-bottom: 5px;
}
#answerText ul{
margin-left:40px;
}
#answerText li {
list-style-type: circle;
font-size:30px;
}
.answerActions {
float:left;
margin-left:40px;
font-size:9px;
}
.thanks{
font-weight:bold;
}
.content{
float:left;
}
/* Used for seperating content eg. Timeline && photos */
.left_content_seperator {
width: 485px;
float: left;
border-bottom: 1px solid #999999;
margin-top: 15px;
margin-bottom: 30px;
height: auto;
}
/* Used in eg. postphoto.php */
.big_content_seperator {
width: 897px;
float: left;
border-bottom: 1px solid #999999;
margin-bottom: 30px;
}
/* Right side content */
.right_content {
float: right;
width: 200px;
font-size: 14px;
margin-right:80px;
}
/* Used for seperating content eg. Timeline && photos */
.right_content_seperator {
width: 200px;
float: right;
margin-top: 33px;
margin-bottom: 15px;
}
.right_content_seperator_home {
width: 200px;
float: right;
margin-top: 25px;
margin-bottom: 15px;
}
/* For footer + header (outside the main container) */
.small_container {
margin: 0 auto;
width: 900px;
}
/* The bar on the top of the page */
.top_bar {
width: 100%;
height: 50px;
margin-bottom: 30px;
background:none repeat scroll 0 0 black;
}
#search {
width: 502px;
padding: 10px;
height:20px;
margin: 10px 0px 0px -30px;
background-color:#505759;
float:left
}
.question_box{
background: none repeat scroll 0 0 #FFFFFF;
border-color: #CCCCCC #999999 #999999 #CCCCCC;
border-style: solid;
border-width: 1px;
color: #000000;
font: 16px arial,sans-serif;
margin: -5px 0px 0px -5px;
padding: 5px 8px 0px 6px;
width:380px;
height:25px
}
input.blur {
color: #999;
}
#search a {
color: #E5E5E5;
text-decoration: none;
font-weight: bold;
}
#search a:hover {
text-decoration: underline;
}
/* Logotype container */
.logotype {
background-color:#671E1E;
font-size: 20px;
float: left;
color:white;
padding:10px;
margin: 10px 30px 0px 0px;
}
/* The menu on the top of the page */
.top_menu {
float: right;
text-align: right;
background-color: inherit;
color: #ffffff;
margin: 15px 0px 0px 0px;
}
.top_menu a {
color: #E5E5E5;
text-decoration: none;
}
.top_menu a:hover {
text-decoration: underline;
color: inherit;
}
/* Main content + form container on the front page */
.text_box {
margin: 0 auto;
margin-top: 70px;
text-align: center;
width: 590px;
}
/* Box for the iPhone image on the front page */
.iphone_promo {
margin: 0 auto;
margin-top: 70px;
margin-bottom: 30px;
text-align: center;
width: 590px;
}
/* Red arrow next to the iPhone picture */
.arrow {
margin: 0 auto;
margin-left: 210px;
margin-bottom: -145px;
}
/* Typography */
.small_copy {
font-size: 12px;
}
#menu_list ul{
}
#menu_list li{
}
.not_selected {
-moz-border-radius: 5px 5px 5px 5px;
background-image: url("http://d1vgw4v7ja2ido.cloudfront.net/-9dfe92083011731d.gif");
background-position: left center;
background-repeat: no-repeat;
clear: both;
display: block;
font-weight: bold;
padding: 3px 5px 3px 10px;
color: #444444;
cursor: default;
}
.not_selected:hover{
background-color:lightblue;
}
.selected{
-moz-border-radius: 5px 5px 5px 5px;
background-image: url("http://d1vgw4v7ja2ido.cloudfront.net/-9dfe92083011731d.gif");
background-position: left center;
background-repeat: no-repeat;
clear: both;
display: block;
font-weight: bold;
padding: 3px 5px 3px 10px;
background-color: #E0E0E0;
color: #444444;
cursor: default;
}
#menu_list li{
margin-left: inherit;
}
.right_seperator {
width: 200px;
float: left;
border-bottom: 1px dotted #999999;
margin-top: 15px;
margin-bottom: 10px;
height: auto;
}
.light_gray_serif {
font-family: Georgia, "Times new roman", serif;
font-size: inherit;
color: #999999;
font-size: 14px;
}
/* Forms */
#email_form {
width: 285px;
height: 40px;
font-size: 22px;
margin-right: -1px;
outline: none;
font-weight: bold;
color: #999999;
font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
float: left;
}
#submit_button {
width: 295px;
height: 52px;
font-size: 22px;
font-weight: bold;
margin-left: -1px;
cursor: pointer;
color: inherit;
font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
border: 1px solid #F9AA33;
float: right;
}
#username_form {
width: 448px;
height: 40px;
font-size: 22px;
margin-bottom: 15px;
outline: none;
font-weight: bold;
color: inherit;
font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
float: right;
}
#password_form {
width: 448px;
height: 40px;
font-size: 22px;
margin-bottom: 15px;
outline: none;
font-weight: bold;
color: inherit;
font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
float: right;
}
.standard_big_form {
width: 448px;
height: 40px;
font-size: 22px;
margin-bottom: 15px;
outline: none;
font-weight: bold;
color: inherit;
font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
float: right;
}
/* Big login button */
#login_button {
width: auto;
padding-left: 20px;
padding-right: 20px;
height: 52px;
font-size: 22px;
font-weight: bold;
margin-left: -1px;
cursor: pointer;
color: inherit;
font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
border: 1px solid #F9AA33;
float: right;
}
#login_button:active {
position: relative;
top: 1px;
}
/* Standard buttons */
.big_button {
width: auto;
padding-left: 20px;
padding-right: 20px;
height: 52px;
font-size: 22px;
font-weight: bold;
cursor: pointer;
color: #333333;
font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
border: 1px solid #F9AA33;
float: right;
}
.big_button:active {
position: relative;
top: 1px;
}
.profile_name_container {
width: auto;
}
.follow_container {
float: left;
width: auto;
margin-top: 7px;
margin-left: 15px;
}
.follow_button {
margin-left: 0px;
text-align: justify;
color: #0099CC;
padding-left: 20px;
padding-right: 4px;
padding-top: 4px;
padding-bottom: 4px;
-moz-border-radius: 5px;
border-radius: 5px;
font-size: 14px;
background: url(../images/follow-icon.png) no-repeat 4px 6px;
}
.follow_button:hover {
cursor: pointer;
margin-left: -1px;
margin-right: -1px;
background-color: #EDEDED;
border: 1px solid #999999;
background-image: url(../images/follow-icon.png) no-repeat 4px 6px;
}
.unfollow_button {
margin-left: 0px;
text-align: justify;
color: #0099CC;
padding-left: 20px;
padding-right: 4px;
padding-top: 4px;
padding-bottom: 4px;
-moz-border-radius: 5px;
border-radius: 5px;
font-size: 14px;
background: url(../images/unfollow-icon.png) no-repeat 4px 6px;
}
.unfollow_button:hover {
cursor: pointer;
margin-left: -1px;
margin-right: -1px;
background-color: #EDEDED;
border: 1px solid #999999;
background-image: url(../images/unfollow-icon.png) no-repeat 4px 6px;
}
.Push_footer {
margin-bottom: 200px;
}
/* Footer (container) of the page */
.footer {
float: left;
margin-top: 30px;
padding-bottom: 15px;
width: 897px;
height: 49px;
border-top: 1px solid #999999;
}
/* "Photoblogging through events." text. */
.footer_info {
font-size: 14px;
float: left;
margin-top: 15px;
}
/* The link to 'Support & Feature requests' */
.footer_link {
font-size: 14px;
float: right;
margin-top: 15px;
}
/*** Colors ***/
/* Blue gradient (css gradients, #336699 is used for IE and older browsers) */
.blue_gradient {
background: #336699;
background: -webkit-gradient(linear, left top, left bottom, from(#0099CC), to(#336699));
background: -moz-linear-gradient(top, #0099CC, #336699);
}
/* Yellow gradient (for button) #FBAA33 = orange */
.yellow_gradient {
background: #FBAA33;
background: -webkit-gradient(linear, left top, left bottom, from(#FBF16E), to(#FBAA33));
background: -moz-linear-gradient(top, #FBF16E, #FBAA33);
}
.yellow_gradient:hover {
background: #F6D05A;
}
/* Image design */
.photo {
float: left;
min-width: 200px;
min-height: 200px;
padding: 5px;
margin-right: 15px;
margin-bottom: 15px;
background-color: #ffffff;
border: 1px solid #EAEAEA;
-moz-box-shadow: 4px 4px 10px #D1D1D1;
-webkit-box-shadow: 4px 4px 10px #D1D1D1;
box-shadow: 4px 4px 10px #D1D1D1;
}
.photo_thumbnail:hover {
filter:alpha(opacity=60);
-moz-opacity:0.6;
-khtml-opacity: 0.6;
opacity: 0.6;
}
.big_photo_container {
text-align: center;
width: 666px;
margin-bottom: 15px;
}
.event_name {
height: 20px;
margin-right: 5px;
width: 169px;
float: left;
}
.trash_can {
height: 17px;
width: 14px;
-moz-border-radius: 5px;
border-radius: 5px;
padding-top: 3px;
padding-left: 2px;
float: right;
}
.trash_can:hover {
cursor: pointer;
margin: -1px;
background-color: #EDEDED;
border: 1px solid #999999;
}
/* Image design */
.big_photo {
margin-top: 15px;
max-width: 656px;
padding: 5px;
background-color: #ffffff;
border: 1px solid #EAEAEA;
-moz-box-shadow: 4px 4px 10px #D1D1D1;
-webkit-box-shadow: 4px 4px 10px #D1D1D1;
box-shadow: 4px 4px 10px #D1D1D1;
}
.profile_photo {
float: left;
width: 50px;
height: 50px;
margin-right: 15px;
margin-bottom: 15px;
padding: 5px;
background-color: #ffffff;
-moz-box-shadow: 4px 4px 10px #D1D1D1;
-webkit-box-shadow: 4px 4px 10px #D1D1D1;
box-shadow: 4px 4px 10px #D1D1D1;
-moz-border-radius: 5px;
border-radius: 5px;
}
.profile {
padding-top: 15px;
}
/* Heart sign */
.fav {
margin-left: 0px;
color: #0099CC;
padding-left: 20px;
padding-right: 4px;
padding-bottom: 4px;
-moz-border-radius: 5px;
border-radius: 5px;
background: url(../images/heart-icons.png) no-repeat 4px 4px;
}
.fav:hover {
cursor: pointer;
margin-left: -1px;
margin-right: -1px;
background-color: #EDEDED;
border: 1px solid #999999;
background: url(../images/heart-icons.png) no-repeat 4px -13px #EDEDED;
}
.highlight {
margin-left: 0px;
color: #0099CC;
cursor: pointer;
padding-left: 20px;
padding-right: 4px;
padding-bottom: 4px;
-moz-border-radius: 5px;
border-radius: 5px;
background: url(../images/heart-icons.png) no-repeat 4px -13px;
}
.highlight:hover {
cursor: pointer;
margin-left: -1px;
margin-right: -1px;
background-color: #EDEDED;
border: 1px solid #999999;
background: url(../images/heart-icons.png) no-repeat 4px 4px #EDEDED;
}
/* Heart sign */
.likes {
font-size: inherit;
}
/* Views */
.views {
padding-left: 20px;
float: right;
}
/* Costum */
/* Removes underlines for eg. buttons */
.no_underline:hover {
text-decoration: none;
}
/* Margins */
.small_margin_top {
margin-top: 15px;
}
.negative_margin_top {
margin-top: -4px;
}
.custom_margin_top {
margin-top: 48px;
}
.no_margin_left {
margin-left: 0px;
}
.no_margin_top {
margin-top: 0px;
}
/* Paddings */
.no_padding_top {
padding-top: 0px;
}
.normal_font_weight {
font-weight: normal;
}
.photo_label {
margin-right: auto;
padding-left: 6px;
text-align: left;
}
/* button basics */
a.minibutton {
display:inline-block;
height:23px;
padding:0 0 0 3px;
font-size:11px;
font-weight:bold;
color:#333;
text-shadow:1px 1px 0 #fff;
background:url(http://github.com/images/modules/buttons/minibutton_matrix.png) 0 0 no-repeat;
white-space:nowrap;
margin-right:4px;
border:none;
overflow:visible;
cursor:pointer;
text-decoration:none;
}
a.minibutton>span {
display:block;
height:23px;
padding:0 10px 0 8px;
line-height:23px;
background:url(http://github.com/images/modules/buttons/minibutton_matrix.png) 100% 0 no-repeat;
}
a.minibutton:hover, a.minibutton:focus {
color:#fff;
text-decoration:none;
text-shadow:-1px -1px 0 rgba(0,0,0,0.3);
background-position:0 -30px;
}
a.minibutton:hover>span, a.minibutton:focus>span {background-position:100% -30px;}
a.minibutton.mousedown{background-position:0 -60px; }
a.minibutton.mousedown>span{background-position:100% -60px; }
/* answer button */
a.answer {
display:inline-block;
height:23px;
padding:0 0 0 3px;
font-size:18px;
font-weight:bold;
color:#333;
text-shadow:1px 1px 0 #fff;
background:url(http://github.com/images/modules/buttons/minibutton_matrix.png) 0 0 no-repeat;
white-space:nowrap;
margin-right:4px;
border:none;
overflow:visible;
cursor:pointer;
text-decoration:none;
}
a.answer>span {
display:block;
height:23px;
padding:0 10px 0 8px;
line-height:23px;
background:url(http://github.com/images/modules/buttons/minibutton_matrix.png) 100% 0 no-repeat;
}
a.answer:hover, a.answer:focus {
color:#fff;
text-decoration:none;
text-shadow:-1px -1px 0 rgba(0,0,0,0.3);
background-position:0 -30px;
}
a.answer:hover>span, a.answer:focus>span {background-position:100% -30px;}
a.answer.mousedown{background-position:0 -60px; }
a.answer.mousedown>span{background-position:100% -60px; }
/* with icon */
a.btn-download .icon {
float:left;
margin-left:-4px;
width:18px;
height:22px;
background:url(http://github.com/images/modules/buttons/minibutton_icons.png?v20100306) 0 0 no-repeat;
}
a.btn-download .icon {background-position:-20px 0;}
a.btn-download:hover .icon, a.btn-download:focus .icon {background-position:-20px -25px;}
#profile_pic{
padding:5px;
border:1px #AAAAAA solid;
float:left;
}
ul.stats{
width:auto;
float:left;
display:inline;
margin: 20px 0px 0px 0px;
}
ul.stats li{
display:inline-block;
text-align:left;
}
.stats_number{
font-weight:bold;
font-size:10px;
}
.stats_text{
font-size:9px;
color:#505759;
}
ul.followingBar{
width:auto;
float:left;
margin: 0px 0px 0px 0px;
}
.watchingTopics{
float:left
}
ul.followingBar li{
display:block;
margin: 10px 0 0 0 ;
border-bottom:1px #999999 solid;
}
.topicFollow{
padding-bottom:10px;
font-weight:bold;
float:left;
}
.related_questions{
padding-bottom:10px;
font-weight:bold;
}
.panel
{
margin-left:50px; margin-right:50px; margin-bottom:5px; background-color:#D3E7F5; padding:6px; width:400px;
display:none; float:left;
}
.load_comment
{
margin-left:50px; margin-right:50px; margin-bottom:5px; background-color:#D3E7F5; height:auto; padding:6px; width:400px; font-size:12px;
float:left;
}
.flash_load
{
margin-left:50px; margin-right:50px; margin-bottom:5px;height:20px; padding:6px; width:400px;
display:none; }
.loadplace{
margin-top:70px;
}
<ul class="statuses">
<li>
<div id="answerText">
<ul>
<li>google</li>
<li>yahoo</li>
<li>quora</li>
</ul>
</div>
</li>
</ul>
li
obtient seulement son list-style
- styles associés appliqués s'il a display: list-item
Votre style pour <li>
est faux:
li {
font-size: 14px;
margin-left: 10px;
list-style-type: circle;
display: inline;
}
devrait être
li {
font-size: 14px;
margin-left: 10px;
list-style-type: circle;
}
Essayez de vous assurer qu'il n'y a pas:
type de style liste: aucun;
dans votre fichier css.
Vous avez attribué display:inline;
à la balise LI, ce qui explique pourquoi ils apparaissent horizontalement au lieu de verticalement. Débarrassez-vous de cet attribut.