Goal: create scrolling content overlaid by an equally wide navbar. Example html could look like:
<div class="scrollable">
<div class="content"></div>
</div>
<div class="navbar"></div>
Criteria:
.content fills a percent width of .scrollable, and is horizontally centered
.scrollable should have scrollbars
.navbar is exactly as wide as .content, centered exactly atop .content
Scrollbar width should be treated as unknown
Avoid javascript running via scroll, requestAnimationFrame, setInterval, etc. Ideally no js.
The most intuitive approach fails since the scrollbar causes a discrepancy in dimensions:
.container {
position: absolute;
width: 80%; height: 80%; left: 10%; top: 10%;
box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.3);
}
.scrollable {
position: absolute;
width: 100%; height: 100%; left: 0; top: 0;
overflow: hidden visible;
}
.scrollable > .content {
width: 80%; margin: 60px auto;
background-color: rgba(0, 0, 0, 0.2); text-align: center;
}
.navbar {
position: absolute;
left: 10%; bottom: 0; width: 80%; height: 50px;
background-color: rgba(255, 0, 0, 0.3); color: rgba(255, 255, 255, 1);
}
<div class="container">
<div class="scrollable">
<div class="content">abcd<br/><br/><br/>abcd<br/><br/><br/>abcd<br/><br/><br/>abcd<br/><br/><br/>abcd<br/><br/><br/>abcd<br/><br/><br/>abcd<br/><br/><br/>abcd<br/><br/><br/>abcd<br/><br/><br/>abcd<br/><br/><br/></div>
</div>
<div class="navbar">I am navbar</div>
</div>
The issue here is that .content takes up a percentage width of .scrollable's width minus its scrollbar width, whereas .navbar is set to a percentage width of .scrollable including its scrollbar width.
What is the best way to get around this discrepancy?
check the answer in the codepen : https://codepen.io/the-wrong-guy/pen/vYLzRZZ
And you should use position: fixed instead of position: absolute to fix the navbar at the top
Related
On an image upload page I have a preview of the image. I would like create an overlay that shows the image in a rectangle in the middle, with an opaque overlay around the outside of the rectangle.
Similar to this:
I am able to create a div overlay, but I need to reverse the opaque black background to be on the rest of the image but not on the rectangle. This way I can preview to the user what the final product will look like.
Here's what I have:
.wrapper {
position: relative;
height: fit-content;
width: fit-content;
display: flex;
}
.overlay {
max-width: 100%;
height: 100%;
aspect-ratio: 1 / 1.42;
background-color: rgba(0, 0, 0, 0.4);
position: absolute;
top: 0;
left: 150px;
border-radius: 0.5rem;
}
<div class="wrapper">
<img src="https://picsum.photos/500/300"/>
<div class="overlay"></div>
</div>
Requirements
I need to keep the aspect-ratio and relative size of the rectangle consistent.
No magic numbers or fixed width/height unless dynamically calculated per image, these images will be any size or dimensions and the layout needs to be responsive to (nearly) any screen size.
I can't change the markup too much because I'm working with the drag and drop api to move the rectangle within the image wrapper by changing its left and top positions.
I would like to use CSS or Javascript to solve this, not more HTML
Not looking to use object-fit: cover as I need the entire image visible in its native dimensions.
I hope the below code meets your requirements and solves your problem.
.wrapper {
position: relative;
height: fit-content;
width: fit-content;
display: flex;
}
.overlay {
height: 100%;
position: absolute;
top: 0;
left: 0;
border-radius: 0.5rem;
width: 100%;
overflow: hidden;
}
.overlay:before{
position: absolute;
content: '';
aspect-ratio: 1 / 1.42;
height: 100%;
top: 0;
left: 50%;
transform: translateX(-50%);
box-shadow: 0px 0px 0px 145px rgba(0, 0, 0, 0.4);
}
<div class="wrapper">
<img src="https://picsum.photos/500/300"/>
<div class="overlay"></div>
</div>
I have a page with a lot of images positioned on top of another image.
The position of the smaller images is relative, and the left and top distance is given using px.
When I scale the window, the collection of images moves and stays in the right place. But I want it to also scale when I resize the window. (The ratio of the images should stay the same, but smaller/larger.)
All the images are contained in an overlaying div.
Is there any way for me to do this without having to reposition all the images? (I'm very new to css/JavaScript)
Here's an example of what is happening: https://codepen.io/gwenvere/pen/MWJdvJp
What I want is for the red ball to stay on top of the mountain, but for the mountain and ball to shrink if the window becomes smaller.
Here is an example of the css of one of the smaller images:
position: relative;
left: 161.7px;
top: 208.7px;
width: 79px;
height: 79px;
background-color: rgba(56, 152, 236, 0);
background-image: url('../images/Medium.png');
background-position: 0px 0px;
background-size: cover;
}
The css of the larger image:
.image-11 {
position: absolute;
left: 0%;
top: 148px;
right: 0%;
bottom: 0%;
width: 1200px;
max-width: 1200px;
margin-top: -37px;
margin-right: auto;
margin-left: auto;
}
css of the overlaying div:
.div-block-3 {
position: relative;
width: 1200px;
height: 800px;
max-height: none;
max-width: none;
min-height: auto;
min-width: auto;
margin-right: auto;
margin-left: auto;
background-color: rgba(83, 39, 39, 0);
-webkit-transform-origin: top left;
}
The image in your Codepen is set to position: absolute at a fixed width and height of 1200px and 800px, so it doesn’t resize.
As your description of your question talks about resizing the window, I’m assuming you want your main image to scale up and down and for the red dot to stay in the same relative position.
One way to do it using CSS would be to use percentages of the width and height to position the red dot, and use a percentage of the width to scale the size of the dot (using a ratio to set the dot’s height.
body {
padding: 0;
margin: 0;
}
.body {
position: relative;
width: 100%;
max-width: 1200px;
margin-top: 147px;
margin-right: auto;
margin-left: auto;
background-color: rgba(83, 39, 39, 0);
}
.largeImage {
width: 100%;
height: auto;
}
.smallImage {
display: block;
position: absolute;
left: 57.5%;
top: 26.17%;
width: 6.67%;
height: auto;
transform: translate(-50%,50%);
background-color: rgba(56, 152, 236, 0);
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Circle_Burgundy_Solid.svg/1024px-Circle_Burgundy_Solid.svg.png");
background-position: 0px 0px;
background-size: cover;
margin: 0 auto;
}
.smallImage::before {
display: block;
padding-top: 100%;
content: "";
}
.smallImage a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="body">
<img src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png" loading="lazy" alt="" class="largeImage">
<div class="smallImage">
</div>
</div>
I included a margin above the image as you had that in your Codepen.
Please tell me how you can implement this possibility, depending on the width of the browser screen, the height of the video tag always kept 70%. Through css, I could not do it.
The video itself is on the full width of my screen. I would like to do this on js
<div class="video-cont">
<div class="overlay-video"></div>
<video src="https://globecore.com/wp-content/themes/globecore2016/video/usa-lp-video.mp4" type="mp4" autoplay="true" loop="loop"></video>
</div>
CSS
.video-cont {
overflow: hidden;
margin: -32px;
position: relative;
}
.overlay-video {
position: absolute;
top: 0px;
background: rgba(0, 0, 0, 0.6);
right: 0px;
height: 670px;
width: 100%;
z-index: 8;
}
Try to use this css code:
video {height: 70vw;}
You can set sizes like vw or vh which is the viewportWidth or viewportHeight
.video-cont {
overflow: hidden;
margin: -32px;
position: relative;
}
.overlay-video {
position: absolute;
top: 0px;
background: rgba(0, 0, 0, 0.6);
right: 0px;
height: 670px;
width: 100%;
z-index: 8;
}
.video-cont video {
height: 70vw;
}
<div class="video-cont">
<div class="overlay-video"></div>
<video src="https://globecore.com/wp-content/themes/globecore2016/video/usa-lp-video.mp4" type="mp4" autoplay="true" loop="loop"></video>
</div>
You can get the browser screen width in javascript by using window.screen.width or screen.width and then do the necessary calculations.
I have a partly transparent fixed footer and header with scrolling content: https://jsfiddle.net/ru8jgxg9/
What changes to that JSFiddle would need to be made to keep the vertical scroll bar on top when there is overflow content (but keep the scroll bar the whole height of the window too)?
I notice stackoverflow.com seems to be able to do it:
html {
height: 100%;
}
body {
height: 100%;
}
/* Fixed Header */
.dvTableTop {
display: table;
width: 100%;
border-style: solid;
border-width: 0px 0px 2px 0px;
border-color: #000000;
top: 0px;
height: 50px;
position: fixed;
left: 0;
right: 0;
opacity: 0.7;
background-color: Red;
z-index: 1030;
}
/* Scrollable Content */
.dvContentContainer1 {
position: fixed;
top: 0;
bottom: 0;
padding-top: 30px;
overflow: auto;
left: 0;
right: 0;
}
/* Fixed Footer */
.dvFooterContainer1 {
position: fixed;
height: 50px;
background-color: Yellow;
bottom: 0;
left: 0;
right: 0;
opacity: 0.7;
}
Your fixed header and footer needs to be inside the scrolling container. Currently, they're outside the content container and will overlap it and its scrollbar.
Also, your content container can't have a position: fixed, otherwise it will fight with other fixed elements for position and cause overlaps. Fixed elements are always relative to the document, not the container.
Below is a working example.
body {
margin: 0;
padding: 0;
font-family: arial, helvetica, san-serif;
}
.content {
height: 1000px;
background: linear-gradient(45deg, blue, red);
}
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 50px;
background: rgba(0, 255, 0, 0.5);
}
.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 50px;
background: rgba(0, 255, 0, 0.5);
}
<div class="content">
<div class="header">Header</div>
<div class="footer">Header</div>
</div>
I am confused why you are doing it that way. All you have to do is remove your position: fixed from your .dvContentContainer1 like so
.dvContentContainer1 {
padding-top: 30px;
}
And as long as the content extends past the bottom of the page it will work the way you are wanting it to.
See this updated fiddle
Edit: If you remove the height: 100%; from the body tag the scroll bar will go away if the content does not extend past the height of the screen.
See this updated fiddle 2
I am making a pop up on one of my project.
CSS Code
<style type="text/css">
#modalPage
{
display: none;
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background-color: rgba(0, 0, 0, 0.95);
z-index: 999;
}
.modalContainer
{
position: absolute;
width: 100%;
height: 100%;
left: 50%;
top: 50%;
z-index: 999;
}
</style>
Content CSS
.modal
{
background-color: #6f9255;
position: relative;
top: -300px;
left: -305px;
z-index: 1000;
width: 600px;
overflow:auto;
}
JAVASCRIPT Code
<script type="text/javascript">
function myFunction() {
document.getElementById('modalPage').style.display = "block";
}
function hideModal()
{
document.getElementById('modalPage').style.display = "none";
}
</script>
HTML Code
<div id="modalPage">
<div class="modalContainer">
<div class="modal"> </div>
</div>
</div>
But the problem is that, it is fine but the opacity or page background which I putting on it, it is displaying on half page, not on full page.
Displaying by this code. background-color: rgba(0, 0, 0, 0.95);
Please tell me, where is the problem.
I can't keep the position fixed, because my pop up is longer then original page size and it is coming with scroll and cross the footer link too.
Any help will be appreciated.
Thanks
I think the problem is not related with an opacity issue. You say that your .modalContainer is 100% width and height but you start it at 50% top left. So the whole thing is 150% width and height, while #modalPage is only 100% width and height.
If you know the exact width and height of your container I suggest you to simply modify your css to center propertly the container. For example:
.modalContainer
{
position: absolute;
width: 50%;
height: 50%;
left: 25%;
top: 25%;
z-index: 999;
background-color: red; /*added to see where the container is*/
}
Working example:
http://jsfiddle.net/L2cXP/
If you want a modal longer than the page itself, i suggest a new approach.
We can ignore vertical centering because the modal is longer than the page. We just want that #modalPage has a overflow: auto property so it will show a scrollbar when its contents are longer than it.
Probably you would like to add an overflow: hidden property to the body when the modal shows to block the standard scrollbar of your page.
Check this working example:
http://jsfiddle.net/L2cXP/1/
try:
#modalPage {
position: fixed;
}
http://jsfiddle.net/68Sty/
.modalContainer has a "left" of 50%, so starting at halfway is expected. Try something like:
.modalContainer {
position: absolute;
width: 100%;
height: 100%;
top:0;
left:0;
right:0;
bottom:0;
z-index: 999;
}
try this
<div id="modalPage">
<div class='relative'>
<div class="modalContainer">
<div class="modal"> </div>
</div>
</div>
</div>
your css
.relative{
position:relative;
zoom:1;
height:100%;
width:100%;
}
A little CSS magic - and we have simple and nice CSS popups with no javascript positioning! consider this demo:
HTML:
<div id="modalPage" class="csspopup-overlay">
<div class="modalContainer csspopup-popup">
<div class="csspopup-close" onclick="hideModal()">×</div>
<div class="modal">Some modal content</div>
</div>
</div>
I define .csspopup-overlay and .csspopup-popup in CSS as follows:
.csspopup-overlay {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .5);
text-align: center;
}
.csspopup-overlay:after, .csspopup-valignfix {
display: inline-block;
*display: inline;
*zoom: 1;
height: 100%;
width: 0;
vertical-align: middle;
content: '';
}
.csspopup-popup {
display: inline-block;
*display: inline;
*zoom: 1;
position: relative;
max-width: 80%;
padding: 15px;
box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.3);
background: #FFF;
vertical-align: middle;
border-radius: 6px;
}
.csspopup-popup > .csspopup-close {
display: block;
position: absolute;
top: -15px;
right: -12px;
width: 12px;
height: 12px;
padding: 4px;
border: 4px solid #fff;
border-radius: 50%;
box-shadow: inset 0 2px 2px 2px rgba(0, 0, 0, 0.2), 0 2px 5px rgba(0, 0, 0, .4);
cursor: pointer;
background: #555;
color: #FFF;
text-align: center;
font-size: 12px;
line-height: 12px;
text-decoration: none;
font-weight: bold
}
Demo: http://jsfiddle.net/acA73/
Note: I extracted these CSS for you from https://github.com/dfsq/cssPopup jQuery plugin.