Im trying to give "box2" a bigger z-index value than the other boxes, in order to make the box2 overlap the other(for instance on box number 5 that next to it), but everytime im trying this, the boxes are "running away" and opening a new column. i did that on codeopen so the if it makes any different:
HTML
<div class="wrapper">
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box c">C</div>
<div class="box d">D</div>
<div class="box e">E</div>
<div class="box f">F</div>
</div>
CSS
body {
margin: 40px;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
z-index: 10;
}
.box:nth-child(even) {
color: #000;
}
.wrapper {
width: 600px;
display: grid;
grid-template-columns: repeat(6, 100px);
grid-gap: 10px;
grid-auto-flow:column;
}
.box2 {
grid-column: 3 / 6;
grid-row: 2 / 3;
outline: 2px solid red;
z-index: 20;
background-color: blue;
opacity: 0.5;
}
link to codeopen: https://codepen.io/Tsuri/pen/dyZbdGJ
Related
I have a button and I want to make a name of the button disapear when you hover over it. At the same time I want the background to change and show a list on the button.
.buttons{
width: auto;
position:horizontal;
font-size: 0;
background-color: darkslategrey;
border-radius: 10px;
}
.buttons .btn-1{
display:inline-block ;
border-radius: 8px;
background-image: url("/img/teatritood.JPG");
cursor: pointer;
background-size: 100%;
border: none;
padding:none;
height: 30rem;
width: 33.3%;
font-family: 'Courier New', Courier, monospace;
color: whitesmoke;
font-display: bold;
font-size: 30px;
box-shadow: inset 80px 80px 80px darkslategrey, inset -80px -80px 80px darkslategrey;
}
.btn-1:hover{
background-image: url("/img/teatritood.JPG");
cursor: pointer;
transition-duration: 0s;
background-size: 100%;
border: none;
padding:none;
width: 30.33%;
height: 30rem;
font-size: 0px;
box-shadow: none;
box-shadow: inset 10px 10px 10px darkslategrey, inset -10px -10px 10px darkslategrey;
}
.btn-1:hover::after{
display: block;
content: attr(data-hover);
font-family: 'Courier New', Courier, monospace;
color: whitesmoke;
font-display: bold;
font-size: 38px;
transform: rotateY(180deg);
}
<pre>
<section>
<div class="buttons">
<div>
<button type="button" class=btn-1 data-hover="Uus list">Teatritööd</button>
<button type="button" class=btn-2 data-hover="Uus list">Näitused</button>
<button type="button" class=btn-3 data-hover="Uus list">Muud</button>
</div>
</div>
</section>
<div class="hidden-list">
<div>
<ul>
<ul><a>Projektid</a></ul>
<ul>Kirjeldused</ul>
<ul>Pildid</ul>
</ul>
</div>
</div>
</pre>
I want to set the initial position of the image as centered how can I do that? I don't want to do CSS centering as it will be applied always only at the first time I want the position to be set as centered of the container.
I need to keep the style #scene {display: inline-block;} or else the panning inside bounds breaks.
How can I center this image at load initially
const element = document.querySelector('#scene');
let panZoomController = panzoom(element, {
bounds: true,
boundsPadding: 0.1
});
.image-outer-wrapper {
border: 3px solid red;
overflow: hidden;
height: 500px;
}
img {
cursor: move;
display: flex;
justify-content: center;
}
#scene {
display: inline-block;
}
<script src="https://unpkg.com/panzoom#8.1.0/dist/panzoom.js"></script>
<div class="image-outer-wrapper">
<div id="scene">
<img src="https://www.probytes.net/wp-content/uploads/2018/01/5-1.png">
</div>
</div>
Found out a move to function Thanks to #Temani Afif for help
let element = document.querySelector('#scene');
var s = (document.querySelector('.image-outer-wrapper').offsetWidth /2) - (element.offsetWidth / 2);
let panZoomController = panzoom(element, {
bounds: true,
boundsPadding: 0.1
});
panZoomController.moveTo(s, 0);
.image-outer-wrapper {
border: 3px solid red;
overflow: hidden;
height: 300px;
}
img {
cursor: move;
}
#scene {
display: inline-block;
}
<script src="https://unpkg.com/panzoom#8.1.0/dist/panzoom.js"></script>
<div class="image-outer-wrapper">
<div id="scene">
<img src="https://www.probytes.net/wp-content/uploads/2018/01/5-1.png">
</div>
</div>
You can use zoomAbs to set the initial position. The scale need to be different from 1 (not sure why) so I made it 0.9
let element = document.querySelector('#scene');
var s = (document.querySelector('.image-outer-wrapper').offsetWidth - element.offsetWidth) ;
let panZoomController = panzoom(element, {
bounds: true,
boundsPadding: 0.1
}).zoomAbs(
6*s, // initial x position
0, // initial y position
0.9 // initial zoom
);
.image-outer-wrapper {
border: 3px solid red;
overflow: hidden;
height: 300px;
}
img {
cursor: move;
}
#scene {
display: inline-block;
}
<script src="https://unpkg.com/panzoom#8.1.0/dist/panzoom.js"></script>
<div class="image-outer-wrapper">
<div id="scene">
<img src="https://www.probytes.net/wp-content/uploads/2018/01/5-1.png">
</div>
</div>
Here:
<style>
.image-outer-wrapper {
border: 3px solid red;
overflow: hidden;
height: 500px;
}
img {
cursor: move;
}
#scene {
display: flex;
justify-content: center;
}
</style>
<div class="image-outer-wrapper">
<div id="scene">
<img src="https://www.probytes.net/wp-content/uploads/2018/01/5-1.png">
</div>
</div>
Try this
<style>
.image-outer-wrapper {
border: 3px solid red;
overflow: hidden;
height: 500px;
}
img {
cursor: move;
width: 100%;
}
#scene {
position: absolute;
width:400px;
left: 50%;
margin-left:-200px;
display:block;
}
</style>
<div class="image-outer-wrapper">
<div id="scene">
<img src="https://www.probytes.net/wp-content/uploads/2018/01/5-1.png">
</div>
</div>
This will center the img inside its container :
#scene {
display: flex;
justify-content: center;
}
I have a list of draggable items, for a responsive design :
https://codepen.io/daedrias/pen/KyPZYG
header,
footer {
background-color: #5fba7d;
padding: 1rem;
}
.container {
display: flex;
min-height: 800px;
}
.menu {
width: 15em;
background-color: #FFF8DC;
}
.content {
background-color: #fff;
border-left: 1px solid #958C4D;
flex: 1;
padding: 5px 10px;
}
.sortable-list {
width: 18.75em;
}
.row {
display: flex;
margin-bottom: 15px;
box-sizing: border-box;
}
.row>* {
display: inline-block;
border-radius: 4px;
box-sizing: border-box;
}
.left {
height: 2em;
display: flex;
cursor: move;
}
.handle {
width: 1.5em;
height: 2em;
line-height: 2em;
text-align: center;
margin-right: 0.125em;
border-radius: 4px;
}
.icon {
width: 2em;
height: 2em;
border-radius: 4px;
background-color: #c97777;
margin: 0 0.125em;
}
.stretch {
flex: 1;
border: 1px solid black;
padding: 6px 12px;
margin: 0 0.1em;
}
.trash {
width: 2em;
height: 2em;
line-height: 2em;
text-align: center;
margin-left: 0.125em;
}
.bouton-ajout {
flex: 1;
border: 1px solid black;
border-radius: 4px;
padding: 6px 12px;
margin: 0 2.2em 0 1.75em;
}
/* mobile layout */
#media (max-width: 768px) {
.sortable-list {
width: 100%;
}
.menu {
display: none;
}
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>Header</header>
<div class="container">
<div class="menu">
</div>
<div class="content">
<p>asdasd</p>
<div class="sortable-list">
<div class="row">
<div class="left">
<div class="handle">=</div>
<div class="icon"></div>
</div>
<div class="stretch">
banana
</div>
<div class="trash">X</div>
</div>
<div class="row">
<div class="left">
<div class="handle">=</div>
<div class="icon"></div>
</div>
<div class="stretch">
pineapple
</div>
<div class="trash">X</div>
</div>
<div class="row">
<div class="left">
<div class="handle">=</div>
<div class="icon"></div>
</div>
<div class="stretch">
orange
</div>
<div class="trash">X</div>
</div>
<div class="bouton-ajout">
+ Add a row V
</div>
</div>
</div>
<div>
</body>
<html>
Everything is pretty much as I want it to be (as in : the positioning, not the colors of this example), but I'm not happy about the 'add' button.
I would like to know if there is a better way to handle the width of the 'Add' button,so it is the same size as the icon + label combined. For now I use margins.
Is the flex display a good solution in this case? Should I use something else like display : table?
I would like to get some help with this. I've tried so many different ways and no one works. I want this in only HTML and CSS.
.circles {
background-color: white;
height: 70px;
width: 70px;
border-radius: 40px;
position:relative;
margin:10px auto;
display:inline-block;
}
.row {
height: 100px;
width: 700px;
margin: 10px;
text-align:center;
position:relative;
}
<div class="row">
<div class="circles"></div>
<div class="circles"></div>
<div class="circles"></div>
</div>
Here is an example via jsbin:
http://jsbin.com/tezocucufi/edit?html,css,output
There are a couple different ways to get it to "not interfere" with other elements... but depends on what your situation.
Circle code:
border-radius: 50%;
width: 100px;
height: 100px;
Alignment could be with floats, or:
display: inline-block;
and position'ing both the element and the parent container to position it on the page.
Reference: https://davidwalsh.name/demo/css-circles.php
I am making a website with some screenshots of an iPhone app I made and was wondering if there was some kind of slideshow thing for HTML. I want it to have the iPhone frame and the slideshow with the screenshots in the middle of it. I would prefer it to be written in something other than flash.
Thanks in advance!
I'm a fan of the Nivo Slider, personally. Requires jQuery.
This needs HTML, CSS and Javascript. This is not my own answer but is derived from https://www.w3schools.com/howto/howto_js_slideshow.asp.
For a slideshow that will change picture on button click
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
* {box-sizing:border-box}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor:pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
<!-- Slideshow container -->
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="img1.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="img2.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="img3.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<!-- The dots/circles -->
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
For an automatic slideshow
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
slides[slideIndex-1].style.display = "block";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
* {box-sizing:border-box}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor:pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
<!-- Slideshow container -->
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="img1.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="img2.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="img3.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<!-- The dots/circles -->
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>