I'm just learning the layout and I would like to make a page where there are blocks and lines between them and when you scroll, they will appear
I need to draw a vertical line that will connect the blocks, but so that it was adaptive.
I tried using skew, but it is not adaptive
.skill-l{
width: 100%;
height: min-content;
background-color: pink;
}
.skill-r{
width: 100%;
height: min-content;
text-align: end;
background-color: lightgreen;
}
.container-main{
margin-left: 33%;
margin-right: 33%;
}
.line-lr {
height: 50vh;
width: 3px;
background: green;
transform: skewX(30deg);
margin-left: 50%;
color: green;
}
.line-rl {
height: 50vh;
width: 3px;
background: yellow;
transform: skewX(-30deg);
color: yellow;
}
<div class="container-main">
<div class="skill-l text-white">
<h2>DIV 1</h2>
</div>
<div class="line-lr mx-auto">
</div>
<div class="skill-r text-white">
<h2>DIV 2</h2>
</div>
<div class="line-rl mx-auto"></div>
<div class="skill-l text-white">
<h2>DIV 3</h2>
</div>
</div>
My lines go over the block. How can I prevent that?
Related
I am trying to split the screen horizontally into 3 equal pieces so I can place separate images into each piece. I have split the screen somewhat equally, but I am running into some issues with a white space and not being split equally.
Here is what I have:
HTML:
<div class="split left">
<div class="centered">
<img src="img_avatar2.png" alt="Avatar woman">
</div>
</div>
<div class="split center">
<div class="centered">
<img src="img_avatar.png" alt="Avatar man">
</div>
</div>
<div class="split right">
<div class="centered">
<img src="golf_course.jpg" alt="Finished Terrain Golf Course">
</div>
</div>
CSS:
/* Split the screen into thirds*/
.split {
height: 100%;
width: 33.3333%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
/* Control the left side */
.left {
left: 0;
background-color: #111;
}
/* Control the right side */
.right {
right: 0;
background-color: red;
}
.center {
right:auto;
left:auto;
background-color:wheat;
}
/* If you want the content centered horizontally and vertically */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
/* Style the image inside the centered container, if needed */
.centered img {
width: 150px;
border-radius: 50%;
}
Image:
You can use flexbox:
.container {
display: flex;
justify-content: space-between;
}
.container div {
width: 100%;
padding: 5px;
border: 1px solid black;
}
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
You can use grid :
https://css-tricks.com/snippets/css/complete-guide-grid/
in grid you can divide your grid.
*doesn"t work with older browsers like ie11
First, width: available is not valid property. if you want to use all available space you should set width: 100%. anyway, for solving your issue you should use height: 100% also for body and html. see this example:
body, html {
width: 100%;
height: 100%;
margin: 0;
}
.container {
width: 100%;
height: 100%;
}
.leftpane {
width: 33%;
height: 100%;
float: left;
background-color: rosybrown;
border-collapse: collapse;
}
.middlepane {
width: 33%;
height: 100%;
float: left;
background-color: royalblue;
border-collapse: collapse;
}
.rightpane {
width: 33%;
height: 100%;
position: relative;
float: right;
background-color: yellow;
border-collapse: collapse;
}
<div class="container">
<div class="leftpane">
<h1>Test Page</h1></div>
<div class="middlepane">Test Page</div>
<div class="rightpane">
<h1>Test Page</h1></div>
</div>
For a project I have a page where everything is in a wrapper and I scale that wrapper as the screen size gets bigger. Imagine each box being a section.
The middle section bleeds to the right but keeps the same margin to the left as the wrapper does. I don't know the exact width of the the section + the margin on the right and if I do, when it scales it will change. I want the left side to scale inline with the other sections as the browser changes like it does in a regular wrapper.
https://codepen.io/seandaniel/pen/oNvKjop
.wrapper {
width: 60rem;
margin: 0 auto;
}
.section-1 {
background-color: black;
width: 100%;
height: 200px;
}
.section-2 {
background-color: blue;
/* this width is just to show what I want it to look like */
width: 1224px;
height: 200px;
margin-left: auto;
}
.section-3 {
background-color: orange;
width: 100%;
height: 200px;
}
<main>
<div class="wrapper">
<section class="section-1">
</section>
</div>
<section class="section-2">
</section>
<div class="wrapper">
<section class="section-3">
</section>
</div>
</main>
Is this what you want to happen?
The wrapper will stay the same distance from the left no matter what.
Although I'm not sure if you want your wrapper in the center center (x,y) at all times.
CSS
.wrapper {
border: 1px solid green;
width: 100%;
position: absolute;
left: 45px;
}
.section-1 {
background-color: black;
width: 100%;
height: 200px;
position: relative;
}
.section-2 {
background-color: blue;
width: 125%;
height: 200px;
margin-left: auto;
position: relative;
}
.section-3 {
background-color: orange;
width: 100%;
height: 200px;
position: relative;
}
<main>
<div class="wrapper">
<section class="section-1">
</section>
<section class="section-2">
</section>
<section class="section-3">
</section>
</div>
</main>
In your .section-2 class add the following css rule margin-right: calc(50% - 50vw);
You will also need to nest your <section class="section-2"></section> into the same <div class="wrapper"></div> as your other sections to have the same left alignment.
If you want it to bleed to the left, use margin-left: calc(50% - 50vw); instead of margin-right, or have both to be full width.
This page has a lot of good information about manipulating margins within a container.
Full Width Containers in Limited Width Parents
.wrapper {
width: 60rem;
margin: 0 auto;
}
.section-1 {
background-color: black;
width: 100%;
height: 200px;
}
.section-2 {
background-color: blue;
height: 200px;
margin-right: calc(50% - 50vw);
}
.section-3 {
background-color: orange;
width: 100%;
height: 200px;
}
<main>
<div class="wrapper">
<section class="section-1">
</section>
</div>
<div class="wrapper">
<section class="section-2">
</section>
</div>
<div class="wrapper">
<section class="section-3">
</section>
</div>
</main>
I'm building a customised horizontal carousel, where in I want to display some items which are vertically scroll-able.
Code I've tried so far:
html
<div class="carousel">
<div class="c-item">Item-1</div>
<!-- to be displayed vertically -->
<div class="abs">
<div class="a-item">Abs Item-1.1</div>
<div class="a-item">Abs Item-1.2</div>
<div class="a-item">Abs Item-1.3</div>
</div>
<div class="c-item margin">Item-2</div>
<!-- to be displayed vertically -->
<div class="abs">
<div class="a-item">Abs Item-2.1</div>
<div class="a-item">Abs Item-2.2</div>
<div class="a-item">Abs Item-2.3</div>
</div>
</div>
<div class="other">
Other div
</div>
css
.carousel{
color: #FFF;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
position: initial;
.c-item{
display: inline-block;
width: 35%;
background: #000;
height: 100px;
&.margin{
//margin-left: 35%;
}
}
.abs{
background: #444;
display: inline-block;
vertical-align: top;
width: 35%;
max-height: 180px;
overflow-y: auto;
.a-item{
height: 100px;
border: 1px solid #000;
}
}
}
.other{
background: yellow;
}
Result:
(codepen)
The problem here is: I want the other div to start just below the item-1; meaning that the vertically scrolled div should be overlapping the other div and the carousel height should be fixed at 100px. I tried using position: absolute for the .abs div but then that div doesn't move on scrolling the carousel.
Desired output will look like this:
A flexbox solution
Each item is 33.33% wide and 100px high. The items inside .multiple are also 100px high.
.multiple has position: relative and overflow-y: auto. The items inside have position: absolute.
Hint: Container -> position: relative, items inside -> position: absolute. That's how it works.
top: (100 * n)px for each <div> inside .item.multiple. n is the index of the <div> inside .item.multiple, starting with 0.
The HTML structure has been changed
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.carousel {
display: flex;
width: 100vw;
overflow-x: auto;
color: white;
}
.carousel>.item {
flex: 1 0 33.33%;
//margin-right: 5px;
}
.carousel>.item:nth-child(odd) {
background: black;
}
.carousel>.item:nth-child(even) {
background: darkgrey;
}
.carousel>.item,
.carousel>.item.multiple>div {
height: 100px;
}
.carousel>.item.multiple {
position: relative;
overflow-y: auto;
}
.carousel>.item.multiple>div {
position: absolute;
width: 100%;
}
.carousel>.item.multiple>div:nth-child(2) {
top: 100px;
}
.carousel>.item.multiple>div:nth-child(3) {
top: 200px;
}
/* And so on ...
.carousel>.item.multiple>div:nth-child(...) {}
*/
<div class="carousel">
<div class="item">
<div>Item-1</div>
</div>
<div class="item multiple">
<div>Item-1.1</div>
<div>Item-1.2</div>
<div>Item-1.3</div>
</div>
<div class="item">
<div>Item-2</div>
</div>
<div class="item multiple">
<div>Item-2.1</div>
<div>Item-2.2</div>
<div>Item-2.3</div>
</div>
</div>
<div class="other">
Other div
</div>
Your desired result mean making the child overlap the parent, and i don't think that's possible. BUT you can "hack" this by wrapping the .carousel with another div (.demo it this general example), so the results will be something like this:
.demo {overflow: visible; height: 100px;}
.carousel {
color: #FFF;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
position: initial;
}
.carousel .c-item {
display: inline-block;
width: 35%;
background: #000;
height: 100px;
}
.carousel .abs {
background: #444;
display: inline-block;
vertical-align: top;
width: 35%;
max-height: 180px;
overflow-y: auto;
}
.carousel .abs .a-item {
height: 100px;
border: 1px solid #000;
}
.other {
background: yellow;
height: 200px;
}
<div class="demo">
<div class="carousel">
<div class="c-item">Item-1</div>
<div class="abs">
<div class="a-item">Abs Item-1.1</div>
<div class="a-item">Abs Item-1.2</div>
<div class="a-item">Abs Item-1.3</div>
</div>
<div class="c-item margin">Item-2</div>
<div class="abs">
<div class="a-item">Abs Item-2.1</div>
<div class="a-item">Abs Item-2.2</div>
<div class="a-item">Abs Item-2.3</div>
</div>
</div>
</div>
<div class="other">
Other div
</div>
As you can see from the snippet the scroll-x doesn't show - yet it exist. You can click one of the .carousel item and scroll them right and left.
Since it's not obvious that the .carousel is scrolling, you can add extra buttons to scroll it:
.demo {overflow: visible; height: 100px;z-index: 3;}
.carousel {
color: #FFF;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
position: initial;
}
.carousel .c-item {
display: inline-block;
width: 35%;
background: #000;
height: 100px;
}
.carousel .abs {
background: #444;
display: inline-block;
vertical-align: top;
width: 35%;
max-height: 180px;
overflow-y: auto;
}
.carousel .abs .a-item {
height: 100px;
border: 1px solid #000;
}
.other {
background: yellow;
height: 200px;
}
<div class="demo">
<button onclick="document.querySelectorAll('.carousel')[0].scrollLeft += 20;" style="position: fixed; top: 50%; right: 0;">L</button>
<button onclick="document.querySelectorAll('.carousel')[0].scrollLeft -= 20;" style="position: fixed; top: 50%; left: 0;">R</button>
<div class="carousel">
<div class="c-item">Item-1</div>
<div class="abs">
<div class="a-item">Abs Item-1.1</div>
<div class="a-item">Abs Item-1.2</div>
<div class="a-item">Abs Item-1.3</div>
</div>
<div class="c-item margin">Item-2</div>
<div class="abs">
<div class="a-item">Abs Item-2.1</div>
<div class="a-item">Abs Item-2.2</div>
<div class="a-item">Abs Item-2.3</div>
</div>
</div>
</div>
<div class="other">
Other div
</div>
Hope that helps!
You have to play with position check snippet.
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.carousel {
display: flex;
width: 100vw;
overflow-x: auto;
color: white;
}
.carousel>.item {
flex: 1 0 33.33%;
//margin-right: 5px;
}
.carousel>.item:nth-child(odd) {
background: black;
}
.carousel>.item:nth-child(even) {
background: darkgrey;
}
.carousel>.item,
.carousel>.item.multiple>div {
height: 100px;
}
.carousel>.item.multiple {
position: relative;
overflow-y: auto;
height: 200px;
}
.carousel>.item.multiple>div {
position: absolute;
width: 100%;
}
.carousel>.item.multiple>div:nth-child(2) {
top: 100px;
}
.carousel>.item.multiple>div:nth-child(3) {
top: 200px;
}
.other {
position: absolute;
z-index: -1;
top: 100px;
width: 100%;
background: green;
height: 117px;
}
/* And so on ...
.carousel>.item.multiple>div:nth-child(...) {}
*/
<div class="carousel">
<div class="item">
<div>Item-1</div>
</div>
<div class="item multiple">
<div>Item-1.1</div>
<div>Item-1.2</div>
<div>Item-1.3</div>
</div>
<div class="item">
<div>Item-2</div>
</div>
<div class="item multiple">
<div>Item-2.1</div>
<div>Item-2.2</div>
<div>Item-2.3</div>
</div>
</div>
<div class="other">
Other div
</div>
I have this flip box which looks like this
When I hover on it, it would turn around and would look like this.
I want to know, how do I move the text to the right only, I tried putting text-align: right; on my css but it didn't work. Am I doing it wrong?
Here's my CSS and HTML:
.box9 {
background-color: #4C586F;
width: 250px;
height: 150px;
margin: 0 auto;
padding: 45px;
}
.box10 {
background-image: url("../img/commended/erwin.png");
background-size: 50%;
background-repeat: no-repeat;
width: 250px;
height: 150px;
margin: 0 auto;
padding: 45px;
}
<div class="col_third">
<div class="hover panel">
<div class="front">
<div class="box9">
<p style="font-size:180%; color: white">Kudos!</p>
</div>
</div>
<div class="back">
<div class="box10">
<p style="font-size:180%; color: black">sdasdsadas</p>
</div>
</div>
</div>
</div>
I would do it like this, setting text-align: right in the back view and to center in the front view, vertical centering of the p tag and also changing some other settings (no padding [therefore changed width and height settings] and some other details):
.box9 {
background-color: #4C586F;
width: 340px;
height: 240px;
margin: 0 auto;
text-align: center;
}
.box10 {
background-image: url(http://placehold.it/150x250/);
background-size: auto 100%;
background-repeat: no-repeat;
width: 340px;
height: 240px;
margin: 0 auto;
text-align: right;
}
.box9 p,
.box10 p {
margin: 0;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.box10 p {
padding-right: 20px;
}
<div class="col_third">
<div class="hover panel">
<div class="front">
<div class="box9">
<p style="font-size:180%; color: white">Kudos!</p>
</div>
</div>
<div class="back">
<div class="box10">
<p style="font-size:180%; color: black">sdasdsadas</p>
</div>
</div>
</div>
</div>
I'm trying to add a circle (the circle will contains an icon) in front of an image. My code works fine, but only in big display; 1,224 and up..However, this is not the case for tablet and mobile...So, my question is: How can I fix my code and make it works for all devices, without using #media. If #media is the only solution, then I will go for it..
HTML
<div class="row">
<div class="col-md-3">
<div class="service-box">
<div class="service-circle" >
<!--Add icon inside circle -->
</div>
<div class="service-bg" style="background-color: black;">
<!-- Insert img-->
</div>
<div class="service-text">
<h3>
ENTER TITLE
</h3>
</div>
</div>
</div>
<div class="col-md-3">
</div>
<div class="col-md-3">
</div>
<div class="col-md-3">
</div>
</div>
CSS/LESS
.service-box {
.service-circle{
width: 120px;
height: 120px;
border-radius: 50%;
display: table-cell;
vertical-align: middle;
color: #000;
line-height: 500px;
text-align: center;
background: #fff;
position: absolute;
left: 30%;
margin-top: 65%;
border: 5px solid #e6ab43;
}
.service-bg {
height: 250px;
border:1px solid black;
img{
height: 100%;
}
}
.service-text {
text-align: center;
margin-top: 30%;
}
}
UPDATE:
This is what I'm trying to do:
Therefore, I'm using col-sm-3.
If you move your service-circle element inside your service-bg, you can then align it using transform: translate
.service-box {
background: red;
}
.service-bg {
position: relative; /* added */
height: 250px;
border:1px solid black;
}
img{
height: 100%;
}
.service-circle{
width: 120px;
height: 120px;
border-radius: 50%;
color: #000;
background: #fff;
position: absolute;
left: 50%; /* added */
top: 100%; /* added */
transform: translate(-50%,-50%); /* added */
border: 5px solid #e6ab43;
}
.service-text {
text-align: center;
margin-top: 80px; /* changed */
}
<div class="row">
<div class="col-md-3">
<div class="service-box">
<div class="service-bg" style="background-color: black;">
<!-- Insert img-->
<div class="service-circle">
<!--Add icon inside circle -->
</div>
</div>
<div class="service-text">
<h3>
ENTER TITLE
</h3>
</div>
</div>
</div>
<div class="col-md-3">
</div>
<div class="col-md-3">
</div>
<div class="col-md-3">
</div>
</div>