I am developing a chat application. In that chat message box I need to show a message, the user's name, current date and time. I am showing all those things except time and date UI is not looking good.
.userTextDivOp {
text-align: left;
float: left;
clear: both;
position: relative;
background: white;
padding-top: 5px;
padding-bottom: 7px;
padding-left: 7px;
padding-right: 7px;
border-radius: 6px;
border: 3px solid #999;
font-size: 12px;
margin-bottom: 7px;
margin-right: 4px;
margin-left: 4px;
}
.userTextDivOp::before {
content: '';
position: absolute;
visibility: visible;
top: -3px;
left: -11px;
border: 9px solid transparent;
border-top: 11px solid #999;
}
.userTextDivOp::after {
content: '';
position: absolute;
visibility: visible;
top: 0px;
left: -6px;
border: 9px solid transparent;
border-top: 8px solid white;
clear: both;
}
.userTextDivOp .message {
word-break: break-all;
font-size: 13px;
}
.userTextDivOp .username {
position: relative;
display: block;
font-weight: bold;
font-size: 14px;
color: #8e0035;
text-align: left;
padding-bottom: 4px;
margin-top: 3px;
}
.userTextDivOp .time {
position: absolute;
font-size: 14px;
color: #f60;
text-align: right;
}
<div class="userTextDivOp">
<span class="username">UserName</span>
<span class="message">' Testing testing</span>
<span class="time">04:00 PM 7 Jul 2016</span>
</div>
.userTextDivOp {
text-align: left;
float: left;
clear: both;
position: relative;
background: white;
padding-top: 5px;
padding-bottom: 40px;
padding-left: 7px;
padding-right: 7px;
border-radius: 6px;
border: 3px solid #999;
font-size: 12px;
margin-bottom: 7px;
margin-right: 4px;
margin-left: 4px;
}
.userTextDivOp::before {
content: '';
position: absolute;
visibility: visible;
top: -3px;
left: -11px;
border: 9px solid transparent;
border-top: 11px solid #999;
}
.userTextDivOp::after {
content: '';
position: absolute;
visibility: visible;
top: 0px;
left: -6px;
border: 9px solid transparent;
border-top: 8px solid white;
clear: both;
}
.userTextDivOp .message {
word-break: break-all;
font-size: 13px;
}
.userTextDivOp .username {
position: relative;
display: block;
font-weight: bold;
font-size: 14px;
color: #8e0035;
text-align:left;
padding-bottom: 4px;
margin-top: 3px;
}
.userTextDivOp .time {
position: absolute;
font-size: 14px;
color: #f60;
}
<div class="userTextDivOp" >
<span class="username">UserName</span>
<span class="message">' Testing testing</span>
<span class="time">04:00 PM 7 Jul 2016</span>
</div>
You can use the time class to define the span you want to change.
.userTextDivOp {
text-align: left;
float: left;
clear: both;
position: relative;
background: white;
padding-top: 5px;
padding-bottom: 7px;
padding-left: 7px;
padding-right: 7px;
border-radius: 6px;
border: 3px solid #999;
font-size: 12px;
margin-bottom: 7px;
margin-right: 4px;
margin-left: 4px;
}
.userTextDivOp::before {
content: '';
position: absolute;
visibility: visible;
top: -3px;
left: -11px;
border: 9px solid transparent;
border-top: 11px solid #999;
}
.userTextDivOp::after {
content: '';
position: absolute;
visibility: visible;
top: 0px;
left: -6px;
border: 9px solid transparent;
border-top: 8px solid white;
clear: both;
}
.userTextDivOp .message {
word-break: break-all;
font-size: 13px;
}
.userTextDivOp .username {
position: relative;
display: block;
font-weight: bold;
font-size: 14px;
color: #8e0035;
text-align:left;
padding-bottom: 4px;
margin-top: 3px;
}
.userTextDivOp .time {
//#You can edit these style settings to edit how the Time and date look
position: relative;
font-size: 14px;
color: pink;
padding: 0 20px;
font-family: courier, monospace;
}
<div class="userTextDivOp" >
<span class="username">UserName</span>
<span class="message">' Testing testing</span>
<span class="time">04:00 PM 7 Jul 2016</span>
</div>
Well, One thing You can do, like facebook ; You can make the time visible when someone hovers the chat message.
JS FIDDLE
HTML:
<div class="wrapper">
<div class="userTextDivOp" >
<span class="username">UserName</span>
<span class="message">' Testing testing</span>
<span class="time">04:00 PM 7 Jul 2016</span>
</div>
</div>
.wrapper{
position: relative;
}
.userTextDivOp {
text-align: left;
float: left;
clear: both;
background: white;
padding-top: 5px;
padding-bottom: 7px;
padding-left: 7px;
padding-right: 7px;
border-radius: 6px;
border: 3px solid #999;
font-size: 12px;
margin-top: -3px;
margin-left: -2px;
cursor:pointer;
}
.userTextDivOp .time {
position: absolute;
font-size: 14px;
color: #f60;
left: 125px;
top: 0;
visibility:hidden;
}
.userTextDivOp:hover .time {
visibility:visible;
}
.userTextDivOp::before {
content: '';
position: absolute;
visibility: visible;
top: -3px;
left: -11px;
border: 9px solid transparent;
border-top: 11px solid #999;
}
.userTextDivOp::after {
content: '';
position: absolute;
visibility: visible;
top: 0px;
left: -6px;
border: 9px solid transparent;
border-top: 8px solid white;
clear: both;
}
.userTextDivOp .message {
word-break: break-all;
font-size: 13px;
}
.userTextDivOp .username {
position: relative;
display: block;
font-weight: bold;
font-size: 14px;
color: #8e0035;
text-align:left;
padding-bottom: 4px;
margin-top: 3px;
}
Isnpite of using You can use the tag with datetime attribute , Time is just an HTML tag. Here's a simple example that represents November 2011:
<time> 2011-11 </time>
And The datetime attribute is what makes the time element unique. It represents the date, time, or duration for whatever text you are representing in a machine readable format. That means it is for computers, not humans, so it has very specific formats.
It's probably a bit more common for the human-readable version to be just a textual representation of the datetime:
<time datetime="2011-11">November, 2011</time>
<time datetime="2013-04-01">April 1st, 2013</time>
<time datetime="5d 22h 54m 41s">5 days, 22 hours, 54 minutes, and 41 seconds</time>
Related
This question already has answers here:
Can I use a :before or :after pseudo-element on an input field?
(22 answers)
Closed 2 years ago.
[data-title] {
position: relative;
cursor: help;
}
[data-title]:hover::before {
content: attr(data-title);
position: absolute;
top: -30px;
left: 0;
display: inline-block;
padding: 3px 6px;
border-radius: 2px;
background-color: cadetblue;
color: #fff;
font-size: 12px;
font-family: sans-serif;
white-space: nowrap;
}
[data-title]:hover::after {
content: '';
position: absolute;
top: -7px;
left: 8px;
display: inline-block;
border: 8px solid transparent;
border-top: 8px solid cadetblue;
}
It works with most elements Example:
<p data-title="This is the tooltips">Test Tooltips</p>
But it doesn't work with < input > element:
<input type="text" data-title="Test input tooltips" />
try like this
[data-title] {
position: relative;
cursor: help;
margin-top:50px;
}
[data-title]:hover::before {
content: attr(data-title);
position: absolute;
top: -30px;
left: 0;
display: inline-block;
padding: 3px 6px;
border-radius: 2px;
background-color: cadetblue;
color: #fff;
font-size: 12px;
font-family: sans-serif;
white-space: nowrap;
}
[data-title]:hover::after {
content: '';
position: absolute;
top: -7px;
left: 8px;
display: inline-block;
border: 8px solid transparent;
border-top: 8px solid cadetblue;
}
<div data-title="Test input tooltips">
<input type="text" />
</div>
I would like to put a button on 3 images. I made this:
I think my code is very long in my CSS? I often use the property left for each button, is it correct?
I think that I can delete .button_red_02 and .button_red_03?
In my HTML code I have ths:
<section id="contents">
<div class="background_red">Want to be updated with our offers and news?</div>
<div class="background_grey">
Read more +
<img src="https://zupimages.net/up/19/51/vn88.jpg" alt="" /></a>
Read more +
<img src="https://zupimages.net/up/19/51/9fik.jpg" alt="" /></a>
Read more +
<img src="https://zupimages.net/up/19/51/dwq9.jpg" alt="" /></a>
</div>
</section>
Then, in my CSS code I have this
.button_red_01{
background-color: #cd2122;
border: none;
color: white;
padding: 4px 15px 4px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
cursor: pointer;
position: absolute;
left: -10px;
top: 150px;
z-index: 1;
font-size: 12px;
font-family: Open Sans;
}
.button_red_02{
background-color: #cd2122;
border: none;
color: white;
padding: 4px 15px 4px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
cursor: pointer;
position: absolute;
left: 370px;
top: 150px;
z-index: 1;
font-size: 12px;
font-family: Open Sans;
}
.button_red_03{
background-color: #cd2122;
border: none;
color: white;
padding: 4px 15px 4px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
cursor: pointer;
position: absolute;
right: 334px;
top: 150px;
z-index: 1;
font-size: 12px;
font-family: Open Sans;
}
#contents{
position:absolute;
display: block;
background-color: #CD2122;
top: 538px;
width: 100%;
height: 70px;
}
.background_red{
font-family: Open Sans, sans-serif;
font-size: 22px;
color: #fff;
margin: 17px 0px 17px 100px;
}
.background_grey{
display: block;
position: absolute;
top: 60px;
height: 80%;
margin-top: 48px;
left: 115px;
}
.background_grey img {
width: 30%;
border: 3px solid #BDB9B9;
margin:10px 16px 10px 0;
}
.button_red_01{
background-color: #cd2122;
border: none;
color: white;
padding: 4px 15px 4px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
cursor: pointer;
position: absolute;
left: -10px;
top: 150px;
z-index: 1;
font-size: 12px;
font-family: Open Sans;
}
.button_red_02{
background-color: #cd2122;
border: none;
color: white;
padding: 4px 15px 4px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
cursor: pointer;
position: absolute;
left: 370px;
top: 150px;
z-index: 1;
font-size: 12px;
font-family: Open Sans;
}
.button_red_03{
background-color: #cd2122;
border: none;
color: white;
padding: 4px 15px 4px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
cursor: pointer;
position: absolute;
right: 334px;
top: 150px;
z-index: 1;
font-size: 12px;
font-family: Open Sans;
}
<section id="contents">
<div class="background_red">Want to be updated with our offers and news?</div>
<div class="background_grey">
Read more +
<img src="https://zupimages.net/up/19/51/vn88.jpg" alt="" /></a>
Read more +
<img src="https://zupimages.net/up/19/51/9fik.jpg" alt="" /></a>
Read more +
<img src="https://zupimages.net/up/19/51/dwq9.jpg" alt="" /></a>
</div>
</section>
As soon as you have the same CSS specifications for multiple objects, you can use classes and assign these to all of the objects required. In your example you do not need to have the same CSS for each button since all of them have mainly the same properties.
For the positioning I suggest to add unique IDs to each button to handle the positioning individually.
Note that each ID should only be used once (unique identifiers!) within your html template.
To select classed objects, use .classname, to select ID linked objects use #IDname.
Also since your browser reads your CSS file from top to bottom, you can change single properties for each button within its ID selector, for example
#button_red_01 {
background-color: blue;
}
For further insights on classes and IDs I highly recommend the MDN resource https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute/class.
#contents{
position:absolute;
display: block;
background-color: #CD2122;
top: 538px;
width: 100%;
height: 70px;
}
.background_red{
font-family: Open Sans, sans-serif;
font-size: 22px;
color: #fff;
margin: 17px 0px 17px 100px;
}
.background_grey{
display: block;
position: absolute;
top: 60px;
height: 80%;
margin-top: 48px;
left: 115px;
}
.background_grey img {
width: 30%;
border: 3px solid #BDB9B9;
margin:10px 16px 10px 0;
}
.button {
background-color: #cd2122;
border: none;
color: white;
padding: 4px 15px 4px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
cursor: pointer;
position: absolute;
z-index: 1;
font-size: 12px;
font-family: Open Sans;
}
#button_red_01 {
left: -10px;
top: 150px;
color: #2B28D8;
}
#button_red_02 {
left: 370px;
top: 150px;
}
#button_red_03 {
right: 334px;
top: 150px;
}
<section id="contents">
<div class="background_red">Want to be updated with our offers and news?</div>
<div class="background_grey">
Read more +
<img src="https://zupimages.net/up/19/51/vn88.jpg" alt="" /></a>
Read more +
<img src="https://zupimages.net/up/19/51/9fik.jpg" alt="" /></a>
Read more +
<img src="https://zupimages.net/up/19/51/dwq9.jpg" alt="" /></a>
</div>
</section>
I would like to give specific color font when I mouse over.
<div className="actions" className="icon"><div><span></span>trailer</div></div>
I tried but didn't work. Is there another way than :hover??
.icon:hover , .actions:hover{
color : #FF382E;
}
.actions{
position: absolute;
right: 20px;
top: 20px;
}
.icon{
float: right;
width: 50px;
height: 14px;
padding: 30px 0 10px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: 1px solid #E0E0E0;
text-align: center;
font-size: 13px;
color: #93939c;
position: relative;
cursor: pointer;
}
The hover part is fine, the only problem is that :hover targets the element being hovered by default. You can adapt your css to target the element more specifically:
.icon:hover , .actions:hover div a{
color : #FF382E;
}
.actions{
position: absolute;
right: 20px;
top: 20px;
}
.icon{
float: right;
width: 50px;
height: 14px;
padding: 30px 0 10px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: 1px solid #E0E0E0;
text-align: center;
font-size: 13px;
color: #93939c;
position: relative;
cursor: pointer;
}
<div class="actions" class="icon">
<div>
<span></span>
trailer
</div>
</div>
Done some changes and updated your code.
.icon:hover a {
color: #FF382E;
}
.actions {
position: absolute;
right: 20px;
top: 20px;
}
.icon {
float: right;
width: 50px;
height: 14px;
padding: 30px 0 10px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: 1px solid #E0E0E0;
text-align: center;
font-size: 13px;
color: #93939c;
position: relative;
cursor: pointer;
}
<div class="actions icon">
<div><span></span>trailer</div>
</div>
JS Fiddle
I have been trying to add an arrow to the div with class .b, but is not working and I cannot figure out why. Does anyone has any idea?
#nextgoal {
width: 100%;
text-align: center;
}
#nextgoal .a {
border: 1px solid #42aacc;
height: 54px;
width: 54px;
border-radius: 50%;
background-color: #fff;
color: #42aacc;
font-weight: bold;
padding: 8px 10px 10px 12px;
font-size: 30px;
display: inline-block;
position: relative;
float: left;
z-index: 1000;
}
#nextgoal .b {
margin-left: -18px;
margin-top: 6px;
height: 49px;
background-color: #42aacc;
display: inline-block;
padding: 10px 7px 3px 27px;
color: white;
position: relative;
display: inline-block;
float: left;
z-index: 10;
}
#nextgoal.b :after {
background: #42aacc;
bottom: 100%;
color: #42aacc;
display: block;
padding: 2px;
pointer-events: none;
position: absolute;
border: dotted 1px #42aacc;
font-size: 11px;
border-radius: 5px;
}
<div id="nextgoal" style="margin-top:1em;"><div class="a">AA</div><div class="b">Next Goal</div></div>
your selector is not correct and content:''; is missing to effectively generate your pseudo element, try this:
#nextgoal .b:after {
content: '';
#nextgoal {
width: 100%;
text-align: center;
}
#nextgoal .a {
border: 1px solid #42aacc;
height: 54px;
width: 54px;
border-radius: 50%;
background-color: #fff;
color: #42aacc;
font-weight: bold;
padding: 8px 10px 10px 12px;
font-size: 30px;
display: inline-block;
position: relative;
float: left;
z-index: 1000;
}
#nextgoal .b {
margin-left: -18px;
margin-top: 6px;
height: 49px;
background-color: #42aacc;
display: inline-block;
padding: 10px 7px 3px 27px;
color: white;
position: relative;
display: inline-block;
float: left;
z-index: 10;
overflow: visible;
}
#nextgoal .b:after {
content: '';
background: #42aacc;
bottom: 100%;
color: #42aacc;
display: block;
padding: 2px;
pointer-events: none;
position: absolute;
border: dotted 1px #42aacc;
font-size: 11px;
border-radius: 5px;
}
<div id="nextgoal" style="margin-top:1em;">
<div class="a">AA</div>
<div class="b">Next Goal</div>
</div>
it is obviously not an arrow but a dot that shows because border is here ...
.
Here is my link http://jsfiddle.net/ashadee/xhaLqvav/.
Html code
Eat your lunch<br>
CSS
a{
font-size: 1.2em;
white-space: normal;
}
a.rectangle
{
width: 70%;
height: 5%;
border: 1px solid black;
padding: 5%;
margin-top: 0%;
background-color: #FAFAFA;
opacity: 0.4;
display: block;
text-decoration: none;
text-align: center;
font-family: Comic Sans MS;
box-shadow: 10px 10px 5px #888888;
}
how will I make the design like the one in the image? Should I use canvas property.
demo - http://jsfiddle.net/victor_007/xhaLqvav/2/
use pseudo element :after and :before for styling right box and rounded
a {
font-size: 1.2em;
white-space: normal;
}
a.rectangle {
width: 70%;
height: 5%;
border: 2px solid black;
padding: 5%;
margin-top: 0%;
background-color: #FAFAFA;
opacity: 0.4;
display: block;
text-decoration: none;
text-align: center;
font-size: 32px;
font-family: Comic Sans MS;
box-shadow: 10px 10px 5px #888888;
position: relative;
}
a:before {
content: '';
border-right: 2px solid black;
height: 100%;
position: absolute;
background: orange;
width: 50px;
top: 0;
bottom: 0;
left: 0;
}
a:after {
content: '';
width: 30px;
height: 30px;
border-radius: 50%;
background: black;
position: absolute;
left: 35px;
top: 50%;
transform: translatey(-50%)
}
Stanford
<br>