im currently in need of some help regarding this issue. Id like the loading gif to be placed above the drop down.
Here is the CSS for the dropdown and loading gif.
dropdown
.form-horizontal .control-group {
position: relative;
z-index: 0;
*zoom: 1;
}
here is the code for the loading image
.uiGridLoading,
.uiOtherLoading
{
position: absolute;
bottom: 11px;
right: 11px;
left: 11px;
top: 53px;
background: #ffffff;
/*z-index: 900;*/
}
.uiOtherLoading
{
bottom: 0px;
right: 0px;
left: 0px;
top: 0px;
}
div.uiGridLoading-outer,
div.uiOtherLoading-outer
{
display: table;
border-collapse: collapse;
width: 100%;
height: 100%;
}
div.uiGridLoading-inner,
div.uiOtherLoading-inner
{
text-align: center;
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%;
}
span.uiGridLoading-text,
span.uiOtherLoading-text
{
text-align: center;
background: url('/img/progress.gif') top center no-repeat;
padding-top: 47px;
font-size: 14px;
line-height: 22px;
color: #666666;
font-weight: 600;
display: block;
margin: 0 auto;
min-width: 32px;
}
As you can see the gif loading image is behind the drop down. I know z-index is not the problem
Related
How can I make a dot under text using only CSS as shown in below picture?
The picture needs to be always in middle with any length of string.
Probably I need to use :before OR :after? I've tried but result was awful.
A transformed pseudo element can be used to create this:
body { text-align: center; }
.text {
display: inline-block;
vertical-align: top;
padding-bottom: 10px;
position: relative;
text-align: center;
padding: 20px 10px;
line-height: 24px;
min-width: 100px;
background: #333;
font-size: 20px;
color: #fff;
}
.text::before {
transform: translateX(-50%);
border-radius: 100%;
position: absolute;
background: blue;
bottom: 10px;
height: 8px;
content: '';
width: 8px;
left: 50%;
}
<div class="text">about</div>
.char {
display: inline-block;
position: relative;
}
.char::before {
content: '.';
display: inline-block;
position: absolute;
bottom: -0.5em;
left: 0;
text-align: center;
width: 100%;
}
After writing this question on stack i come up with idea:) Its works excatly like I want :)
When you try to apply top margin on the second page the header does not behave correctly.
Page 1:
Page 2:
CSS
body {
font-family: Arial, Helvetica Neue, Helvetica,sans-serif;
font-size: 14px;
}
#page {
margin: 100px 25px;
}
header {
position: fixed;
top: -70px;
left: 0px;
right: 0px;
height: 50px;
}
main {
margin-top: 60px;
}
footer {
position: fixed;
bottom: -100px;
left: -60px;
right: -60px;
background-color: #3f8d99;
height: 60px;
border-top: 1px solid #333;
font-size: 12px;
width: 100%;
padding-top: 6px;
padding-left: 60px;
padding-right: 60px;
color: white;
}
footer .pagenum:before {
content: counter(page);
}
footer .pagenum-container {
margin-top: 16px;
float: right;
}
I tried to follow some ideas, especially from this Post, but I did not succeed.
Thanks for the help.
I found a solution to my problem. I changed some lines of the CSS file.
#page {
margin: 140px 25px 100px 25px;
}
header {
position: fixed;
top: -136px;
left: -60px;
right: -60px;
width: 100%;
}
And removed main class.
/*main {
margin-top: 30px;
}*/
See the result. Page 2:
How can I make a dot under text using only CSS as shown in below picture?
The picture needs to be always in middle with any length of string.
Probably I need to use :before OR :after? I've tried but result was awful.
A transformed pseudo element can be used to create this:
body { text-align: center; }
.text {
display: inline-block;
vertical-align: top;
padding-bottom: 10px;
position: relative;
text-align: center;
padding: 20px 10px;
line-height: 24px;
min-width: 100px;
background: #333;
font-size: 20px;
color: #fff;
}
.text::before {
transform: translateX(-50%);
border-radius: 100%;
position: absolute;
background: blue;
bottom: 10px;
height: 8px;
content: '';
width: 8px;
left: 50%;
}
<div class="text">about</div>
.char {
display: inline-block;
position: relative;
}
.char::before {
content: '.';
display: inline-block;
position: absolute;
bottom: -0.5em;
left: 0;
text-align: center;
width: 100%;
}
After writing this question on stack i come up with idea:) Its works excatly like I want :)
this site has been giving me some issues with the width of some elements with cross-browser compatibility for the tablet and phone styling.
The class is .p_phoneand .p_phone a
.p_phone {
font-size: 20px;
width: 145px;
left: 40%;
margin: 0 !important;
height: 30px;
opacity: 1;
top: -4px;
text-align: center;
color: #fff;
position: relative;
}
.p_phone a {
color: #fff;
background-color: #1968a1;
font-weight: 800;
padding: 5px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
Basically, It needs to match the width of this class, which is a image, which it does on chrome and opera, but on safari, firefox, and edge, it does not match, and breaks to the next line.
.p_call {
font-size: 20px !important;
top: -13px;
left: 40%;
width: 145px;
margin: 0;
background-image: url(http://dchna4xuxekpx.cloudfront.net/wp-content/uploads/2016/06/15142416/call-us.png);
vertical-align: middle;
height: 40px;
line-height: 40px;
text-align: center;
position: relative;
float: left;
padding: 0;
}
Increasing the width to 150px fixes it, but it is then too wide for the image.
How it needs to be:
Try Changing these class's (have checked them on this link provided by you)
.textwidget {
font-size: 18px;
position: relative;
width: 160px;
margin: auto;
}
.p_call {
font-size: 20px !important;
top: -13px;
left: 40%;
margin: 0px;
background-image: url('http://dchna4xuxekpx.cloudfront.net/wp-content/uploads/2016/06/15142416/call-us.png');
vertical-align: middle;
height: 40px;
line-height: 40px;
text-align: center;
position: absolute;
float: left;
padding: 0px;
width: 100%;
background-size: 100%;
}
.p_phone {
font-size: 20px;
margin: 0px !important;
height: 30px;
opacity: 1;
top: 27px;
text-align: center;
color: #FFF;
position: absolute;
width: 100%;
left: 40%;
}
.p_phone a {
color: #FFF;
background-color: #1968A1;
font-weight: 800;
padding: 5px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
display: inline-block;
width: 100%;
}
The divs belonging to p_call class and p_phone were not wrapped properly by textwidget class. Hence we have to give two different width's, now since textwidget is wrapping both the class's, they will have same width. Hope it helps. Tested on both chrome and firefox.
Try to add this to your styling block for .p_phone a:
white-space: nowrap;
My code display correctly on local, with a diamond shape in the middle of the navigation bar, but the "plus" sign missing the bottom part.(It's what I want to know how to fix it)
However, the outlook changed significantly after I pasted code into JSfiddle and Codepen.io
http://codepen.io/yumikohey/pen/PwPYxN
http://jsfiddle.net/yumiko/ae1zmqpa/
CSS
body{
}
header{
width: 100%;
height: 80px;
}
#top{
width: 100%;
height: 50px;
background-color: #000;
border-bottom: 10px solid #C2973C;
}
#socialBar_top{
width: 25%;
height: 30px;
margin: 0 10px;
float: right;
}
ul {
list-style-type: none;
padding: 10px;
}
ul li {
display: inline;
}
#expandButton {
width: 100%;
padding-left: 46%;
margin-top: 10px;
}
.centerBox{
margin-top: -50px;
padding-top: -10px;
}
#diamondButton {
width: 0;
height: 0;
border: 30px solid transparent;
border-bottom-color: #C2973C;
position: relative;
top: -30px;
}
#diamondButton:after {
content: '';
position: absolute;
left: -30px;
top: 30px;
width: 0;
height: 0;
border: 30px solid transparent;
border-top-color: #C2973C;
}
#plusSign {
margin: -30px 0 -0 -14px;
color: #fff;
font-size: 3em;
}
Thanks in advance for your generous help.
Try this :
#plusSign {
color: #fff;
font-size: 2em;
margin: 0 0 0 -9px;
position: absolute;
top: 29px;
z-index: 100000;
}
Fixed the issue with this code,
#plusSign {
margin-left: -14px;
color: #fff;
font-size: 3em;
position: absolute;
top: 0;
z-index: 100;
}
But can anyone explain why codePen and JSfiddle cannot display my code correctly?