Overflow wrap not being applied to text - html

Issue
I currently have a side menu that I have built using Angular and it works pretty well on my screen (4k resolution). Problem being on smaller screens the text in the menu doesn't wrap so it overflows the container div. I have tried applying overflow-wrap: break-word; to the text but that is not working.
Any assistance would be greatly appreciated.
You can see the issue below:
Code
HTML of the component:
<div class="sidebar animated fadeIn">
<div class="header">
<div style="display:block;margin-left:auto;margin-right:auto;width:100%;">
<img src="../../../assets/images/logo.svg" style="width:100%" />
</div>
</div>
<div class="spacer"></div>
<div class="menu-item" *ngFor="let item of items" (click)="goTo(item.path)">
<i class="material-icons">{{item.icon}}</i>
<h3 class="text">{{item.name}}</h3>
</div>
</div>
Styling of the component:
.sidebar {
position: absolute;
top: 0;
bottom: 0;
left: 0;
z-index: 2;
width: 10%;
background: rgba(191, 158, 69, 1);
background: -moz-linear-gradient(top, rgba(191, 158, 69, 1) 0%, rgba(250, 239, 210, 1) 100%);
background: -webkit-gradient(
left top,
left bottom,
color-stop(0%, rgba(191, 158, 69, 1)),
color-stop(100%, rgba(250, 239, 210, 1))
);
background: -webkit-linear-gradient(bottom, rgba(191, 158, 69, 1) 0%, rgba(250, 239, 210, 1) 100%);
background: -o-linear-gradient(bottom, rgba(191, 158, 69, 1) 0%, rgba(250, 239, 210, 1) 100%);
background: -ms-linear-gradient(bottom, rgba(191, 158, 69, 1) 0%, rgba(250, 239, 210, 1) 100%);
background: linear-gradient(to top, rgba(191, 158, 69, 1) 0%, rgba(250, 239, 210, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf9e45', endColorstr='#faefd2', GradientType=0 );
box-shadow: 5px 0 15px rgba(0, 0, 0, 0.5);
}
.header {
width: 100%;
}
.spacer {
margin-top: 3em;
}
.menu-item {
border-top: 1px solid darkgray;
padding-left: 2em;
height: 3em;
display: flex;
align-items: center;
cursor: pointer;
}
.menu-item .text {
margin-left: auto;
margin-right: auto;
overflow-wrap: break-word;
}


Add this property word-break: break-all;
.menu-item .text {
margin-left: auto;
margin-right: auto;
/*overflow-wrap: break-word;*/
word-break: break-all;
}

Related

CSS - Change 'Handle' on Bubbles

I'm modifying some CSS/HTML that I found here that displays a iOS style chat message with bubbles. I wanted to swap the alignment of the blue and green bubbles which I've managed to do but the only thing I'm not sure about is how to change the little "handle" that appears in the bottom left and right corners around as well.
Here's how it currently looks:
/* Bit of normalisation */
body {
background-color: #eee;
color: #222;
font: 0.8125em/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
img {
display: block;
height: auto;
max-width: 100%;
}
.container {
padding: 40px 20px;
margin: 0 auto;
width: 400px;
}
/* .bubble */
.bubble {
background-image: linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
background-image: -o-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
background-image: -moz-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
background-image: -ms-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.25, rgb(210,244,254)),
color-stop(1, rgb(149,194,253))
);
border: solid 1px rgba(0, 0, 0, 0.5);
/* vendor rules */
border-radius: 20px;
/* vendor rules */
box-shadow: inset 0 5px 5px rgba(255, 255, 255, 0.4), 0 1px 3px rgba(0, 0, 0, 0.2);
/* vendor rules */
box-sizing: border-box;
clear: both;
float: right;
margin-bottom: 20px;
padding: 8px 30px;
position: relative;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
width: auto;
max-width: 100%;
word-wrap: break-word;
}
.bubble:before, .bubble:after {
border-radius: 20px / 10px;
content: '';
display: block;
position: absolute;
}
.bubble:before {
border: 10px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.5);
bottom: 0;
left: -7px;
z-index: -2;
}
.bubble:after {
border: 8px solid transparent;
border-bottom-color: #d2f4fe;
bottom: 1px;
left: -5px;
}
.bubble--alt {
background-image: linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
background-image: -o-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
background-image: -moz-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
background-image: -ms-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.25, rgb(172,228,75)),
color-stop(1, rgb(122,205,71))
);
float: left;
}
.bubble--alt:before {
border-bottom-color: rgba(0, 0, 0, 0.5);
border-radius: 20px / 10px;
left: auto;
right: -7px;
}
.bubble--alt:after {
border-bottom-color: #ace44b;
border-radius: 20px / 10px;
left: auto;
right: -5px;
}
<div class="container">
<div class="bubble">
Blue text bubble
</div>
<div class="bubble bubble--alt">
Green text bubble
</div>
<div class="bubble">
A bubble containing lots and lots and lots and lots of content on multiple lines
</div>
<div class="bubble bubble--alt">
Bubble with image
<img src="http://placekitten.com/800/600" alt="" />
</div>
<div class="bubble">
Bubblewitharidiculouslylongwordwhichwrapseffortlesslyontotwolines
</div>
</div>
I can't work out how to swap the little handles in the bottom corners of each bubble so they are on the opposite side. I'd like the blue one appear from the bottom right corner and the green one appearing from the bottom left corner.

