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)
Related
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 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;
}
I'm trying to get an element to "float" between two other elements by using the position : sticky attribute.
But I'm not getting the desired effect, and I can't figure out why.
I want copy to float between the bottom of upper and the top of lower.
Here is a visual illustration of what I'm trying to achieve
.page {
background-color : grey;
height : 1000px;
position : relative;
}
.container {
background-color : red;
position : absolute;
top : 35%;
height : 300px;
}
.upper {
height : 50px;
}
.copy {
position : sticky;
bottom : 0px;
}
.lower {
height : 50px;
position : absolute;
bottom : 0px;
}
<div class="page">
<div class="container">
<div class="upper">
<h1 class="hero">This is the title</h1>
</div>
<div class="copy">This should float between the upper and lower div</div>
<div class="lower">
<button class="cta">This is a CTA</button>
</div>
</div>
</div>
You're actually really close. You just need to change to use top instead of bottom in the .copy class.
CSS:
.copy {
position: sticky;
top: 16px;
}
Also note that the top value will be the position where the element becomes sticky, so if you want to scroll when it is in the middle of the window, use top: 50vh;.
Update:
It's surprisingly tricky to get position: sticky to work with bottom: 0, but here's a working example.
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.