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>
Related
I am having the weirdest problem: I am working on a portfolio page with images that should link to the various projects. There are 6 of these in total. Each of the images has a button that should live on top of it. When the button is hovered on by the user, it changes color, the cursor changes, and a popup with a short description of the project opens. When the button is clicked, there is an event listener that redirects to the project's page.
The problem is that in 2 out of the 6 instances, the moment I position the buttons inside the image, the buttons lose all functionality (including the event listener). As far as I can tell the code governing these 2 instances is the same as the other 4 where there is no such problem.
code where it doesn't work:
HTML:
<div class="container" id="linkTwo">
<img src="assets/images/bonez2.jpg" alt="bonez" style="width:200px; height:200px;" class="linkpic" >
<div class="btn1"id="btn1">Bone's Beatz<span id="bonezPop"> */some text that pops up/* </span></div>
</div>
CSS:
#linkTwo {
position: absolute;
top: 100px;
left: 230px;
}
#linkTwo #btn1:hover {
background-color: black;
}
#btn1 {
position: absolute;
left:20px;
padding-left: 23px;
padding-right: 23px;
}
#btn1 #bonezPop {
visibility: hidden;
width: 250px;
background-color: #883043;
color: #aa9e9e;
text-align: center;
border-radius: 6px;
border-style: solid;
border-color: black;
border-width: 2px;
padding: 5px 0;
position: absolute;
z-index: 1;
}
#btn1:hover #bonezPop {
visibility: visible;
}
.container #btn1 {
position: absolute;
top: -2px;
left: 20px;
font-size: 16px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 53px;
padding-right: 53px;
border: none;
cursor: pointer;
border-radius: 5px;
}
code that DOES work:
HTML:
<div class="container" id="linkFive">
<img src="assets/images/weather.jpg" alt="weather app" style="width:200px;height:200px;" class="linkpic">
<div class="btn3" id="btn3">Weather App<span id="weatherPop"> */some text that pops up */</span></div>
</div>
CSS:
#linkFive {
position: absolute;
top:320px;
}
#btn3 #weatherPop {
visibility: hidden;
width: 250px;
background-color: #883043;
color: #aa9e9e;
text-align: center;
border-radius: 6px;
border-style: solid;
border-color: black;
border-width: 2px;
padding: 5px 0;
position: absolute;
z-index: 1;
}
#btn3:hover #weatherPop {
visibility: visible;
}
#btn3 {
padding-left: 53px;
padding-right: 53px;
}
.container .btn3 {
position: absolute;
top: -2px;
left: 20px;
font-size: 16px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 60px;
padding-right: 40px;
border: none;
cursor: pointer;
border-radius: 5px;
}
.container .btn3:hover {
background-color: black;
}
I realize this whole thing would have been done much more easily with WordPress or some such, but this is a class assignment that requires I do this with code.
Thanks!
Short gif of how the problem looks
Found the answer. It was a different CSS rule that was for some reason breaking it:
.container {
position: relative;
width: 50%;
}
commenting this out solved the problem.
I have a "small" issue on my website with Firefox. On Google Chrome and Safari it is working just fine.
What it should be (Chrome and Safari):
Issue on Firefox:
.headline {
line-height: 1.5em;
position: relative;
}
.headline:after {
content: ' ';
position: absolute;
display: block;
width: 230px;
margin: 5px 2%;
border: 2px solid #64c800;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
left: 50%;
transform: translateX(-50%);
}
<h2><span class="headline">Contact</span></h2>
The expected result is that the green line should be below the header (in this case below "Contact".
Reproducible code:
Important forgotten note; I use Bootstrap 4 too.
<style>
#wrapper {
position: relative;
margin: 25px auto 5px auto;
max-width: 820px;
min-height: 600px;
padding: 1px 0px 30px 0px;
background-color: #ffffff;
color: #603813;
text-align: center;
}
.headline {
line-height: 1.5em;
position: relative;
}
.headline:after {
content: ' ';
position: absolute;
display: block;
width: 230px;
margin: 5px 2%;
border: 2px solid #64c800;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
left: 50%;
transform: translateX(-50%);
}
</style>
<div class="container-fluid">
<div class="row-fluid">
<div id="wrapper">
<div class="row">
<div class="col-md-12">
<h2><span class="headline">Contact</span></h2>
</div>
</div>
</div>
</div>
I think the problem is that you don't define a vertical position (top or bottom) for your line, so the browser kinda just does anything.
Try adding
.headline:after {
top: 100%;
}
JSFiddle: https://jsfiddle.net/0p7948Lx/2/
I can't reproduce your issue in Firefox 60.8 on Debian. However, here is a somewhat simplified approach that works without position, transform and border. I find it a little more elegant.
Maybe it fixes the issue as well?
h2 {
width: 230px;
text-align: center;
}
.headline {
line-height: 1.5em;
}
.headline:after {
content: '';
display: block;
width: 100%;
height: 8px;
margin-top: 1em;
background: #64c800;
border-radius: 4px;
}
<h2><span class="headline">Contact</span></h2>
I want to make a circle <div>, like this image:
I have tried this code.
.discussion:after {
content: '\2807';
font-size: 1em;
background: #2d3446;
width: 20px;
height: 20px;
border-radius: 100px;
color:white;
}
<div class="discussion"></div>
How can I do this correctly?
You could just use :after pseudo-element with content: '•••' and transform: rotate. Note that this is the bullet HTML special character •, or \u2022.
div {
position: relative;
background: #3F3C53;
width: 50px;
height: 50px;
color: white;
border-radius: 50%;
box-shadow: 0px 0px 15px 1px #4185BC;
margin: 50px;
}
div:after {
content: '•••';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(90deg);
font-size: 15px;
letter-spacing: 4px;
margin-top: 2px;
}
<div></div>
Improving on Nenad Vracar's answer, here's one that doesn't use text (so it's font-independent) and everything is centered nicely:
div {
position: relative;
background: #3F3C53;
width: 50px;
height: 50px;
border-radius: 50%;
box-shadow: 0px 0px 15px 1px #4185BC;
margin: 50px;
}
div:after {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 2px;
height: 2px;
margin-left: -1px;
margin-top: -1px;
background-color: white;
border-radius: 50%;
box-shadow: 0 0 0 2px white, 0 11px 0 2px white, 0 -11px 0 2px white;
}
<div></div>
Yet another answer, same as others except:
it uses the vertical ellipsis character (U+22EE)
text-align and line-height to center the content
does not use any pixel value
.discussion:after {
content: "\22EE";
/* box model */
display: inline-block;
width: 1em;
height: 1em;
/* decoration */
color: #FFFFFF;
background-color: #000000;
border-radius: 50%;
/* center align */
line-height: 1;
text-align: center;
}
<div class="discussion"></div>
<div class="discussion" style="font-size: 2em;"></div>
<div class="discussion" style="font-size: 3em;"></div>
<div class="discussion" style="font-size: 4em;"></div>
Note that U+2807 is actually a Braille pattern and the dots are not supposed to be centered.
Use this code.
.discussion {
width: 20px;
height: 20px;
border-radius: 50%;
position: relative;
background: #2d3446;
}
.discussion:after {
content: '\22EE';
font-size: 1em;
font-weight: 800;
color: white;
position: absolute;
left: 7px;
top: 1px;
}
<div class="discussion"></div>
Hope this helps!
I hope this is what you wanted! Otherwise feel free to ask.
.discussion{
display: block; /* needed to make width and height work */
background: #2d3446;
width: 25px;
height: 25px;
border-radius: 100px;
display: flex;
align-items: center;
justify-content: center;
}
.discussion:after {
content: '\2807';
font-size: 1em;
color: white;
margin-left: 15%;
}
<div class="discussion"></div>
Using text dots
.discussion{
width:50px;
height:50px;
text-align:center;
background-color:black;
border: 2px solid red;
border-radius: 100%;
}
.discussion text{
writing-mode: tb-rl;
margin-top:0.4em;
margin-left:0.45em;
font-weight:bold;
font-size:2em;
color:white;
}
<div class="discussion"><text>...</text></div>
.discussion:after {
content: '\2807';
font-size: 1em;
display: inline-block;
text-align: center;
background: #2d3446;
width: 20px;
height: 20px;
border-radius: 50%;
color: white;
padding:3px;
}
<div class="discussion"></div>
I have deleted (i found how to do it) all my post, the following code works for 3 vertical dot into a black circle
.discussion:after{
display:inline-block;
content:'\22EE';
line-height:100%;
border-radius: 50%;
margin-left:10px;
/********/
font-size: 1em;
background: #2d3446;
width: 20px;
height: 20px;
color:white;
}
<div class="discussion"></div>
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 want to have two buble speech togethers and and with the some extra information.
Image below
This is my code for doing this:
I have a demo for this here: http://jsfiddle.net/pZh4w/
<style>
.bubble
{
position: relative;
width: 525px;
height: 130px;
padding: 4px;
background: #FFFFFF;
-webkit-border-radius: 31px;
-moz-border-radius: 31px;
border-radius: 31px;
border: #46A5E4 solid 9px;
display:inline-block;
margin-bottom: 0px;
margin-right: 50px;
}
.test
{
margin-bottom: 0px;
margin-left: 850px;
}
.test1
{
margin-bottom: 20px;
margin-left: 850px;
}
.tes
{
margin-bottom: 0px;
margin-left: 250px;
}
.tes1
{
margin-bottom: 20px;
margin-left: 250px;
}
</style>
Thanks for your help.
Here is something to get you started.
I would suggest the following HTML:
<div class="bubble">
<p>First paragraph</p>
<div class="caption">
<h1>By PEDE</h1>
<h2>From Belgrade,MT</h2>
<h3>September 25,2013</h3>
</div>
</div>
and start with the following CSS:
.bubble-panel {
display: inline-block;
border: 1px dotted #CCCCCC;
height: 250px;
position: relative;
margin: 20px;
}
.bubble {
width: 525px;
height: 130px;
padding: 4px;
background: #FFFFFF;
-webkit-border-radius: 31px;
-moz-border-radius: 31px;
border-radius: 31px;
border: #46A5E4 solid 9px;
display:inline-block;
}
.caption {
border: 1px solid red;
width: 20em;
font-size: 14px;
line-height: 1.5;
position: absolute;
bottom: 0px;
right: 0px;
}
.caption h1, .caption h2, .caption h3 {
font-size: 1.00em;
text-align: center;
margin: 0;
}
See demo at: http://jsfiddle.net/audetwebdesign/rcNN6/
The net result gives something like:
The speech bubble decoration (the little triangular bit that sticks out) can be built
by following the ideas presented at: http://nicolasgallagher.com/pure-css-speech-bubbles/demo/
The trick is to wrap the bubble and caption texts in a inline-block wrapper of fixed height. These can then form a 2x2 grid if the screen is wide enough.