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>
Related
I am trying to create a progression section, where i have a text, image and progression.
I am able to achieve this but the problem here is that i want the image section and text should be vertical middle align to the parent div.
Is there a way i can use flex instead of relative and absolute.
.progress-bar-container {
background-color: #33cc33;
width: 100%;
position: fixed;
bottom: 0;
z-index: 1;
height: 40px;
}
img {
width: 20px;
height: 20px;
}
.progress-info-wrapper {
position: absolute;
}
.text-wrapper {
color: #263238;
margin-left: 8px;
}
.progress {
height: 40px;
width: 11%;
background-color: #99ff99;
}
<div class="progress-bar-container">
<div class="progress-info-wrapper">
<img src="https://i.picsum.photos/id/237/200/300.jpg?hmac=TmmQSbShHz9CdQm0NkEjx1Dyh_Y984R9LpNrpvH2D_U"
alt="test-img"><span class="text-wrapper">Add more items to get offer</span></div>
<div class="progress"></div>
</div>
You mean something like that? Add some flex properties to your .progress-info-wrapper class.
.progress-info-wrapper {
position: absolute;
display:flex;
align-items: center;
height: 100%;
}
.progress-bar-container {
background-color: #33cc33;
width: 100%;
position: fixed;
bottom: 0;
z-index: 1;
height: 40px;
}
.progress-info-wrapper {
position: absolute;
display:flex;
align-items: center;
height: 100%;
}
img {
width: 20px;
height: 20px;
}
.text-wrapper {
color: #263238;
margin-left: 8px;
}
.progress {
height: 40px;
width: 11%;
background-color: #99ff99;
}
<div class="progress-bar-container">
<div class="progress-info-wrapper">
<img src="https://i.picsum.photos/id/237/200/300.jpg?hmac=TmmQSbShHz9CdQm0NkEjx1Dyh_Y984R9LpNrpvH2D_U"
alt="test-img"><span class="text-wrapper">Add more items to get offer</span></div>
<div class="progress"></div>
</div>
To vertically align your image and text, you should use flexbox in progress-info-wrapper
.progress-bar-container {
background-color: #33cc33;
width: 100%;
position: fixed;
bottom: 0;
z-index: 1;
height: 40px;
}
img {
width: 20px;
height: 20px;
}
.progress-info-wrapper {
position: absolute;
display: flex;
align-items: center;
height: 100%;
}
.text-wrapper {
color: #263238;
margin-left: 8px;
}
.progress {
height: 40px;
width: 11%;
background-color: #99ff99;
}
<div class="progress-bar-container">
<div class="progress-info-wrapper">
<img src="https://i.picsum.photos/id/237/200/300.jpg?hmac=TmmQSbShHz9CdQm0NkEjx1Dyh_Y984R9LpNrpvH2D_U"
alt="test-img"><span class="text-wrapper">Add more items to get offer</span></div>
<div class="progress"></div>
</div>
Flex would help you with layout deciding how the items will need to be positioned next to each other but not over each other.
In that case position:absolute still fits better. To center the element you need the magic of margin: auto but you should give your element an height using fit-content.
Here's your demo with the .progress-info-wrapper css rules changed as:
.progress-info-wrapper {
position: absolute;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: fit-content;
}
.progress-bar-container {
background-color: #33cc33;
width: 100%;
position: fixed;
bottom: 0;
z-index: 1;
height: 40px;
}
img {
width: 20px;
height: 20px;
}
.progress-info-wrapper {
position: absolute;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: fit-content;
}
.text-wrapper {
color: #263238;
margin-left: 8px;
}
.progress {
height: 40px;
width: 11%;
background-color: #99ff99;
}
<div class="progress-bar-container">
<div class="progress-info-wrapper">
<img
src="https://i.picsum.photos/id/237/200/300.jpg?hmac=TmmQSbShHz9CdQm0NkEjx1Dyh_Y984R9LpNrpvH2D_U"
alt="test-img">
<span class="text-wrapper">Add more items to get offer</span>
</div>
<div class="progress"></div>
</div>
I'm trying to create a normal HTML page and I've set the height/width of the body With Vh and Vw
* {
padding: 0;
margin: 0;
}
body {
height: 100vh;
width: 100vw;
background-color: red;
padding: 0;
margin: 0;
overflow: auto;
}
.Top-banner {
position: absolute;
top: 0;
left: 0;
height: 10%;
width: 100%;
background-color: blue;
box-sizing: border-box;
}
.Ad {
position: absolute;
top: 10%;
left: 0;
height: 15%;
width: 100%;
background-color: purple;
text-align: center;
box-sizing: border-box;
}
.Ad .Close-but {
position: absolute;
top: 65%;
left: 5%;
height: 30%;
width: 10%;
background-color: green;
text-align: center;
}
.Main-content {
position: absolute;
top: 25%;
left: 0;
height: 100%;
width: 100%;
background-color: pink;
text-align: center;
box-sizing: border-box;
}
<div class="Top-banner">
</div>
<div class="Ad">
<button class="Close-but">Close</button>
</div>
<div class="Main-content">
</div>
The problem is that an extra content create on the left its the body what am I doing wrong
I cannot put an jsfiddle demo because in the demo this problem don't happen I tried the HTML page in other computers and the same issue
Not sure if understand your question correctly but if your problem is the horizontal scrollbar then simply change 'overflow: auto;' to 'overflow-x: hidden;'
if you don't want a vertical scroll aswell then make 'overflow: hidden;'
body{
height: 100vh;
width: 100vw;
background-color: red;
padding: 0;
margin: 0;
overflow-x: hidden; //change this
}
i'm trying to split the page in 4 parts, but with different sizes. With the following code, i get 2 parts horizontally.
But when i want to insert the first vertical in the green area, only a part is displayed...
I need look like this: http://prntscr.com/mp1sxi
This is my code:
#top,
#bottom,
#right,
#left.
{
position: fixed;
left: 0;
right: 0;
height: 50%;
}
#top {
top: 0;
background-color: blue;
height: 20%;
}
#bottom {
bottom: 0;
background-color: green;
height: 80%
}
#right {
right: 0;
background-color: orange;
width: 20%;
}
#left {
left: 0;
background-color: red;
width: 80%;
}
<div id="top">top
</div>
<div id="bottom">bottom
<div id="left">top</div>
</div>
Someone can help me?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100%;
height: 100vh;
position: relative;
}
#top,
#bottom,
#right,
#left {
position: fixed;
overflow: auto;
}
#top {
top: 0;
left: 0;
background-color: palevioletred;
height: 20%;
width: 100%;
}
#bottom {
left: 0;
bottom: 0;
background-color: green;
height: 20%;
width: 80%;
}
#right {
right: 0;
background-color: blue;
width: 20%;
top: 20%;
height: 80%;
}
#left {
left: 0;
width: 80%;
top: 20%;
height: 60%;
background: #fff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="top">top</div>
<div id="left">Left</div>
<div id="right">Right</div>
<div id="bottom">bottom</div>
</body>
</html>
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>
Basically I need to make a circle look like it's hanging from a string. I used the basic CSS of:
#string {
position: relative;
}
#circle {
position: absolute;
bottom: 0;
}
And it's putting the circle at the bottom, but not below the "string" It's sitting on the right side of it, but at the bottom. Am I stupid? What am I doing wrong?
EDIT: Full code
<div class="anchor" id="one">
<div class="circle" id="one">
</div>
</div>
html, body { height: 100%; width: 100%; }
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #DDD;
margin: 0;
padding: 0;
color: #000;
}
.anchor {
background-color: #000;
position: relative;
width: 10px;
}
.anchor#one {
margin-left: 10%;
height: 500px;
}
.circle {
position: absolute;
bottom: 0;
border-radius: 50%;
background-color: #000;
}
.circle#one {
width: 200px;
height: 200px;
}
bottom sets the distance of the element's bottom border to its offset parent.
To do what you want, you need to use top:
#circle {
position: absolute;
top: 100%;
}
<div class="anchor" >
<div class="circle" >
</div>
</div>
css
.anchor {
background-color: #000;
position: relative;
width: 10px;
margin-left: 10%;
height: 500px;
}
.circle {
position: absolute;
bottom: -200px;
border-radius: 50%;
background-color: #000;
width: 200px;
height: 200px;
left: -100px;
}