Make infinite vertical lines with css

Make infinite vertical lines with css - javascript

i trying to make train rails,
there is option to make infinite vertical lines without duplicate the rail_line div infinite times?
this is my code that i tried:
html,
body {
margin: 0;
padding: 0;
}
b,
strong {
font-weight: 700;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#rails {
display: flex;
flex-direction: column;
}
#rails .lines {
display: flex;
flex-direction: column;
gap: 10px;
}
#rails .lines .line {
background: #000000;
height: 1px;
width: 100%;
}
#rails .rail {
display: flex;
flex-direction: row;
gap: 40px;
height: 85px;
overflow: hidden;
}
#rails .rail .rail_line {
width: 1px;
background: #000000;
transform: rotate(17deg);
height: calc(100% + 4px);
top: -2px;
position: relative;
}
<div id="rails">
<div class="lines">
<div class="line"></div>
<div class="line"></div>
</div>
<div class="rail">
<div class="rail_line"></div>
<div class="rail_line"></div>
<div class="rail_line"></div>
<div class="rail_line"></div>
<div class="rail_line"></div>
<div class="rail_line"></div>
<div class="rail_line"></div>
<div class="rail_line"></div>
</div>
<div class="lines">
<div class="line"></div>
<div class="line"></div>
</div>
</div>
I can duplicate it with PHP \ JS but i want CSS option without create a lot of DOM elements
i put 8 lines for example but i want it responsive for each page width
TNX

#test {
height: 70px;
background-image:
repeating-linear-gradient(
-80deg,
transparent 0px,
/* 0.5 transparent-black blur, optional */
black 0.5px,
/* 1px black line (total ~=1.5) */
black 1.5px,
/* 0.5 black-transparent blur, optional */
transparent 2px,
transparent 50px
);
border-top: 2px solid black;
border-bottom: 2px solid black;
}
<div id="test"></div>

Related

Flexbox scroll overflowing content in an dynamic sized parent

I have a simple menu and content div structure. The menu has no fixed size and can expand depending on its content. The content div underneath should take the available space and scroll its own content if overflowing. Unfortunately, flexbox now behaves in such a way that the content div, due to its flex:1 property, expands according to its content instead of scrolling the content.
Is there a way to preserve the dynamic sizes using flex:1 and also have the content of the content div scroll?
function toggleMenu() {
const menu = document.querySelector(".menu");
if(menu.classList.contains("open")) {
menu.querySelector(".text").innerHTML = "<p> small text </p>";
menu.classList.remove("open");
}else {
menu.querySelector(".text").innerHTML = "<h1> im the menu </h1>";
menu.classList.add("open");
}
}
body {
padding: 0;
margin: 0;
background-color: #17141d;
display: flex;
height: 100vh;
}
.main {
display: flex;
flex-direction: column;
flex: 1;
background-color: grey;
}
.menu {
background-color: blueviolet;
}
.content {
display: flex;
flex: 1;
background-color: aqua;
}
.segment-wrapper {
flex: 1;
display: flex;
background-color: red;
flex-direction: column;
overflow-y: scroll;
padding: 10px;
box-sizing: border-box;
}
.segment {
height: 500px;
background-color: green;
border-radius: 5px;
border: solid 1px black;
width: 100%;
margin-bottom: 10px;
}
<div class="main">
<div class="menu open">
<div class="text"><h1>im the menu</h1></div>
<button onclick="toggleMenu()">Toggle</button>
</div>
<div class="content">
<div class="segment-wrapper">
<div class="segment">
</div>
<div class="segment">
</div>
<div class="segment">
</div>
</div>
</div>
</div>

you are missing
an height on .main to size it according to body or the viewport's height.
overflow on .content, so it overflows, unless you want .main to overflow (which body does already)
and finally flex-shrink:0; on .segment so it doesn't shrink :)
here an example of what i understood you were after:
function toggleMenu() {
const menu = document.querySelector(".menu");
if(menu.classList.contains("open")) {
menu.querySelector(".text").innerHTML = "<p> small text </p>";
menu.classList.remove("open");
}else {
menu.querySelector(".text").innerHTML = "<h1> im the menu </h1>";
menu.classList.add("open");
}
}
body {
padding: 0;
margin: 0;
background-color: #17141d;
display: flex;
height: 100vh;
}
.main {
display: flex;
flex-direction: column;
flex: 1;
background-color: grey;
max-height;100%;
}
.menu {
background-color: blueviolet;
}
.content {
display: flex;
flex: 1;
background-color: aqua;
overflow:auto;
}
.segment-wrapper {
flex: 1;
display: flex;
background-color: red;
flex-direction: column;
overflow-y: scroll;
padding: 10px;
box-sizing: border-box;
}
.segment {
flex-shrink:0;
height: 500px;
background-color: green;
border-radius: 5px;
border: solid 1px black;
width: 100%;
margin-bottom: 10px;
}
<div class="main">
<div class="menu open">
<div class="text"><h1>im the menu</h1></div>
<button onclick="toggleMenu()">Toggle</button>
</div>
<div class="content">
<div class="segment-wrapper">
<div class="segment">
</div>
<div class="segment">
</div>
<div class="segment">
</div>
</div>
</div>
</div>

