I'm building a carousel with HTML/CSS and have a problem I can't get my head around.
I have absolutely positioned children (.card) in a carousel-container and want them to slide from side to side when clicking the links below. This works fine when going from card4 backwards to card1, but not forwards from card1 to card4. Then it just jumps to card4 and seems to push the active card off the screen.
Strangely, when I edit my non-active cards' position to
left:95%;
instead of
left:100%;
(see at the very bottom of the CSS snippet), it works as expected.
Tested in Chrome, Firefox and on Codepen
View on CodePen
Thank you very much for your help.
This is my code:
*{
box-sizing: border-box;
}
.carousel-links{
text-align:center;
position:fixed;
bottom: 5%;
left:0;
right:0;
z-index:100;
}
.carousel-links a{
display: inline-block;
border-radius: 5px;
border: 1px solid black;
padding: 1em;
background:white;
}
.carousel{
position: relative;
width:100%;
height:80vh;
background:yellow;
border:5px solid black;
display:block;
overflow-x: hidden;
}
.card{
position: absolute;
top:0;
left:-100%;
width:100%;
height:100%;
border: 1px dashed black;
font-size:100px;
transition: all 2s;
z-index:1;
}
.carousel > .card:target{
left:0%;
//background:rgba(255,0,0,1);
z-index:2;
}
.carousel > .card:target~*{
left:100%;
/* left:95%; /*with this line it works */
z-index:0;
}
<div class="carousel-links">
1
2
3
4
</div>
<div class="carousel">
<div class="card" id="card1">1</div>
<div class="card" id="card2">2</div>
<div class="card" id="card3">3</div>
<div class="card" id="card4">4</div>
</div>
Related
When I absolute-position an element inside a relative element, the coordinates are calculated from the edges of the container without taking into account the borders (what would be equivalent to positioning from the interior side of the border.)
Is there any way of positioning the element but from the exterior side of the border?
For example: if I have a red square (like the first one) without a border, the text sticks to the top left of the container because it has top:0; left:0. But the text in the second square still has top:0;left:0, but the border pushes the text inside the square:
.box {
position:relative;
width:150px;
height:150px;
background:red;
box-sizing:border-box;
margin:10px;
float:left;
}
.box-bordered {
border:25px solid rgba(0,0,0,0.1);
}
.text {
position:absolute;
top:0;
left:0;
color:white;
}
<div class="box">
<div class="text">Text</div>
</div>
<div class="box box-bordered">
<div class="text">Text</div>
</div>
What I would like for it is for the text to keep sticking to the top left corner of the colored area. Is that possible? How could it be done?
Note: This is more of a theory question out of curiosity; I know there are alternatives that will work (at least visually) like using negative margins, negative positioning values or an inset box-shadow:
.box {
position:relative;
width:150px;
height:150px;
background:red;
box-sizing:border-box;
margin:10px;
float:left;
}
.box-shadow {
box-shadow:inset 0 0 0 25px rgba(0,0,0,0.1);
}
.text {
position:absolute;
top:0;
left:0;
color:white;
}
<div class="box box-shadow">
<div class="text">Text</div>
</div>
but what I would like to know if it it's possible doing while keeping the borders.
No box shadow but not quite border either. How about this?
.box {
position:relative;
width:150px;
height:150px;
background:red;
box-sizing:border-box;
margin:10px;
float:left;
}
.box:before {
content:" ";
border:25px solid rgba(0,0,0,0.1);
height:100%;
z-index:1;
position:absolute;
box-sizing:border-box;
width:100%;
}
.text {
position:absolute;
top:0;
left:0;
color:white;
z-index:2;
}
<div class="box">
<div class="text">Text</div>
</div>
or box-bordered:after if you want to keep the class on the div element
The only two solutions that come to my mind are:
setting a negative margin equal to the border width on .text
using negative values on the top and left property.
.box {
position:relative;
width:150px;
height:150px;
background:red;
box-sizing:border-box;
margin:10px;
float:left;
}
.box-bordered {
border:25px solid rgba(0,0,0,0.1);
}
.text {
position:absolute;
top:0;
left:0;
color:white;
margin: -25px;
}
.text2 {
position:absolute;
top: -25px;
left:-25px;
color:white;
}
<div class="box box-bordered">
<div class="text">Text</div>
</div>
<div class="box box-bordered">
<div class="text2">Text</div>
</div>
I don't know if you have considered it but box-shadow has a default margin. Set it to 0 and you achieve the desired result.
.box {
position:relative;
width:150px;
height:150px;
background:red;
box-sizing:border-box;
margin:10px;
float:left;
}
.box-shadow {
box-shadow:inset 0 0 0 25px rgba(0,0,0,0.1);
margin: 0;
}
.text {
position:absolute;
top:0;
left:0;
color:white;
}
<div class="box box-shadow">
<div class="text">Text</div>
</div>
As you can see in the center 100 x 100 area is the region, where text contents will be placed. Every content will be calculated based on margin, border and padding.
Therefore, I dont see a solution without using the negative margins or inset box as you mentioned, which is some kind of fix to the original question.
It's posibble.
.parent {
position: relative;
border: solid 1em;
}
.child {
--top: 0;
--left: 0;
position: absolute;
box-sizing: content-box;
width: 100%;
height: 100%;
border: solid 0 transparent;
border-width: inherit;
top: calc(50% + var(--top));
left: calc(50% + var(--left));
transform: translate(-50%, -50%);
background-origin: border-box;
}
If your parent have different border widths around it. This wouldn't work right. But most of the time this would do the job.
In my web application, I wanted to place a small div along border edge of another div like this:
This is my code:
<div style="border:1px solid black; height:1em; width:10em;">
<div style="border:1px solid black; display:inline-block; height:10em;
width:10em;"> Along edge </div>
</div>
How can it be done?
Following way you can do it. Make main div position:relative and along edge div position:absolute to main div. And give top and right to sub div.
.main{
border:2px solid;
position:relative;
width:400px;
height:150px;
top:50px;
}
.sub{
border:1px solid;
position:absolute;
right:10px;
top:-10px;
z-index:99;
background-color: #fff;
}
<div class="main">
Main Div
<div class="sub">
along edge
</div>
</div>
Hope it helps.
put css like this
.main-div
{
position:relative;
}
.along-edge
{
position:absolute;
right:50px;
top:-20px;
z-index:1;
}
Check this fiddle
<div id="Main">
<div id="Edge"></div>
</div>
and css
#Main{
width:200px;
height:200px;
border:solid 1px black;
position:relative;
margin-top:50px;
}
#Edge{
width:50px;
height:50px;
border:solid 1px black;
position:absolute;
top:-25px;
right: 50px;
}
demo
Nest the smaller div inside the main div.
.along-edge {
position: absolute;
margin-top: -10px;
z-index: 1;
}
i was looking about two hours, how to center a div on the screen. So, when you scroll down a huge page and click on a link, the div "pop up" should appear on the center of screen, not of page.
If you take code like this, it will only center the div on the page, so it's not visible without scrolling up:
.centerDiv {
width: 800px;
border-radius: 5px;
background: #ccc;
padding: 10px;
height: 50px;
position: absolute;
margin-top: -25px;
margin-left: -400px;
top: 50%;
left: 50%;
}
Thanks for your help :)
Instead of position: absolute try out position: fixed
Use position: fixed and then center it like so:
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
This will get it centered on the page wherever you are. Just display the popup when you want to. See my demo at the bottom for a look into what it would look like.
Example:
body {
height: 3000px;
}
.popup {
width: 200px;
height: 150px;
border: 1px solid;
background: red;
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
}
<div class="popup">I stay in the middle no matter where you scroll.</div>
Another example showing you the click link at the bottom of the page:
Demo Here
Note: Scroll to the bottom and click the span.
/*
this is javascript free .. almost.
Here i show you how to create pure CSS3 overlays
this uses the :target pseudo class
*/
*{margin:0;padding:0;}
#overlay{ /* we set all of the properties for are overlay */
height:80%;
width:80%;
margin:0 auto; /* center dude */
background:white;
color:black;
padding:10px;
position:absolute;
top:5%;
left:10%;
z-index:1000;
display:none;
/* CSS 3 */
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
}
#mask{ /* create are mask */
position:fixed;
top:0;
left:0;
background:rgba(0,0,0,0.6);
z-index:500;
width:100%;
height:100%;
display:none;
}
/* use :target to look for a link to the overlay then we find are mask */
#overlay:target, #overlay:target + #mask{
display:block;
opacity:1;
}
.close{ /* to make a nice looking pure CSS3 close button */
display:block;
position:absolute;
top:-20px;
right:-20px;
background:red;
color:white;
height:40px;
width:40px;
line-height:40px;
font-size:35px;
text-decoration:none;
text-align:center;
font-weight:bold;
-webkit-border-radius:40px;
-moz-border-radius:40px;
-o-border-radius:40px;
border-radius:40px;
}
#open-overlay{ /* open the overlay */
padding:10px 5px;
background:blue;
color:white;
text-decoration:none;
display:inline-block;
margin:20px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
}
Open Overlay
<div id="overlay">
×
<div style="height:20%"></div>
<h2 style="font-size:35px">Pure CSS Overlay</h2>
<br />
<br />
<br />
<p style="font-size:22px;">This overlay is made using zero javascript. With the CSS :target pseudo class. You can target an element then change it's properties. Here we hide this div then show it upon targeting. (see the URL). To exit we'll just change the URL back!</p>
</div>
<div id="mask" onclick="document.location='#';"></div> <!-- the only javascript -->
Here's a pure CSS3 overlay right here for ya. As for centering; margin: 0 auto;
FIDDLE DEMO HERE DUDE
center div on screen with CSS
HTML
<div class="hm_container">
<div class="hm_content"></div>
</div>
CSS
.hm_container{position: absolute; top: 50%; margin-top: -125px; left: 0; width: 100%;}
.hm_content{width:50%; margin-left: auto; margin-right: auto; height:150px; border:#000 solid 1px;}
DEMO1
Another demo by using CSS3
HTML
<div class="vhm"></div>
CSS
.vhm{min-height:200px; width:500px; left:50%; top:50%; border:#000 solid 1px; position:absolute;
transform:translateX(-50%) translateY(-50%);
-moz-transform:translateX(-50%) translateY(-50%);
-webkit-transform:translateX(-50%) translateY(-50%);
-o-transform:translateX(-50%) translateY(-50%);
-moz-box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.5);
box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.5);
}
DEMO2
Sorry for my english.
I have a problem. I need to create a DIV inside another DIV, which has to have a white background. I tried using skew, but It didnt work well.
Here is an image:
There are at least several ways to achieve this, however the simplest way may be using linear-gradient background. Its quality is not really good compared with others but it's totally acceptable.
Try this:
div {
width:600px;
height:300px;
background:teal;
border:1px solid teal;
}
.top {
width:100%;
height:100px;
font-size:25px;
padding-left:30px;
background:linear-gradient(175deg, white 60%, transparent 62%);
border:none;
box-sizing:border-box;
}
HTML:
<div>
<div class='top'>Custom<br/>Home</div>
</div>
Demo.
You can do that with a pseudo element and transform rotate :
DEMO
HTML :
<div id="header">
Custom<br/>
Home
</div>
<div id="content"></div>
CSS :
#header{
background:#fff;
position:relative;
height:50px;
z-index:1;
font-size:30px;
padding-left:10%;
}
#header:before{
content:'';
position:absolute;
bottom:0;
right:0;
width:110%;
height:1000%;
background:inherit;
z-index:-1;
border-bottom:2px solid #636A6E;
-webkit-backface-visibility: hidden; /* to fix pixelisation in chrome */
-ms-transform-origin:100% 100%;
-webkit-transform-origin:100% 100%;
transform-origin:100% 100%;
-webkit-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
transform: rotate(-5deg);
}
#content{
min-height:500px;
background:#778385;
}
Since you need the border in your diagonal div, try this:
CSS:
.logo {
width:110%;
height:147px;
top:-10%;
left:-14px;
border:2px solid black;
position:absolute;
background:#fff;
transform:rotate(-7deg);
-ms-transform:rotate(-7deg);
/* IE 9 */
-webkit-transform:rotate(-7deg);
/* Opera, Chrome, and Safari */
}
.container {
width:100%;
height:612px;
overflow:hidden;
background:#7b8284;
position:relative;
}
.inner {
position:absolute;
height:200px;
transform:rotate(7deg);
-ms-transform:rotate(7deg);
/* IE 9 */
-webkit-transform:rotate(7deg);
/* Opera, Chrome, and Safari */
padding:20px 90px;
top:30%;
font-size:30px;
}
HTML:
<div class="container">
<div class="logo">
<div class="inner">My Logo</div>
</div>
</div>
Demo: http://jsfiddle.net/lotusgodkk/BKfe9/1/
You can modify the top,left,font-size,background-color,transform, border as per your need
If you want to do it in pure CSS I would recommend using the transform: rotate(xxx) feature of CSS3. I've created a JS-Fiddle that will help you get started (not the best solution...), it is not based on your fiddle: http://jsfiddle.net/syTu7/
I think I understand your question, I think my example will help
HTML
<div class="wrapper">
<div class="innter">some text</div>
</div>
CSS
.wrapper {
position: relative;
width: 960px;
margin: 0 auto;
background: #ddd;
min-height: 100%;
height: 800px;
}
.innter {
height: 500px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: #ececec;
}
In HTML,
<div class="wrapper">
<div class="inner">some content</div>
</div>
In CSS,
.inner {
background: #fff;
}
I am stuck here. Please help.
I want to make the following through css.
But when I use CSS positioning, I am getting this output
The fourth(GREEN) layer should go under first layer(BLUE) which is not happening.
This is the code I used.
HTML:
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box3">
</div>
<div class="box4">
</div>
CSS:
div{
height:100px;
width:100px;
border:solid 1px;
}
.box1{
position:relative;
left:500px;
background-color:#00d8ff;
}
.box2{
position:relative;
left:570px;
top:-30px;
background-color:#f6ff00;
}
.box3{
position:relative;
left:500px;
top:-60px;
background-color:#ff69fa;
}
.box4{
position:relative;
left:430px;
top:-230px;
background-color:#24ff00;
}
JSFiddle: http://jsfiddle.net/rkubs/
Even I tried to use Z-index. But no use. Help me. Thanks in advance.
WORKING DEMO :before
senario:
Using only one pseudo-element :before you just need to set border-top and border-right then give it an absolute position on the bottom left of div2
With the same HTML code as OP all you need is a Pseudo-element :before or :after combine witn z-index. To make it easy i put numbers in your HTML.
Note: you habe to set position relative to the element with the pseudo, the set the top border and the right border you can skeep that using box-shadow too see WORKING DEMO WITH BOX-SHADOW.
HTML
<div class="box1">1
</div>
<div class="box2">2
</div>
<div class="box3">3
</div>
<div class="box4">4
</div>
CSS
div{
height:100px;
width:100px;
border:solid 1px;
}
.box1{
position:relative;
left:500px;
background-color:#00d8ff;
z-index:3;
}
.box2{
position:relative;
left:570px;
top:-30px;
background-color:#f6ff00;
z-index: 3;
}
.box2:before{
content: '';
position: absolute;
bottom: -2px;
left: -2px;
width: 32px;
height: 30px;
border-top: 1px solid black;
border-right: 1px solid black;
z-index: 14;
background-color: #ff69fa;
}
.box3{
position:relative;
left:500px;
top:-60px;
background-color:#ff69fa;
z-index:1;
}
.box4{
position:relative;
left:430px;
top:-230px;
background-color:#24ff00;
z-index:2;
}
WORKING DEMO WITH BOX-SHADOW
Here you just need to change the width and height of .box2.
senario:
you choose one div in my case div2 you don't set the background-color then reset the the borders border:none; .
Since you have set div width, height and position relative you can now set :before and 'after' width a 100% width and 50% height, one on the top and the other on the bottom, then for :before set border-top and for :after set border-bottom.
Now set for both of then border-left and border-right.
div{
height:100px;
width:100px;
border:solid 1px;
position:relative;
}
.box1{
left:500px;
background-color:#00d8ff;
z-index:3;
}
.box2{
left:570px;
top:-30px;
border:none;
}
.box2:before,.box2:after{
content: '';
position: absolute;
background-color:#f6ff00;
width: 100%;
height: 50%;
left: 0;
border-left:1px solid black;
border-right:1px solid black;
}
.box2:before{
top: 0;
z-index: 3;
border-top:1px solid black;
}
.box2:after{
bottom: 0;
z-index: 0;
border-bottom:1px solid black;
}
.box3{
left:500px;
top:-60px;
background-color:#ff69fa;
z-index:1;
}
.box4{
left:430px;
top:-230px;
background-color:#24ff00;
z-index:2;
}
WORKING DEMO :BEFORE :AFTER FLEXIBLE
I'm not sure you can do that with normal way, a little hack may be help.
What i do is to add another box right under .box1 with z-index above of all, and with size 50% of the parent.
HTML:
<div class="box1">
<div class="box1-fake"></div>
</div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
CSS:
.box1-fake{
background-color:#00d8ff;
position:absolute;
left: -1px;
top: -1px;
z-index: 1000;
width: 50%;
border-right: 0 none;
}
You could use clip on a pseudo element after the first box to get this working:
.box1:after {
content: "";
border:solid 1px;
background: #00d8ff;
height: 100%;
width: 100%;
position: absolute;
z-index: 1;
top: -1px;
left: -1px;
clip: rect(76px 32px 102px -1px);
}
FIDDLE
For more information about the css clip property see this mozilla page
It also has cross browser support
Split the left box in two sections, upper and lower section, and assign z-indexes accordingly.
How about somethign like this:
<div class="box2">
<div class="box-top"></div>
<div class="box-bot"></div>
</div>
## css ##
.box2 {
position: relative;
left: 570px;
top: -30px;
border: none;
}
.box-top {
z-index: 200;
position: relative;
border-bottom: none;
height: 50%;
background-color: #f6ff00;
}
.box-bot{
z-index: 200;
/* position: relative; */
left: 570px;
border-top: none;
height: 50%;
background-color: #f6ff00;
}
http://jsfiddle.net/a8fXP/30/