I am looking to create this kind of card layout how to get that blue on both side of the card.
The only thing i would like to know is how to get that blue on left and right side of the card.
.card {
height: 300px;
width: 400px;
background: #f1f1f1;
}
<div class="card">
<h2>Title</h2>
</div>
You need to wrap The card with container with two childern.
1- Then add overlay div with absolute positioning (this will be the blue side)
2- The card (white div)
N.P: I've added flex to body just to center the card, no need for it.
Example:
body {
background-color: gray;
display: flex;
}
.card-container {
position: relative;
height: 300px;
width: 400px;
margin: auto;
}
.overlay {
position: absolute;
top: 5%;
left: 0;
width: 100%;
height: 90%;
background: linear-gradient(#4180B9, #42BDBB);
border-radius: 5px;
}
.card {
z-index: 2;
position: relative;
width: 90%;
height: 100%;
margin: auto;
background-color: #fff;
border-radius: 5px;
}
<div class="card-container">
<div class="overlay"></div>
<div class="card">
</div>
Related
I have an image and i want to put 2 circles on top of it, instead of the eyes.
body {
background-color: lightgrey;
color: #fff;
padding: 0;
margin: 0;
}
main {
display: grid;
place-items: center;
position: relative;
}
#container {
min-height: 100vw;
min-width: 100vw;
background: none;
aspect-ratio: 1 / 1;
}
.eye-container {
position: relative;
border-radius: 50%;
background-color: red;
width: 12vw;
height: 12vw;
}
.eye-container.left {
top: -84%;
left: 36%;
}
.eye-container.right {
top: -96%;
left: 51%;
}
.eye {
position: absolute;
bottom: 3px;
right: 2px;
display: block;
width: 3vw;
height: 3vw;
border-radius: 50%;
background-color: #000;
}
img {
max-width: 100%;
min-width: 100%;
}
<main>
<div id="container">
<img id="sponge" src="https://upload.wikimedia.org/wikipedia/en/thumb/3/3b/SpongeBob_SquarePants_character.svg/220px-SpongeBob_SquarePants_character.svg.png">
<div class="eye-container left">
<div class="eye"></div>
</div>
<div class="eye-container right">
<div class="eye"></div>
</div>
</div>
</main>
The current issue is the image is too big, it is stretched.
The initial problem was that the layout was not responsive on mobile, and i've did some changes and now the image is this big.
I've used aspect-ratio: 1 / 1; because top was not working with negative percentage, and with pixels the eyes location is changing if is shrink the window.
Do you have another suggestion, maybe a simplified code will be better.
Thank you.
I'm a noob developer and I felt like, this was a tiny engineering job "LOL" but I did it for you.
So the most important point in this is to keep the image and the eyes in the same position. and to do that, you should position them in a parent container for image and eyes considering four important factors:
1- Parent position: relative; All children position: absolute;
2- All children's width: %; so it can stay in the same spot in its parent whatever the width of the parent is.
3- Eyes and eyeballs positioning top, left, right must be % too for the same purpose.
4- To change the image size, use the parent width. do not change the image size.
If you follow these steps, you can position any element with any image or other element.
* {
border: 1px solid blue;
margin: 0;
padding: 0;
}
.container {
width: 200px; /* use this to change the picture size. do not change it somewhere else */
position: relative;
}
.image {
width: 100%;
}
.eye-container{
position: absolute;
border-radius: 50%;
background-color: red;
width: 12%;
height: 12%;
}
.left-eye {
top: 17%;
left: 36%;
}
.right-eye {
top: 17%;
left: 51%;
}
.eyeball {
position: absolute;
bottom: 3px;
right: 2px;
display: block;
width: 30%;
height: 30%;
border-radius: 50%;
background-color: #000;
}
<div class="container">
<img class="image" src="https://upload.wikimedia.org/wikipedia/en/thumb/3/3b/SpongeBob_SquarePants_character.svg/220px-SpongeBob_SquarePants_character.svg.png">
<div class="left-eye eye-container">
<div class="eyeball"></div>
</div>
<div class="right-eye eye-container">
<div class="eyeball"></div>
</div>
</div>
Is it possible to use calc() to center an element, which has a width defined with % ?
e.g.
.wrapper {
width: 100%;
background-color: black;
height: 300px;
position: absolute;
top: 0;
}
.inside {
width: 100%;
margin-left: 30px;
background-color: yellow;
height: 250px;
margin: 20px;
}
.inside h1 {
width: 30%;
background-color: white;
text-align: center;
}
.inside h1 {
position: absolute;
left: calc(50% - 15%);
left: -webkit-calc(50% - 15%);
}
<div class="wrapper">
<div class="inside">
<h1>CENTERED to viewport</h1>
</div>
</div>
This is the slider. It has a "string", which guides through the steps of the slider and the header is always in the middle of the screen. But for design purpose, the line starts a bit to the right and ends a bit to the left, which is given with a width of 80%.
The top is slider no.1 with the string, the second slider, which is synced is the area with the big white square.
Maybe now it is a bit more clear, why I tried what I tried.
Yes, if you create a variable in the css for example:
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
--Example: 200px;
position: absolute;
left: 50px;
width: calc(100% - var(--Example)/2);
border: 1px solid black;
background-color: yellow;
padding: 5px;
text-align: center;
}
</style>
</head>
<body>
<div id="div1">Some text...</div>
</body>
</html>
If you can have fixed width just add margin: 0px auto. This will center the text horizontally.
.wrapper {
width: 100%;
background-color: black;
height: 300px;
position: absolute;
top: 0;
}
.inside {
margin-left: 30px;
background-color: yellow;
height: 250px;
margin: 20px;
}
.inside h1 {
width: 40%;
background-color: white;
text-align: center;
margin: 0px auto;
}
<div class="wrapper">
<div class="inside">
<h1>CENTERED to viewport</h1>
</div>
</div>
I have a page which displays an HTML canvas element inside a container. Since the image displayed in the canvas can be far bigger than the space I have, I forced the size of the container and used its overflow property to scroll the contente of the canvas. While both the container and the scrollbar are displayed correctly, the canvas simply ignores it.
My HTML:
<div class="sidebar">
Some content
</div>
<div class="the_wrapper">
<div class="canvas_wrapper">
<canvas id="imageCanvas"></canvas>
</div>
<div class="another_element">
Some other content
</div>
</div>
And this is the CSS:
.sidebar{
height: 100vh;
width: 20vw;
float: left;
}
.the_wrapper{
height: 100vh;
width: 80vw;
float: right;
}
.canvas_wrapper{
height: 60vh;
overflow: scroll;
}
.another_element{
height: 40vh;
}
This is what I want
But all I get is this
.the_wrapper do not need a float set to right.
.the_wrapper{
height: 100vh;
width: 80vw;
float: right; // Don't do that
}
Just do this
.the_wrapper {
position: absolute;
right: 0;
height: 100vh;
width: 80vw;
}
I also reset some properties to get the result of your first example.
* {
box-sizing: border-box;
padding: 0;
margin: 0;
overflow: hidden;
}
Here the snippet result :
* {
box-sizing: border-box;
padding: 0;
margin: 0;
overflow: hidden;
}
.sidebar {
height: 100vh;
width: 20vw;
float: left;
border: 3px solid #000;
}
.the_wrapper {
position: absolute;
right: 0;
height: 100vh;
width: 80vw;
}
.canvas_wrapper {
height: 60vh;
border: 3px solid green;
}
.another_element {
height: 40vh;
border: 3px solid red;
}
<div class="sidebar">Some content</div>
<div class="the_wrapper">
<div class="canvas_wrapper">Canvas
<canvas id="imageCanvas"></canvas>
</div>
<div class="another_element">Some other content</div>
</div>
You can also try it in https://jsfiddle.net/lofeed/6n983g7x/4/
The wrapper is set to float to the right, meaning that all available space will be included within it.
I have two base DOM elements and two inner elements.
Blue box must overlap grey box.
Blue inner box must overlap blue and grey boxes.
Grey inner box must overlap all other elements.
But it doesn't.
#grey_box {
width: 200px;
height: 200px;
border: solid 1px #ccc;
background: #ddd;
position: relative;
z-index: 10;
}
#blue_box {
width: 200px;
height: 200px;
border: solid 1px #4a7497;
background: #8daac3;
position: relative;
z-index: 20;
margin-left: 80px;
margin-top: -50px;
}
#grey_inner_box {
width: 50px;
height: 50px;
background: red;
position: relative;
z-index: 200;
margin-top: 80px;
margin-left: 150px;
}
#blue_inner_box {
width: 50px;
height: 50px;
background: green;
position: relative;
z-index: 100;
margin-left: 40px;
margin-top: -40px;
}
<div id="grey_box">
<div id="grey_inner_box">grey inner</div>
</div>
<div id="blue_box">
<div id="blue_inner_box">blue inner</div>
</div>
What am I doing wrong?
What you want isn't possible.
Once you set an element to position: anything except static, it establishes a new stacking context.
Anything you set the z-index of inside it, is only positioned within it.
Take this for example:
<div id="box1">
<div id="paper1"></div>
<div id="paper2"></div>
<div id="paper3"></div>
</div>
<div id="box2">
<div id="paper4"></div>
<div id="paper5"></div>
<div id="paper6"></div>
</div>
Inside each box, you can put the papers in any order you like. You can put box1 on top of box2 or vice versa, but when you move a box, you take the papers inside the box with it.
If you want to overlap the papers in the different boxes, you need to take them out of the boxes first.
Remove the z-index from #grey_box. Since #grey_box is beneath all other divs, we dont need z-index there. This helps to bring the #grey_inner_box to top.
#grey_box {
width: 200px;
height: 200px;
border: solid 1px #ccc;
background: #ddd;
position: relative;
/* z-index: 10; */
}
#blue_box {
width: 200px;
height: 200px;
border: solid 1px #4a7497;
background: #8daac3;
position: relative;
z-index: 20;
margin-left: 80px;
margin-top: -50px;
}
#grey_inner_box {
width: 50px;
height: 50px;
background: red;
position: relative;
z-index: 200;
margin-top: 110px;
margin-left: 150px;
}
#blue_inner_box {
width: 50px;
height: 50px;
background: green;
position: relative;
z-index: 100;
margin-left: 40px;
margin-top: -40px;
}
<div id="grey_box">
<div id="grey_inner_box">grey inner</div>
</div>
<div id="blue_box">
<div id="blue_inner_box">blue inner</div>
</div>
Ok, I want this:
For that, I have this HTML code:
<div id="wrapForCenter">
<div id="title">
title
</div>
<div id="contentFrame">
<div id="imagePlaceholder">
image
</div>
<div id="content">
content
</div>
</div>
<div id="buttonsBar">
buttonsBar
</div>
</div>
And I have this CSS code:
#wrapForCenter
{
position: absolute;
top:50%;
left: 50%;
margin-top: -160px;
margin-left: -240px;
width: 480px;
height: 320px;
border: 1px solid black;
}
#title
{
width: 100%;
height: 40px;
background-color: Blue;
}
#contentFrame
{
height: 240px;
width: 480px;
}
#imagePlaceholder
{
float: left;
width: 100px;
height: 100%;
background-color: Green;
}
#content
{
float: left;
width: 380px; /*<-- look at this*/
height: 100%;
background-color: Yellow;
overflow: auto;
}
#buttonsBar
{
clear: left;
width: 100%;
height: 40px;
background-color: Silver;
}
If I change the contents width to 100%, why occurs this?
What I spect is that content width would be contentFrame minus imagePlacehoder width in pixels, but when I specify float:left for both, imagePlacehoder and content, content gets its parent container width. Why?
Is there another way to get the same result without using float (maybe display:inline)? And using width:100% for content?
Thank you very much. CSS is not my strenght.
This is called a float drop. Floats work such that they'll fit side-by-side as long as there's enough room for each, but a float will bump down below the previous one if there's not enough room for it to fit.
width:100% means make it 100% as wide as its container (#wrapForCenter). Naturally, if you tell something to be the entire width of it's container, nothing can fit along either side inside of that container, so as a float it must move down below whatever is before it (an earlier "sibling") to fit.
A question similar to this was asked by me myself in stackoverflow before.
How to auto adjust (stretch) div height and width using jQuery or CSS
You can set HTML like;
<div id="container">
<div id="top"></div>
<div id="left"></div>
<div id="right"></div>
<div id="bottom"></div>
</div>
And CSS like;
#container {
position: relative;
width: 300px;
height: 200px;
}
#top, #left, #right, #bottom {
position: absolute
}
#top {
top: 0;
width: 100%;
height: 50px;
background: #00b7f0
}
#left {
top: 50px;
width: 50px;
bottom: 50px;
background: #787878
}
#right {
top: 50px;
left: 50px;
right: 0;
bottom: 50px;
background: #ff7e00
}
#bottom {
bottom: 0;
width: 100%;
height: 50px;
background: #9dbb61
}
Here is the working demo.
Hope this helps..
Note: I recommend (not forcing) you to do a search in stackoverflow before asking questions.
You should set your image holder to 25% and your content to 75%, or if you know how much space you have allocated for your entire content area(picture and content) then subtract 100 from that and use that many pixels. but overall this should work
#wrapForCenter {
position: absolute;
top: 50%;
left: 50%;
margin-top: -160px;
margin-left: -240px;
width: 480px;
height: 320px;
border: 1px solid black;
}
#title {
width: 100%;
height: 40px;
background-color: Blue;
}
#contentFrame {
height: 240px;
width: 480px;
}
#imagePlaceholder {
float: left;
width: 25%; /* See Here */
height: 100%;
background-color: Green;
}
#content {
float:right;
width: 75%; /* And here */
height: 100%;
background-color:Yellow;
}