Horizontally Center Text In Fixed Position Div - javascript

I have text in the following div but I cannot seem to get it to align center:
<div class="banner_tron">
<div class="bg-box-100-grey">
<span class="SansFontBold ex-lrg-60 center color-white">Hello World</span>
<div class="div-wrapper">
<p class="SansFontBold ex-lrg-20 center color-white">Have a Wonderful Day</p>
</div>
</div>
</div>
The CSS for this code is as follows:
.banner_tron{
bottom: 0;
height: 150px;
left: 0;
margin: auto;
position: absolute;
top: 0;
width: 300px;
white-space: nowrap;
}
.center {
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom:auto;
}
/* background-boxing */
.bg-box-100-grey{
position: fixed;
left: 0;
right:0;
width: 100%;
background-color: rgba(108,108,108, .7);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: none;
}
.ex-lrg-60 {
font-size: 60px;
font-weight: bold;
}
I have tried several different suggestions for the .center class but nothing seems to work (javascript positioning, align items, and webkit transformations). Any suggestions on why this isn't working and what I can do to fix it?

Add text-align:center to your .banner_tron
.banner_tron{
bottom: 0;
height: 150px;
left: 0;
margin: auto;
position: absolute;
top: 0;
width: 300px;
white-space: nowrap;
text-align:center;
}
.center {
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom:auto;
}
/* background-boxing */
.bg-box-100-grey{
position: fixed;
left: 0;
right:0;
width: 100%;
background-color: rgba(108,108,108, .7);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: none;
}
.ex-lrg-60 {
font-size: 60px;
font-weight: bold;
}
<div class="banner_tron">
<div class="bg-box-100-grey">
<span class="SansFontBold ex-lrg-60 color-white">Hello World</span>
<div class="div-wrapper">
<p class="SansFontBold ex-lrg-20 center color-white">Have a Wonderful Day</p>
</div>
</div>
</div>
Hope it helps :)

Skip center and add text-align: center to the bg-box-100-grey rule
.banner_tron{
bottom: 0;
height: 150px;
left: 0;
margin: auto;
position: absolute;
top: 0;
width: 300px;
white-space: nowrap;
}
/* background-boxing */
.bg-box-100-grey{
position: fixed;
left: 0;
right:0;
width: 100%;
background-color: rgba(108,108,108, .7);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: none;
text-align: center
}
.ex-lrg-60 {
font-size: 60px;
font-weight: bold;
}
<div class="banner_tron">
<div class="bg-box-100-grey">
<span class="SansFontBold ex-lrg-60 color-white">Hello World</span>
<div class="div-wrapper">
<p class="SansFontBold ex-lrg-20 center color-white">Have a Wonderful Day</p>
</div>
</div>
</div>
Or change the center class like below and add it to the bg-box-100-grey element's class
.banner_tron{
bottom: 0;
height: 150px;
left: 0;
margin: auto;
position: absolute;
top: 0;
width: 300px;
white-space: nowrap;
}
.center {
text-align: center;
}
/* background-boxing */
.bg-box-100-grey{
position: fixed;
left: 0;
right:0;
width: 100%;
background-color: rgba(108,108,108, .7);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: none;
}
.ex-lrg-60 {
font-size: 60px;
font-weight: bold;
}
<div class="banner_tron">
<div class="bg-box-100-grey center">
<span class="SansFontBold ex-lrg-60 color-white">Hello World</span>
<div class="div-wrapper">
<p class="SansFontBold ex-lrg-20 center color-white">Have a Wonderful Day</p>
</div>
</div>
</div>

Related

How to add a whole section using JavaScript?

