I want to style a custom HTML slider <input type="range"> which has some colored endpoints like this:
Currently I can achieve the result seen in the picture by:
input[type="range"] {
&:before{
content:'';
position:absolute;
background-color:red;
// width, height, positioning, ...
}
&:after{
content:'';
position:absolute;
background-color:green;
...
}
Moving the handle to the beginning or end of the range it produces this:
Trying to change z-index I can only paint the colored points completely in front of the slider or behind it.
I tried also to give different z-index values to the browser-specific classes (like ::-webkit-slider-runnable-track, ::-webkit-slider-thumb, ...) but that didn't help either.
Is it possible to paint the colored points "between" the slider rail and the handle so that the point is on top of the rail but the handle covers the point?
input[type="range"]:before{
content:'';
z-index: 5;
position:absolute;
width: 10px;
height: 10px;
top: 10px;
left:-10px;
background-color:red;
}
input[type="range"]:after{
content:'';
z-index: -1;
position:absolute;
width: 10px;
height: 10px;
right: -10px;
top: 10px;
background-color:green;
}
You can't put :before and :after elements behind the parent. So maybe if you put your :before/:after elements before and after the range bar with left:-10px; and right: -10px; your problem will be solved?
Related
I am trying to make the size column in this next to the color column. The problem is that I can only edit the CSS, and I am using the Woocomerce plugin for WordPress. I only want the two columns to be next to each other, but with absolute or relative position + some adjustments, they work for one product, but not for the others. That is because the color column is not always the same length, which changes the starting position of the size column.
This is what I managed to do. (the code that affects the position starts after /***/
/*this one involves the whole banner with the logo and the phone numbers (but it is ignored by the children for aesthetic purposes)*/
#masthead {
background-color: rgba(140,210,190, 0.2);
height: 210px;
}
/*this one is the logo AeryUniforms*/
.custom-logo-link {
}
/*this one is for the bar with the contact and the address*/
.right-head{
border-radius: 5px;
background-color: rgba(250,250,250, 10.0) !important;
}
/*this one is the menu with the home button*/
#main-nav {
background: #323a45;
}
/*these two are for the arrows in the carrousel*/
.fa-angle-left{
position:relative;
top: -30px;
right: 4px;
}
.fa-angle-right{
position:relative;
top: -10px;
right: 2px;
}
/*this one handles the width of the color, size, and height drop and buttons*/
.variation-selector,
.variation-select-color,
.swatch-item-wrapper{
width: 50%;
}
/***/
/*adjust the position of the label for the color*/
label[for="pa_color"]{
position:relative;
top: -23px;
right: -52px;
}
/*adjust the position of the button for the size*/
div[data-attribute_name~="attribute_pa_size"]{
float:right;
position:relative;
top: -377px;
right: 86px;
}
/*adjust the position of the drop-item menu for the size*/
select[id="pa_size"]{
position:relative;
top: -377px;
right: -140px;
}
/*adjust the position of the label for the size*/
label[for="pa_size"]{
position:relative;
top: -400px;
right: -190px;
}
I was looking for a way to make the tr element for the size aligned with the one of color, like a position x + 3px from element 1. My last resort was to do the position relative to the top right corner of the page, but I wasn't sure how, or if the elements would move as I scroll through the page.
So it is hard to suggest a solid solution without knowing the HTML. CSS only gets us part of the way there. What I would do if at all possible based on the structure is if each option is contained in its own box and the 3 boxes are in one parent. I would display: flex that parent which will put them all side by side. Then adjust as needed from there. If you could add the html just for those 3 boxes and that section it would help.
I've seen in previous answers that :after will go behind a its parent when the child is set to:
z-index:-1;
...and the parent is set with no z-index so the -1 defines the order.
I've done this yet it still remains above the parent in the stack (as represented by the green bar over the black square.) How can I make the green bar move to the bottom of the stack? Thanks.
http://jsbin.com/xoguzezupego/1/edit
The problem is that the two pseudo-elements are stacked as if they were child elements of .left-table, and as such, they form a stacking context that is considered to be part of the stacking order of their parent block, that is, .left-table.
You need to create a background masking element that is a child of .left-table and then
positioning it absolutely within .left-table.
When you do this, then the z-index can be used to stack the green rectangle behind the red and
black elements.
Read more about how stacking order works: http://www.w3.org/TR/CSS21/zindex.html#stacking-defs
Note: It was not clear to me what the transforms were trying to do so I left them out since
they were not relevant to the issue of the stacking order.
.left_table{
position:absolute;
top:0px;
left: 0;
width:250px;
height:175px;
}
.inner-mask {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: #000;
}
.left_table:before{
content:'';
position:absolute;
background-color: red;
bottom:-28px;
width:250px;
height:30px;
}
.left_table:after{
content:'';
position:absolute;
background-color: green;
right:30px;
width:15px;
height:250px;
z-index: -1;
}
<div class="left_table">
<div class="inner-mask"></div>
</div>
Basically I have a Picture in a div nested in 2 divs. I wanted to overlay a piece of tape onto it at the corner of the picture.
So I made a div for that piece of tape image and put it at the bottom of the document giving it the position of relative and giving it these attributes.
#tape
{
width: 100px;
height: 65px;
position:relative;
left: 25px;
top: -662px;
}
And here is the Picture's attributes:
#character-spotlight
{
margin-left:50px;
width:250px;
height:250px;
float:left;
z-index:1;
}
Bot of these Div's are nested into
#content
{
width:800px;
height:1360px;
background-image:url(Cork.Board.png);
background-size:100%;
float:left;
display:block;
}
Which is itself nested into
#container
{
width: 1024px;
height:1600px;
margin-left:auto;
margin-right:auto;
margin-top: 50px;
display:block;
}
Here is the webpage
www.workaholicsfans.com/characters-files/Adam-Demamp.html
It works fine in Chrome but not IE and Firefox.
Any help would be greatly appreciated
(There is no link in your post) I can hardly believe the situation you described and provided css could work. The fact that you have it working in Chrome is just pure luck i guess, are you might have been playing with the numbers to make it fit.
The solution is actualy rather simple.
<div class='picture-wrapper'>
<img class='picture' src='picture.../>
<img class='tape' src='tape... />
</div>
then in the css
.picture-wrapper {
position: relative; /* this now acts as the reference for position absolute of the children */
}
.tape {
display: block;
position: absolute; /* position according to its parent */
top: 0; /* top position */
left: 0; /* left position */
z-index: 5; /* bring to front */
}
That should do the trick.
edit:
i just saw you added the link. If you want the piece of tape to overflow the picture edges, the easy way would be to add some padding-top and padding-left to the wrapper. something like this:
padding: 8px 0 0 8px;
Or if you want it to be absolute positioned according to the page container:
#tape {
height: 65px;
left: 325px;
position: absolute;
top: 300px;
width: 100px;
}
(But I must admit that I like PeterVR's code better since this keeps things relative, which comes in handy if you position 'new' stuff above the #tape div).
I want my footer to always be on the bottom and move to adjust to the size of the content inside the page. Right now I have dynamic content that covers the footer because it's to much content.
How can I fix my CSS:
div#Footer {
width: 100%;
height: 80px;
padding: 1px;
-moz-border-radius: 35px;
border-radius: 35px;
background-color: Black;
color: #ffffff;
position: fixed;
bottom: 0;
text-align: center;
margin-left: auto;
margin-right: auto;
}
Its a little unclear what you want but this code has worked well for me.
Credit - http://css-tricks.com/snippets/css/fixed-footer/
#footer {
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
background:#999;
}
/* IE 6 */
* html #footer {
position:absolute;
top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}
This is a simpler solution.
#footer {
bottom: 0%;
position: fixed;
}
You need to post more html/css to be positive of what is going on here, but it sounds like your footer is being covered by your content page. If this is the case then setting a z-index on the footer will probably sort the issue.
z-index: 1000;
This can also typically be sorted by making sure your footer appears at the end of your html, as elements declared later appear on top of previous ones.
Had a similar issue.
Set "position" to "relative". The position of the element can't change based on the page length if it's set to "fixed".
i think you actually need the align:joe; inside of a candice div to accurately place the element on the deez axis.
In the attached image, i want to remove the space of the left of content aria, same space is there on right side of page, remaining parts of interface have spanned over the whole width but it is not spanning over the whole width.
How can i span it on the whole width without disturbing the upper parts of interface?
I'm having the following css file.
#logo {
left:13px;
top:-3px;
position:absolute;
z-index:2;
}
#heading {
height: 150px;
right: 0px;
left: 0px;
top: 0px;
margin-bottom: 5px;
background: #e8e8e8;
position:absolute;
z-index:0;
}
#upperMenu{
position:absolute;
height: 25px;
padding-top:2px;
right: 0px;
left: 0px;
top: 105px;
background: #e38217;
position:absolute;
z-index:1;
}
#content {
right: 0px;
left: 0px;
border: thin solid lightGray;
background: #F0F0F0;
margin-top:150px;
height:700px;
padding-bottom: 20px;
}
It's hard to give accurate advice when you've only shown your CSS and not your HTML but I'd say straight off that you're using too much absolute positioning. You should be trying to work with the normal document flow wherever possible using margins and padding to create space or move elements away from each other. Sometimes you'll also need floats, and usually, absolute positioning will be the final resort.
You should also validate your CSS because you have a few errors like specifying right and left values for elements that aren't either position relative or absolute.
You should also be careful specifying fixed heights and instead let the content of an element dictate how high it or its parent should be. If you specify a fixed height and the content is too long, it'll either spill out of the box or be hidden if you've set overflow:hidden on the parent.