Change the orientation of the buttons

I am trying to make a quiz app. The question buttons seem to have a vertical orientation, whereas I want them in a horizontal configuration. I am not sure where I might be doing the mistake. I have set the display-inline-block and it still does not seem to work. I have tried changing the orientation of my screen as well. I tried making an array of a number of blocks, but that too didn't seem to work.
function progress(timeleft, timetotal, $element) {
var progressBarWidth = timeleft * $element.width() / timetotal;
$element.find('div').animate({
width: progressBarWidth
}, 500).html(Math.floor(timeleft / 60) + ":" + timeleft % 60);
if (timeleft > 0) {
setTimeout(function() {
progress(timeleft - 1, timetotal, $element);
}, 1000);
}
};
progress(2700, 2700, $('#progressBar'));
body {
background-color: lightblue;
}
* {
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
#progressBar {
width: 90%;
margin: 10px auto;
height: 22px;
background-color: #0A5F44;
}
#progressBar div {
height: 100%;
text-align: right;
padding: 0 10px;
line-height: 22px;
/* same as #progressBar height if we want text middle aligned */
width: 0;
background-color: #CBEA00;
box-sizing: border-box;
}
/* Do not take in account */
html {
padding-top: 30px
}
a.solink {
position: fixed;
top: 0;
width: 100%;
text-align: center;
background: #f3f5f6;
color: #cfd6d9;
border: 1px solid #cfd6d9;
line-height: 30px;
text-decoration: none;
transition: all .3s;
z-index: 999
}
a.solink::first-letter {
text-transform: capitalize
}
a.solink:hover {
color: #428bca
}
/* Create two unequal columns that floats next to each other */
.column {
float: left;
padding: 10px;
}
.left {
width: 75%;
height: 100%;
}
.right {
width: 25%;
height: 100%;
display: flex;
flex-flow: row wrap;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* button */
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 20px 20px;
text-align: center;
text-decoration: none;
font-size: 18px;
margin: 2px 2px;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
</head>
<div id="progressBar">
<div class="bar"></div>
</div>
<body>
<script src="scripts.js">
</script>
<div class="row">
<div class="column left" style="background-color:#aaa;">
<h2>Column 1</h2>
<p>Some text..</p>
</div>
<div class="column right" style="background-color:#bbb;">
<div>
<p>
<h2>Questions</h2>
</p>
</div>
<div>
<button class="button">1</button>
</div>
<div>
<button class="button">2</button>
</div>
<div>
<button class="button">3</button>
</div>
<div>
<button class="button">4</button>
</div>
<div>
<button class="button">5</button>
</div>
</div>
</div>
</body>
</html>

you want the element in question's css property display to be grid or flex.
flex is easier to work with and better generally for most things.
display:flex;
flex-flow: row nowrap;
here is a link to mdn docs that go over flex stylings:
https://developer.mozilla.org/en-US/docs/Web/CSS/flex-flow

How to control the height of descendant box within a nested flexbox context?

.main {
height: 100px;
width: 100px;
border: 1px solid;
background: green;
}
.columns {
display: flex;
}
.columns.vertical {
flex-direction: column;
flex-wrap: nowrap;
}
.box22 {
overflow: auto;
}
.box1 {
background: red;
}
.box2 {
background: orange;
border: 1px blue solid;
}
.box222 {
background: white;
border: 1px blue solid;
}
<md-content class="md-padding">
<div class="main columns vertical">
<nav class="box1">nav</nav>
<div class="box columns vertical">
<div class="b">asdasd</div>
<div class="box2 columns vertical">
<div class="box21 columns">
box21
</div>
<div class="box22 columns">
<div class="box221">box221</div>
<div class="box222">
<p>a</p>
<p>a</p>
</div>
</div>
</div>
</div>
</div>
</md-content>
I manually set the height of outermost box main and also set box22 with overflow:auto, however the box22 stretched out the main box and no scroll bar shows up.
What I want is to set height in the outermost box and the nested inner box can automitically control it's height thus all boxes are fitted. How to fix these kind of problem, should I set heights for all descendant boxes?
I tested setting overflow :auto at box(level1), box2(level2) and box22(level3), only box(level1) can automatically control it's height and shows up a scroll bar when it's height overlayed.
what I want is shown below, however, to achieve this, I need to manually specify the father box of box22. In other words, if I want to make a flex contaner scrollable, I have to at least set it's father box's height, which is toally unaccptable.
.main {
height: 100px;
width: 100px;
border: 1px solid;
background: green;
}
.columns {
display: flex;
}
.columns.vertical {
flex-direction: column;
flex-wrap: nowrap;
}
.box22 {
overflow: auto;
}
.box1 {
background: red;
}
.box2 {
height:64px;
background: orange;
border: 1px blue solid;
}
.box21 {
background: yellow;
}
.box222 {
background: white;
border: 1px blue solid;
margin-top: auto;
}
<md-content class="md-padding">
<div class="main columns vertical">
<nav class="box1">nav</nav>
<div class="box columns vertical">
<div class="b">asdasd</div>
<div class="box2 columns vertical">
<div class="box21 columns">
box21
</div>
<div class="box22 columns">
<div class="box221">box221</div>
<div class="box222">
<p>a</p>
<p>a</p>
<p>a</p>
</div>
</div>
</div>
</div>
</div>
</md-content>

Well, as you noted, the parent container needs a height declaration in order to generate a scrollbar.
This makes sense because there's no way to trigger an overflow condition if there's no fixed length.
With a flexible length (e.g., height: auto), the container will shrink and expand to accommodate content, never triggering an overflow and, therefore, never generating a scrollbar.
MDN describes it like this:
In order for overflow to have an effect, the block-level container must have either a set height (height or max-height) or white-space set to nowrap.
So that's your obstacle. Here's how you get around it (knowing that you can't set more heights):
Give the browser what it needs to trigger the overflow: set a tiny (1px) height.
You get the full height that you want: use flex-grow to consume remaining space.
So something like this...
height: 1px;
flex-grow: 1;
but more efficiently:
flex: 1 0 1px; /* fg, fs, fb */
Add this to your code:
.main .columns.vertical {
flex: 1 0 1px;
}
.box22 {
flex: 1 0 1px;
}
.main {
height: 100px;
width: 100px;
border: 1px solid;
background: green;
}
/* NEW */
.main .columns.vertical {
flex: 1 0 1px;
}
/* ADJUSTMENT */
.box22 {
flex: 1 0 1px;
overflow: auto;
}
.columns {
display: flex;
}
.columns.vertical {
flex-direction: column;
flex-wrap: nowrap;
}
.box22 {
flex: 1 0 1px;
overflow: auto;
}
.box1 {
background: red;
}
.box2 {
background: orange;
border: 1px blue solid;
}
.box222 {
background: white;
border: 1px blue solid;
}
<md-content class="md-padding">
<div class="main columns vertical">
<nav class="box1">nav</nav>
<div class="box columns vertical">
<div class="b">asdasd</div>
<div class="box2 columns vertical">
<div class="box21 columns">box21</div>
<div class="box22 columns">
<div class="box221">box221</div>
<div class="box222">
<p>a</p>
<p>a</p>
</div>
</div>
</div>
</div>
</div>
</md-content>

consider using max-height instead of height on main also... if you start with flexbox... best to keep display: flex through the whole chain
.top {
position: static;
height: 200px;
width: 200px;
max-height: 200px;
max-width: 200px;
overflow: auto;
}
.flexcol {
width: 100%;
display: flex;
flex-direction: column;
padding: 0;
}
.mynav {
display: flex;
flex-direction: row;
flex-grow: 1;
background-color: blue;
}
.box1 {
display: flex;
flex-grow: 1;
background-color: red;
}
.box2 {
display: flex;
flex-direction: column;
flex-grow: 1;
background-color: green;
}
.box3 {
display: flex;
flex-grow: 1;
background-color: yellow;
}
.box221 {
min-height: 50px;
background-color: pink;
width: 100%;
}
.box222 {
min-height: 50px;
background-color: grey;
width: 100%;
}
.darklink {
color: white;
}
<div class="top">
<div class="flexcol">
<nav class="mynav">
<a class="darklink" href="#" target="_">Link1</a>
<a class="darklink" href="#" target="_">Link2</a>
<a class="darklink" href="#" target="_">Link3</a>
</nav>
<div class="box1">
<p>para</p>
</div>
<div class="box2">
<div class="box221">
<p>para</p>
<p>para</p>
</div>
<div class="box222">
<p>para</p>
<p>para</p>
<p>para</p>
</div>
</div>
<div class="box3">
<p>para</p>
</div>
</div>
</div>

How to print a canvas image at 100% page width?

My project needs to print out a canvas image that can be smaller or greater than the page width. I want the printout to maintain the canvas size if it is smaller than page width and scale if the canvas image is larger than page width. How do I accomplish this?
Here is an example of the canvas image being too big for the printed page (It needs to be shrunk to fit):
var canvas = document.getElementById("canvas1");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);
html {height:100%; overflow:hidden;}
#main-container {height:100%; padding:; margin:0;
display: flex;
flex-direction: column;
}
body {height:100%; padding:0; margin:0;
display: flex;
flex-direction: column;
}
header {
background:aqua;
flex: 0 0 100px;
}
section {background:blue;
flex: 1;
display: flex;
flex-direction: row;
overflow:auto;
}
article {
background:blanchedalmond;
flex: 3;
}
nav {
background:coral;
flex: 1;
order: -1;
/*start flex settings*/
display:flex;
flex-direction: column;
justify-content: space-betweeen;
-webkit-justify-content: space-between;
/*end flex settings*/
}
.nav-bottom-container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: flex-start;
}
.nav-item-top{
overflow-y:auto;
}
.nav-bottom-item-left {
background:deeppink;
order:1;
border-color:red;
border-style: solid;
flex-grow:1;
cursor: pointer;
text-align:center;
}
.nav-bottom-item-right {
background:dodgerblue;
order:0;
border-color:blue;
border-style: solid;
flex-grow:1;
cursor: pointer;
text-align:center;
}
aside {background:#ddd;
flex: 0 0 200px;
}
footer {background:#888;
flex: 0 0 100px;
}
.item-text{
font-size:1vmax;
padding:1em;
}
canvas{ border: 1px solid black; }
#container {
display: flex; /* establish flex container */
flex-direction: column; /* make main axis vertical */
justify-content: center; /* center items vertically, in this case */
align-items: center; /* center items horizontally, in this case */
cursor:move;
}
.print-this-only{
}
#media print {
html,
body {
height:100%;
overflow:hidden;
display:block;
background-color: yellow;
}
.print-this-only {
background-color: yellow;
/*
height: 100%;
width: 100%;
position: fixed;*/
top: 0;
left: 0;
margin: 0;
}
.no-print,
.no-print * {
display: none !important;
}
.printOnly {
display: block;
}
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title> Shrink Canvas to Fit Printed Page </title>
</head>
<body ng-app="ui.bootstrap.demo" ng-controller="DropdownController as vm">
<div id="main-container">
<header class="no-print">fixed height header <button onclick="window.print();" class="no-print">Print Canvas</button></header>
<section>
<article id="id"><div id="container" >
<div id="container" class="print-this-only"style="position:relative">
<canvas height="1000px" width="2000px" id="canvas1">
</canvas>
<img src="http://s.cdpn.io/3/kiwi.svg"
style="position: absolute;
left: 0px;
top:0px;
z-index: 2;
width: 100px;
" />
<img src="http://s.cdpn.io/3/kiwi.svg"
style="position: absolute;
left: 150px;
top:0px;
z-index: 2;
width: 100px;
" />
<img src="http://s.cdpn.io/3/kiwi.svg"
style="position: absolute;
left: 1700px;
top:150px;
z-index: 2;
width: 100px;
" />
</>
</div></article>
<nav class="no-print">
<div class="nav-item-top">
<div class="item-text">
sample
</div>
<div class="item-text">
sample this is a much longer sample text it goes on for a little bit here and there.
</div>
<div class="item-text">
this is the end of the line and the end of the universe.
</div>
<div ng-show=vm.showNav>Right</div>
<div ng-hide=vm.showNav>Left</div>
</div>
<div class="nav-bottom-container">
<div class="nav-bottom-item-right" ng-click="vm.showNav=!vm.showNav">Right</div>
<div class="nav-bottom-item-left" ng-click="vm.showNav=!vm.showNav">Left</div>
</div>
</nav>
</section>
</div>
</body>
</html>
Here is an example of the canvas being smaller than page width and appropriately scaled:
var canvas = document.getElementById("canvas1");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);
html {height:100%; overflow:hidden;}
#main-container {height:100%; padding:; margin:0;
display: flex;
flex-direction: column;
}
body {height:100%; padding:0; margin:0;
display: flex;
flex-direction: column;
}
header {
background:aqua;
flex: 0 0 100px;
}
section {background:blue;
flex: 1;
display: flex;
flex-direction: row;
overflow:auto;
}
article {
background:blanchedalmond;
flex: 3;
}
nav {
background:coral;
flex: 1;
order: -1;
/*start flex settings*/
display:flex;
flex-direction: column;
justify-content: space-betweeen;
-webkit-justify-content: space-between;
/*end flex settings*/
}
.nav-bottom-container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: flex-start;
}
.nav-item-top{
overflow-y:auto;
}
.nav-bottom-item-left {
background:deeppink;
order:1;
border-color:red;
border-style: solid;
flex-grow:1;
cursor: pointer;
text-align:center;
}
.nav-bottom-item-right {
background:dodgerblue;
order:0;
border-color:blue;
border-style: solid;
flex-grow:1;
cursor: pointer;
text-align:center;
}
aside {background:#ddd;
flex: 0 0 200px;
}
footer {background:#888;
flex: 0 0 100px;
}
.item-text{
font-size:1vmax;
padding:1em;
}
canvas{ border: 1px solid black; }
#container {
display: flex; /* establish flex container */
flex-direction: column; /* make main axis vertical */
justify-content: center; /* center items vertically, in this case */
align-items: center; /* center items horizontally, in this case */
cursor:move;
}
.print-this-only{
}
#media print {
html,
body {
height:100%;
overflow:hidden;
display:block;
background-color: yellow;
}
.print-this-only {
background-color: yellow;
/*
height: 100%;
width: 100%;
position: fixed;*/
top: 0;
left: 0;
margin: 0;
}
.no-print,
.no-print * {
display: none !important;
}
.printOnly {
display: block;
}
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title> Shrink Canvas to Fit Printed Page </title>
</head>
<body ng-app="ui.bootstrap.demo" ng-controller="DropdownController as vm">
<div id="main-container">
<header class="no-print">fixed height header <button onclick="window.print();" class="no-print">Print Canvas</button></header>
<section>
<article id="id"><div id="container" >
<div id="container" class="print-this-only"style="position:relative">
<canvas height="400px" width="400px" id="canvas1">
</canvas>
<img src="http://s.cdpn.io/3/kiwi.svg"
style="position: absolute;
left: 0px;
top:0px;
z-index: 2;
width: 100px;
" />
<img src="http://s.cdpn.io/3/kiwi.svg"
style="position: absolute;
left: 150px;
top:0px;
z-index: 2;
width: 100px;
" />
<img src="http://s.cdpn.io/3/kiwi.svg"
style="position: absolute;
left: 200px;
top:150px;
z-index: 2;
width: 100px;
" />
</>
</div></article>
<nav class="no-print">
<div class="nav-item-top">
<div class="item-text">
sample
</div>
<div class="item-text">
sample this is a much longer sample text it goes on for a little bit here and there.
</div>
<div class="item-text">
this is the end of the line and the end of the universe.
</div>
<div ng-show=vm.showNav>Right</div>
<div ng-hide=vm.showNav>Left</div>
</div>
<div class="nav-bottom-container">
<div class="nav-bottom-item-right" ng-click="vm.showNav=!vm.showNav">Right</div>
<div class="nav-bottom-item-left" ng-click="vm.showNav=!vm.showNav">Left</div>
</div>
</nav>
</section>
</div>
</body>
</html>

