Forum : position 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,

il y a 9 ans

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,

il y a 9 ans

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

Ekim Kael,

il y a 9 ans

je ne comprends pas

Ekim Kael,

il y a 9 ans

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>

mxmaxime,

il y a 9 ans

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