CODEWITHSUNDEEP
htmlcss
Vitalynx
Vitalynx

Reputation: 89

Numbers keep showing up

For some unknown reason, numbers keep showing up on the side of my div. I have tried everything to remove these numbers, but I have absolutely no idea where they appear from. I do know that it has to do with either the stylesheet or the html file. I provided the image below.

Also, "Vitalynx" is shifted all the way to the right and i cannot shift it back in the div with margin-left.. Any ideas? Help would be much appreciated!

leaderboard

Here's the html code:

<div id="ld">
    <div class="leaderboard">
  <h1>
    Most active Players
  </h1>
  <ol>
<?= $fgmembersite->User1(); ?>
<?= $fgmembersite->User10(); ?>
  </ol>
</div>
</div>
<br><br>

Here's the CSS:

/*--------------------
Leaderboard
--------------------*/
.ld h1 {
  z-index: 0;
  margin-top: -20px;
  margin: -20px -5px 4px;
  line-height: 40px;
  text-shadow: 2px 1px 3px rgba(0,0,0,0.3);
  font-weight: bold;
  font: 23px "Lucida Grande", Tahoma, Verdana, sans-serif;
  color: white;
  text-align: center;
  background: #12a7ee;
  border-bottom: 0px solid #cfcfcf;
  border-radius: 5px 5px;
  -webkit-box-shadow: 3px 1px whitesmoke;
  border-left:solid 0px #2ab7ec;
  margin-left: 0px;
  background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
  background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
  background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
  background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
  background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, rgb(44,160,202)),
    color-stop(1, rgb(62,184,229))
    );
  border-radius: 6px;
  -webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #0c7095, 0px 10px 5px #999;
  -moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
  -o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
  box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #0c7095, 0px 10px 5px #999;
}


.leaderboard *,
.leaderboard *::before,
.leaderboard *::after {
  box-sizing: border-box;
}
.leaderboard {
  position: relative;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, 5%);
  width: 245px;
  height: 335px;
  background-color: white;
  background-color: #white;
  border-radius: 10px;
  box-shadow: 0 7px 30px rgba(62, 9, 11, 0.3);
}
.leaderboard h1 {
  margin: -20px -2.8px 5px;
  line-height: 40px;
  text-shadow: 2px 1px 3px rgba(0,0,0,0.3);
  font-weight: bold;
  font: 23px "Lucida Grande", Tahoma, Verdana, sans-serif;
  color: #fff;
  text-align: center;
  background: #12a7ee;
  border-bottom: 0px solid #cfcfcf;
  border-radius: 5px 5px;
  -webkit-box-shadow: 3px 1px whitesmoke;
  border-left:solid 0px #2ab7ec;
  margin-left: -17.7px;
  background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
  background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
  background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
  background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
  background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, rgb(44,160,202)),
    color-stop(1, rgb(62,184,229))
    );
  border-radius: 6px;
  -webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #0c7095, 0px 10px 5px #999;
  -moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
  -o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
  box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #0c7095, 0px 10px 5px #999;
  margin-left: -3px;
  z-index: 0;
  font-size: 18px;
  color: #fffff;
  padding: 12px 13px 15px;
}
.leaderboard h1 svg {

  width: 25px;
  height: 26px;
  position: relative;
  top: 3px;
  margin-left: -30px;
  vertical-align: baseline;

}
.leaderboard ol li {
  margin-left: -22px;
  position: relative;
  z-index: 1;
  font-size: 14px;
  counter-increment: leaderboard;
  padding: 18px 0px 23px 245px;
  cursor: pointer;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform: translateZ(0) scale(1, 1);
          transform: translateZ(0) scale(1, 1);
}
.leaderboard ol li::before {
  position: absolute;
  z-index: 2;
  top: 15px;
  left: 15px;
  width: 20px;
  height: 20px;
  line-height: 20px;
  color: #2b70ab;
  background: #fff;
  border-radius: 20px;
  text-align: center;
}


.leaderboard ol li mark {
  position: absolute;
  text-shadow: 1px 3px 3px rgba(0,0,0,0.3);
  z-index: 2;
  top: 0;
  left: -4px;
  width: 100%;
  height: 100%;
  padding: 18px 10px 18px 50px;
  margin: 0;
  background: none;
  color: #fff;
}
.leaderboard ol li mark::before, .leaderboard ol li mark::after {
  position: absolute;
  z-index: 1;
  bottom: -11px;
  left: -9px;
  border-top: 10px solid #563689;
  border-left: 10px solid transparent;
  -webkit-transition: all .1s ease-in-out;
  transition: all .1s ease-in-out;
  opacity: 0;
}
.leaderboard ol li mark::after {
  left: auto;
  right: -9px;
  border-left: none;
  border-right: 10px solid transparent;
}

