I have a problem I couldn't solve.
I have two html elements that I don't want to be in top of each other like the pictrue.
What I want to do is to seperate them away from each other so user can see them
The banner css code:
.banner {
width: 100%;
height: auto;
position: relative;
z-index: auto;
}
The product css code:
.product-grid {
text-align: center;
padding: 0 0 72px;
border: 1px solid rgba(0, 0, 0, .1);
overflow: hidden;
position: relative;
z-index: 1;
box-shadow: 0 3px 20px rgba(0, 0, 0, 0.08);
}
I tried everything it won't work.
Try change
Product grid position to absolute
Related
I am trying to get a div(main) to sit centred withing another div(centre), the div(main) needs to be static as I don't want it to scroll but the div(centre) has to be absolute so it can sit on a separate div with an onclick function.
current HTML and css:
<div className='meal_popup'>
<div className='meal_popupElement'>
<p>testing1</p>
</div>
<div onClick={this.mealOne_boxClickHandler} className='meal_popupBackground' />
</div>
.meal_popup {
position: fixed;
display: flex;
align-items: center;
top: 0;
width: 100%;
height: 100%;
z-index: 30;
}
.meal_popupElement {
position: absolute;
width: 100%;
height: 100%;
background: white;
border-radius: 15px;
height: 35rem;
margin-left: 1rem;
margin-right: 1rem;
box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14),
0px 1px 3px 0px rgba(0, 0, 0, 0.12);
z-index: 2;
}
.meal_popupBackground {
position: relative;
background: rgba(00, 00, 00, 0.6);
width: 100%;
height: 100%;
z-index: 1;
}
Result:
Goal:
(this visually looks how I want but the problem is the whole div is clickable and only want that function on the background HTML and css:)
<div onClick={this.mealTwo_boxClickHandler} className='meal_background'>
<div>
<p>testing2</p>
</div>
</div>
.meal_background {
position: fixed;
display: flex;
align-items: center;
top: 0;
width: 100%;
height: 100%;
background: rgba(00, 00, 00, 0.6);
z-index: 30;
}
.meal_background div {
background: white;
border-radius: 15px;
height: 35rem;
width: 100%;
margin-left: 1rem;
margin-right: 1rem;
box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14),
0px 1px 3px 0px rgba(0, 0, 0, 0.12);
}
To center any element with position property different than static, you can use the following code. However, be clear that the following code takes slightly more CPU time than other methods;
To center Horizontally
left:50%;
transform: translateX(-50%);
To center vertically
top: 50%;
transform: translateY(-50%);
And particularly for this answer apply right: 0px; on the container with fixed positioning and also apply the code to center horizontally on the element you want to center.
So the problem appears to be with setting left a or right margin values at the edge to create a space either side like I normally would. so instead of width 100% and 1rem left/right margin (which id use as is great for scaling. I had set a preset width and implement the code above provided by #RitanshuSingh.
so my code looks like this:
.meal_popup {
position: fixed;
display: flex;
align-items: center;
top: 0;
width: 100%;
height: 100%;
z-index: 30;
}
.meal_popupElement {
position: absolute;
width: 90%;
left: 50%;
transform: translateX(-50%);
background: white;
border-radius: 15px;
height: 35rem;
box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14),
0px 1px 3px 0px rgba(0, 0, 0, 0.12);
z-index: 2;
}
.meal_popupBackground {
position: relative;
background: rgba(00, 00, 00, 0.6);
width: 100%;
height: 100%;
z-index: 1;
}
preferably would like to select a margin but this works for now if you know how to get that working please post a fix.
result:
I have a progress bar, and I am trying to adjust the height of the parent item based on the content of the :after pseudo element. Once you run the code, you will see that the 30% is partially inside the div.
Is there a way for me to adjust the height of the element that the :after is attached to?
I tried changing the display property of the :after item but that didn't do anything.
.pure-progress {
display: block;
position: relative;
width: 100%;
min-height: 10px;
}
.pure-progress>.pure-progress--bar {
position: absolute;
background-color: blue;
height: 100%;
transition: width 200ms ease-in-out;
}
.pure-progress:after {
position: absolute;
height: inherit;
line-height: 1.8rem;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 100%;
text-align: center;
content: attr(data-progress);
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2), inset 0 2px 3px rgba(0, 0, 0, 0.2);
}
<div class="pure-progress" data-progress="30%">
<div class="pure-progress--bar" style="width:30%"></div>
</div>
You can change absolute to relative and add display: block - see demo below:
.pure-progress {
display: block;
position: relative;
width: 100%;
min-height: 10px;
}
.pure-progress>.pure-progress--bar {
position: absolute;
background-color: blue;
height: 100%;
transition: width 200ms ease-in-out;
}
.pure-progress:after {
/*position: absolute;*/
position: relative; /* ADDED */
display: block; /* ADDED */
height: inherit;
line-height: 1.8rem;
/*
left: 0;
right: 0;
top: 0;
bottom: 0;
*/
margin: auto;
width: 100%;
text-align: center;
content: attr(data-progress);
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2), inset 0 2px 3px rgba(0, 0, 0, 0.2);
}
<div class="pure-progress" data-progress="30%">
<div class="pure-progress--bar" style="width:30%"></div>
</div>
You can update the css of .pure-progress:after to
.pure-progress:after {
display: block;
height: inherit;
line-height: 1.8rem;
margin: auto;
width: 100%;
text-align: center;
content: attr(data-progress);
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2), inset 0 2px 3px rgba(0, 0, 0, 0.2);
}
demo
Update
My answer does not work when the progress bar is overlapping the content text. Therefore it is necessary to position it using position: relative as suggested by kukkuz
The updated styles look like:
.pure-progress:after {
position: relative;
display: block;
height: inherit;
line-height: 1.8rem;
text-align: center;
content: attr(data-progress);
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2), inset 0 2px 3px rgba(0, 0, 0, 0.2);
}
Updated demo
How can I set z-index of the drop-down autocomplete box over a background image?
Here is a screenshot:
Below four images are background images with sprite CSS and the area box is drop-down autocomplete and it has position set to absolute and z-index set to 100, but still it's not overlapping background image.
Here is the CSS for the drop-down box and the bottom section.
Drop Down Box:
.tt-dropdown-menu,
.tt-menu {
position: absolute;
top: 79%!important;
left: 9px!important;
z-index: 1000;
min-width: 160px;
width: 94%;
padding: 5px 0;
margin: 2px 0 0;
list-style: none;
font-size: 14px;
background-color: #ffffff;
border: 1px solid #cccccc;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 0px!important;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
background-clip: padding-box;
}
Below Section:
.hero-banner {
color: #555;
padding-top: 50px;
padding-bottom: 50px;
background-color: #EFEDEB;
border-bottom: 1px solid #D2D2D2;
}
Sprite CSS:
.why_casebox {
background-image: url(../images/why-casebox/why_casebox.png);
background-repeat: no-repeat;
display: block;
margin: auto;
}
.sprite-verified {
width: 128px;
height: 128px;
background-position: -143px -143px;
}
Even though the title and description text are also overriding.
.hero-banner {
z-index: 0;
}
or
I don't know whether it is position above for whole div or for the third child with icon.
.why_casebox {
z-index: 0;
}
so that image will position behind the dropdown.
Here is my jsfiddle: http://jsfiddle.net/zrqx5e34/
I have been created simple rounded images, now i want to add paragraph between two images,
Need to shows right side of between the images.
May i know how to do this? Can anyone help me? Thanks in advance.
http://s9.postimg.org/uloaz1mnj/Untitled_1.png
css:
.circular {
width: 100px;
height: 100px;
border-radius: 150px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
background: url('img/saina1.png') no-repeat;
box-shadow: 0 0 8px rgba(0, 0, 0, .8);
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
margin-bottom: 130px;
position: relative;
}
.circular:after {
background-color: green;
content: "";
display: block;
height: 128px;
position: absolute;
bottom: 100px;
width: 2px;
left: 50px;
}
.circular:first-child:after {
display: none;
}
Try like this: Demo
As you are limiting the circular class width, its not possible to show beyond that while placing text inside it. So we can achieve something like this only
CSS:
.circular > p{
margin-top:90px;
margin-left:70px;
float:left;
height:128px;
width:100%;
overflow:hidden;
}
I'm trying to position some text in the middle of a CSS box. i tired using top:20px; but this moved the whole but rather than the text. any idea how can i do this?
here is my code: jsfiddle
div {
background: #ff9600;
background: rgba(255, 150, 0, 0.95);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-moz-box-shadow: inset 0 0 0 1px rgba(255, 182, 78, 1), 0 0 20px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: inset 0 0 0 1px rgba(255, 182, 78, 1), 0 0 20px rgba(0, 0, 0, 0.6);
box-shadow: inset 0 0 0 1px rgba(255, 182, 78, 1), 0 0 20px rgba(0, 0, 0, 0.6);
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
text-align: center;
z-index: 10;
}
<body>
<div>text</div>
</body>
Example 1
something like: this fiddle.
It uses the css of:
div {
height: 100%;
width: 100%;
background: #000;
font-size: 12px;
font-style: oblique;
color: #FFF;
text-align: center;
margin-top: 20px;
margin-left: 5px;
line-height: 80px;
}
which could be quite beneficial for you. :)
Example 2
A more versatile way would be to use span like this demo
which uses:
div {
width: 250px;
height: 100px;
line-height: 100px;
text-align: center;
border: 1px solid #123456;
}
span {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
Possible Alternative to (2)
A slight variation of the second example would be to treat the div like a table cell, so altering the above css to:
div {
display: table;
width: 250px;
height: 100px;
text-align: center;
border: 1px solid red;
}
span {
display: table-cell;
vertical-align: middle;
}
And so this should also work for you.
Try to this
Remove this css in
width:100%;
height:100%;
add this css
left:0;
right:0;
top:0;
bottom:0;
padding-top:20px;
Demo
You could use padding to move the text inside the box.
However, I think that you should create a tag (a box) especially for the text, and give it some css property to center this box in the center of the main div (the main box).
Try this my code:
<div>
<span class="vertical-text">
TEXT
</span>
</div>
$('.vertical-text').each(function()
{
parent_height = $(this).parent().height();
$(this).parent().css(
{
'height': parent_height + 'px',
'line-height': parent_height + 'px',
});
$(this).css(
{
'line-height': 'normal',
'display': 'inline-block',
});
});
Demo: http://jsfiddle.net/Silon/caonccjx/