Here you go full code:
Under .bubble:before{..} and .bubble:after {..} you have used left property that should be of right and vice-versa for 'bubble--alt:before{..}andbubble--alt:after{..}`.
body {
background-color: #eee;
color: #222;
font: 0.8125em/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
img {
display: block;
height: auto;
max-width: 100%;
}
.container {
padding: 40px 20px;
margin: 0 auto;
width: 400px;
}
/* .bubble */
.bubble {
background-image: linear-gradient(bottom, rgb(210, 244, 254) 25%, rgb(149, 194, 253) 100%);
background-image: -o-linear-gradient(bottom, rgb(210, 244, 254) 25%, rgb(149, 194, 253) 100%);
background-image: -moz-linear-gradient(bottom, rgb(210, 244, 254) 25%, rgb(149, 194, 253) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(210, 244, 254) 25%, rgb(149, 194, 253) 100%);
background-image: -ms-linear-gradient(bottom, rgb(210, 244, 254) 25%, rgb(149, 194, 253) 100%);
background-image: -webkit-gradient( linear, right bottom, right top, color-stop(0.25, rgb(210, 244, 254)), color-stop(1, rgb(149, 194, 253)));
border: solid 1px rgba(0, 0, 0, 0.5);
/* vendor rules */
border-radius: 20px;
/* vendor rules */
box-shadow: inset 0 5px 5px rgba(255, 255, 255, 0.4), 0 1px 3px rgba(0, 0, 0, 0.2);
/* vendor rules */
box-sizing: border-box;
clear: both;
float: right;
margin-bottom: 20px;
padding: 8px 30px;
position: relative;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
width: auto;
max-width: 100%;
word-wrap: break-word;
}
.bubble:before,
.bubble:after {
border-radius: 20px / 10px;
content: '';
display: block;
position: absolute;
}
.bubble:before {
border: 10px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.5);
bottom: 0;
right: -7px;
z-index: -2;
}
.bubble:after {
border: 8px solid transparent;
border-bottom-color: #d2f4fe;
bottom: 1px;
right: -5px;
}
.bubble--alt {
background-image: linear-gradient(bottom, rgb(172, 228, 75) 25%, rgb(122, 205, 71) 100%);
background-image: -o-linear-gradient(bottom, rgb(172, 228, 75) 25%, rgb(122, 205, 71) 100%);
background-image: -moz-linear-gradient(bottom, rgb(172, 228, 75) 25%, rgb(122, 205, 71) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(172, 228, 75) 25%, rgb(122, 205, 71) 100%);
background-image: -ms-linear-gradient(bottom, rgb(172, 228, 75) 25%, rgb(122, 205, 71) 100%);
background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.25, rgb(172, 228, 75)), color-stop(1, rgb(122, 205, 71)));
float: left;
}
.bubble--alt:before {
border-bottom-color: rgba(0, 0, 0, 0.5);
border-radius: 20px / 10px;
right: auto;
left: -7px;
}
.bubble--alt:after {
border-bottom-color: #ace44b;
border-radius: 20px / 10px;
right: auto;
left: -5px;
}
<div class="container">
<div class="bubble">
Blue text bubble
</div>
<div class="bubble bubble--alt">
Green text bubble
</div>
<div class="bubble">
A bubble containing lots and lots and lots and lots of content on multiple lines
</div>
<div class="bubble bubble--alt">
Bubble with image
<img src="http://placekitten.com/800/600" alt="" />
</div>
<div class="bubble">
Bubblewitharidiculouslylongwordwhichwrapseffortlesslyontotwolines
</div>
</div>

