I am facing that issue here with my navbar.
I am adding a style nav-link and notification
My fonts become bigger and it starts using the active btn style.
<li class="nav-item">
<a class="nav-link, notification" [routerLinkActive]="['active']" [routerLink]="
['/company/conversation']">Communication <span class="badge-com">3</span> </a>
</li>
this is what I add to style
.notification {
text-decoration: none;
padding: 15px 26px;
position: relative;
display: inline-block;
border-radius: 2px;
}
.notification:hover {
background: red;
}
.notification .badge {
position: absolute;
top: -10px;
right: -10px;
padding: 5px 10px;
border-radius: 50%;
background: red;
color: white;
}
What are the ways to solve that issue?
thanks!!!
.notification .badge {
position: absolute;
top: -10px;
right: -10px;
padding: 5px 10px;
border-radius: 50%;
background: red;
color: white;
font-size: 10px; /* added font-size */
}
in code its batch-com and in CSS it's batch. I wonder how it worked.
THere was a badge class already, so I just had to add some colors there and it is all done.
Related
Problem:
Position absolute with parent align center is not working in IE, but working in Chrome/Safari.
Expected:
Should behave the same with IE 11 browser.
IE 11 screenshot
.selectContainer {
position: relative;
display: flex;
align-items: center;
}
.selectContainer .select {
border: 1px solid #8e99ab;
border-radius: 4px;
font-size: 1rem;
width: 100%;
background-color: #fff;
height: 50px;
padding: 12px 42px 12px 12px;
}
.selectContainer i {
color: #707070;
background: red;
position: absolute;
right: 0px;
padding: 0 16px;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="selectContainer">
<select name="" id="" class="select"></select>
<i class="fa fa-sort"></i>
</div>
You can use top:50%;transform:translateY(-50%); for .selectContainer i I tested it.
.selectContainer i {
color: #707070;
background: red;
position: absolute;
right: 0px;
padding: 0 16px;
top: 50%;
transform: translateY(-50%);
}
You could add the CSS bottom: 16px; property to the .selectContainer i, like this:
.selectContainer i {
color: #707070;
background: red;
position: absolute;
right: 0px;
bottom: 16px;
padding: 0 16px;
}
The sample output in IE11 browser:
I have an website and wanted to add a whatsapp icon to the left side of my screen as shown in the image below:
Down below the html code is for adding the whatsapp icon
<a class="whats-app" href="#" target="_blank">
<i class="fa fa-whatsapp my-float"></i>
</a>
and this is the css styling I have used
.whats-app {
position: fixed;
width: 60px;
height: 60px;
bottom: 40px;
right: 15px;
background-color: #25d366;
color: #FFF;
border-radius: 50px;
text-align: center;
font-size: 30px;
box-shadow: 2px 2px 3px #999;
z-index: 100;
}
.my-float {
margin-top: 16px;
}
From the above css and html this is the outcome: . In css I changed left:15px from right:15px but still the second image.
Can I know where it went wrong?
Though I have commented the above css then also it is showing the whats app icon and css properties in the console
Try with this CSS.
.whats-app {
position: fixed;
width: 50px;
height: 50px;
bottom: 40px;
background-color: #25d366;
color: #FFF;
border-radius: 50px;
text-align: center;
font-size: 30px;
box-shadow: 3px 4px 3px #999;
left: 15px;
z-index: 100;
}
.my-float {
margin-top: 10px;
}
try this.. here i unset the right value
css
.whats-app {
position: fixed;
width: 60px;
height: 60px;
bottom: 40px;
left:0;
right:unset;
background-color: #25d366;
color: #FFF;
border-radius: 50px;
text-align: center;
font-size: 30px;
box-shadow: 2px 2px 3px #999;
z-index: 100;
}
.my-float {
margin-top: 16px;
}
You needs to add left: 0 or left: (pixels you want) in .whats-app css. and needs to remove right: 15px from css
Try this hope it will help you.
.whats-app {
position: fixed;
width: 60px;
height: 60px;
bottom: 40px;
background-color: #25d366;
color: #FFF;
border-radius: 50px;
text-align: center;
font-size: 30px;
box-shadow: 2px 2px 3px #999;
z-index: 100;
left: 15px;
}
.my-float {
margin-top: 16px;
}
<a class="whats-app" href="#" target="_blank">
<i class="fa fa-whatsapp my-float"></i>
</a>
You can do something like the below code.
.icon-bar {
position: fixed;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.icon-bar a {
display: block;
padding: 16px;
color: #448edd;
border-radius: 50px;
}
.whatsapp {
background: #53d365;
color: #448edd;
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="icon-bar">
<i class="fa fa-whatsapp"></i>
</div>
I was studying how to make static navigation bars and managed to get up to this
https://jsfiddle.net/dm310tau/
.bottom-bar
{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
position: fixed;
z-index: 100;
bottom: 10px;
left: 0;
width: 100%;
height: 35px;
color: #999999;
background-color: #101010;
}
.bottom-bar li
{
float: left;
}
.bottom-bar a
{
display: block;
color: #999999;
text-align: center;
font-size: medium;
padding: 6px 16px;
text-decoration: none;
border: 1px solid transparent;
}
.bottom-bar a:hover:not(.active)
{
color: #EFEFEF;
border: 1px solid #AAAAAA;
}
.bottom-bar .active
{
color: #FEFEFE;
background-color: #303030;
padding: 3px 16px 8px 16px;
border: 1px solid #EEEEEE;
}
.bottom-bar .active:after
{
}
<ul class = "bottom-bar">
<li class = "bottom-link">
<a class = "active"
href = "/one">
One
</a>
</li>
<li class = "bottom-link">
<a href = "/two">
Two
</a>
</li>
<li class = "bottom-link">
<a href = "/three">
Three
</a>
</li>
</ul>
As the next step I was trying to make it so that active bar ends up a little bit taller like so,
However, I am not sure where is the first place to look for something like this. I have explored option of using
.bottom-bar .active:after, but, unfortunately, because the bar is supposed to be static, I can not make the part pop up a little bit higher by using a border like I have seen it done on other websites.
I do understand that I can do a few of these using Bootstrap, but that is not my intention. I would like to learn CSS instead of just using what's there and not understanding what is going on behind the scenes.
This works in Chrome at least. The comments explain what is happening.
<!DOCTYPE HTML>
<html>
<head>
<style>
#footer {
width: 100%;
height: 35px;
background-color: black;
position: fixed;
left: 0;
bottom: 0;
padding: 5px 0 0 20px; //top right bottom left
}
.link {
color: gray;
margin-right: 10px;
padding: 5px;
float: left;
position: relative;
}
.active {
color: white;
height: 50px;
border-bottom: none;
border-radius: 5px 5px 0 0;
}
.active:after { /*or :before*/
content: ""; /*allows shape to display*/
display: block;
width: 100%; /*cover element*/
top: -20px; /*position as you would like, just to show the difference*/
left: 0;
position: absolute;
height: 60px;
border: 1px solid white;
border-radius: 5px;
background-color: black;
z-index: -1; /*place behind element*/
}
</style>
</head>
<body>
<div id="footer">
<div id="links">
<div class="link active">Contact</div>
<div class="link">About</div>
<div class="link">Support me!</div>
</div>
</div>
</body>
</html>
I'm trying to float a number on the right top of an image.
I want this number to have a background-color and overlay on top of a small portion of the image on the right top corner.
I have tried :
<li class=topoulimg><span id=bell><img src=img-img/bell.png alt=alerts></span><span class=bellnumbers>10</span></li>
css
.bellnumbers{
float:right;
font-size:12px;
background-color:red;
width:10px;
height:10px;
color:#fff;
}
but it is not working.
http://jsfiddle.net/yv5q4gvm/
Use position:absolute instead float:right for your badge (Adjust your needs).
CSS
.bell {
display: inline-block;
position: relative;
width:64px;
}
.bellnumbers {
position: absolute;
font-size:12px;
background-color:red;
width:14px;
height:14px;
color:#fff;
top: -4px;
right: -4px;
}
The float CSS property specifies that an element should be taken from
the normal flow and placed along the left or right side of its
container, where text and inline elements will wrap around it.
DEMO HERE
You can try this...
<span class="bell">
<img src=https://cdn4.iconfinder.com/data/icons/simplicio/64x64/message.png alt=alerts>
<span class="bellnumbers">10</span>
</span>
.bell {
display: inline-block;
position: relative;
background-color: #eee;
width: 48px;
height: 42px;
text-align: center;
padding-top: 6px;
}
.bell img {
width: 24px;
height: 24px;
padding-top: 10px;
}
.bellnumbers {
font-size:12px;
background-color:red;
width:16px;
line-height: 16px;
text-align: center;
color:#fff;
z-index: 2;
border-radius: 3px;
position: absolute;
left: 28px;
}
JSFiddle
Insert content from html attribute (data-count).
<button data-count="16"></button>
Insert content before every <button> element's content, and style the inserted content:
button:before {
content: attr(data-count);
}
See the live example below:
button {
position: relative;
width: 64px;
height: 64px;
margin: 10px;
background-image: url("https://cdn4.iconfinder.com/data/icons/simplicio/64x64/message.png");
background-color: white
}
button:before {
content: attr(data-count);
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
display: block;
border-radius: 20%;
background: #FF9727;
border: 1px solid #FFF;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
color: #FFF;
position: absolute;
top: -10px;
left: -10px;
}
button.bell-top-right:before {
left: auto;
right: -10px;
}
button.bell-bottom-right:before {
left: auto;
top: auto;
right: -10px;
bottom: -10px;
}
button.bell-bottom-left:before {
top: auto;
bottom: -10px;
}
<button data-count="16" class="bell-top-right"></button>
<button data-count="16" class="bell-bottom-right"></button>
<button data-count="16"></button>
<button data-count="16" class="bell-bottom-left"></button>
try this.. perhaps it will solve your purpose (try bootstrap badges that can be a help to)
<li>
<span class=bell>
<img src="https://cdn4.iconfinder.com/data/icons/simplicio/64x64/message.png">
<span class=bellnumbers>10</span>
</span>
</li>
<style>
.bellnumbers{
vertical-align: top;
font-size:17px;
letter-spacing: 3px;
background-color:#F06861;
width:27px;
height:22px;
color:#fff;
border-radius: 3px;
padding-top: 3px;
text-align: center;
position: absolute;
margin-left: -1%;
margin-top: -5px;
}
.bell{
width:64px;
margin-top: 5%;
}
</style>
As others have shown, absolute/relative positioning and 'inline-block' on the li are ideal for this. I've got the code trimmed down quite a bit, however. Demo here: https://jsfiddle.net/r09d314v/
<style type="text/css">
li {
display: inline-block;
list-style-type: none;
position: relative;
}
span {
position: absolute;
top: -8px;
right: -10px;
background: red;
color: white;
padding: 2px;
}
</style>
<li>
<img src="https://cdn4.iconfinder.com/data/icons/simplicio/64x64/message.png">
<span class="number">11</span>
</li>
I have a notification icon (font-awesome) which shows the number of notifications.
I am having a problem trying to get the number to display in the correct position, as shown in see below image
I need the text to be smaller and move right and up a little...
here is the code
.header .bubble {
border-radius: 100%;
height: 14px;
width: 14px;
background-color: rgba(226, 32, 91, 0.77);
color: #ffffff;
text-align: top;
position: relative;
top: 0px;
float: right;
right: -3px;
}
<a href="javascript:;" id="notification-center" class="icon-set globe-fill" data-toggle="dropdown"><span class="bubble">2</span>
Can anyone help, I am new to this.
example1: using background image
The best way to do this is to use position:absolute to child span of parent anchor.
a.notif {
position: relative;
display: block;
height: 50px;
width: 50px;
background: url('http://i.imgur.com/evpC48G.png');
background-size: contain;
text-decoration: none;
}
.num {
position: absolute;
right: 11px;
top: 6px;
color: #fff;
}
<span class="num">2</span>
example2: using font awesome icon
If you want to use font-awesome icon
this is code for it
a.fa-globe {
position: relative;
font-size: 2em;
color: grey;
cursor: pointer;
}
span.fa-comment {
position: absolute;
font-size: 0.6em;
top: -4px;
color: red;
right: -4px;
}
span.num {
position: absolute;
font-size: 0.3em;
top: 1px;
color: #fff;
right: 2px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<a class="fa fa-globe">
<span class="fa fa-comment"></span>
<span class="num">2</span>
</a>