I am trying to create a stacked box look using ::after. I created the code in a codepen (https://codepen.io/nk-creative/pen/vqvVJL), but when I place the code on the Wordpress site I am working on, I can't achieve the same stacking effect in the same order (http://aptw.nk-creative.com/)
I created the code in a codepen (https://codepen.io/nk-creative/pen/vqvVJL).
<div class="offset-boxes">
<h4>47 Locations & Personalized Plans. Meet Your New Partner.</h4>
</div>
.offset-boxes {
position: relative;
max-width: 300px;
height: 290px;
background-color: lightpink;
margin-top: 20px;
padding: 25px
}
.offset-boxes::after {
content: "";
width: 100%;
right: -40px;
top: -40px;
height: 100%;
background-color: red;
position: absolute;
z-index: -1;
}
I expected the code to look like the codepen, but the WP site does not.
It looks like your ::after pseudo element is buried. You can add this to your CSS to the parent element of .offset-boxes:
.textwidget {
position: relative;
z-index: 1;
}
Related
I have a stackblitz here
This should be the simplest thing but I can't see why its not working.
I have react app with Typescript and a styled components, I'm sure none of that is the problem this is just css.
I'm trying to position two divs on top of each other.
The container has position: relative;
And then the div are absolutely positioned.
.FlexContainerColOne,
.FlexContainerColTwo{
position: absolute;
top: 0;
left: 0;
}
But both div disappear, what am I missing
From what I am seeing here is that they are not disappearing, you just can't see them because they don't have a width assigned or content. See the following, I added width, and opacity to show the two divs merging over each other.
stackblitz snippet
Result:
flexcontainer {
position: relative;
}
.FlexContainerColOne,
.FlexContainerColTwo {
position: absolute;
top: 0;
left: 0;
}
.FlexContainerColOne {
background: red;
height: 500px;
width: 500px;
opacity: 0.5;
}
.FlexContainerColTwo {
background: green;
height: 500px;
width: 500px;
opacity: 0.3;
}
<flexcontainer>
<div class="FlexContainerColOne"></div>
<div class="FlexContainerColTwo"></div>
</flexcontainer>
I'have 3 div blocks and I would like to place them as in the picture.
It works with the following CSS code, but when I resizes my browser, the blocks aren't exactly at the same position (you can see it at the 2 pictures with comments).
Do you have an idea ? Maybe an other position (absolute or other ?).
PS : I use relative position because I use JqueryUI (draggable, resizable) to create blocks and to position them.
Thanks.
Here is the CSS code :
#corps {
background: black;
}
#bloc {
width: 40%;
background: blue;
position: relative;
top: 50px;
}
#bloc2 {
width: 40%;
background: lime;
position: relative;
top: 100px;
left: 2%;
}
#bloc3 {
width: 45%;
background: purple;
position: relative;
top: -300px;
left: 50%;
}
The problem here is the relative positioning. It's going to cause the elements to be positioned relative to the parent container #corps. If you don't plan on editing that with jQuery in any other way, it's not going to behave like you're describing you'd like it to.
Here's a jsfiddle that iterates the best way to accomplish what you're looking for with css using inline-block display and vertical alignment: https://jsfiddle.net/4gw22vrh/
#corps {
background: black;
}
#bloc {
width: 40%;
background: blue;
display:inline-block;
}
#bloc2 {
width: 40%;
background: lime;
}
#bloc3 {
width: 45%;
background: purple;
display:inline-block;
vertical-align:top;
}
I have a div with a background image that should be covered with a mask effect. On that div should be some content. I'm trying to get the content to be over the mask but for some reason it isn't working.
I added a jsFiddle:
http://jsfiddle.net/FHt9d/
Here is the code:
Html:
<div id="container">
<div id="mask"></div>
<div id="content"><h1>This is a header</h1></div>
</div>
Css
#container
{
width: 100%;
height: 246px;
position: relative;
background-repeat: no-repeat;
background-size: 100%;
background-image: url('http://upload.wikimedia.org/wikipedia/commons/d/d8/Skyline_oklahoma_city.JPG')
}
#mask
{
z-index: 1;
height: 100%;
width: 100%;
background-color: rgba(75,139,228,.8);
position: absolute;
top: 0;
left: 0;
}
#content h1
{
z-index:2;
font-size: 32;
color: #fff;
}
The text should not be covered by the mask. Any help would be greatly appreciated,
Thanks!
try this (you missed a position: relative;):
#content h1 {
color: #FFFFFF;
position: relative; //missed
z-index: 2;
}
The elements that have
position: absolute
are always on top. Same thing applies to
position: fixed;
They always float above the elements in a browser.
To minimize this, you use
z-index: value;
For the elements with position value set, you can use:
z-index: 1;
and change it for the element you want to be above others
z-index: 2; /* or more than 2 */
This will do the job.
You missed a position: relative; on the #content h1. Indeed, z-index applies only on positionned elements.
My nivoslider slideshow on my index page shows us correctly in chrome, IE 10 and opera.
Only in Firefox it shows us up on the right side.
Here is my site: http://www.colombian-emerald-jewelry.com/
How can I fix this ?
I appreciate your help
You can also just add float:left; to the nivoSlider class:
.nivoSlider {
float: left;
height: auto;
overflow: hidden;
position: relative;
width: 100%;
}
Positioning is the way I got it working, in both browsers try this:
Add:
.slider-wrapper {
height: 350px;
position: relative;
}
Edit:
.theme-default .nivoSlider {
background: url("loading.gif") no-repeat scroll 50% 50% #FFFFFF;
box-shadow: 0 1px 5px 0 #D3D3D3;
position: absolute;
}
.theme-default .nivo-controlNav {
bottom: 0;
clear: both;
left: 45%;
overflow: hidden;
padding: 0;
position: absolute;
}
In case anyone meets the same problem, but wants to avoid using float (it forces using clearfix if your slider is let's say above the main content of page), the clear: both works even better.
.nivoSlider {
height: auto;
overflow: hidden;
position: relative;
width: 100%;
clear: both
}
I'm trying to create a layout where there is a fixed width and fixed position sidebar on the left.
The problem is setting the width of the main content area - it stretches off the screen to the right. Here's what I've got:
<body>
<div class="left-sidebar">
sidebar
</div>
<div class="main-content">
main
</div>
</body>
CSS:
body {
position: relative;
}
.left-sidebar {
position: fixed;
top: 0;
left: 0;
width: 220px;
}
.main-content {
position: absolute;
top: 0;
left: 220px;
background: #f0f0f0;
width: 100%;
}
How can I have the main content div start at 220px from the left, but only fill the window width?
Try setting the main content to appear fully left but give it a margin-left to make room for the sidebar.
.main-content {
position: absolute;
top: 0;
left: 0px;
margin-left: 220px;
background: #f0f0f0;
width: 100%;
}
Edit:
I've had a bit of time now to try out the code. I suggested margin-left instead of padding-left because it fits better with what you want to do. Using margin gives you the option of putting a border around your content. Also, if you actually do want padding in the content you can set it as normal. if you used a padding to indent for the sidebar you'd have to add the 220px to whatever actual padding you wanted.
This is what I came up with to get it working with margins instead of padding.
body {
margin: 0;
padding: 0;
border: 0;
}
.left-sidebar {
position: absolute;
top: 0;
left: 0;
width: 220px;
border: 1px solid green;
}
.main-content
{
position: fixed;
top: 0;
left: 0px;
right: 0px;
margin-left: 220px;
background: #f0f0f0;
border: 1px solid red;
}
I also agree with the anser referencing dynamic drive. One of the best ways to learn CSS initially is to have a go with a working stylesheet and customise it for your needs. The big advantage is it will already be cross browser compatible. Just use Google to find a bit of inspiration.