I have some issue about achieving this. I put the the back ground image in multiple divs, but it's not quite working. Image is repeating on fixed when I make the screen smaller or bigger. when I change it to absolute then every div having an image to itself.
Is it possible to fix these problem?
here it's fiddle:
header {
position: relative;
height: 100vh;
padding: 75px;
}
header div.container {
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 350px;
height: 425px;
display: flex;
overflow: hidden;
}
header div.container .context {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/*
= cols
=== */
header
.container
.col {
width: 50%;
height: 425px;
}
header
.container
.col
.image {
height: 100%;
height: 50%;
background-image: url("https://i.imgur.com/jtZfhST.png");
background-attachment: fixed;
background-position: top left;
}
header
.container
#col-left {
position: relative;
z-index: 2;
top: 12.5px;
}
header
.container
#col-left
.image1, .image3 {
margin-right: 2px;
}
header
.container
.col
.image1, .image2 {
margin-bottom: 2px;
}
header
.container
#col-right {
position: relative;
z-index: 2;
bottom: 12.5px;
}
<header>
<div class="container">
<div class="col" id="col-left">
<div class="image image1"></div>
<div class="image image3"></div>
</div>
<div class="col" id="col-right">
<div class="image image2"></div>
<div class="image image4"></div>
</div>
</div>
</header>
Is this what you're looking for?
.split {
background-image: url(https://images.unsplash.com/photo-1568955773021-d347deaffa1a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1289&q=80);
background-attachment: fixed;
width: 30%;
height: 300px;
margin: 0 10px 10px 0;
display: inline-block;
background-size: cover;
background-position: center;
}
.container {
margin: 10px 0 0 10px;
}
<div class="container">
<div class="row">
<div class="split"></div>
<div class="split"></div>
<div class="split"></div>
</div>
<div class="row">
<div class="split"></div>
<div class="split"></div>
<div class="split"></div>
</div>
</div>
Related
How do I make my image gets centered in the .s-circles-1 <div>...
Html
.s-circles-1 {
display: inline-block;
opacity: 0.1;
margin-left: 315px;
margin-top: 155px;
background-color: #fff;
width: 164px;
height: 164px;
border-radius: 100%;
position: relative;
}
.s-img-1 {
opacity: 0.9;
display: inline-block;
position: absolute;
color: #E37218;
margin-right: 70vw;
width: 120px;
height: 120px;
}
<div class="services">
<div class="s-text">
<h2>Services</h2>
</div>
<div class="s-circles-1">
<img src="/Shapes/code (1).svg" alt="" class="s-img-1">
</div>
</div>
I am trying to make my image get inserted in the circle.
Thanks in advance.
With background-image :
div.circle {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border-radius: 100%;
width: 164px;
aspect-ratio : 1 / 1;
}
<div class="services">
<div class="s-text">
<h2>Services</h2>
</div>
<div class="circle" style="background-image: url(https://thispersondoesnotexist.com/image)"></div>
</div>
With your code, you need to change your css with this (if you don't want to use background-image) :
s-circles-1 class : set overflow:hidden;
s-img-1 class : set
width:100%; and height:100%;
.s-circles-1 {
display: inline-block;
opacity: 0.5;
width: 164px;
aspect-ratio:1 / 1; /* Keep the same width */
border-radius: 100%;
overflow: hidden;
}
.s-circles-1 img {
opacity: 0.9;
width: 100%;
height: 100%;
}
<div class="services">
<div class="s-text">
<h2>Services</h2>
</div>
<div class="s-circles-1">
<img src="https://thispersondoesnotexist.com/image" alt="">
</div>
</div>
With your code, but if your image is not a square :
div.circle {
display: flex;
justify-content: center;
align-items: center;
border-radius: 100%;
width: 164px;
aspect-ratio : 1 / 1;
overflow: hidden;
}
div.circle img {
/*if width > height*/
height: 164px;
/*if height > width*/
/*width: 164px;*/
}
<div class="services">
<div class="s-text">
<h2>Services</h2>
</div>
<div class="circle">
<img src="https://dummyimage.com/1200x500/000/fff" alt="" class="circle">
</div>
</div>
How can I center this image that I have in this div in a way that it won't move the 'line' div? I want the line to be touching the top of the square too.
.black {
background: black;
}
.square {
width: 200px;
height: 500px;
margin: 37px auto;
border-radius: 2px;
}
.image {
height: 60px;
width: 60px;
}
.line {
width: 4px;
height: 500px;
background-color: red;
}
<div class="container">
<div class="square black">
<img class="image" src="https://c.neh.tw/thumb/f/720/5659673474629632.jpg">
<div class="wrapper">
<div class="line"></div>
<div class="rectangle"></div>
</div>
</div>
Here is one way to prevent it from disrupting the flow layout of your container:
you can make the container a position of relative, and the image a position of absolute, positioned off the top and left by 50%, then transform it so that the center of the image is in the center position.
You could also just make the image a background-image of the div instead of using an image element, which may be easier to manipulate.
.black {
background: black;
}
.square {
position: relative;
width: 200px;
height: 500px;
margin: 37px auto;
border-radius: 2px;
}
.image {
height: 60px;
width: 60px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.line {
width: 4px;
height: 500px;
background-color: red;
}
<div class="container">
<div class="square black">
<img class="image" src="https://c.neh.tw/thumb/f/720/5659673474629632.jpg">
<div class="wrapper">
<div class="line"></div>
<div class="rectangle"></div>
</div>
</div>
</div>
I'm not sure I understand your exact desired end goal. But, if I understand correctly, you could create a flex parent to justify the image, and then position the line absolutely within that. See -
.black {
background: black;
}
.square {
width: 200px;
height: 500px;
margin: 37px auto;
border-radius: 2px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.image {
height: 60px;
width: 60px;
}
.line {
width: 4px;
background-color: red;
position: absolute;
left: 0;
top: 0;
bottom: 0
}
<div class="square black">
<div class="line"></div>
<img class="image" src="https://c.neh.tw/thumb/f/720/5659673474629632.jpg">
</div>
You can just use these css for .square and .image
.square {
width: 200px;
height: 500px;
margin: 37px auto;
border-radius: 2px;
position: relative;
}
.image {
height: 60px;
width: 60px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
You can easily center a image by using CSS position absolute. By making the position of square black class "absolute" and apply to properties "top: 45%;" and "left: 47%" . By applying this your problem will be definitely solve.
.black {
background: black;
}
.square {
display: flex;
align-item: center;
justify-content: center;
width: 200px;
height: 500px;
border-radius: 2px;
}
.image {
height: 60px;
width: 60px;
}
<div class="container">
<div class="square black">
<img class="image" src="https://c.neh.tw/thumb/f/720/5659673474629632.jpg">
</div>
</div>
.black {
background: black;
}
.square {
position: absolute;
top: 45%;
left: 47%;
width: 200px;
height: 500px;
margin: 37px auto;
border-radius: 2px;
}
.image {
height: 60px;
width: 60px;
position: absolute;
top:50%;
left:50%;
}
.line {
width: 4px;
height: 500px;
background-color: red;
}
<div class="container">
<div class="square black">
<img class="image" src="https://c.neh.tw/thumb/f/720/5659673474629632.jpg">
<div class="wrapper">
<div class="line"></div>
<div class="rectangle"></div>
</div>
</div>
.black {
background: black;
}
.square {
width: 200px;
height: 500px;
margin: 37px auto;
border-radius: 2px;
}
.image {
height: 60px;
width: 60px;
}
.line {
width: 4px;
height: 500px;
background-color: red;
}
<div class="container">
<div class="square black">
<img class="image" src="https://c.neh.tw/thumb/f/720/5659673474629632.jpg">
<div class="wrapper">
<div class="line"></div>
<div class="rectangle"></div>
</div>
</div>
I'm creating a grid type layout, the contents of which will be centered, like here.
.outer {
width: 100%;
height: 100px;
margin-top: 10px;
margin-bottom: 10px;
position: relative;
background: pink;
text-align: center;
}
.inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
<div class="outer">
<div class="inner">
<h1>I'm Centered</h1>
</div>
</div>
I've used text-align: center; but there should be a better way to center the contents vertically too. My issue arises trying to do the same where two of these are next to each other with centered content, like this;
.outer {
width: 50%;
float: left;
position: relative;
background: pink;
}
#media only screen and (max-width: 500px) {
.outer {
width: 100%;
float: left;
position: relative;
background: pink;
}
}
.inner {
position: relative;
}
.inner-position {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
<div class="outer">
<div class="inner">
<div class="inner-position">
<p>I should be centered</p>
</div>
</div>
</div>
<div class="outer">
<div class="inner">
<div class="inner-position">
<p>I should be centered</p>
</div>
</div>
</div>
It's looking even worse in a snippet for some reason but something like this would be desired;
I can get the column layout or I can center content. I need to be able to do both.
EDIT
.container {
width: 100%;
height: 500px;
background: pink;
margin-top: 10px;
margin-bottom: 10px;
}
.col {
width: 50%;
float: left;
position: relative;
}
#media only screen and (max-width: 500px) {
.col {
width: 100%;
float: left;
position: relative;
}
}
.inner {
position: relative;
}
.inner-details {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
<div class="container">
<div class="col">
<div class="inner">
<div class="inner-details">
<h1>Middle 1</h1>
</div>
</div>
</div>
<div class="col">
<div class="inner">
<div class="inner-details">
<h1>Middle 2<h1>
</div>
</div>
</div>
</div>
To center items you can use display: flex on the container div and also use
align-items: center; // vertical
justify-content: center; // horizontal
To achieve the image you attached you don't need so many containers, this can be done simply like in this example:
.container {
width: 100%;
height: 300px;
margin-top: 10px;
margin-bottom: 10px;
display: flex;
flex-wrap: wrap;
}
#media only screen and (max-width: 500px) {
.inner-details {
width: 50%;
float: left;
position: relative;
}
}
.inner-details {
background: pink;
display: flex;
flex-grow: 1;
justify-content: center;
align-items: center;
margin: 10px;
}
<div class="container">
<div class="inner-details">
<h1>Middle 1</h1>
</div>
<div class="inner-details">
<h1>Middle 2</h1>
</div>
</div>
I hope this is your desire output. Please check the code snippets.
* {
box-sizing: border-box;
}
.outer {
width: 50%;
height: 100px;
float: left;
position: relative;
background: pink;
margin: 10px 0;
}
#media only screen and (max-width: 500px) {
.outer {
width: 100%;
}
}
.inner {
position: relative;
width: 100%;
height: 100%;
}
.inner-position {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="outer">
<div class="inner">
<div class="inner-position">
<p>I should be centered</p>
</div>
</div>
</div>
<div class="outer">
<div class="inner">
<div class="inner-position">
<p>I should be centered</p>
</div>
</div>
</div>
Using the example from the first snippet and wrapping that twice I've managed to get the desired effect, there's still the issue with having to use text-align to align horizontally but this is the closest I can get without using flex or box-sizing: border-box;. If there's a more appropriate way to do this an example would be appreciated.
.wrap {
width: 100%;
display: table;
}
.col {
width: 50%;
float: left;
}
#media only screen and (max-width: 500px) {
.col {
width: 100%;
float: left;
}
}
.outer {a
width: 100%;
height: 100px;
margin-top: 10px;
margin-bottom: 10px;
position: relative;
background: pink;
text-align: center;
}
.inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
<div class="wrap">
<div class="col">
<div class="outer">
<div class="inner">
<h1>I'm Centered</h1>
</div>
</div>
</div>
<div class="col">
<div class="outer">
<div class="inner">
<h1>I'm Centered Too</h1>
</div>
</div>
</div>
</div>
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 add a image in my container after this when i create another div it overlapping each other i want second div visible below container div
this is html
<header>
<div class="top_nav">
</div>
</header>
<div class="container">
<img src="cover.jpg">
<div id="short-des">
</div>
</div>
<div class="details">
</div>
css
*{
margin: 0;
padding: 0;
}
.top_nav{
height: 80px;
width: 100%;
background: rgba(0,0,0,.5);
position: relative;
}
.container{
height: 638px;
width: 100%;
max-width: 100%;
position: absolute;
overflow: hidden;
background-position: center;
top: 0;
z-index: -1;
}
.container img{
width: 100%;
height: 638px;
}
.details{
height: 638px;
width: 100%;
position: absolute;
}
i want div name detail to show below the container div
Here's the solution (fiddle):
*{
margin: 0;
padding: 0;
}
.top_nav{
height: 80px;
width: 100%;
background: rgba(0,0,0,.5);
position: relative;
}
.container{
height: 638px;
width: 100%;
max-width: 100%;
overflow: hidden;
background-position: center;
top: 0;
z-index: -1;
}
.container img{
width: 100%;
height: 638px;
display: block;
}
.details{
height: 638px;
width: 100%;
}
<header>
<div class="top_nav">
top nav
</div>
</header>
<div class="container">
<img src="http://placehold.it/300x300">
<div id="short-des">
short descr
</div>
</div>
<div class="details">
details
</div>
I guess this is what you want fiddle
.container{
height: 638px;
width: 100%;
max-width: 100%;
overflow: hidden;
background-position: center;
top: 0;
z-index: -1;
}
.details{
height: 638px;
width: 100%;
border:solid 1px red;
}
removed the position:absolute property
<header>
<div class="container">
<div class="top-nav">
</div>
</div>
</header>
<section class="section-one">
<div class="continer">
<div class="image-outer"><img src="your-image">
</div>
<div class="your-title">
</div>
</div>
</section>