Updated your code. Is this what you want?
/* Bit of normalisation */
body {
background-color: #eee;
color: #222;
font: 0.8125em/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
img {
display: block;
height: auto;
max-width: 100%;
}
.container {
padding: 40px 20px;
margin: 0 auto;
width: 400px;
}
/* .bubble */
.bubble {
background-image: linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
background-image: -o-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
background-image: -moz-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
background-image: -ms-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.25, rgb(210,244,254)),
color-stop(1, rgb(149,194,253))
);
border: solid 1px rgba(0, 0, 0, 0.5);
/* vendor rules */
border-radius: 20px;
/* vendor rules */
box-shadow: inset 0 5px 5px rgba(255, 255, 255, 0.4), 0 1px 3px rgba(0, 0, 0, 0.2);
/* vendor rules */
box-sizing: border-box;
clear: both;
float: right;
margin-bottom: 20px;
padding: 8px 30px;
position: relative;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
width: auto;
max-width: 100%;
word-wrap: break-word;
}
.bubble:before, .bubble:after {
border-radius: 20px / 10px;
content: '';
display: block;
position: absolute;
}
.bubble:before {
border: 10px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.5);
bottom: 0;
right: -7px;
z-index: -2;
}
.bubble:after {
border: 8px solid transparent;
border-bottom-color: #d2f4fe;
bottom: 1px;
right: -5px;
}
.bubble--alt {
background-image: linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
background-image: -o-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
background-image: -moz-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
background-image: -ms-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.25, rgb(172,228,75)),
color-stop(1, rgb(122,205,71))
);
float: left;
}
.bubble--alt:before {
border-bottom-color: rgba(0, 0, 0, 0.5);
border-radius: 20px / 10px;
right: auto;
left: -7px;
}
.bubble--alt:after {
border-bottom-color: #ace44b;
border-radius: 20px / 10px;
right: auto;
left: -5px;
}
<div class="container">
<div class="bubble">
Blue text bubble
</div>
<div class="bubble bubble--alt">
Green text bubble
</div>
<div class="bubble">
A bubble containing lots and lots and lots and lots of content on multiple lines
</div>
<div class="bubble bubble--alt">
Bubble with image
<img src="http://placekitten.com/800/600" alt="" />
</div>
<div class="bubble">
Bubblewitharidiculouslylongwordwhichwrapseffortlesslyontotwolines
</div>
</div>

How to center 4 absolute-divs (balls) in the middle of my screen?

I am trying to create a loading-screen effect for my current assignment.
It requires us to create a <div class="overlay"> with position: fixed. This funds as the background. Withing this div, there are 4 <div class="circle"> with position: absolute.
We have to center these using absolute-position and transform: translate. and each ball has a margin of 80px inbetween them
Here is an image of an example I try to re-create
I have managed so far to perfectly-center the balls, but cause of the position: absolute they all overlap. How can I make sure I can get all 4 balls like in the picture?
html {
scroll-behavior: smooth;
}
body {
z-index: 0;
background-color: #fff;
}
.overlay {
background-color: #0d1133;
position: fixed;
top: 0;
left: 0;
z-index: 1;
height: 100vh;
width: 100vw;
}
.circle {
width: 80px;
height: 80px;
background: #fff;
display: inline-block;
border-radius: 40px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#yellow {
background-color: linear-gradient(180deg, rgba(248, 255, 0, 1) 0%, rgba(255, 145, 0, 1) 50%, rgba(255, 145, 0, 1) 100%);
}
#red {
background: linear-gradient(180deg, rgba(255, 0, 215, 1) 0%, rgba(255, 0, 61, 1) 50%, rgba(255, 0, 0, 1) 100%);
}
#blue {
background: linear-gradient(180deg, rgba(0, 255, 243, 1) 0%, rgba(0, 224, 255, 1) 50%, rgba(0, 185, 255, 1) 100%);
}
#purple {
background: linear-gradient(180deg, rgba(255, 0, 241, 1) 0%, rgba(222, 0, 255, 1) 50%, rgba(157, 0, 255, 1) 100%);
}
<main>
<div class="overlay">
<div class="circle" id="yellow"></div>
<div class="circle" id="red"></div>
<div class="circle" id="blue"> </div>
<div class="circle" id="purple"></div>
</div>
</main>

