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.
Related
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 design a shape as similar as the following image:
Here is my code:
.oval {
width: 100px;
display: inline-block;
height: 50px;
border: 1px solid red;
border-radius: 100px / 50px;
margin-left: -30px;
}
<div class="oval">aaa</div>
I have problem with the shared part.
Using a combination of both pseudo-elements, :before & :after, the intended layout can be achieved, as demonstrated in the embedded code snippet below.
Code Snippet Demonstration:
* {
box-sizing: border-box;
font-family: arial;
}
.oval:not(:first-child) {
margin-left: -30px;
}
.oval {
width: 100px;
display: inline-block;
height: 50px;
border: 1px solid red;
border-radius: 100px / 50px;
text-align: center;
position: relative;
overflow: hidden;
}
.oval:before,
.oval:after {
height: 20px;
width: 25px;
display: inline-block;
position: absolute;
right: 0;
font-size: 10px;
color: white;
}
.oval:before {
content: "C";
border-bottom-left-radius: 100%;
border-bottom-right-radius: 0px;
background: red;
bottom: 5px;
line-height: 15px;
}
.oval:after {
content: "R";
border-top-left-radius: 100%;
border-top-right-radius: 0px;
background: green;
top: 5px;
line-height: 25px;
}
/* Nested anchor tags */
.oval.nested-children:before,
.oval.nested-children:after {
display: none;
}
br + .oval.nested-children {
margin-left: 0px;
}
.oval a {
height: 20px;
width: 25px;
display: inline-block;
position: absolute;
right: 0;
font-size: 10px;
color: white;
z-index: 1;
}
.oval a:first-of-type {
border-bottom-left-radius: 100%;
border-bottom-right-radius: 0px;
background: red;
bottom: 5px;
line-height: 15px;
}
.oval a:last-of-type {
border-top-left-radius: 100%;
border-top-right-radius: 0px;
background: green;
top: 5px;
line-height: 25px;
}
<div class="oval">aaa</div>
<div class="oval">aaa</div>
<div class="oval">aaa</div>
<div class="oval">aaa</div>
<div class="oval">aaa</div>
<br><br>
<div class="oval nested-children">aaaCR</div>
<div class="oval nested-children">aaaCR</div>
<div class="oval nested-children">aaaCR</div>
<div class="oval nested-children">aaaCR</div>
<div class="oval nested-children">aaaCR</div>
Essential Properties:
overflow: hidden declared on containing elements (.oval)
position: relative declared on containing elements (.oval)
position: absolute declared on pseudo-elements
Applicable border-radius properties declared on relevant
pseudo-elements
Reference:
Psuedo-elements:
A CSS pseudo-element is a keyword added to a selector that lets
you style a specific part of the selected element(s). For example,
::first-line can be used to change the font of the first line of a
paragraph.
::after (:after):
In CSS, ::after creates a pseudo-element that is the last
child of the selected element. It is often used to add cosmetic
contentref to an element with the content property.
It is inline by default.
::before (:before):
In CSS, ::before creates a pseudo-element that is the first
child of the selected element. It is often used to add cosmetic
contentref to an element with the content property.
It is inline by default.
.oval {
width: 100px;
display: inline-block;
height: 50px;
border: 1px solid red;
border-radius: 100px / 50px;
}
.shared {
margin-left: -30px;
}
.oval-title {
text-transform: uppercase;
text-align: center;
margin: 0px;
}
<div class="oval">
<p class="oval-title">bcr</p>
</div>
<div class="oval shared">
<p class="oval-title">bod</p>
</div>
Well, how much of the image do you want to emulate? How's this for a start?
.oval {
width: 100px;
display: inline-block;
height: 50px;
border: 1px solid #573;
border-radius: 100px / 50px;
text-align:center;
overflow:hidden;
position:relative;
font:16px/20px 'Arial', sans-serif;
}
.oval.special {
background:linear-gradient(to right, rgba(255,255,255,0) 30%, rgba(128,128,128,.2));
color:#573;
}
.oval:not(:first-child) {
margin-left: -30px;
}
.oval::before {
position:absolute;
display:block;
border-radius: 50px 0 / 25px 0;
top:0; left:70px; width:100px; height:25px;
background:#573 linear-gradient(to right, #463, #683 30%); color: white;
font-size:.625em; line-height:31px;
content:'C';
text-align:center; text-indent:-70px;
}
.oval::after {
position:absolute;
display:block;
border-radius: 0 50px / 0 25px;
bottom:0; left:70px; width:100px; height:25px;
background:red linear-gradient(to right, #722, #A23 30%); color: white;
font-size:.625em; line-height:19px;
content:'R';
text-align:center; text-indent:-70px;
}
<div class="oval special">BCR</div><div class="oval special">BOD</div><div class="oval special">ASR</div><div class="oval special">EMV</div><div class="oval">STE</div><div class="oval">DVR</div><div class="oval">PVR</div>
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 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 making a titled box with css.
And my code is something like this.
I've ignored some attributes like width or height in my code.(Because I don't know why stackoverflow keeps telling me that I 've got too many codes here..)
.sponsor_info {
border-radius: 10px;
border: 1px solid #eeeeee;
width:200px;
height:50px;
padding: 0px;
}
.sponsor_info .headbar {
border-radius:10px 10px 0px 0px;
width:200px;
height: 40px;
margin-top: 0px;
background-color: #8BBE26;
}
.sponsor_info .headbar p {
font-size: 20px;
font-family: arial;
color:white;
line-height: 100%;
margin-left: 3%;
margin-top:0px;
}
<div class="sponsor_info">
<div class="headbar">
<p>Sponsor Info</p>
</div>
</div>
I can get something like below
The question now is: I don't know why there is some space between the outer grey border and the inner green bar.
.sponsor_info {
height: 200px;
border-radius: 10px;
border: 1px solid #eeeeee;
padding: 0px;
}
.sponsor_info .headbar {
height: 100px;
border-radius: 10px 10px 0px 0px;
margin-top: 0px;
background: #8BBE26;
}
.sponsor_info .headbar p {
line-height: 100px;
margin-left: 3%;
margin-top: 0px;
}
<div class="sponsor_info">
<div class="headbar">
<p>Sponsor Info</p>
</div>
</div>
change it to:
.sponsor_info .headbar p {
line-height: 100%;
margin-left: 3%;
margin-top: 0px;
}