Question 216553 in Html Question posted in
Some basic documentation can be found here.

how to make a facebook style notification bell with javascript can you css and html?

How do I make a campaign on my website to receive notifications?

enter image description here
Help me, i new web developer stackoverflow, or what is it called to investigate, Look for it as "how to create a facebook-style notification bell"

Tags:

2

Answers


  1. 0

    maybe like this:

          .my-div{
        margin:40px;
      }
      .my-img{
        border-style:solid;
        border-width:2px;
        border-color:gray;
        margin:10px;
        width:100px;
        height:auto;
      }
      .my-ntf{
        display:inline-block;
        position: absolute;
        border-style:none;
        border-radius:50%;
        psdding:1px;
        padding-top:6px;
        padding-bottom:6px;
        font-family: Arial, Helvetica, sans-serif;
        font-weight:bold;
        margin-top:-5px;
        margin-left:-20px;
        padding-left:10px;
        padding-right:10px;
        background-color:red;
        color:white;
      }
       <div class="my-div">
     <img class="my-img" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
     <span class="my-ntf">7</span>
   </div>
    Login or Signup to reply.
  2. 0

    maybe like this:

          .my-div{
        margin:40px;
      }
      .my-img{
        border-style:solid;
        border-width:2px;
        border-color:gray;
        margin:10px;
        width:100px;
        height:auto;
      }
      .my-ntf{
        display:inline-block;
        position: absolute;
        border-style:solid;
        border-radius:30%;
        border-width:3px;
        border-color:white;
        padding:0px;
        padding-top:7px;
        padding-bottom:7px;
        font-family: Arial, Helvetica, sans-serif;
        font-weight:bold;
        margin-top:-10px;
        margin-left:-20px;
        padding-left:10px;
        padding-right:10px;
        background-color:red;
        color:white;
      }
    <div class="my-div">
     <img class="my-img" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
     <span class="my-ntf">7</span>
   </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search