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>
Related
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.
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 have different div's which looks like this:
<div class="marker marker-availability" style="left: 975.516px; top: 346.265px;">
<span class="marker-label">Tenten comfort</span>
<div style="background-color:#7ba1bc" class="cluster-background">
<span class="marker-id">81</span>
</div>
</div>
<div class="marker marker-availability">
<span class="marker-label">Standaard kampeerplaatsen</span>
<div style="background-color:#d99200" class="cluster-background">
<span class="marker-id">81</span>
</div>
</div>
But now I have an issue because I set an :after with an image to the bottom of the image which looks like this:
Now you see the issue very clear, I tried to set the height to auto and set an min-height but this will not solve the problem.
I have recreated a jsfiddle: jsfiddle
Here is my less code:
&.marker-availability {
display: block;
width: 120px;
height: 23px;
color: #fff;
background-color: #6f6926;
border: 2px solid #fff;
border-radius: 2px;
margin-left: -60px;
margin-top: -26px;
.marker-label {
margin-top: 1px;
margin-left: 1px;
font-size: 12px;
font-weight: 500;
color: #fff;
}
.cluster-background {
.square(25px);
background-color: black;
color: #fff;
margin-top: -30px;
margin-left: -12px;
border-radius: 50%;
&:after {
.retina-image('/img/map/clustermarker-point.png', '/img/map/clustermarker-pointx2.png', 184px, 55px);
.pos-b-l(-26px, 50%);
.translate(-50%, -50%);
content: "";
display: block;
width: 120px;
height: 20px;
background-repeat: no-repeat;
}
}
.marker-id {
padding-top: 1px;
padding-left: 1px;
font-size: 15px;
}
}
Thereby, my question is it possible to make it look like this:
Or is it not possible because of the position of the :after image
The problem was primarily your negative margins which should be avoided if possible.
I've updated your example, you just need to adjust the paddings:
https://jsfiddle.net/txsv0ha5/
removed:
margin-top: -30px;
margin-left: -12px;
Also your bottom background shouldn't be an :after Element of your colored circles but rather of the whole marker itself.
You have some trouble with your css.
The main problem is the negative margin. If you do so, all the height of the parent is reduce. So, you need to add position:absolute.
Change the :after element to the parent so it will relative to the parent and not connected to the cluster-background.
.marker-availability {
display: block;
width: 120px;
min-height: 23px;
color: #fff;
background-color: #6f6926;
border: 2px solid #fff;
border-radius: 2px;
margin-top: 26px;
position:absolute;
}
.marker-availability .marker-label {
margin-top: 1px;
margin-left: 1px;
font-size: 12px;
font-weight: 500;
color: #fff;
}
.marker-availability .cluster-background {
width: 25px;
height: 25px;
background-color: black;
color: #fff;
margin-top: -50px;
margin-left: -12px;
border-radius: 50%;
position:absolute;
}
.marker-availability:after {
background: url('http://i65.tinypic.com/bhytdd.png');
position: absolute;
bottom: -26px;
left: 50%;
transform: translate(-50%, -50%);
content: "";
display: block;
width: 120px;
height: 20px;
background-repeat: no-repeat;
}
.marker-availability .marker-id {
padding-top: 1px;
padding-left: 1px;
font-size: 15px;
}
<body style="background-color: black">
<div class="marker marker-availability" style="left: 975.516px; top: 346.265px;"><span class="marker-label">Tenten comfort</span><div style="background-color:#7ba1bc" class="cluster-background"><span class="marker-id">81</span></div></div>
<div class="marker marker-availability"><span class="marker-label">Standaard kampeerplaatsen</span><div style="background-color:#d99200" class="cluster-background"><span class="marker-id">81</span></div></div>
</body>
I'm trying to create the image in the link with only html and css. There are a number of elements that would need to "stack" on top of one another.
I am having a difficult time understanding inheritance, nesting, etc. Here's the code I've written so far:
.heart {
position: relative;
margin-top: 20px;
background-color: #000000;
opacity: .8;
width: 65px;
height: 30px;
border-radius: 15px;
display: inline;
}
.box {
margin: 75px auto;
position: relative;
height: 490px;
width: 700px;
background-color: #18a0ff;
box-shadow: 1px 15px 50px 2px;
display: flex;
}
.thumbnail_image {
position: absolute;
float: left;
display: inline-block;
top: 0px;
left: 0px;
}
.text_container {
top: 60px;
left: 200px;
right: 100px;
width: 400px;
height: 338px;
position: relative;
display: flex;
}
h1 {
font-color: #ffffff !important;
text-transform: uppercase;
font-size: 60px;
font-family: Montserrat;
font-weight: 700;
line-height: 1.1;
text-align: left;
}
<div class="box">
<div class="heart">
</div>
<div class="thumbnail_image">
<img src="http://res.cloudinary.com/dp32vpqfu/image/upload/v1457298445/Sheldon_Pic_l3cprk.jpg">
</div>
<div class="text_container">
<h1>Don't You think that if I were wrong, I'd know it?</h1>
</div>
</div>
My concern is how to properly place the heart dialog, the text container, and the image overlay. I seem to be misunderstanding proper inheritance syntax or structure.
Use position:absolute; on heart dialog, text container, and image overlay elements and then position them correctly with the left and right properties.
Absolute positioning and z-index are the key words involved in stacking images with HTML and CSS.
I went ahead and mocked up your image with some html/css to give you an idea of implementation.
Z-index is not relevant in this particular example since you only require one layer above the base, which is automatically given to you with absolute positioning, however if you had multiple layers you would need to set the z-index to a number value where lower numbered z-indexes appear at the bottom and higher z-indexes appear at the top.
Here's my code, hope it helps:
body {
background-color: grey;
}
.container {
position:fixed;
height: 500px;
width: 700px;
background-image: url(http://i.stack.imgur.com/MS8X8.png);
background-position: 46% 52%;
background-size: 150%
}
.hearts {
position: absolute;
background-color: rgba(149, 165, 166,.5);
color: white;
right: 40px;
top: 15px;
padding: 15px 25px 15px 25px;
border-radius: 15px
}
.blue {
width: 550px;
height: 500px;
background-color: rgb(102,173,255);
float: right;
}
h1, h5 {
position: absolute;
font-family: sans-serif;
color: white;
text-transform: uppercase;
}
#quote {
left: 200px;
top: 30px;
font-size: 60px;
}
#attr {
left: 200px;
top: 450px;
}
<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" href = "main.css">
</head>
<body>
<div class = "container">
<div class = "hearts">423</div>
<div class = "blue">
<h1 id = "quote">don't you <br> think that <br> if i were </br>wrong,<br> i'd know it?</h1>
<h5 id = "attr">-Sheldon Cooper</h5>
</div>
</div>
</body>
</html>
Understanding the stacking order
In your case, the natural stacking order will do the job; this is nicely explained over on the MDN. The main thing to understand is that elements will overlap those that come before them in the markup. This is better explained with a simple example:
div {
position: absolute;
background: red;
height: 100px;
width: 100px;
top: 0;
left: 0;
}
.two {
background: blue;
top: 10px;
left: 20px;
}
.three {
background: green;
top: 20px;
left: 40px;
}
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
With that out of the way...
Let's make these!
Feel free to jump to the complete example at the end of this answer!
Want to use some pedantic semantics?
A <blockquote> element to wrap everything together in a semantic container.
A <nav> element to contain the back and forward navigation
A <cite> element that contains the name of the person quoted
Our markup now looks like this:
<blockquote>
<p>Don't You think that if I were wrong, I'd know it?</p>
<cite>Sheldon Cooper</cite>
<a href="#" class="love-counter">
<3 123
</a>
<nav>
Previous
Next
</nav>
</blockquote>
The CSS
Main background image and color
These can be placed as a background on the blockquote itself. You can use background-size to ensure that the image always has the same dimensions. (It will obviously distort images which have an incorrect size)
blockquote {
background: #18a0ff url(image-url) no-repeat;
background-size: 170px 490px;
}
Add the transparent grey background and quotation character
This can be added with a absolutely positioned before pseudo-element of blockquote. The element is stretched out with left / right / bottom along with a width that matches the image. The transparent grey overlay and transparent text is provided by rgba color.
blockquote:before {
content: '\201C';
position: absolute;
left: 0;
top: 0;
bottom: 0;
padding-top: 30px;
font-size: 2.4em;
text-align: center;
background: rgba(0,0,0,0.7);
width: 170px;
color: rgba(255,255,255,0.3);
}
Align the main quote text along with its citation
In order to incorporate smaller quotes, it could be more visually pleasing to vertically center the main text. We can use the display: flex property along with justify-content to easily achieve this; the flex-direction: column property stacks the main quote over the top of the citation. The blockquote is also given left and right padding to appropriately position it horizontally.
blockquote {
display: flex;
justify-content: center;
flex-direction: column;
padding: 0 140px 0 200px;
}
Position the back / forward navigation and love counter
These are easily located with position: absolute along with the appropriate left / right / bottom / top properties. They will look something like this:
.love-counter {
position: absolute;
right: 20px;
top: 20px;
}
nav {
position: absolute;
left: 0px;
bottom: 20px;
}
Complete example
Compatibility: IE 11+ and all modern browsers.
You might consider a javascript method to shrink the font size for larger quotes.
#import url(https://fonts.googleapis.com/css?family=Passion+One:400,700);
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
blockquote {
background: #18a0ff url(http://i.stack.imgur.com/e3nDc.jpg) no-repeat;
background-size: 170px 490px;
height: 490px;
color: #FFF;
font-family: 'Passion One', cursive;
font-size: 4.2em;
position: relative;
display: flex;
justify-content: center;
flex-direction: column;
padding: 0 140px 0 200px;
font-weight: 400;
line-height: 1;
width: 650px;
text-transform: uppercase;
}
blockquote p {
margin: 0;
margin-top: 0.75em;
}
cite {
font-size: 0.25em;
font-weight: 400;
margin-top: 2em;
}
cite:before {
content: '\2014 '
}
blockquote:before {
content: '\201C';
font-size: 2.4em;
padding-top: 30px;
text-align: center;
background: rgba(0, 0, 0, 0.7);
width: 170px;
color: rgba(255, 255, 255, 0.3);
position: absolute;
left: 0;
top: 0;
bottom: 0;
}
.love-counter {
color: #FFF;
text-decoration: none;
font-size: 0.2em;
position: absolute;
right: 20px;
top: 20px;
font-family: helvetica;
font-weight: bold;
background: rgba(0, 0, 0, 0.2);
padding: 0 10px;
border-radius: 10px;
height: 30px;
line-height: 30px;
min-width: 60px
}
nav {
position: absolute;
left: 0px;
bottom: 20px;
font-size: 0;
width: 170px;
text-align: center;
}
nav a:before,
nav a:after {
font-size: 36px;
width: 50%;
display: inline-block;
color: #FFF;
}
nav a:first-child:before {
content: '<';
}
nav a:last-child:after {
content: '>';
}
.x-large {
background-image: url(http://i.stack.imgur.com/qWm5m.jpg);
}
.x-large p {
font-size: 0.62em;
}
<blockquote>
<p>Don't You think that if I were wrong, I'd know it?</p>
<cite>Sheldon Cooper</cite>
<3 123
<nav>
Previous
Next
</nav>
</blockquote>
<h2>Larger quote</h2>
<blockquote class="x-large">
<p>Two things are infinite: the universe and human stupidity; and I'm not sure about the universe.</p>
<cite>Albert Einstein</cite>
<3 123
<nav>
Previous
Next
</nav>
</blockquote>
html,
body,
box,
thumbnail_image,
overlay,
h1,
h3,
h6,
p,
body {
width: 100%;
padding-bottom: 25px;
}
input {
font-family: "Roboto";
position: absolute;
top;
25.5px;
font-weight: 700;
font-size: 14px;
color: #fff;
background-color: transparent;
text-align: right;
border-width: 0;
width: 100%;
margin: 0 0 .1em 0;
}
.heart_button {
position: absolute;
top: 25.5px;
right: 55px;
}
heart_button:hover,
heart_button:active,
heart_button:focus {
color: #dd0239;
}
.heart_background {
position: absolute;
top: 20px;
right: 20px;
background-color: #000000;
opacity: .1;
width: 65px;
height: 30px;
border-radius: 15px;
}
.box {
margin: 30px auto;
position: relative;
height: 490px;
width: 700px;
background-color: #18a0ff;
box-shadow: 1px 15px 50px 2px;
}
.quote_image {
position: absolute;
opacity: .1;
top: 62px;
left: 51px;
}
.image_overlay {
background-color: #282a37;
width: 170px;
height: 490px;
position: absolute;
float: left;
}
.thumbnail_image {
position: absolute;
float: left;
opacity: .12;
display: inline-block;
top: 0px;
left: 0px;
}
.text_container {
left: 200px;
width: 400px;
height: 338px;
position: absolute;
}
h1 {
color: #fff;
text-transform: uppercase;
font-size: 60px;
font-family: Montserrat;
font-weight: 700;
line-height: 1.1;
text-align: left;
}
.author_name {
position: absolute;
left: 206px;
bottom: 0px;
}
h3 {
font-family: Open Sans;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
font-size: 14px;
text-align: left;
color: #fff;
}
p {
font-family: "Roboto";
font-weight: 700;
font-size: 14px;
color: #fff;
text-align: center;
}
h6 {
font-family: Open Sans;
font-weight: light;
font-size: 22px;
letter-spacing: 2px;
text-transform: uppercase;
text-align: center;
}
html {
background: linear-gradient(209deg, #E5ECEF 40%, #BBC2C5 100%) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#footer {
clear: both;
}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,800' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="box">
<div class="heart_button">
<img src="http://res.cloudinary.com/dp32vpqfu/image/upload/v1457311522/little_heart_jle1j3.png">
</div>
<div class="heart_background">
</div>
<div class="image_overlay">
</div>
<div class="thumbnail_image">
<img src="http://res.cloudinary.com/dp32vpqfu/image/upload/v1457298445/Sheldon_Pic_l3cprk.jpg">
</div>
<div class="text_container">
<h1>Don't You think that if I were wrong, I'd know it?</h1>
</div>
<div class="author_name">
<h3> - Sheldon Cooper </h3>
</div>
<div class="quote_image">
<img src="http://res.cloudinary.com/dp32vpqfu/image/upload/v1457314397/quotations_image_wfwimc.png">
</div>
</div>
</body>
<footer>
<div>
<h6>A Project by Charles Bateman</h6>
</div>
</footer>
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>