You can wrap them inside a wrapper class and position that div absolute (like you did for each ball).
html {
scroll-behavior: smooth;
}
body {
z-index: 0;
background-color: #fff;
}
.overlay {
background-color: #0d1133;
position: fixed;
top: 0;
left: 0;
z-index: 1;
height: 100vh;
width: 100vw;
}
.wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
.circle {
width: 80px;
height: 80px;
background: #fff;
display: inline-block;
border-radius: 40px;
}
#yellow {
background-color: linear-gradient(180deg, rgba(248, 255, 0, 1) 0%, rgba(255, 145, 0, 1) 50%, rgba(255, 145, 0, 1) 100%);
}
#red {
background: linear-gradient(180deg, rgba(255, 0, 215, 1) 0%, rgba(255, 0, 61, 1) 50%, rgba(255, 0, 0, 1) 100%);
}
#blue {
background: linear-gradient(180deg, rgba(0, 255, 243, 1) 0%, rgba(0, 224, 255, 1) 50%, rgba(0, 185, 255, 1) 100%);
}
#purple {
background: linear-gradient(180deg, rgba(255, 0, 241, 1) 0%, rgba(222, 0, 255, 1) 50%, rgba(157, 0, 255, 1) 100%);
}
<main>
<div class="overlay">
<div class="wrapper">
<div class="circle" id="yellow"></div>
<div class="circle" id="red"></div>
<div class="circle" id="blue"> </div>
<div class="circle" id="purple"></div>
</div>
</div>
</main>

I would go with flexboxes, but if you need to animate them using transform: translate you can position them using:
transform: translate(calc(-50% + <OFFSET>px), -50%)
html {
scroll-behavior: smooth;
}
body {
z-index: 0;
background-color: #fff;
}
.overlay {
background-color: #0d1133;
position: fixed;
top: 0;
left: 0;
z-index: 1;
height: 100vh;
width: 100vw;
}
.circle {
width: 80px;
height: 80px;
background: #fff;
display: inline-block;
border-radius: 40px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#yellow {
background-color: linear-gradient(180deg, rgba(248, 255, 0, 1) 0%, rgba(255, 145, 0, 1) 50%, rgba(255, 145, 0, 1) 100%);
transform: translate(calc(-50% - 240px), -50%);
}
#red {
background: linear-gradient(180deg, rgba(255, 0, 215, 1) 0%, rgba(255, 0, 61, 1) 50%, rgba(255, 0, 0, 1) 100%);
transform: translate(calc(-50% - 80px), -50%);
}
#blue {
background: linear-gradient(180deg, rgba(0, 255, 243, 1) 0%, rgba(0, 224, 255, 1) 50%, rgba(0, 185, 255, 1) 100%);
transform: translate(calc(-50% + 80px), -50%);
}
#purple {
background: linear-gradient(180deg, rgba(255, 0, 241, 1) 0%, rgba(222, 0, 255, 1) 50%, rgba(157, 0, 255, 1) 100%);
transform: translate(calc(-50% + 240px), -50%);
}
<main>
<div class="overlay">
<div class="circle" id="yellow"></div>
<div class="circle" id="red"></div>
<div class="circle" id="blue"> </div>
<div class="circle" id="purple"></div>
</div>
</main>

