position css

corentin philippe
Les bases HTML/CSS

Bonjour,

Voila je rencontre un petit problème avec mon code.

Ce que je fais

je cherche a coller le rond rouge contre le texte.
//html

<div class="month-l">
            @foreach($dates as $name_month => $date)
                <div class="month__name_month">{{ $name_month }}</div>
                <div class="month__img">
                        {{ $date }}
                    </div><br>
           @endforeach
        </div>

//css

.month-l{
  float: right;
  text-transform: uppercase;
  color: #ffffff;
  margin-top: -50%;
  margin-right: -20%;
}
.month__name_month{
  font-size: 20px;
  font-weight: 500;
  font-family: "Roboto", sans-serif;
}
.month__img{
  background: url("../img/round.png") no-repeat;
  width: 2%;
  font-size: 12px;
  margin-left: 5.7%;
  margin-top: -2%;
  padding-left: 4px;
  position: absolute;
}

Ce que je veux

http://puu.sh/rcfSB/46c9f1c1df.png

Ce que j'obtiens

http://puu.sh/rcfQ3/c7105813f0.png

5 réponses

Ekim Kael
Réponse acceptée

voici ce que j'ai fait

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <style>
        html,body{
            font-family: sans-serif;
        }
        ul{
            list-style: none;
        }
        li{
            font-size: 16px;
            margin: 5px;
            text-transform: uppercase;
            font-weight: bold;
        }
        .indice{
            display: inline-block;
            width: 15px;
            height: 15px;
            background-color: crimson;
            border-radius: 50%;
            font-size: 12px;
            text-align: center;
            position: relative;
            top: -11px;
            left: -10px;
        }
    </style>
</head>
<body>

<ul>
    <li>Janvier <div class="indice">0</div> </li>
    <li>Fevrier <div class="indice">2</div> </li>
    <li>Mars <div class="indice">5</div> </li>
    <li>Avril <div class="indice">7</div> </li>
    <li>mai <div class="indice">9</div> </li>
    <li>Juin <div class="indice">1</div> </li>
    <li>Juillet <div class="indice">4</div> </li>
    <li>Aout <div class="indice">3</div> </li>
    <li>September <div class="indice">6</div> </li>
    <li>October <div class="indice">0</div> </li>
    <li>November <div class="indice">8</div> </li>
    <li>December <div class="indice">9</div> </li>
</ul>

</body>
</html>
Ekim Kael

c'est difficile de t'aider avec le peu de code que tu as donné mais déjà :
1 - tes mois doivent avoir une largeur précise à en juger par ton image ce qui fait que tes boutons rouges soient tous dans un coin
2 - tes boutons rouges si je me trompe pas doivent avoir un "z-index" superieur à celui des mois

corentin philippe
Auteur

mais comme avoir une largeure qui est egale a la taille du nom du mois

Ekim Kael

je ne comprends pas

mxmaxime

Déposez un codepen quand c'est comme ça, c'est beaucoup plus simple de vous aider..