I can't display a :before element outside my parent element. The :before element is cut as an overflow-hidden parent's child but removing the rule didn't help me :
The red color and the position of the div are just there to see where is the div and where is the :before near it.
Here is my css code :
div#sidezone {
position : fixed;
display : block;
width : 10%;
height : 100%;
right : 10%;
top : 0px;
bottom : 0px;
overflow-y : scroll;
z-index: 10;
background : red;
}
div#sidezone:before {
position : absolute;
content : "";
display : block;
/* font-family: "Font Awesome 5 Free"; */
width : 50px;
height : 20px;
left : -50px;
top : 50%;
bottom : 50%;
background : #12b7ff;
cursor : pointer;
border : 3px solid #12b7ff88;
border-radius: 5px 0px 0px 5px;
z-index: 10;
}
div#sidezone:hover {
right:0px;
}
Related
main {
width : 100%;
position : relative;
border-radius : 1.5rem;
padding : 0.125rem 1.5rem 1.5 rem 1.5rem margin-top: 3rem
}
main:before {
content : "";
width : calc(96.5% - 1.5rem);
z-index : -1;
margin-top : -0.87rem;
border-radius : 1.6rem;
position : absolute;
left : 0px;
right : 0rem;
top : 0rem;
margin-left : auto;
margin-right : auto;
height : 5rem;
background-color : rgba(226, 226, 226, 0.2);
}
main:after {
content : "";
width : calc(92.5% - 1.5rem);
z-index : -2;
margin-top : -1.76rem;
border-radius : 1.6rem;
position : absolute;
left : 0px;
right : 0rem;
top : 0rem;
margin-left : auto;
margin-right : auto;
height : 5rem;
background-color : #dbdbdb1e;
}
<div class="bg-gray-50 h-screen col-span-8">
<div class="pb-6 pr-6 h-screen overflow-y-auto -mb-20 relative">
<main class="bg-gray-100 w-full rounded-3xl pt-0.5 pb-6 px-6 mt-12 relative" style="min-height: calc(100% - 4.5rem)">
content
</main>
</div>
</div>
Considering the above HTML and CSS, I should see two different boxes behind the maincontent. But it's not showing a thing. In the inspector I can find the :before and :after, it's got the right width / position / etc but it is just not showing. What am I missing?
note: I just added the main css in this code block for people who aren't familiar with Tailwind. In the actual code there is no CSS in the style tag, just Tailwindclasses (except for the :before and :after)
This question already has answers here:
Cross browser method to fit a child div to its parent's width
(6 answers)
Closed 7 months ago.
I have a parent div that has the max-width: 100% (full screen width) and I want to make the child div to have the same width, but I don't know why it's not working. I tried child div width: 100% and width: inherit but still it has a margin. Is there a solution? The parent div contains a carousel above this child div.
What I want to remove is this margin: the margin
For the child div I already used (you can see in the html below) bootstrap classes for margins, ms-0 and me-0;
The parent div looks good, the margins are fine, has no margin from the browser.
I tried all the solutions offered here
Cross browser method to fit a child div to its parent's width
but it's not working.
.main {
position : relative;
height : auto;
left : 0px;
right : 0px;
background-color : #eceaed;
max-width : 100%;
}
.middle-box {
position : relative;
height : 250px;
max-width : 100%;
border : 1px solid black;
background-color : rgba(96, 75, 254, 0.8);
}
.middle-box::before {
content : "";
background-image : url("../images/mountains2.jpg");
background-size : cover;
position : absolute;
top : 0px;
right : 0px;
bottom : 0px;
left : 0px;
opacity : 0.3;
}
<div class="container main">
<!--here is a div with a carousel-->
<div class="container middle-box ms-0 me-0">
</div>
</div>
Solution:
.main {
padding : 0;
}
.middle-box {
max-width : 100%;
}
.middle-box::before {
max-width : 100%;
}
If by the margin you mean the space outside the parent div (.container.main), then that may be caused by the browser's default styling. Browsers add some default CSS, including a margin on the body element.
If not, you may need to add padding: 0 to .main, or margin: 0 to .middle-box.
I tried tidying up the code a little and put some comments here as well. I hope it helps!
body {
margin: 0;
}
.main {
/* <div> is block-level, so it will span the width of its parent (body) */
/* position: relative is not needed here; only on the child */
/* left: 0 and right: 0 are redundant */
background-color: #eceaed;
}
.middle-box {
/* <div> is block-level, so it will span the width of its parent (.main) */
/* position: relative is not needed here; only on the child */
position: relative;
height: 250px;
border: 1px solid black;
background-color: rgba(96, 75, 254, 0.8);
}
.middle-box:before {
content: "";
background-image: url("../images/mountains2.jpg");
background-size: cover;
position: absolute;
opacity: 0.3;
/* inset: 0 gives the same result as top: 0, left: 0, right: 0, bottom: 0 */
inset: 0;
}
<div class="container main">
<!--here is a div with a carousel-->
<div class="container middle-box ms-0 me-0">
</div>
</div>
Your css for middle-box uses max-width, which allows the content to expand up to a certain maximum, but will shrink the width to fit the content until that maximum is reached. You want width: 100%; like you tried before.
If middle-box still doesn't reach the edges of the parent main element, then use the margin: 0; and padding: 0; as needed.
I recommend using the element selector in Chrome dev tools. You can select or mouse-over the .main and .middle-box elements and Chrome dev tools will display the margin and padding for each element. Then you know where your issue is coming from. Other browsers have similar functionality.
I am trying to center an image (the "Coca" of Coca Cola in my fiddle example) that is within an absolute element .itemDisplay which has no fixed width.
I believe the no fixed width is and issue as it seems to stop the image from centering.
There are alot of answers for centering within a absolute element but I can't find any that are for multiple columns rather than just the left 50%, etc answers. .itemDisplay sits within a div called .parentItem that is 32% of the screen with some padding and margins and there are 3 per row.
All 3 column will have it's own image, but I've only done the first one as an example.
When the div containing the coca image is hovered it currently displays a hidden div with cola with the image centered which works correctly, my only issue is centering the coca image.
I have tried all answers and can't seem to get it to work.
Any ideas!?
https://jsfiddle.net/se23vvwu/
Your parent elements need to be relative and have the size of it's children. For that, if you can't have a fixed width, you can use width: fit-content;.
Then I applied left: 0; and right: 0; for the absolute element.
Here is the result (you still need to accomodate the hover state):
#shopShelves {
width : 100%;
padding : 15px;
max-width : 100%;
margin : 0 auto;
}
.parentItem {
height : 200px;
background-color : #e7e7e7;
float : left;
margin-left : 1px;
margin-bottom : 1px;
position: relative;
}
.parentItem a {
position: relative;
width: 100%;
height: 100%;
display: inline-block;
}
.parentItem:hover .hoveredItem {
opacity : 1;
z-index : 1;
}
.parentItem:hover .itemDisplay {
opacity : 0;
}
.I33 {
width : 33.2%;
}
.displayCenter {
position : relative;
width : 33.2%;
background-color : #F00;
}
.parentItem:hover {
opacity : 1;
}
.itemDisplay {
opacity: 1;
transition: opacity 0s 0.2s;
position: absolute;
display: block;
width: fit-content;
left: 0;
right: 0;
margin: 0 auto;
}
.hoveredItem {
opacity : 0;
margin-bottom : 0;
}
.imgcenter {
display : block;
margin : auto;
max-width : 280px;
float : none;
position : relative;
}
width: fit-content; has some compatibility issues with IE. But I'm pretty sure there are workarounds. Some people use display: table;
More browser specific properties:
width: intrinsic; /* Safari/WebKit uses a non-standard name */
width: -moz-max-content; /* Firefox/Gecko */
width: -webkit-max-content; /* Chrome */
You might have to do a little more research.
Hope this helps!
I try to implement the following effect by using the :before but I have problem with the z-index.
My code is like this:
.container {
background : #FFF;
}
.item {
background-position : 50% 50%;
background-repeat : no-repeat;
background-size: cover;
width : 200px;
height :200px;
position : relative;
}
.item:before {
content : '';
position : absolute;
width : 100%;
height : 100%;
right : -20px;
bottom : -20px;
border : 2px solid #0AF;
z-index : -1;
}
<div class="container">
<div class="item" style="background-image:url('https://placeholdit.imgix.net/~text?txtsize=33&txt=200%C3%97200&w=200&h=200')"></div>
</div>
The problem now, is that the container seems to cover the :before element.
For the moment I don't mind about the "MIDDLE AGE" item.
How can I overcome this issue ?
Add the following CSS styles:
.container {
position: relative;
z-index: 1;
}
Code in JSfiddle: https://jsfiddle.net/5cq5576k/
Try this:
.container {
background : #FFF;
position: relative;
float: left;
}
.item {
background-position : 50% 50%;
background-repeat : no-repeat;
background-size: cover;
width : 200px;
height :200px;
position : relative;
}
.item-border {
content : '';
position : absolute;
width : 100%;
height : 100%;
right : -20px;
bottom : -20px;
border : 2px solid #0AF;
z-index : -1;
}
<div class="container">
<div class="item-border"></div>
<div class="item" style="background-image:url('https://placeholdit.imgix.net/~text?txtsize=33&txt=200%C3%97200&w=200&h=200')"></div>
</div>
I want this result Demo
instead this Demo
Demo jsFiddle
How to move the div menu to end right side of div Container , So the menu will be on the right side.
I dont want position absolute because when you change the width size of the window page, the menu will hide the background of the image background Frog+Snake.
Many Thanks.
The code:
<!DOCTYPE HTML>
<html>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<style type='text/css'>
body {
background-color : black;
background-image : url('pic/bg1.png');
background-size : 100% 700px;
background-repeat : no-repeat;
margin : 0;
margin-left : -100px;
padding : 0;
}
.imageContainer {
position : relative;
margin-left : auto;
margin-right : auto;
top : 10px;
background-size : 1000px 500px;
width : 1000px;
height : 500px;
overflow : hidden;
}
#Container {
background-image : url('pic/1/3.jpg');
background-repeat : no-repeat;
z-index : 0;
}
.layer {
position : absolute;
width : 1000px;
height : 500px;
padding : 0;
margin : 0;
}
#parrot {
z-index : 5;
}
#frog_snake {
z-index : 4;
}
#fly {
z-index : 3;
}
#crok {
z-index : 2;
}
#leafvarible {
position : absolute;
padding : 0;
margin-left : auto;
margin-right : auto;
display : block;
top : 10px;
left : 100px;
width : 1px;
height : 1px;
z-index : -1;
}
#pos {
top : 50px;
left : 10px;
color : white;
font-size : 16px;
}
#status {
position : absolute;
top : 350px;
left : -100px;
color : pink;
font-size : 20px;
padding-left : 120px;
}
#status1 {
position : absolute;
top : 375px;
left : -100px;
color : pink;
font-size : 20px;
padding-left : 120px;
}
#status2 {
position : absolute;
top : 400px;
left : -100px;
color : red;
font-size : 20px;
padding-left : 120px;
}
#fps_count {
position : absolute;
top : 10px;
right : 10px;
width : 150px;
font-size : 20px;
color : white;
font-family : 'Happy Sans', cursive;
border : red solid 1px;
}
#loading {
background : blue;
background-image : url('pic/FrogGameBackGround.jpg');
background-repeat : no-repeat;
background-size : 1000px 500px;
z-index : 10;
}
#loading > #barCont {
width : 400px;
height : 20px;
position : absolute;
top : 300px;
left : 50%;
margin : -10px 0 0 -200px;
background : black;
}
#loading > p {
position : absolute;
top : 275px;
left : 50%;
z-index : 11;
}
#bar {
width : 0;
height : 20px;
position : absolute;
left : 0;
background : #F3FF67;
}
#menu {
float : left;
width : 200px;
height : 500px;
position : relative;
left : 10px;
top : 0;
background-image : url('pic/menu.png');
border : red solid 1px;
clear : both;
}
#StartButton {
position : absolute;
right : 25px;
top : 300px;
width : 200px;
text-align : center;
color : white;
font-size : 35px;
text-shadow : 4px 4px 4px black;
cursor : pointer;
}
#speaker {
position : absolute;
right : 150px;
top : 350px;
width : 50px;
}
</style>
</head>
<body>
<div id= "Container">
<canvas id="A1" class="layer"></canvas>
<canvas id="A2" class="layer"></canvas>
<canvas id="A3" class="layer"></canvas>
<canvas id="A4" class="layer"></canvas>
</div>
<div class="imageContainer" id="loading">
<p id="loadText">Loading...</p>
<div id="barCont">
<div id="bar"></div>
</div>
</div>
<canvas id="A5"></canvas>
<div id="menu">
<!-- Button Start Game -->
<input id="StartButton" type="button" value="Start Game"/>
<!-- Loading sounds -->
<div id="speaker">speaker</div>
</div>
<script></script>
</body>
</html>
use position relative instead of absolute and use float:right; and/or float:left;
on both your main page and on your menu.
also what is that A5 thing for?
Remove all position property from #menu and set it to display:flex; and later add following margin margin:0 0 0 auto; . This will make menu align to right side no matter what is screen size is.