One way to do it is to wrap the canvas into container, than calculate everything in percents of parent element width. So first in HTML:
<div class="canvas_container">
<canvas height="1000px" width="2000px" id="canvas1"></canvas>
</div>
Than add in CSS:
#media print {
#container {
display: block; /* Cannot be flex here */
}
.canvas_container {
max-width: 100%;
padding-bottom: 50%; /* Canvas is 2000x1000, this will set the height to 50% of width */
position: relative;
}
canvas{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100%;
}
}
Than each of your images position gotta be in percent, also the width gotta be in percents:
<img src="http://s.cdpn.io/3/kiwi.svg"
style="
position: absolute;
left: 0;
top: 0;
z-index: 2;
width: 5%;
"
/>
<img src="http://s.cdpn.io/3/kiwi.svg"
style="
position: absolute;
left: 7%;
top: 0;
z-index: 2;
width: 5%;
"
/>
<img src="http://s.cdpn.io/3/kiwi.svg"
style="
position: absolute;
left: 85%;
top: 15%;
z-index: 2;
width: 5%;
"
/>
Complete code below:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title> Shrink Canvas to Fit Printed Page </title>
<style>
html {
height: 100%;
overflow: hidden;
}
#main-container {
height: 100%;
padding: ;
margin: 0;
display: flex;
flex-direction: column;
}
* {
box-sizing: border-box;
}
body {
height: 100%;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
}
header {
background: aqua;
flex: 0 0 100px;
}
section {
background: blue;
flex: 1;
display: flex;
flex-direction: row;
overflow: auto;
}
article {
background: blanchedalmond;
flex: 3;
}
nav {
background: coral;
flex: 1;
order: -1;
/*start flex settings*/
display: flex;
flex-direction: column;
justify-content: space-betweeen;
-webkit-justify-content: space-between;
/*end flex settings*/
}
.nav-bottom-container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: flex-start;
}
.nav-item-top {
overflow-y: auto;
}
.nav-bottom-item-left {
background: deeppink;
order: 1;
border-color: red;
border-style: solid;
flex-grow: 1;
cursor: pointer;
text-align: center;
}
.nav-bottom-item-right {
background: dodgerblue;
order: 0;
border-color: blue;
border-style: solid;
flex-grow: 1;
cursor: pointer;
text-align: center;
}
aside {
background: #ddd;
flex: 0 0 200px;
}
footer {
background: #888;
flex: 0 0 100px;
}
.item-text {
font-size: 1vmax;
padding: 1em;
}
canvas {
border: 1px solid black;
}
#container {
display: flex;
/* establish flex container */
flex-direction: column;
/* make main axis vertical */
justify-content: center;
/* center items vertically, in this case */
align-items: center;
/* center items horizontally, in this case */
cursor: move;
}
.print-this-only {}
#media print {
html,
body {
height: 100%;
overflow: hidden;
display: block;
background-color: yellow;
}
#container {
display: block;
}
.canvas_container {
max-width: 100%;
padding-bottom: 50%;
position: relative;
}
canvas {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100%;
}
.print-this-only {
background-color: yellow;
/*
height: 100%;
width: 100%;
position: fixed;*/
top: 0;
left: 0;
margin: 0;
}
.no-print,
.no-print * {
display: none !important;
}
.printOnly {
display: block;
}
}
</style>
</head>
<body ng-app="ui.bootstrap.demo" ng-controller="DropdownController as vm">
<div id="main-container">
<header class="no-print">fixed height header
<button onclick="window.print();" class="no-print">Print Canvas</button>
</header>
<section>
<article id="id">
<div id="container">
<div id="container" class="print-this-only" style="position:relative">
<div class="canvas_container">
<canvas height="1000px" width="2000px" id="canvas1"></canvas>
</div>
<img src="http://s.cdpn.io/3/kiwi.svg" style="
position: absolute;
left: 0;
top: 0;
z-index: 2;
width: 5%;
" />
<img src="http://s.cdpn.io/3/kiwi.svg" style="
position: absolute;
left: 7%;
top: 0;
z-index: 2;
width: 5%;
" />
<img src="http://s.cdpn.io/3/kiwi.svg" style="
position: absolute;
left: 85%;
top: 15%;
z-index: 2;
width: 5%;
" />
</div>
</article>
<nav class="no-print">
<div class="nav-item-top">
<div class="item-text">
sample
</div>
<div class="item-text">
sample this is a much longer sample text it goes on for a little bit here and there.
</div>
<div class="item-text">
this is the end of the line and the end of the universe.
</div>
<div ng-show=vm.showNav>Right</div>
<div ng-hide=vm.showNav>Left</div>
</div>
<div class="nav-bottom-container">
<div class="nav-bottom-item-right" ng-click="vm.showNav=!vm.showNav">Right</div>
<div class="nav-bottom-item-left" ng-click="vm.showNav=!vm.showNav">Left</div>
</div>
</nav>
</section>
</div>
<script>
var canvas = document.getElementById("canvas1");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);
</script>
</body>
</html>