You could use display: flex, aswell as align-items and justify content on the parent like so :
html {
scroll-behavior: smooth;
}
body {
z-index: 0;
background-color: #fff;
}
.overlay {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
background-color: #0d1133;
position: fixed;
top: 0;
left: 0;
z-index: 1;
height: 100vh;
width: 100vw;
}
.circle {
width: 80px;
height: 80px;
background: #fff;
display: inline-block;
border-radius: 40px;
}
#yellow {
background-color: linear-gradient(180deg, rgba(248, 255, 0, 1) 0%, rgba(255, 145, 0, 1) 50%, rgba(255, 145, 0, 1) 100%);
}
#red {
background: linear-gradient(180deg, rgba(255, 0, 215, 1) 0%, rgba(255, 0, 61, 1) 50%, rgba(255, 0, 0, 1) 100%);
}
#blue {
background: linear-gradient(180deg, rgba(0, 255, 243, 1) 0%, rgba(0, 224, 255, 1) 50%, rgba(0, 185, 255, 1) 100%);
}
#purple {
background: linear-gradient(180deg, rgba(255, 0, 241, 1) 0%, rgba(222, 0, 255, 1) 50%, rgba(157, 0, 255, 1) 100%);
}
<main>
<div class="overlay">
<div class="circle" id="yellow"></div>
<div class="circle" id="red"></div>
<div class="circle" id="blue"> </div>
<div class="circle" id="purple"></div>
</div>
</main>

Add an absolutely-positioned div container around the circles, and centre this on the page.
Then put the circles inside it (no longer absolutely-positioned) and give them a margin.
html {
scroll-behavior: smooth;
}
body {
z-index: 0;
background-color: #fff;
}
.overlay {
background-color: #0d1133;
position: fixed;
top: 0;
left: 0;
z-index: 1;
height: 100vh;
width: 100vw;
}
.circles-container {
width: 100%;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.circle {
width: 30px;
height: 30px;
background: #fff;
margin: 30px;
display: inline-block;
border-radius: 40px;
transform: translate(-50%, -50%);
}
#yellow {
background-color: linear-gradient(180deg, rgba(248, 255, 0, 1) 0%, rgba(255, 145, 0, 1) 50%, rgba(255, 145, 0, 1) 100%);
}
#red {
background: linear-gradient(180deg, rgba(255, 0, 215, 1) 0%, rgba(255, 0, 61, 1) 50%, rgba(255, 0, 0, 1) 100%);
}
#blue {
background: linear-gradient(180deg, rgba(0, 255, 243, 1) 0%, rgba(0, 224, 255, 1) 50%, rgba(0, 185, 255, 1) 100%);
}
#purple {
background: linear-gradient(180deg, rgba(255, 0, 241, 1) 0%, rgba(222, 0, 255, 1) 50%, rgba(157, 0, 255, 1) 100%);
}
<main>
<div class="overlay">
<div class="circles-container">
<div class="circle" id="yellow"></div>
<div class="circle" id="red"></div>
<div class="circle" id="blue"> </div>
<div class="circle" id="purple"></div>
</div>
</div>
</main>

This is perfect and clean code using css flex
Html Code:
<div class="circles-container">
<div class="circle" id="red"></div>
<div class="circle" id="orange"></div>
<div class="circle" id="green"> </div>
<div class="circle" id="purple"></div>
</div>
</div>
Css Code:
.main-div{
width:100%;
height:-webkit-fill-available;
display:flex;
background: navy;
justify-content: center;
flex-direction: column;
align-items: center;
}
.circle{
width:10px;
height:10px;
border-radius:50px;
display:inline-block;
}
#red{
background:red
}
#orange{
background:orange;
}
#green{
background:green;
}
#purple{
background:purple;
}

align text in the middle of a circle with css [duplicate]