#d {
    text-decoration: underline;
}

#e {
  margin-left: -40px;
  color: #fff;
  text-shadow: 1px 3px 3px rgba(0,0,0,0.2);
}

.leaderboard ol li small {
  position: relative;
  text-shadow: 1px 3px 3px rgba(0,0,0,0.8);
  font-size: 13px;
  margin-left: -34px;
  z-index: 2;
  display: block;
  color: #05eccc;
}
.leaderboard ol li::after {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.08);
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
  opacity: 0;
}
.leaderboard ol li:nth-child(1) {
  background: #82d1a1;
}
.leaderboard ol li:nth-child(1)::after {
  background: #ac918e;
}
.leaderboard ol li:nth-child(2) {
  background: #1bb288;
}
.leaderboard ol li:nth-child(2)::after {
  background: #b79a98;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.08);
}
.leaderboard ol li:nth-child(2) mark::before, .leaderboard ol li:nth-child(2) mark::after {
  border-top: 6px solid #ba4741;
  bottom: -7px;
}
.leaderboard ol li:nth-child(3) {
  background: #119c75;
}
.leaderboard ol li:nth-child(3)::after {
  /* background: #d7514d; */
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.11);
}
.leaderboard ol li:nth-child(3) mark::before, .leaderboard ol li:nth-child(3) mark::after {
  bottom: -3px;
}
.leaderboard ol li:nth-child(4) {
  background: #108363;
}
.leaderboard ol li:nth-child(4)::after {
  background: #cd4b4b;
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15);
}
.leaderboard ol li:nth-child(4) mark::before, .leaderboard ol li:nth-child(4) mark::after {
  top: -7px;
  bottom: auto;
  border-top: none;
  border-bottom: 6px;
}
.leaderboard ol li:nth-child(5) {
  background: #0c7558;
  border-radius: 0 0 10px 10px;
}
.leaderboard ol li:nth-child(5)::after {
  background: #c24448;
  margin-top: -20px;
  margin: -21px -16.8px 5px;
  line-height: 40px;
  text-shadow: 2px 1px 3px rgba(0,0,0,0.3);
  font-weight: bold;
  font: 23px "Lucida Grande", Tahoma, Verdana, sans-serif;
  color: #fff;
  text-align: center;
  background: #12a7ee;
  border-bottom: 0px solid #cfcfcf;
  border-radius: 5px 5px;
  -webkit-box-shadow: 3px 1px whitesmoke;
  border-left:solid 0px #2ab7ec;
  margin-left: -17.7px;
  background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
  background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
  background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
  background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
  background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, rgb(44,160,202)),
    color-stop(1, rgb(62,184,229))
    );
  border-radius: 6px;
  -webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #0c7095, 0px 10px 5px #999;
  -moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
  -o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
  box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #0c7095, 0px 10px 5px #999;
}

.leaderboard ol li:nth-child(5) mark::before, .leaderboard ol li:nth-child(5) mark::after {
  top: -9px;
  bottom: auto;
  border-top: none;
  border-bottom: 8px;
}
.leaderboard ol li:hover {
  z-index: 2;
  overflow: visible;
}
.leaderboard ol li:hover::after {
  opacity: 1;
  -webkit-transform: scaleX(1.06) scaleY(1.03);
          transform: scaleX(1.06) scaleY(1.03);
}
.leaderboard ol li:hover mark::before, .leaderboard ol li:hover mark::after {
  opacity: 1;
  -webkit-transition: all .35s ease-in-out;
  transition: all .35s ease-in-out;
}

Upvotes: 1

Views: 54

Answers (2)

Tyler Roper
Tyler Roper

Reputation: 21672

<ol> is the tag for an Ordered List, and so by default it will have numbers. If you'd like to remove them, do the following:

ol {
    list-style-type:none;
}

In regards to your alignment issue, it seems that your right column text is left-aligned. I'd suggest making that text right-aligned, and the container would have to be positioned along the right hand side. Based on your structure, potential solutions would either be using position: absolute; right: 5px; on the text element, and then a position: relative on its parent or you could use float: right;, though I'd only suggest this method if you're familiar with how float works in general.

Your CSS is far too lengthy at this point for me to start digging through for an exact answer. Consider trimming it or posting only the relevant blocks and I can take a better look.

If I had to guess, I'd assume this is the block you're using to place the right column:

.leaderboard ol li {
  ...
  margin-left: -22px;
  padding: 18px 0px 23px 245px;
  ...
}

You're moving the text left by 245px using padding, which is a very "thrown together" method of accomplishing what you want. I'd start by changing the 245px to 0px and add a text-align: right; and moving forward from there.

Upvotes: 2

Besi
Besi

Reputation: 330

Change <ol> to <ul> and add this style

ul li{list-style:none}

Upvotes: 0

Related Questions