In your print styles, you can add overflow: hidden to .print-this-only and add this to the canvas:
.print-this-only canvas {
max-width:100%;
max-height: 100%;
display: block;
}
Now you can constrain the canvas. Note that for the third image in the canvas you have left: 1700px (changed it to right: 0 for the demo below) - the position values for these images need to be in percentages for the scaling to be proper.
var canvas = document.getElementById("canvas1");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);
html {
height: 100%;
overflow: hidden;
}
#main-container {
height: 100%;
padding: ;
margin: 0;
display: flex;
flex-direction: column;
}
body {
height: 100%;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
}
header {
background: aqua;
flex: 0 0 100px;
}
section {
background: blue;
flex: 1;
display: flex;
flex-direction: row;
overflow: auto;
}
article {
background: blanchedalmond;
flex: 3;
}
nav {
background: coral;
flex: 1;
order: -1;
/*start flex settings*/
display: flex;
flex-direction: column;
justify-content: space-betweeen;
-webkit-justify-content: space-between;
/*end flex settings*/
}
.nav-bottom-container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: flex-start;
}
.nav-item-top {
overflow-y: auto;
}
.nav-bottom-item-left {
background: deeppink;
order: 1;
border-color: red;
border-style: solid;
flex-grow: 1;
cursor: pointer;
text-align: center;
}
.nav-bottom-item-right {
background: dodgerblue;
order: 0;
border-color: blue;
border-style: solid;
flex-grow: 1;
cursor: pointer;
text-align: center;
}
aside {
background: #ddd;
flex: 0 0 200px;
}
footer {
background: #888;
flex: 0 0 100px;
}
.item-text {
font-size: 1vmax;
padding: 1em;
}
canvas {
border: 1px solid black;
}
#container {
display: flex;
/* establish flex container */
flex-direction: column;
/* make main axis vertical */
justify-content: center;
/* center items vertically, in this case */
align-items: center;
/* center items horizontally, in this case */
cursor: move;
}
.print-this-only {}
#media print {
html,
body {
height: 100%;
width: 100%;
margin: 0;
overflow: hidden;
display: block;
background-color: yellow;
}
.print-this-only {
background-color: yellow;
top: 0;
left: 0;
margin: 0;
overflow: hidden;
/* ADDED */
}
/* ADDED */
.print-this-only canvas {
max-width: 100%;
max-height: 100%;
display: block;
}
.no-print,
.no-print * {
display: none !important;
}
.printOnly {
display: block;
}
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title> Shrink Canvas to Fit Printed Page </title>
</head>
<body ng-app="ui.bootstrap.demo" ng-controller="DropdownController as vm">
<div id="main-container">
<header class="no-print">fixed height header <button onclick="window.print()" class="no-print">Print Canvas</button></header>
<section>
<article id="id">
<div id="container">
<div id="container" class="print-this-only" style="position:relative">
<canvas height="1000px" width="2000px" id="canvas1">
</canvas>
<img src="http://s.cdpn.io/3/kiwi.svg" style="position: absolute;
left: 0px;
top:0px;
z-index: 2;
width: 100px;
" />
<img src="http://s.cdpn.io/3/kiwi.svg" style="position: absolute;
left: 150px;
top:0px;
z-index: 2;
width: 100px;
" />
<img src="http://s.cdpn.io/3/kiwi.svg" style="position: absolute;
right: 0;
top:150px;
z-index: 2;
width: 100px;
" />
</div>
</div>
</article>
<nav class="no-print">
<div class="nav-item-top">
<div class="item-text">
sample
</div>
<div class="item-text">
sample this is a much longer sample text it goes on for a little bit here and there.
</div>
<div class="item-text">
this is the end of the line and the end of the universe.
</div>
<div ng-show=vm.showNav>Right</div>
<div ng-hide=vm.showNav>Left</div>
</div>
<div class="nav-bottom-container">
<div class="nav-bottom-item-right" ng-click="vm.showNav=!vm.showNav">Right</div>
<div class="nav-bottom-item-left" ng-click="vm.showNav=!vm.showNav">Left</div>
</div>
</nav>
</section>
</div>
</body>
</html>
The same demo for a smaller canvas:
var canvas = document.getElementById("canvas1");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);
html {
height: 100%;
overflow: hidden;
}
#main-container {
height: 100%;
padding: ;
margin: 0;
display: flex;
flex-direction: column;
}
body {
height: 100%;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
}
header {
background: aqua;
flex: 0 0 100px;
}
section {
background: blue;
flex: 1;
display: flex;
flex-direction: row;
overflow: auto;
}
article {
background: blanchedalmond;
flex: 3;
}
nav {
background: coral;
flex: 1;
order: -1;
/*start flex settings*/
display: flex;
flex-direction: column;
justify-content: space-betweeen;
-webkit-justify-content: space-between;
/*end flex settings*/
}
.nav-bottom-container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: flex-start;
}
.nav-item-top {
overflow-y: auto;
}
.nav-bottom-item-left {
background: deeppink;
order: 1;
border-color: red;
border-style: solid;
flex-grow: 1;
cursor: pointer;
text-align: center;
}
.nav-bottom-item-right {
background: dodgerblue;
order: 0;
border-color: blue;
border-style: solid;
flex-grow: 1;
cursor: pointer;
text-align: center;
}
aside {
background: #ddd;
flex: 0 0 200px;
}
footer {
background: #888;
flex: 0 0 100px;
}
.item-text {
font-size: 1vmax;
padding: 1em;
}
canvas {
border: 1px solid black;
}
#container {
display: flex;
/* establish flex container */
flex-direction: column;
/* make main axis vertical */
justify-content: center;
/* center items vertically, in this case */
align-items: center;
/* center items horizontally, in this case */
cursor: move;
}
.print-this-only {}
#media print {
html,
body {
height: 100%;
width: 100%;
margin: 0;
overflow: hidden;
display: block;
background-color: yellow;
}
.print-this-only {
background-color: yellow;
top: 0;
left: 0;
margin: 0;
overflow: hidden;
/* ADDED */
}
/* ADDED */
.print-this-only canvas {
max-width: 100%;
max-height: 100%;
display: block;
}
.no-print,
.no-print * {
display: none !important;
}
.printOnly {
display: block;
}
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title> Shrink Canvas to Fit Printed Page </title>
</head>
<body ng-app="ui.bootstrap.demo" ng-controller="DropdownController as vm">
<div id="main-container">
<header class="no-print">fixed height header <button onclick="window.print();" class="no-print">Print Canvas</button></header>
<section>
<article id="id">
<div id="container">
<div id="container" class="print-this-only" style="position:relative">
<canvas height="400px" width="400px" id="canvas1">
</canvas>
<img src="http://s.cdpn.io/3/kiwi.svg" style="position: absolute;
left: 0px;
top:0px;
z-index: 2;
width: 100px;
" />
<img src="http://s.cdpn.io/3/kiwi.svg" style="position: absolute;
left: 150px;
top:0px;
z-index: 2;
width: 100px;
" />
<img src="http://s.cdpn.io/3/kiwi.svg" style="position: absolute;
left: 200px;
top:150px;
z-index: 2;
width: 100px;
" />
</div>
</div>
</article>
<nav class="no-print">
<div class="nav-item-top">
<div class="item-text">
sample
</div>
<div class="item-text">
sample this is a much longer sample text it goes on for a little bit here and there.
</div>
<div class="item-text">
this is the end of the line and the end of the universe.
</div>
<div ng-show=vm.showNav>Right</div>
<div ng-hide=vm.showNav>Left</div>
</div>
<div class="nav-bottom-container">
<div class="nav-bottom-item-right" ng-click="vm.showNav=!vm.showNav">Right</div>
<div class="nav-bottom-item-left" ng-click="vm.showNav=!vm.showNav">Left</div>
</div>
</nav>
</section>
</div>
</body>
</html>

