I have few divs like this:
<div id=1>
<div id=2></div>
<div id=3></div>
<div id=4>
<div id=5></div>
</div>
</div>
What I need is set up divs like this:
div 2 is on top left, div 3 is on top right, div 4 is at the bottom right and div5 at the top center of div 4
Problem is that I need to do it only in CSS and without class.
I'm not sure I understand your question, but I would do that:
<html>
<head>
<style>
#p1 {
height: 200%;
}
#p2 {
background-color: red;
width: 49%;
height: 48%;
position: fixed;
left: 0%;
top: 0%;
}
#p3 {
background-color: green;
width: 49%;
height: 48%;
position: fixed;
right: 0%;
top: 0%;
}
#p4 {
background-color: blue;
width: 100%;
height: 48%;
position: fixed;
right: 0%;
bottom: 0%;
}
#p5 {
position: absolute;
right: 50%;
top: 50%;
}
</style>
</head>
<body>
<div id=p1>
<div id=p2>2</div>
<div id=p3>3</div>
<div id=p4>4
<div id=p5>5<br>loren ipsum</div>
</div>
</div>
</body>
</html>
This is if you want the div fixed instead if you want div absolute you can try this:
<html>
<head>
<style>
#p1 {
height: 200%;
}
#p2 {
background-color: red;
width: 49%;
height: 48%;
position: absolute;
left: 0%;
top: 0%;
}
#p3 {
background-color: green;
width: 49%;
height: 48%;
position: absolute;
right: 0%;
top: 0%;
}
#p4 {
background-color: blue;
width: 100%;
height: 48%;
position: absolute;
right: 0%;
bottom: 0%;
}
#p5 {
position: absolute;
right: 50%;
top: 50%;
}
</style>
</head>
<body>
<div id=p1>
<div id=p2>2</div>
<div id=p3>3</div>
<div id=p4>4
<div id=p5>5<br>loren ipsum</div>
</div>
</div>
</body>
</html>
You can use:
#d1 {
position: relative;
height: 100px;
width: 100px;
}
#d2 {
position: absolute;
top: 0;
right: 0;
width: 50px;
height: 50px;
background-color: red;
}
#d3 {
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 50px;
background-color: blue;
}
#d4 {
position: absolute;
bottom: 0;
right: 0;
width: 50px;
height: 50px;
background-color: green;
}
#d5 {
position: absolute;
top: 0;
width: 25px;
height: 25px;
left: 0;
right: 0;
margin: 0 auto;
background-color: yellow;
}
<div id="d1">
<div id="d2"></div>
<div id="d3"></div>
<div id="d4">
<div id="d5"></div>
</div>
</div>
Related
I will show you a simple example related to my task.
.fixed1 {
position: fixed;
top: 0;
left: 100px;
width: 100px;
height: 100px;
background-color: yellow;
}
.fixed2 {
position: fixed;
top: 0;
left: 0;
width: 100px;
height: 100px;
background-color: red;
}
.relative {
margin-top: 25px;
width: 50px;
height: 50px;
background-color: blue;
}
.absolute {
position: absolute;
left: -25px;
width: 50px;
height: 50px;
background-color: green;
}
<html>
<div class="fixed1">
<div class="relative">
<div class="absolute"></div>
</div>
</div>
<div class="fixed2">
fixed1
</div>
</html>
As you can see in the above example, there are 2 fixed divs and there is 1 relative div in the first fixed div.
And I am going to show 1 absolute div in the relative div. but it is hidden by the second fixed div.
How to show the whole absolute div without any hidden part.
Just replace your blocks in HTML.
.fixed1 {
position: fixed;
top: 0;
left: 100px;
width: 100px;
height: 100px;
background-color: yellow;
}
.fixed2 {
position: fixed;
top: 0;
left: 0;
width: 100px;
height: 100px;
background-color: red;
}
.relative {
margin-top: 25px;
width: 50px;
height: 50px;
background-color: blue;
}
.absolute {
position: absolute;
left: -25px;
width: 50px;
height: 50px;
background-color: green;
z-index: 1000;
}
<html>
<div class="fixed2">
fixed1
</div>
<div class="fixed1">
<div class="relative">
<div class="absolute"></div>
</div>
</div>
</html>
There are multiple ways of doing this
Move div.fixed1 below div.fixed2
(or)
You can increase the z-index of div.fixed1
.fixed1 {
z-index: 1;
}
Use the property z-index, so you will specify that div.fixed1 is in front of div.fixed2:
.fixed1 {
position: fixed;
top: 0;
left: 100px;
width: 100px;
height: 100px;
background-color: yellow;
z-index: 1;
}
.fixed2 {
position: fixed;
top: 0;
left: 0;
width: 100px;
height: 100px;
background-color: red;
}
.relative {
margin-top: 25px;
width: 50px;
height: 50px;
background-color: blue;
}
.absolute {
position: absolute;
left: -25px;
width: 50px;
height: 50px;
background-color: green;
}
<div class="fixed1">
<div class="relative">
<div class="absolute"></div>
</div>
</div>
<div class="fixed2">
fixed1
</div>
In the html code below , every div tag with "right" class name are side of a hollow rectangle at the right side of the screen and the "left" divs are side of a hollow rectangle at the left side of the screen, i want to use hover so when i hover mouse on every side of the left or right rectangle all sides of the rectangle come to top of the screen, html and css codes are shown below:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id='container'>
<div class='right'></div>
<div class='right'></div>
<div class='right'></div>
<div class='right'></div>
<div class='left'></div>
<div class='left'></div>
<div class='left'></div>
<div class='left'></div>
</div>
</body>
</html>
css code:
body{
margin: 0;
}
#container{
position: relative;
background: #D5D8DC;
height:400px;
width: 400px;
margin-top: 100px;
margin-left: 100px;
}
.right{
background: #2ECC71;
}
.right:nth-child(1){
position: absolute;
height: 80%;
width: 10%;
top: 0;
right: 0;
}
.right:nth-child(2){
position: absolute;
height: 10%;
width: 80%;
top: 0;
right: 0;
}
.right:nth-child(3){
position: absolute;
height: 80%;
width: 10%;
top: 0;
left: 20%;
z-index: 10;
}
.right:nth-child(4){
position: absolute;
height: 10%;
width: 80%;
right: 0;
bottom: 20%;
}
.left{
background: #E74C3C;
}
.left:nth-child(5){
position: absolute;
height: 10%;
width: 80%;
bottom: 0;
left: 0;
}
.left:nth-child(6){
position: absolute;
height: 80%;
width: 10%;
bottom: 0;
left: 0;
}
.left:nth-child(7){
position: absolute;
height: 10%;
width: 80%;
left: 0;
top: 20%;
}
.left:nth-child(8){
position: absolute;
height: 80%;
width: 10%;
bottom: 0;
right: 20%;
}
.right:hover{
z-index: 10;
}
as you see when i used .right:hover{z-index:10} it doesn't apply to all right sides , it applys the z-index to the side that the mouse has hoverd on it...
note: i don't have permission to use javascript or change html code, i should solve the problem just by writing css code
Based on your HTML structure you can manage this with a sibling selector and well as a direct one, for instance:
.right:hover ~ .right,
.right:hover {
z-index: 10;
}
body {
margin: 0;
}
#container {
position: relative;
background: #D5D8DC;
height: 100px;
width: 100px;
margin-top: 10px;
margin-left: 10px;
}
.right {
background: #2ECC71;
}
.right:nth-child(1) {
position: absolute;
height: 80%;
width: 10%;
top: 0;
right: 0;
}
.right:nth-child(2) {
position: absolute;
height: 10%;
width: 80%;
top: 0;
right: 0;
}
.right:nth-child(3) {
position: absolute;
height: 80%;
width: 10%;
top: 0;
left: 20%;
z-index: 10;
}
.right:nth-child(4) {
position: absolute;
height: 10%;
width: 80%;
right: 0;
bottom: 20%;
}
.left {
background: #E74C3C;
}
.left:nth-child(5) {
position: absolute;
height: 10%;
width: 80%;
bottom: 0;
left: 0;
}
.left:nth-child(6) {
position: absolute;
height: 80%;
width: 10%;
bottom: 0;
left: 0;
}
.left:nth-child(7) {
position: absolute;
height: 10%;
width: 80%;
left: 0;
top: 20%;
}
.left:nth-child(8) {
position: absolute;
height: 80%;
width: 10%;
bottom: 0;
right: 20%;
}
.right:hover~.right,
.right:hover {
z-index: 10;
}
.left:hover~.left,
.left:hover {
z-index: 10;
}
<div id='container'>
<div class='right'></div>
<div class='right'></div>
<div class='right'></div>
<div class='right'></div>
<div class='left'></div>
<div class='left'></div>
<div class='left'></div>
<div class='left'></div>
</div>
To select other elements based on other elements you can using ~ or +.
in your case ~ is the best approach You can read about all the css HERE
Now those selectors only select downward what i mean is if you'd hover on the last element nothing the above elements won't be affected because it only selects the preceding elements.
with in mind we seems like if we hover on the last div would be problematic because it won't select the other div to bring them up however in your case we can manipulate the elements placement, we put the last div the one if we hover over won't affect the other to the top to be the part of the rectangle that is always has a part of it hidden by the other rectangle, so then when we hover over it it will show up if we hover other the other elements it will show up also. Sorry if my explanation is a bit difficult to understand.
here's a working demo
body {
margin: 0;
}
#container {
position: relative;
background: #D5D8DC;
height: 400px;
width: 400px;
}
.right {
background: #2ECC71;
}
.right:nth-child(1) {
position: absolute;
height: 80%;
width: 10%;
top: 0;
right: 0;
}
.right:nth-child(2) {
position: absolute;
height: 10%;
width: 80%;
top: 0;
right: 0;
}
.right:nth-child(3) {
position: absolute;
height: 80%;
width: 10%;
top: 0;
left: 20%;
z-index: 10;
}
.right:nth-child(4) {
position: absolute;
height: 10%;
width: 80%;
right: 0;
bottom: 20%;
}
.left {
background: #E74C3C;
}
.left:nth-child(5) {
position: absolute;
height: 10%;
width: 80%;
bottom: 0;
left: 0;
}
.left:nth-child(6) {
position: absolute;
height: 80%;
width: 10%;
bottom: 0;
left: 0;
}
.left:nth-child(7) {
position: absolute;
height: 80%;
width: 10%;
right: 20%;
top: 20%;
}
.left:nth-child(8) {
position: absolute;
height: 10%;
width: 80%;
top: 20%;
}
.right:hover ~ .right,
.right:hover {
z-index: 10;
}
.left:hover ~ .left,
.left:hover {
z-index: 10;
}
<div id='container'>
<div class='right'></div>
<div class='right'></div>
<div class='right'></div>
<div class='right'></div>
<div class='left'></div>
<div class='left'></div>
<div class='left'></div>
<div class='left'></div>
</div>
It's possible do like the image below in CSS
overlay an 360 Panorama, with a empty transparent space, responsive and keeping the proportions
I tried creating 4 divs and using this css
<div><div></div><div></div><div></div><div></div></div>
#frame div:nth-child(1) {
z-index:10;
width: 30%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
#frame div:nth-child(2) {
z-index:10;
width: 30%;
height: 100%;
position: absolute;
right: 0;
top: 0;
}
#frame div:nth-child(3) {
z-index:10;
width: 40%;
height: 20%;
position: absolute;
left: 30%;
top: 0;
}
#frame div:nth-child(4) {
z-index:10;
width: 40%;
height: 20%;
position: absolute;
left: 30%;
bottom: 0;
}
My idea is to place the image twice. 1 time as the transparent border and the second time centered and overflowing - and hide the overflowing part
Here's an example
HTML
<div class="trans-cont">
<img class="trans-img" src="https://www.w3schools.com/w3css/img_lights.jpg" />
<div class="center">
<img src="https://www.w3schools.com/w3css/img_lights.jpg" />
</div>
</div>
CSS
.trans-cont{
display: inline-block;
position: relative;
background-color: #454545;
width: 40%;
}
.trans-img{
opacity: 0.3;
width: 100%;
}
.center{
width: 80%;
height: 80%;
top: 10%;
left: 10%;
position: absolute;
overflow: hidden;
}
.center img{
width: 125%;
position: absolute;
top: -12.5%;
left: -12.5%;
}
Option 2:
Use the image once and hide it with divs as a border
Example 2
Please try below:
HTML:
<div class="container">
<img src="imgSrc" alt="imgName" style="width:100%;">
<div class="content">
</div>
</div>
CSS:
.container {
position: relative;
max-width: 100%;
margin: 0 auto;
}
.container img {vertical-align: middle;}
.container .content{
position: absolute;
top: 25%;
left: 20%;
width: 60%;
height: 40%;
box-shadow: 0 0 0 9rem rgba(0, 0, 0, 0.5);
}
Alright so I got 1 div that is float left and one with float right, now for some reason I cannot make them go to the side where they should be. They are kinda now both overlapping eachother
* {
margin: 0;
padding: 0;
font-family: 'Lato', sans-serif;
}
html, body {
width: 100%;
height: 100%;
}
#main {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
#main img {
width: 100%;
height: 100%;
}
#page_left, #page_right {
width: 50%;
height: 100%;
background-color: red;
position: absolute;
left: 0px;
top: 0px;
z-index: 1000;
}
<div id="main">
<img src="img/background.jpg"/>
<div id="page_left"></div>
<div id="page_right"></div>
</div>
I also tried using a method with display inline block but it didnt work out so well
Try this with your additional css
CSS
#page_left, #page_right {
width: 50%;
height: 100%;
background-color: red;
position: absolute;
top: 0px;
z-index: 1000;
}
#page_left {
left: 0;
}
#page_right {
right: 0;
}
#page_left, #page_right {
width: 50%;
height: 100%;
background-color: red;
position: absolute;
top: 0px;
z-index: 1000;
}
remove left: 0px
OR
remove position: absolute
#page_left, #page_right {
width: 50%;
height: 100%;
background-color: red;
z-index: 1000;
}
the overflow in happened because you given left:0px and position:absolute for both the divs,I'm solved this and and added the snippet below.
* {
margin: 0;
padding: 0;
font-family: 'Lato', sans-serif;
}
html, body {
width: 100%;
height: 100%;
}
#main {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
#main img {
width: 100%;
height: 100%;
}
#page_left, #page_right {
width: 50%;
height: 100%;
background-color: red;
position: absolute;
top: 0px;
z-index: 1000;
}
#page_left{
left: 0px;
}
#page_right{
background-color:green;
float:right;
position: absolute;
right: 0px;
}
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div id="main">
<img src="img/background.jpg"/>
<div id="page_left">
</div>
<div id="page_right">
</div>
</div>
</body>
</html>
So, I have this example of how my three divs are suppose to be. I've been playing around with the position:relative in the container and then position:absolute in the three children divs. The thing is I feel like its not the best approach. What do you guys think?
This is the code I currently have:
.container{
position: relative;
height: 100%;
}
#top-div{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50%;
}
#bottom-div{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50%;
}
#round-image{
position: absolute;
left: 35%;
top: 30%;
z-index: 20;
width: 300px;
height: 300px;
border-radius: 50%;
}
I don't see any problem with using absolute positioning in this case, if it meets your needs, it's just okay to use it.
However it seems the third DIV #round-image is not aligned properly at the middle, because of using a mix of absolute length px and percentage for sizing/positioning the box.
Considering the following markup, the issue can be fixed by:
1. using negative margins on on the third DIV.
html, body {
margin: 0;
height: 100%;
width: 100%;
}
.container{
position: relative;
min-height: 100%;
}
#top-div{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50%;
background-color: #222;
}
#bottom-div{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50%;
background-color: #999;
}
#round-image{
position: absolute;
left: 50%;
top: 50%;
z-index: 20;
width: 300px;
height: 300px;
margin-top: -150px;
margin-left: -150px;
border-radius: 50%;
background-color: tomato;
}
<div class="container">
<div id="top-div"></div>
<div id="bottom-div"></div>
<div id="round-image"></div>
</div>
2. Or using calc() function:
html, body {
margin: 0;
height: 100%;
width: 100%;
}
.container{
position: relative;
min-height: 100%;
}
#top-div{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50%;
background-color: #222;
}
#bottom-div{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50%;
background-color: #999;
}
#round-image{
position: absolute;
left: calc(50% - 150px);
top: calc(50% - 150px);
z-index: 20;
width: 300px;
height: 300px;
border-radius: 50%;
background-color: tomato;
}
<div class="container">
<div id="top-div"></div>
<div id="bottom-div"></div>
<div id="round-image"></div>
</div>
3. Or using CSS transform:
html, body {
margin: 0;
height: 100%;
width: 100%;
}
.container{
position: relative;
min-height: 100%;
}
#top-div{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50%;
background-color: #222;
}
#bottom-div{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50%;
background-color: #999;
}
#round-image{
position: absolute;
left: 50%;
top: 50%;
z-index: 20;
width: 300px;
height: 300px;
transform: translate(-50%, -50%); /* vendor prefixes ommited due to brevity */
border-radius: 50%;
background-color: tomato;
}
<div class="container">
<div id="top-div"></div>
<div id="bottom-div"></div>
<div id="round-image"></div>
</div>
It's worth noting that the two last methods are only supported on IE9+.
You want the circle in the middle I would imagine?
If you don't care for validation then you can simply put center tags and the div you want in the middle between them tags or you can use the "Margin" aspect of CSS to align it in the center
The only thing, I think is in a need of improvement is the way you center positioned the circle element. Giving it 50% absolute positions and half-width negative margins would ensure it would be in a good place whatever the dimensions are.
.container{
position: relative;
height: 700px;
width: 100%;
}
#top-div{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50%;
background: black;
}
#bottom-div{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50%;
background: grey;
}
#round-image{
position: absolute;
left: 50%;
top: 50%;
z-index: 20;
width: 300px;
height: 300px;
margin-left: -150px;
margin-top: -150px;
border-radius: 50%;
background: pink;
}
<div class="container">
<div id="top-div">
</div>
<div id="round-image">
</div>
<div id="bottom-div">
</div>
</div>