This question already has answers here:
How to draw a circle with text in the middle?
(19 answers)
How do I vertically center text with CSS? [duplicate]
(37 answers)
Closed 5 years ago.
i'm trying to align text in the middle of a circle with my below script but can't seem to get it to align in the middle both horizontally and vertically.
.circle {
background: rgba(72, 156, 234, 1);
background: -moz-linear-gradient(left, rgba(72, 156, 234, 1) 0%, rgba(31, 123, 229, 1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(72, 156, 234, 1)), color-stop(100%, rgba(31, 123, 229, 1)));
background: -webkit-linear-gradient(left, rgba(72, 156, 234, 1) 0%, rgba(31, 123, 229, 1) 100%);
background: -o-linear-gradient(left, rgba(72, 156, 234, 1) 0%, rgba(31, 123, 229, 1) 100%);
background: -ms-linear-gradient(left, rgba(72, 156, 234, 1) 0%, rgba(31, 123, 229, 1) 100%);
background: linear-gradient(to right, rgba(72, 156, 234, 1) 0%, rgba(31, 123, 229, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#489cea', endColorstr='#1f7be5', GradientType=1);
border-radius: 50%;
height: 80px;
width: 80px;
position: relative;
box-shadow: 0 0 0 5px #F1F1F1;
margin: 10px;
color: #6F0;
vertical-align: middle;
}
.text_circle {
font-size: 36px;
margin-bottom: 50px;
vertical-align: middle;
}
<div align="center" class="circle">
<span class="text_circle">5</span>
</div>

As long as you only have one line of text, a simple trick is to set its line-height to the height of the circle:
.circle {
background: rgba(72, 156, 234, 1);
border-radius: 50%;
height: 80px;
width: 80px;
position: relative;
box-shadow: 0 0 0 5px #F1F1F1;
margin: 10px;
color: #6F0;
vertical-align: middle;
}
.text_circle {
font-size: 36px;
margin-bottom: 50px;
line-height: 80px;
}
<div align="center" class="circle"><span class="text_circle">5</span></div>

There are two solutions for your question.
One
Assign position:relative property to .circle
.circle {
position:relative;
}
add following properties to text_circle
.text_circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
Two
Assign line-height property to circle with same height.
.circle {
line-height: 80px;
}

CSS with IPhone Chat layout

I'm trying to create a page wich will be used to send/receive SMS, I want to show when each SMS was sent/received but I can't seem to be able to align the date right...
Here is my jsfiddle: https://jsfiddle.net/xazvruqj/2/
EDIT: My jsfiddle was missing the actual CSS ...
This part in my CSS is causing me trouble :
.dateR{
position: absolute;
width: 400px;
float: left;
top: 100%;
text-align: right;
font-size: 75%;
font-style: italic;
}
.dateL{
position: absolute;
width: 200px;
left: 2px;
top: 100%;
text-align: left;
font-size: 75%;
font-style: italic;
}
As you can see the dates on the right are completly wrong, I would like them to be text-aligned to the right and under the message.
I thougth that using position:absolute for the date would make it easier but it was only true for the left side.
Thanks for reading this.

There are probably other solutions out there - but it's easy enough if you just place the dates in their own containers and align them separately.
Here's a solution using a new CSS class "bubble-line":
/* Bit of normalisation */
body {
background-color: #eee;
color: #222;
font: 0.8125em/1.5'Helvetica Neue', Helvetica, Arial, sans-serif;
width: 400px;
}
img {
display: block;
height: auto;
max-width: 100%;
}
.container {
padding: 10px 10px;
margin: 0 auto;
width: 400px;
}
/* .bubble */
.bubble-line {
width: 100%;
position: relative;
}
.bubble-line-right {
width: 100%;
float: right;
}
.bubble {
background-image: linear-gradient(bottom, rgb(210, 244, 254) 25%, rgb(149, 194, 253) 100%);
background-image: -o-linear-gradient(bottom, rgb(210, 244, 254) 25%, rgb(149, 194, 253) 100%);
background-image: -moz-linear-gradient(bottom, rgb(210, 244, 254) 25%, rgb(149, 194, 253) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(210, 244, 254) 25%, rgb(149, 194, 253) 100%);
background-image: -ms-linear-gradient(bottom, rgb(210, 244, 254) 25%, rgb(149, 194, 253) 100%);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.25, rgb(210, 244, 254)), color-stop(1, rgb(149, 194, 253)));
border: solid 1px rgba(0, 0, 0, 0.5);
/* vendor rules */
border-radius: 20px;
/* vendor rules */
box-shadow: inset 0 5px 5px rgba(255, 255, 255, 0.4), 0 1px 3px rgba(0, 0, 0, 0.2);
/* vendor rules */
box-sizing: border-box;
clear: both;
margin-bottom: 5px;
padding: 8px 30px;
position: relative;
display: inline-block;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
width: auto;
max-width: 100%;
word-wrap: break-word;
}
.bubble:before,
.bubble:after {
border-radius: 20px / 10px;
content: '';
display: block;
position: absolute;
}
.bubble:before {
border: 10px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.5);
bottom: 0;
left: -7px;
z-index: -2;
}
.bubble:after {
border: 8px solid transparent;
border-bottom-color: #d2f4fe;
bottom: 1px;
left: -5px;
}
.bubble--alt {
background-image: linear-gradient(bottom, rgb(172, 228, 75) 25%, rgb(122, 205, 71) 100%);
background-image: -o-linear-gradient(bottom, rgb(172, 228, 75) 25%, rgb(122, 205, 71) 100%);
background-image: -moz-linear-gradient(bottom, rgb(172, 228, 75) 25%, rgb(122, 205, 71) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(172, 228, 75) 25%, rgb(122, 205, 71) 100%);
background-image: -ms-linear-gradient(bottom, rgb(172, 228, 75) 25%, rgb(122, 205, 71) 100%);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.25, rgb(172, 228, 75)), color-stop(1, rgb(122, 205, 71)));
float: right;
display: inline-block;
}
.bubble--alt:before {
border-bottom-color: rgba(0, 0, 0, 0.5);
border-radius: 20px / 10px;
left: auto;
right: -7px;
}
.bubble--alt:after {
border-bottom-color: #ace44b;
border-radius: 20px / 10px;
left: auto;
right: -5px;
}
.dateR {
display: inline-block;
float: right;
text-align: right;
font-size: 75%;
font-style: italic;
}
.dateL {
text-align: left;
font-size: 75%;
font-style: italic;
}
<body>
<div class="container">
<div class="bubble-line">
<div class="bubble ">Test</div>
</div>
<div class="bubble-line">
<div class="dateL">11 mai 2015 12:02:02</div>
</div>
<div class="bubble-line">
<div class="bubble bubble--alt">Test</div>
</div>
<div class="bubble-line-right">
<div class="dateR">12 mai 2015 12:02:02</div>
</div>
<div class="bubble-line">
<div class="bubble bubble--alt">TestTestTestTestTest TestTest Test Test TestTestTestTestTestTestTest</div>
</div>
<div class="bubble-line-right">
<div class="dateR">12 mai 2015 12:02:02</div>
</div>
<div class="bubble-line">
<div class="bubble ">TestTestTestTestTest TestTest Test Test TestTestTestTestTestTestTest</div>
</div>
<div class="bubble-line">
<div class="dateL">12 mai 2015 12:02:02</div>
</div>
</div>
</body>
<body>
<div class="container">
<div class="bubble-line">
<div class="bubble ">Test</div>
</div>
<div class="bubble-line">
<div class="dateL">11 mai 2015 12:02:02</div>
</div>
<div class="bubble-line">
<div class="bubble bubble--alt">Test</div>
</div>
<div class="bubble-line-right">
<div class="dateR">12 mai 2015 12:02:02</div>
</div>
<div class="bubble-line">
<div class="bubble bubble--alt">TestTestTestTestTest TestTest Test Test TestTestTestTestTestTestTest</div>
</div>
<div class="bubble-line-right">
<div class="dateR">12 mai 2015 12:02:02</div>
</div>
<div class="bubble-line">
<div class="bubble ">TestTestTestTestTest TestTest Test Test TestTestTestTestTestTestTest</div>
</div>
<div class="bubble-line">
<div class="dateL">12 mai 2015 12:02:02</div>
</div>
</div>
</body>
That way, you don't run into issues with floats stacking up on the same line, and don't break the background image positions on the text bubbles.