separate div to 3 columns

I asked same question 2 days ago but now i still don't get it.
I have 1 div and i want it to be separate into 3 columns of div. I know how to do this for 2 column but, when i am trying 3 column(right, center and left) i get this:
Problem: The pink square is not in the center
Here is my code:
HTML:
<div id="our_services" class="container">
<h1>המוצרים שלנו</h1>
<div id="try">
<div id="product1">
</div>
<div id="product2">
</div>
<div id="product3">
</div>
</div>
</div>
CSS:
#our_services {
/*height: 450px;*/
text-align: center;
font-family: "open_sans_hebrewregular", "alefregular",arial,"Times New Roman";
color: black;
background-color: rgb(224,224,224);
overflow: auto;
margin: auto;
}
#try {
background-color: orange;
width: 50%;
height: 50%;
margin: auto;
}
#product1 {
width: 30%;
height: 75%;
background-color: green;
float: right;
margin: 5px;
}
#product2 {
width: 30%;
height: 75%;
background-color: pink;
float: right;
margin: 5px;
}
#product3 {
width: 30%;
height: 75%;
background-color: blue;
float: left;
margin: 5px;
}

Try with display:inline-block; instead.
exemple

#our_services {
/*height: 450px;*/
text-align: center;
font-family: "open_sans_hebrewregular", "alefregular", arial, "Times New Roman";
color: black;
background-color: rgb(224, 224, 224);
overflow: auto;
margin: auto;
}
#try {
background-color: orange;
width: 50%;
height: 50%;
margin: auto;
}
#product1 {
width: 30%;
height: 75%;
background-color: green;
float: left;
margin: 1.5%;
}
#product2 {
width: 30%;
height: 75%;
background-color: pink;
float: left;
margin: 1.5%;
}
#product3 {
width: 30%;
height: 75%;
background-color: blue;
float: left;
margin: 1.5%;
}
<div id="our_services" class="container">
<h1>המוצרים שלנו</h1>
<div id="try">
<div id="product1">
afs
</div>
<div id="product2">
asf
</div>
<div id="product3">
asf
</div>
</div>
</div>
You had float right as well on one of the boxes

