0

I created a notification area for my application. And I would like to display a small red bullet on the right of each tab.

I worked with a position absolute, the thing is now the bullets appear on all the page.

Here is my code and my CSS:

how it looks 

.read-button{
    font-size: 8px;
    color: #FC5D5D;
    display:block;
    position:absolute;
    right:20px;
    padding-top: 15px;
}

And my PHP:

  <?php foreach($messages as $mess) { ?>
    <?php
    $from_user = $user->isClient()?User::findIdentity($mess->message_filmmaker_id):User::findIdentity($mess->message_client_id);
    $from_name = $from_user->first_name." ".$from_user->last_name;

    $url = "#";
    if ($user->isClient()) $url = Url::to(['client/view-project', 'project_id' => $mess->project_id, 'filmmaker_id' => $from_user->id]);
    elseif ($user->isFilmmaker()) $url = Url::to(['filmmaker/view-project', 'project_id' => $mess->project_id]);
    ?>


    <a class="content" href="<?= $url ?>">
        <div class="notification-item">
            <div class="item-pic float-left"><div class="avatar"><?= Html::img(['/site/get-avatar', 'user_id' => $from_user->id]) ?></div></div>
            <div class="item-info float-left">
                <div><?= $from_name ?> - Il y a <?= $mess->getElapsedTime() ?></div>
                <div><?= $mess->message_text ?></div>
            </div>
            <div class="read-button float-right">
                <span class="glyphicon glyphicon-cd" aria-hidden="true"></span>
            </div>
            <div class="clear-both"></div>
        </div>
    </a>

    <li class="divider"></li>
<?php } ?>
user229044
  • 232,980
  • 40
  • 330
  • 338
Ben2pop
  • 746
  • 1
  • 10
  • 26
  • @Mr.Engineer Please stop harassing people about "short tags". `=` is **not a short tag**, and it's use is not only fine, it should be encouraged. – user229044 Feb 15 '16 at 15:17

1 Answers1

0

Absolute position works with a parent with absolute or relative position. Try to set position:relative to notification-item class and absolute position works relative to this parent element.

fernandoigual
  • 11
  • 2