I have three elements, the ones in red are divs with images as background displaying the logo of my client. The white one is a "modal" window that appears when you click an item on the menu (not displayed), this modal window uses percentages for its height and uses a fixed position to stay in the center of the page (both vertically and horizontally). The bottom of the modal as to be aligned with the two red boxes.. For my resolution it works perfect, but when on a Macbook (for example) when on fullscreen the site looks like this
What should I possibly do to solve this problem?
In case someone needs it, here's the CSS of the modal
.modal{
cursor: auto;
position: absolute;
z-index: 11;
top: 45px;
bottom: 15px;
right: 0;
left: 0;
margin: auto;
width: 940px;
max-width: 1072px;
height: 81%;
padding: 40px;
background-color: rgb(255, 255, 255);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
color: #1C1C1C;
text-align: left;
overflow-y: auto;
overflow-x: hidden;
}
Remove the height property in your modal, You must just stretch your modal by using top and bottom. This will make sure the bottom of the modal is 15px from the bottom of the screen.
The bottom of the modal as to be aligned with the two red boxes..
Add the same Css rules to your red divs as well by using top and bottom
this modal window uses percentages for its height and uses a fixed position to stay in the center of the page (both vertically and horizontally)
If you say that the modal will be centered even vertically then howw do you expect the side red divs to align correctly at the bottom?
For this you must use jquery and when ever the modal is shown calculate the number of pixels from the bottom of the window to the bottom of the modal and then add this pixels as the CSS rule to both the side div's bottom property. That way you will get it aligned
Related
On my site, I have a tutorial that appears in a modal. The wrapper is a translucent gray that covers the entire site (including the parts that you must scroll down to see).
I am trying to center the modal vertically, but since the div covers below the fold (it goes where you must scroll down), the modal appears half cut off on the bottom of the page because it is placed in the center of the modal wrapper div. I'd appreciate it if someone could look at my code below and tell me how can I change the CSS so that the modal box will always appear in the center of the screen (vertically), even if the parent div moves below visibility.
Here's my code:
.modal-wrapper {
display: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: none;
background-color: #000000;
background-color: rgba(0,0,0,0.4);
}
.modal-content {
position: absolute;
background-color: #fefefe;
border: 1px solid #888;
border-radius: 12px;
margin: 15% auto;
padding: 20px;
width: 80%;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
You may be wondering what happens when the screen's width is smaller. As the browser size shrinks, the div slowly moves further up the page, but it is never fully revealed. I would like this modal to be centered similarly to the Wordle Help Modal. If you play around with it, you'll see that it always stays in the same spot no matter how small or large the browser's width is. Thanks in advance for any answers!
As in this test page https://play.pianohub.it/
I'm using three carousel sliders with two navigation arrows
If you hover over either the nav arrows, you'll see that this div covers only a portion of the picture height, while I need it to span top to bottom.
I'm using this CSS
.arrow {
font-size: 18px;
padding-right: 7px;
padding-left: 7px;
background-color: rgba(22,22,22,0.29);
color: #ffffff;
}
I tried to use padding:auto for top and bottom but it is not a thing. I should fix it by counting the needed pixel but it wouldn't be responsive.
How can I set automatic padding?
If the list-container and the arrow have the same father, you can set:
height: 100%;
so the height of the arrow will be as 100% as the father
I am having trouble creating this component for a project I'm working on. The requirements include a vertical bar where the text is rotated 90deg, horizontally centered within the bar, and aligned to the bottom of the bar. The screenshot below is what it's supposed to look like. I've linked to a codepen at the bottom to show you what I have so far.
Other Notes
I'd like to try and avoid absolute positioning if possible
The width of the actual title itself needs to be variable
When the window is made smaller I'd prefer it to cutoff from the bottom not the top (not a deal breaker)
Also keep in mind that I've set overflow-y: hidden on the <html> and <body> tags to keep vertical scrolling from happening.
Codepen example
This layout is a bit tricky to achieve without absolute positioning.
Check out the solution - https://codepen.io/trentmrand/pen/KvPgXY
I've removed the content container, so your resulting HTML is now as follows,
<div class="c-key">
<div class="c-key__label">Some label</div>
<h1 class="c-key__title">
Milestones
</h1>
</div>
I've also updated your SCSS to use absolute positioning, as follows,
.c-key {
width:600px;
height: 600px;
position: relative; // make container use relative positioning
background: #000;
&__label {
background: #fff;
border-right: 1px solid #000;
font-size: 13px;
padding: .25rem .5rem;
text-transform: uppercase;
}
&__title {
color: #fff;
font-size: 5rem;
transform: translateX(46px) rotate(-90deg); // rotate text and translate half of the text height to center
transform-origin: left bottom; // rotate from bottom-left
position: absolute; // use absolute positioning with this element
bottom: 0; // position at bottom of parent element
left: 50%; // position at middle of parent element
margin: 0 !important; // remove default padding from header tag
}
}
I am learning some frontend development and came across this webpage example
It's a simple web page with the body made solely out of divs
This below is a fixed div, when I say fixed I mean when I resize the browser from the bottom or the left, right the div is not adjusted and it goes out of view.
<div style="background-color: #292929; color: white; position: absolute; left: 0px; top: 80px; width: 100px; height: 300px; padding: 5px; padding-right: 20px;">This will be the navigation 'column', which will run down the left of the page.</div>
while the one below is moving
<div style="position: absolute; left: 10px; bottom: 100px; background-color: #0099CC; padding: 5px; color: white; border: 5px white groove; font-size: 13pt;">I could go on, but I think you see the brilliance of these things.</div>
both the divs have absolute positioning but the first or the fixed div has positioning for top defined as `
The only difference that I see is that first or the fixed as
top: 80px \\for fixed div
while it's
bottom: 100px \\for the moving div
My question is why only bottom attribute in css for this div puts it in another layer while top doesn't do the same for the fixed div? Or maybe there is something else to it?
Absolute positioning is dependent on its parent element. If the div is nested within another div with any positioning besides static(the default) then it will be displayed absolute to that div not the body or page. I am not sure what you mean by "layering". If you want to layer divs you can use z-index to put one above the other.
EDIT:
The top left corner of a browser always remain at 0,0 the only thing that changes on a resize is the bottom right coordinates
I have a form I would like to center directly in the middle of a page. I have this CSS
#form {
width: 240px;
height: 100px
margin: 0 auto;
display: block;
}
this only does it horizontally. Is there a way to do it vertically?
I might be wrong but if I remember correctly.. this should work:
#form {
width: 240px;
height: 100px
position: absolute; /* make sure this is wrapped by an element with "position: relative" */
top: 50%;
left: 50%;
margin: -50px 0 0 -120px; /* half of the height and width */
}
If I'm wrong, then you probably have to use javascript.
Not really - you can declare an offset from the top of the page, but think about it for a moment...how tall is a webpage? What does it mean to be centered vertically?
Do you want to be centered relative to the open browser window height? Or centered relative to the height of the page (top of header to bottom of footer, regardless of browser window size).
On preview, the comments on the original post cover this well.