So I am trying to write a script to add a whole, newly added, section to Adobe Analytics. I am not sure I can do it though, so I will appreciate your help. I thought I should add a class name to the section and use document.getElementsbyClassName but it does not seem to work? I also need to add the nested divs and their styles again using JS?
Here is my code:
<section class="flex-columns" style="
background-color: crimson;
height: 450px;
display: flex;
justify-content: center;
align-items: center;
">
<div style="
top: 132px;
left: 340px;
width: 400px;
height: 400px;
background: #FFFFFF 0% 0% no-repeat padding-box;
border-radius: 10px;
opacity: 1;
margin-left: 5px;
margin-right: 15px;
">
<p style="
top: 187px;
left: 391px;
width: 31px;
height: 138px;
text-align: left;
font: normal normal bold 120px/36px Value;
letter-spacing: 0px;
opacity: 1;
margin-top: 65px;
margin-left: 30px;
color: black;
border-style: solid;
border-color: black;
">1</p>
<p style="
top: 326px;
left: 391px;
width: 298px;
height: 152px;
text-align: left;
font: normal normal bold 45px/50px Value;
letter-spacing: 0px;
color: #888888;
opacity: 1;
margin-left: 30px;
">Find your nearest store</p>
</div>
<div style="
top: 132px;
left: 340px;
width: 400px;
height: 400px;
background: #FFFFFF 0% 0% no-repeat padding-box;
border-radius: 10px;
opacity: 1;
margin-left: 5px;
margin-right: 15px;
">
<p style="
top: 187px;
left: 811px;
width: 66px;
height: 138px;
text-align: left;
font: normal normal bold 120px/36px Value;
letter-spacing: 0px;
color: black;
opacity: 1;
margin-top: 65px;
margin-left: 30px;
">2</p>
<p style="
top: 326px;
left: 811px;
width: 298px;
height: 152px;
text-align: left;
font: normal normal bold 45px/50px Value;
letter-spacing: 0px;
color: #888888;
opacity: 1;
margin-left: 30px;
">Book a free hearing test</p>
</div>
<div style="
top: 132px;
left: 340px;
width: 400px;
height: 400px;
background: #FFFFFF 0% 0% no-repeat padding-box;
border-radius: 10px;
opacity: 1;
margin-left: 5px;
margin-right: 15px;
">
<p style="
top: 187px;
left: 1231px;
width: 68px;
height: 138px;
text-align: left;
font: normal normal bold 120px/36px Value;
letter-spacing: 0px;
color: black;
border: 2px;
border-color: black;
margin-top: 65px;
margin-left: 30px;
">3</p>
<p style="
top: 326px;
left: 1231px;
width: 298px;
height: 152px;
text-align: left;
font: normal normal bold 45px/50px Value;
letter-spacing: 0px;
color: #888888;
opacity: 1;
margin-left: 30px;
/* margin-bottom: 0px; */
">Get supported by our experts</p>
</div>
</section>
Since the post editing queue is full, I am sharing the current work in this area again. Could you explain the problem more clearly?
/* I don't understand what the problem is and what you want to do! */
.section-style {
background-color: crimson;
height: 450px;
display: flex;
justify-content: center;
align-items: center;
}
/* Common */
.columns {
top: 132px;
left: 340px;
width: 400px;
height: 400px;
background: #FFFFFF 0% 0% no-repeat padding-box;
border-radius: 10px;
opacity: 1;
margin-left: 5px;
margin-right: 15px;
}
.titles{
top: 187px;
height: 138px;
text-align: left;
font: normal normal bold 120px/36px Value;
letter-spacing: 0px;
margin-top: 65px;
margin-left: 30px;
color: black;
}
.contents{
top: 326px;
width: 298px;
height: 152px;
text-align: left;
font: normal normal bold 45px/50px Value;
letter-spacing: 0px;
color: #888888;
opacity: 1;
margin-left: 30px;
}
/* Titles */
.title-first {
left: 391px;
width: 31px;
opacity: 1;
border-style: solid;
border-color: black;
}
.title-second {
left: 811px;
width: 66px;
opacity: 1;
}
.title-thirth {
left: 1231px;
width: 68px;
border: 2px;
border-color: black;
}
/* Contents */
.content-first {
left: 391px;
height: 152px;
}
.content-second {
left: 811px;
}
.content-thirth {
left: 1231px;
/* margin-bottom: 0px; */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test Application</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="flex-columns section-style">
<div class="columns">
<p class="titles title-first">1</p>
<p class="contents content-first">Find your nearest store</p>
</div>
<div class="columns">
<p class="titles title-second">2</p>
<p class="contents content-second">Book a free hearing test</p>
</div>
<div class="columns">
<p class="titles title-thirth">3</p>
<p class="contents content-thirth">Get supported by our experts</p>
</div>
</section>
</body>
</html>

Background URL, only one images works

I am still in the process of learning HTML/CSS/Js and was following this tutorial on youtube.
https://www.youtube.com/watch?v=7MDJtw3ZF-4&t=893s
My issue is at around 20:15 time stamp, my eyes.png do not appear. I find this odd because my face.png shows up perfectly fine, which is in the same folder.
<p class="location"></p>
<div class="container">
<div class="face_body">
<div class="face">
<div class="eye_pan">
<div class="pan_area">
<div class="eye eye_l">
<div class="eye eye_r">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
and my css
html,body, .container{
height: 100%;
width: 100%;
outline: 0px;
margin: 0px;
padding: 0px;
border: 0px;
}
.location{
position: fixed;
top: 0px;
right: 0px;
margin: 0px;
background: rgba(255,255,255,0.4);
padding: 10px;
}
.container{
display: table;
background: rgb(251,220,0);
background: -webkit-linear-gradient(rgb(251,220,0), rgb(255,197,17));
background: -o-linear-gradient(rgb(251,220,0), rgb(255,197,17));
background: -moz-linear-gradient(rgb(251,220,0), rgb(255,197,17));;
background: linear-gradient(rgb(251,220,0), rgb(255,197,17));
}
.face_body{
display: table-cell;
vertical-align: middle;
text-align: center;
width: 100%;
}
.face{
height: 200px;
width: 200px;
margin: auto;
background: url(images/face1.1.png);
background-size: 173px 200px;
background-repeat: no-repeat;
}
.eye_pan{
display: table;
padding: 30px 50px;
}
.pan_area{
width: 70px;
height: 55px;
position: relative;
}
.eye{
height: 20px;
width: 20px;
border-radius: 5px;
position: absolute;
margin-left: 5px;
transition: .5s height ease-in-out;
border: 1px solid red;
background: url(images/eyes.png);
}
.eye_r{
top: 0px;
left: 20px;
}
.eye_l{
top: 50px;
left: 25px;
}
any reasons on why my eyes.png are not showing would be great. Thanks.
Your .eye url background is probably linking to a wrong URL file or it is simply out of the view.
Try inserting background-size: cover; or set it a background-size if the images is loding fine.
html,body, .container{
height: 100%;
width: 100%;
outline: 0px;
margin: 0px;
padding: 0px;
border: 0px;
}
.location{
position: fixed;
top: 0px;
right: 0px;
margin: 0px;
background: rgba(255,255,255,0.4);
padding: 10px;
}
.container{
display: table;
background: rgb(251,220,0);
background: -webkit-linear-gradient(rgb(251,220,0), rgb(255,197,17));
background: -o-linear-gradient(rgb(251,220,0), rgb(255,197,17));
background: -moz-linear-gradient(rgb(251,220,0), rgb(255,197,17));;
background: linear-gradient(rgb(251,220,0), rgb(255,197,17));
}
.face_body{
display: table-cell;
vertical-align: middle;
text-align: center;
width: 100%;
}
.face{
height: 200px;
width: 200px;
margin: auto;
background: url(https://images.vexels.com/media/users/3/134743/isolated/preview/97ae591756f3dc69db88c09fd097319a-sad-face-emoji-emoticon-by-vexels.png);
background-size: 173px 200px;
background-repeat: no-repeat;
}
.eye_pan{
display: table;
padding: 30px 50px;
}
.pan_area{
width: 70px;
height: 55px;
position: relative;
}
.eye{
height: 20px;
width: 20px;
border-radius: 5px;
position: absolute;
margin-left: 5px;
transition: .5s height ease-in-out;
border: 1px solid red;
background: url(//cdn.playbuzz.com/cdn/e732686f-35b2-4be6-a5fa-52f388bb0d0d/3637262a-2c14-43b0-9be2-b2174055f790_560_420.jpg);
background-size:cover;
}
.eye_r{
top: 0px;
left: 20px;
}
.eye_l{
top: 50px;
left: 25px;
}
<p class="location"></p>
<div class="container">
<div class="face_body">
<div class="face">
<div class="eye_pan">
<div class="pan_area">
<div class="eye eye_l">
<div class="eye eye_r">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Check if your spellings are correct like 'eye' instead of 'eyes' also check the file format if its say 'jpg' and not 'png'.
Try clearing your browser cache just incase your browser did not load new files
Apply correct CSS syntax for background property and check whether your image path is correct or not.
background: url('images/eyes.png');
Try this and let me know if problem is still raised.
Have a nice day, Cheers !!!

How can I put this make this box go below the text like in the image

I am trying to make this above layout. But unfortunately, I am not being able to put it as the above layout.
I am getting the 2nd image as my result.
Codes:
.text_box_holder{
position: relative;
}
.text_box_holder h1{
text-align: right;
padding-right: 50%;
color: #fff;
background: inherit;
-webkit-background-clip: text;
}
.learn_more_in_box{
color: #fde428;
text-align: right;
padding-left: 31% !important;
-webkit-background-clip: text;
}
.yellow_box{
position: absolute;
border: 7px solid #fde428;
width: 40%;
height: 300px;
}
<div class="text_box_holder">
<div class="yellow_box"></div>
<h1>Consumer<br>Products<br>Consulting</h1>
LEARN MORE
</div>
Please try following code . I didn't add any back ground images . I have tried only to add 2 text with the box .
HTML
<div class="text_box_holder">
<div class="yellow_box"> </div>
<div class="text1">
<h1>Consumer<br>Products<br>Consulting</h1>
<div class="text2">LEARN MORE</div>
</div>
</div>
CSS
.text1 {
margin-top: 30px;
position:absolute;
text-align: left;
color: #bc7e09;
}
.yellow_box{
margin-left: 60px;
position: absolute;
border: 5px solid #fde428;
width: 40%;
height: 300px;
}
If you want add back ground image for whole space , you can integrate with HTML .I hope it will help you .
Demo : https://jsfiddle.net/Ltxktaad/21/
You need to provide additional wrapper divs around the the text which needs to be absolutely positioned. Here is the working example.
<div class="text_box_holder">
<div class="yellow_box"></div>
<div class="main-text-wrapper">
<h1>Consumer<br>Products<br>Consulting</h1></div><div class="link-text-wrapper">
LEARN MORE </div>
</div>
.text_box_holder{
position: relative;
}
.text_box_holder h1{
text-align: right;
padding-right: 50%;
color: green;
background: inherit;
-webkit-background-clip: text;
text-align: left;
position: absolute;
top: -22px;
margin-top: 18px;
margin-bottom: 18px;
}
.learn_more_in_box{
color: #fde428;
text-align: right;
-webkit-background-clip: text;
text-align: left;
position: absolute;
top: 4px;
}
.yellow_box{
position: absolute;
border: 7px solid #fde428;
width: 40%;
height: 300px;
margin-left: 45px;
z-index:2;
}
.main-text-wrapper {
background-color: white;
width: 40%;
height: 110px;
position:absolute;
top: 65px;
z-index: 9999;
}
.link-text-wrapper {
position:absolute;
background-color: #fff;
top: 195px;
width:40%;
height: 30px;
z-index: 9999;
}

CSS : round_div is not responsive to its parent div

I have .
when I resize my window then it looks like
It is not responsive.
.discussion_round_div {
width: 70px;
height: 70px;
border-radius: 100px;
border: thin #edf1f2 solid;
position: absolute;
background: #FFFFFF;
left: 36%;
top: 20px;
}
.discussion_round_div_icon{
position: relative;
top: 18%;
font-size: 20px;
height: 25px;
color:#adadad;
}
.discussion_icon_text{
text-align: center;
font-size: 10px;
color: #3d4354;
}
.padding_30{
padding:30px !important;
}
.bg-dark{
background:#000;
}
.discussion_small_round_div {
width: 25px;
height: 25px;
border-radius: 50%;
position: relative;
background: #2d3446;
bottom: 9px;
left: 15px;
float:right;
}
.discussion_small_round_div:after {
content: '\2807';
font-size: 1.5em;
color:white;
position: absolute;
left: 9px;
top: 1px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="panel discussion_panel_div no_background no_box_shadow" style="position: relative;">
<div class="panel-heading padding_30 no_border_radius bg-dark set_padding_0">
<div class="discussion_small_round_div pull-right cursor_pointer" id="pending"></div>
</div>
<div class="discussion_round_div">
<div class="text-center discussion_round_div_icon">
<span class="glyphicon glyphicon-check "></span>
<p class="discussion_icon_text">Approved</p>
</div>
</div>
</div>
PS: The round div should be in the center of panel div as per the image
Can I do it without using media query?
Any help would be great.
Thank You.
As long as you have width defined it is fairly easy:
.discussion_round_div {
width: 70px;
height: 70px;
border-radius: 100px;
border: thin #edf1f2 solid;
position: absolute;
background: #FFFFFF;
left: 50%; /*changed*/
top: 20px;
margin-left: -35px; /* added */
}
could you try to put :
.discussion_round_div {
width: 70px;
height: 70px;
border-radius: 100px;
border: thin #edf1f2 solid;
position: absolute;
background: #FFFFFF;
left: 50%;
margin-left: -35px;
top: 20px;
}
and tell us.
PD: this revision of cs is not tested
Change your css to this.
.discussion_round_div {
width: 70px;
height: 70px;
border-radius: 100px;
border: thin #edf1f2 solid;
position: absolute;
background: #FFFFFF;
left: 0;
top: 20px;
right: 0;
margin: auto;
}
This will keep round div always center. Hope this helps you.
.discussion_round_div {
width: 70px;
height: 70px;
border-radius: 100px;
border: thin #edf1f2 solid;
/*position: absolute;*/
position:relative;
margin:auto ;
margin-top:-62px;
background: #FFFFFF;
/*left: 36%;*/
top: 20px;
}
.discussion_round_div_icon{
position: relative;
top: 18%;
font-size: 20px;
height: 25px;
color:#adadad;
}
.discussion_icon_text{
text-align: center;
font-size: 10px;
color: #3d4354;
}
.padding_30{
padding:30px !important;
}
.bg-dark{
background:#000;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="panel discussion_panel_div no_background no_box_shadow" style="position: relative;">
<div class="panel-heading padding_30 no_border_radius bg-dark set_padding_0">
</div>
<div class="discussion_round_div">
<div class="text-center discussion_round_div_icon">
<span class="glyphicon glyphicon-check "></span>
<p class="discussion_icon_text">Approved</p>
</div>
</div>
</div>
A good way to center an absolute positioned element is by using:
left: 50%;
transform: translateX(-50%);
This is a better version of the classic trick that uses a negative margin since you don't need to know the width of your centered element for this solution to work.
So, just add:
.discussion_round_div {
width: 70px;
height: 70px;
border-radius: 100px;
border: thin #edf1f2 solid;
position: absolute;
background: #FFFFFF;
left: 50%;
top: 20px;
transform: translateX(-50%);
}
This is a JSFiddle. I think is perfectly centered...
If you want the white approved element to be in the center even if you resize the browser then you can use something like:
.class{
position:absolute;
left:50%;
margin-left: -100px; // if your white approved element width is 200px then set margin to -100
}
Good luck

Create iOS style new message animation using CSS

My Existing Code...
I am in the process of writing the front end for a chat system that will be used in my application. I have completed the initial styling for the chat messages, see here:
body {
background: #6960b7;
}
/* FOR SO TESTING */
* {
font-family: Helvetica;
}
p {padding:0;margin:0}
/* Define the chat container */
#chat_container {
width: 470px;
height: 300px;
}
/* Define the messages */
#chat_container .chat_message {
position: relative;
padding: 15px 30px 25px;
overflow: hidden;
}
#chat_container .chat_message .chat_avatar {
position: absolute;
bottom: 15px;
left: 0;
width: 70px;
height: 70px;
border-radius: 50%;
z-index: 10;
}
#chat_container .chat_message.me .chat_avatar {
left: auto;
right: 0;
}
#chat_container .chat_message .message {
position: relative;
left: 60px;
max-width: 255px;
word-wrap: break-word;
padding: 10px 20px;
background: #bc6deb;
float: left;
border-radius: 20px;
}
#chat_container .chat_message.me .message {
background: #4fa9e1;
float: right;
left: auto;
margin-right: 60px;
}
#chat_container .chat_message .message p {
font-size: 20px;
font-weight: 300;
text-align: left;
color: #fff;
line-height: 150%;
margin: 0;
padding: 0;
}
#chat_container .chat_message .time {
position: absolute;
bottom: 0;
left: 100px;
font-size: 15px;
color: #fff;
}
#chat_container .chat_message.me .time {
left: auto;
right: 100px;
}
/* Define the message chat ticks */
#chat_container .chat_message .message:before {
content: '';
position: absolute;
bottom: -2px;
left: -7px;
height: 20px;
border-left: 20px solid #bc6deb;
border-bottom-right-radius: 16px 14px;
transform: translate(0, -2px);
z-index: 2;
}
#chat_container .chat_message .message:after {
content: '';
position: absolute;
bottom: -2px;
left: 4px;
width: 26px;
height: 20px;
background: #6960b7;
border-bottom-right-radius: 10px;
transform: translate(-30px, -2px);
z-index: 3;
}
#chat_container .chat_message.me .message:before {
left: auto;
right: -7px;
border-color: #4fa9e1;
border-bottom-right-radius: 0;
border-bottom-left-radius: 16px 14px;
z-index: 2;
}
#chat_container .chat_message.me .message:after {
left: auto;
right: -56px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 10px;
z-index: 3;
}
<div id="chat_container">
<div class="chat_message me">
<img src="http://s11.postimg.org/fq4w6nq8z/ben_carey.png" class="chat_avatar">
<div class="message">
<p>Where are you?</p>
</div>
<p class="time">2 mins ago</p>
</div>
<div class="chat_message">
<img src="http://s11.postimg.org/fq4w6nq8z/ben_carey.png" class="chat_avatar">
<div class="message">
<p>We are at the bar!</p>
</div>
<p class="time">20 secs ago</p>
</div>
<div class="chat_message">
<img src="http://s11.postimg.org/fq4w6nq8z/ben_carey.png" class="chat_avatar">
<div class="message">
<p>What time do you reckon you will get here? We should be sticking around for a bit...</p>
</div>
<p class="time">Just Now</p>
</div>
</div>
What I am Trying to Achieve...
On iOS, when receiving a new message it used to animate when appearing on the screen (it doesn't anymore). I believe this animation was a combination of opacity and scale, although, I am not 100% sure.
I am not very keen on using the transform:scale() method as this does not render particularly well on retina screens (regardless of the size of the the graphic). Excluding JavaScript/jQuery at this stage, as I can handle this, is anyone aware of a pre-existing 'Pure CSS' solution to replicate the animation of new messages on iOS?

Categories