QUESTION
I've been searching a while and can't figure out how I should go about implementing a horizontal scroller.
This is my scroll area
_____________
| |
|___________|
Scroll area with two cards
_____________
|__| |
|__|________|
Scroll area with four cards, etc
_____________
|__|__| |
|__|__|_____|
Is there any way to implement this with position:relative; on the cards? I figure the container should have width:auto; but how can I get the next card to fall below, rather than to the right?
ANSWER
CSS horizontal scroller, how to position "below" before "right"?
I know its a little bit messy but, I think you could do something like this...
html:
<div class="container">
<div class="wrap">
<div class="top"></div>
<div class="bottom"></div>
</div>
</div>
<button id="ad">add div</button>
css:
.container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/2/25/Red.svg/120px-Red.svg.png);
}
div.wrap{
position: relative;
width:100%;
height:100%;
max-width:100%;
max-height: 100%;
overflow-y:hidden;
overflow-x: scroll;
}
div.top{
position: absolute;
height: 50%;
max-height:50%;
top: 0; left:0;
background-color: rgba(0,0,0,0.5);
}
div.top > div{
position:relative;
width:40px;
height: 100%;
background-color: rgba(255,255,255,0.5);
display: inline-block;
}
div.bottom{
position: absolute;
height: 50%;
max-height:50%;
bottom: 0; left:0;
background-color: rgba(0,0,0,0.5);
}
div.bottom > div{
position:relative;
width:40px;
height: 100%;
background-color: rgba(255,255,255,0.5);
display: inline-block;
}
button {
position: fixed;
bottom: 10px;
right: 10px;
z-index: 9999999999999;
}
js:
var cCount = true;
$('#ad').click(function () {
if (cCount) {
$('.top').append('<div></div>');
$('.top').animate({width: $('.top').find('div').length * 40 + 'px'}, 1);
cCount = !cCount;
} else {
$('.bottom').append('<div></div>');
$('.bottom').animate({width: $('.bottom').find('div').length * 40 + 'px'}, 1);
cCount = !cCount;
}
});
You can also check it out Here
Figured it out, requires flex-flow: column wrap with display: flex and align-content: left
#deck {
flex-flow:column wrap;
display:flex;
align-content:left;
height:204px;
width:250px;
overflow:auto;
background-color:grey;
}
.card {
background-color:white;
margin:1px;
width:100px;
height:100px;
}
<div id="deck">
<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
<div class="card">4</div>
<div class="card">5</div>
<div class="card">6</div>
</div>
Margin doesn't seem to be affecting right side, but the layout looks good
http://jsfiddle.net/kcxnany7/1/
Related
The aim is to code the design below with 3 boxes appearing on top of a straight vertical line (Horizontal on desktop).
I have tried creating this using :: before pseudo selector.
Here is the code:
HTML
<div className={clsx(styles.container__box, styles['container__box--1'])}>
Box 1
</div>
<div className={clsx(styles.container__box, styles['container__box--2'])}>
Box 2
</div>
<div className={clsx(styles.container__box, styles['container__box--3'])}>
Box 3
</div>
CSS
&__box {
width: 25rem;
height: 25rem;
&:not(:last-child) {
margin-bottom: 5rem;
}
&--1 {
background-color: red;
z-index: 100;
}
&--2 {
background-color: green;
position: relative;
&::before {
content: "";
background-color: black;
color: red;
font-weight: bold;
height: 85rem;
width: 1rem;
display: block;
position: absolute;
top: -120%;
left: 50%;
}
}
&--3 {
background-color: yellow;
z-index: 100;
}
}
I'm unable to hide the pseudo selector behind the parent div.
*{
margin:0px;
padding:0px;
box-sizing: border-box;
}
body{
height:100vh;
display:flex;
justify-content:center;
align-items:center;
flex-direction: column;
}
.container{
position:relative;
}
.container span{
background:black;
height:300px;
display:block;
width:10px;
position: absolute;
left:47%;
top:20px;
}
.box1,
.box2,
.box3{
background:greenyellow;
width:100px;
height:100px;
border:1px solid blue;
margin:10px 0px;
position: relative;
}
<body>
<div class="container">
<span></span>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
try setting the parent divs position to relative then setting the before pseudo element's z-index to -1
.parent-div {
position: relative;
}
.parent-div::after {
content: "";
position: absolute;
z-index: -1;
}
So i have a container with a some text and a button after the text. This widget is repeated several times on my screen. Each container is having its height set based on the height of its contents and its a bootstrap column so its width changes as well. My problem is I want the button to always stick to the bottom of its widget, but if I set the position: absolute; bottom:0; right:25%; it is only centered as long as the widgets width doesn't change. Which it does. Any suggestions?
Here's your "flex"able friend in action. I am using some arbitrarily sized divs for illustration purposes:
div {
background: pink;
display: flex;
justify-content: center;
align-items: flex-end;
float: left;
margin-right: 10px
}
#flexDiv1 {
height: 200px;
width: 100px;
}
#flexDiv2 {
height: 300px;
width: 70px;
}
#flexDiv3 {
height: 100px;
width: 200px;
}
<div id="flexDiv1">
link
</div>
<div id="flexDiv2">
link
</div>
<div id="flexDiv3">
link
</div>
Check if this is what you need:
<div class="holder">
<div class='widget-footer'>
<button class="btn-inner">
foo
</button>
</div>
</div>
html, body{
height:100%;
margin:0;
padding:0;
}
.holder{
width: 100%;
height:100%;
/*height: 250px;*/
background: #dedede;
position:relative;
}
.widget-footer{
position:absolute;
bottom:0;
text-align:center;
width:100%;
}
.btn-inner{
margin-bottom: 5px;
}
https://jsfiddle.net/qw54w9j9/2/
Easy:
CSS
#dinamic {
position:relative;
height: 300px;
background: #ddd;
}
.center-bottom {
position:absolute;
bottom:0;
left:0;
right:0;
text-align:center
}
HTML
<div id="dinamic">
<div class="center-bottom">
<button>Click-me!</button>
</div>
</div>
https://jsfiddle.net/8pyn4Le4/
I have a container and in the container are two sections, both at 50% width. In the right side container is an image. I want the left and right boxes to both be the same height at all times and the image to always be 50% width at all times as well.
I cannot figure out how to always keep the image at full height and width of the container without completely making the image look awful. Even if some parts of the image are cut out, that would be fine.
How can I go about doing this?
html, body {
margin: 0;
padding: 0;
}
#box-container {
width: 100%;
height: auto;
}
#box1, #box2 {
width: 50%;
height: 500px;
display: inline-block;
}
#box1 {
background: blue;
}
#box2 {
}
#box2 img {
width: 100%;
height: auto;
}
<div id="box-container">
<div id="box1">
</div><div id="box2">
<img src="http://optimumwebdesigns.com/images/demolition1.jpg" alt="">
</div>
</div>
you have to give the image height:100%; and width:auto; and to the container overflow:hidden;
html, body {
margin: 0;
padding: 0;
}
#box-container {
width: 100%;
height: auto;
overflow:hidden;
}
#box1, #box2 {
width: 50%;
height: 500px;
display: inline-block;
}
#box1 {
background: blue;
}
#box2 {
}
#box2 img {
width: auto;
height: 100%;
}
<div id="box-container">
<div id="box1">
</div><div id="box2">
<img src="http://optimumwebdesigns.com/images/demolition1.jpg" alt="">
</div>
</div>
I believe flex could make it. You could use bootstrap row class, like this:
div class="row" style="display:flex;"
and then, instead of box1 and box2, use the classes div class="col-md-6" for each one (they fit half [50%] of the div that contains it). Give it a try. Sorry for the poor english.
#box1, #box2 {
width: 50%;
height: 500px;
display: inline-block;
overflow: hidden;
}
#box2 img {
/* width: 100%; */
height: 100%;
}
I think this is, what you want to achieve
<style>
.boxes{
width:50%;
float:left;
border:1px solid black;
box-sizing:border-box;
height:1000px;
}
img{
max-width:100%;
}
#sectionOne{
background-image:url("http://optimumwebdesigns.com/images/demolition1.jpg");
}
</style>
<div id="wrapper">
<div class="boxes" id="sectionOne">
<!-- <img src="http://optimumwebdesigns.com/images/demolition1.jpg"> -->
</div>
<div class="boxes">
THis is the noather Div
</div>
</div>
Comment out the the #serctionOne part and un comment the <img> tag for another version.
I was trying to build an interface where when you click a button a full sized div with all it's content fills up the whole screen. There are two sliding divs, it works one way, but the other way the div slides under the first div.
I was attempting to use toggle - and switch to a css that increases the DIVS width property to take over the screen.
Is there a way to accomplish this? Here is my code and a fiddle at the bottom:
HTML:
<div class="container">
<div class="left">
<div class="one">
<a href="#"><div class="openone">
<div class="vertical-text-one">OPEN ONE</div>
</div></a>
ONE</div></div>
<div class="right">
<div class="two">
<a href="#"><div class="opentwo">
<div class="vertical-text-two">OPEN TWO</div>
</div></a>TWO
</div></div>
<div class="header" >
TOP
</div>
</div>
Javascript:
$(document).ready(function(){
$('.openone').click(function(e){
$('.left').toggleClass('clicked');
});
$('.opentwo').click(function(e){
$('.right').toggleClass('clicked');
});
});
CSS snippet:
.left{
background-color: #06C;
width:50%;
height: 100%;
overflow:hidden;
float:left;
z-index: 1;
transition: width 1s;
}
.left.clicked {
width: 98%;
background-color: #06C;
z-index: 100;
}
.right{
background-color: #3AD;
float:right;
width:50%;
height: 100%;
z-index: 1;
transition: width 1s;
}
.right.clicked {
width: 98%;
background-color: #3AD;
z-index: 100;
overflow: hidden;
}
.two{
position:absolute;
top: 110px;
}
.one{
position:absolute;
top: 110px;
}
.openone {
position: relative;
height: 50%;
width:200px;
background-color: #06C;
left: 101%;
}
.opentwo {
position: relative;
height: 50%;
width:200px;
background-color: #3AD;
left: 0px;
}
http://jsfiddle.net/hmyLrzta/19/
Just expand your coding with this:
$(document).ready(function(){
$('.openone').click(function(e){
$('.left').toggleClass('clicked');
$('.right').toggleClass('hidden');
});
$('.opentwo').click(function(e){
$('.right').toggleClass('clicked');
$('.left').toggleClass('hidden');
});
});
CSS:
.hidden {
display: none;
}
This will render the not active panel invisible using display: none;
http://jsfiddle.net/hmyLrzta/21/
I'm using a div, and inside that div another div which needs to stick to the parent div.
But when i rescale the browser there's it's not sticking to the right place. Do i need to do this with javascript?
HTML
<div class="block">
White div block
<div class="block-content">
Green div
</div>
</div>
CSS
.block {
position: relative;
width: 100%;
height: 100%;
background-image: url('voorgrond.png');
background-repeat: no-repeat;
background-position: 70% center; /* positie van de screen */
}
.block-content {
position: absolute;
left: 65%;
top: 42%;
width: 200px;
height: 200px;
}
The green dot should stick inside the white square.
LIVE DEMO
<div class="block">
<div class="block-content"></div>
</div>
.block {
position: absolute;
background:#fff;
border-radius:10%;
width: 200px;
height: 200px;
padding:50px;
left: 65%;
top: 50%;
margin-top: -150px;
margin-left: -150px;
}
.block-content {
position: absolute;
background: #00A652;
border-radius:50%;
width: 200px;
height: 200px;
}
#media (max-width: 600px) {
.block{
left: 50%;
}
}
Assuming your goal is the image I made this fiddle which mimics what you seem to need.
FIDDLE
HTML:
<div class="block">
<div class="block-content">
Hierzo!
</div>
</div>
CSS:
.block{
position:relative;
margin: 300px 0 0 50%;
width:30%;
height:80px;
background:grey;
border-radius:10px;
}
.block-content{
width:50px;
height:50px;
background:green;
border-radius:50px;
position:absolute;
top:50%;
left:50%;
margin: -25px 0 0 -25px;
}
Hope this helps!
EDIT Added responsive width to .block