Hi not sure if this will help.
Use on your .dateR
position:absolute;
left: 0; (Or wherever you want it)
No need for float:left with absolute positioning
Also, make sure the parent element is set to position:relative;

Tooltip/Speech bubble with a gradient background and arrow at top-center

I have this shape:
and I was wondering if its possible to create it with CSS3.
This is what I have so far (click for fiddle):
HTML:
<div id="cafeDialog" role="dialog" class="cafeDialog caspSearch" style="">
<div data-title="Search" role="main">
<div>
</div>
</div>
</div>
CSS:
html, body {
height: 100%;
}
.caspSearch {
border: 1px solid black;
background: black;
background: -moz-linear-gradient(top, rgba(128, 144, 152, 0.9) 0%, rgba(67, 74, 80, 0.91) 8%, rgba(54, 58, 61, 0.96) 91%, rgba(74, 81, 85, 0.9) 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(128, 144, 152, 0.9)), color-stop(8%, rgba(67, 74, 80, 0.91)), color-stop(91%, rgba(54, 58, 61, 0.96)), color-stop(100%, rgba(74, 81, 85, 0.9)));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(128, 144, 152, 0.9) 0%, rgba(67, 74, 80, 0.91) 8%, rgba(54, 58, 61, 0.96) 91%, rgba(74, 81, 85, 0.9) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(128, 144, 152, 0.9) 0%, rgba(67, 74, 80, 0.91) 8%, rgba(54, 58, 61, 0.96) 91%, rgba(74, 81, 85, 0.9) 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(128, 144, 152, 0.9) 0%, rgba(67, 74, 80, 0.91) 8%, rgba(54, 58, 61, 0.96) 91%, rgba(74, 81, 85, 0.9) 100%);
/* IE10+ */
background: linear-gradient(to bottom, rgba(128, 144, 152, 0.9) 0%, rgba(67, 74, 80, 0.91) 8%, rgba(54, 58, 61, 0.96) 91%, rgba(74, 81, 85, 0.9) 100%);
/* W3C */
width: 500px;
height: 300px;
border-radius: 10px;
padding: 0 !important;
position:relative;
top: 30px;
}
.caspSearch:before {
content:'';
width: 0;
height: 0;
display: block;
position: absolute;
border-bottom: 50px solid white;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
I'm struggling with the triangle since it needs to be with transparent gradient and the black border needs to wrap it .

Is this what you are looking for?
CSS
.triangle-isosceles {
height: 200px;
width: 300px;
position:relative;
padding:15px;
margin:1em 0 3em;
color:#000;
background:#f3961c;
background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c));
background:-moz-linear-gradient(#f9d835, #f3961c);
background:-o-linear-gradient(#f9d835, #f3961c);
background:linear-gradient(#f9d835, #f3961c);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
.triangle-isosceles.top {
background:-webkit-gradient(linear, 0 0, 0 100%, from(#f3961c), to(#f9d835));
background:-moz-linear-gradient(#f3961c, #f9d835);
background:-o-linear-gradient(#f3961c, #f9d835);
background:linear-gradient(#f3961c, #f9d835);
}
.triangle-isosceles:after {
content:"";
position:absolute;
bottom:-15px;
left:50px;
border-width:15px 15px 0;
border-style:solid;
border-color:#f3961c transparent;
display:block;
width:0;
}
.triangle-isosceles.top:after {
top:-15px;
right:50px;
bottom:auto;
left:auto;
border-width:0 15px 15px;
border-color:#f3961c transparent;
}
HTML
<p class="triangle-isosceles top">Your content.</p>
The Fiddle
http://jsfiddle.net/sjccN/4/

I made a sample for you... just add your shadows and such to this and your set :)
http://jsfiddle.net/BNgTh/
#talkbubble {
width: 120px;
height: 80px;
margin-top:20px;
margin-left:40px;
background: red;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#talkbubble:before {
content:"";
position: absolute;
top: -20px;
left:40%;
width: 0;
height: 0;
border-bottom: 26px solid red;
border-right: 13px solid transparent;
border-left: 13px solid transparent;
}
Change the top value in #talkbubble:before to make it smaller as you wish too.