use float left to 1st and 2nd div also. and give margin on percentage. I think this will solve your problem.

I don't know of any way you can do this purely with html/css techniques. You can arrange the items with javascript after the dom (or this part at least) has loaded.
On the other hand, this gets you a little closer to what you want, although the distances between rows won't be equal to the distances between firs/last row and beginning/end of the orange rectangle:
<div id="our_services" class="container">
<h1>המוצרים שלנו</h1>
<div id="try">
<div class="smth">
<div id="product1" class="product">
</div>
</div>
<div class="smth">
<div id="product2" class="product">
</div>
</div>
<div class="smth">
<div id="product3" class="product">
</div>
</div>
</div>
<style>
#our_services{
/*height: 450px;*/
text-align: center;
font-family:"open_sans_hebrewregular", "alefregular",arial,"Times New Roman";
color: black;
background-color: rgb(224,224,224);
overflow: auto;
margin: auto;
}
.smth {
width: 33%;
height: 75%;
float: left;
}
#try{
background-color:orange;
width:50%;
height:50%;
margin:auto;
}
.product {
width: 90%;
height: 100%;
margin: auto;
}
#product1{
background-color:green;
}
#product2{
background-color:pink;
}
#product3{
background-color:blue;
}
</style>
</div>

As far as I understand:
If you don't want any spaces between you'd have to set the width property to (100/3)%
It all depends on your layout of what you want, if you want margin spaces between them all so that they're equally spaced between each other and the edges of their container div you'll have to work out what to do there. So in the case now you have 30% width for each, that leaves you with 10% spacing width which you can spread to 2.5% for margin-left: of your first 2 divs and then for the 3rd div use 2.5% for margin-right: (for a space between the right side and the 3rd div) margin-left:
But as I said, it all depends on what exactly you want for your layout, so if this doesn't answer your question could you tell me more about your expected layout?
If you want a very simple fix based off of what you have at the moment you could set the margin: property to auto and that should center the middle div between what you have now.
Edit: You should also edit the float properties so that they all float one way.

Check the example below:
Code:
#our_services {
text-align: center;
font-family: "open_sans_hebrewregular", "alefregular", arial, "Times New Roman";
color: black;
background-color: rgb(224, 224, 224);
overflow: auto;
margin: auto;
}
#try {
background-color: orange;
width: 50%;
height: 50%;
margin: auto;
}
#product1 {
width: 31%;
height: 200px;
background-color: green;
float: left;
margin: 1%;
}
#product2 {
width: 31%;
height: 200px;
background-color: pink;
float: left;
margin: 1%;
}
#product3 {
width: 31%;
height: 200px;
background-color: blue;
float: left;
margin: 1%;
}
<div id="our_services" class="container">
<h1>המוצרים שלנו</h1>
<div id="try">
<div id="product1">
</div>
<div id="product2">
</div>
<div id="product3">
</div>
</div>
</div>
Example

add the following css:
html, body {
width: 100%;
height: 100%;
}
and add the following properties to #our_services css:
width: 100%;
height: 100%;
further set box-sizing: border-box; and margin: 0% 0% 0% 2.5%; (top as you need, right 0%, bottom as you need and left 2.5%) for the prouctu divs. Btw. you should extract common style to a product class and apply the class on the product divs...

One nice solution is to use display:table and display:table-cell. Which will works for 2 and 3 div both.
HTML:
<div id="our_services" class="container">
<h1>המוצרים שלנו</h1>
<div id="try">
<div id="product1" class="product">
</div>
<div id="product2" class="product">
</div>
<div id="product3" class="product">
</div>
CSS:
#our_services {
background-color: rgb(224, 224, 224);
color: black;
font-family: "open_sans_hebrewregular","alefregular",arial,"Times New Roman";
height: 450px;
margin: auto;
overflow: auto;
text-align: center;
}
#try {
background-color: orange;
display: table;
height: 50%;
margin: auto;
width: 50%;
border-collapse: separate;
border-spacing: 10px;
}
.product{
display: table-cell;
height: 75%;
margin: 5px;
width: 30%;
}
#product1 {
background-color: green;
}
#product2 {
background-color: pink;
}
#product3 {
background-color: blue;
}
Check Fiddle here.

Develop Reference

JavaScript is the programming language of the Web.

Make infinite vertical lines with css - javascript

Related

Flexbox scroll overflowing content in an dynamic sized parent

Change the orientation of the buttons

How to control the height of descendant box within a nested flexbox context?

How to print a canvas image at 100% page width?

separate div to 3 columns

Categories

Resources