I have a white page with only a 500x250 textbox and an image. The page is fluid.
I'm trying to center the textbox at the center of a page, while having a picture fixed to the bottom left of the screen. I partially achieve this with the following css:
.bottom-right { /* used to fix the image to the bottom of the screen */
bottom: 0;
right: 0;
position: fixed;
}
#content {
margin-left: auto;
margin-right: auto;
margin-top: 50%;
width: 500px;
height: 250px;
position: relative;
}
When I vertically resize the window, the image covers the textbox. I would instead like the text to go up.
If I've understood your question correctly, you need to have the "textbox" always over the image that's fixed on the bottom-right corner.
See this working Fiddle Example!
CSS
#content {
width: 500px;
height: 250px;
position: absolute; /* this is the key */
z-index: 1; /* this is the key */
left: 50%;
top: 50%;
margin: -125px 0 0 -250px;
}
CSS position:absolute;
What this does is to place the element #content outside the normal document flow, thus not being affected by other elements or having impact on the layout of later siblings.
CSS z-index:1;
What this does is to move the element up on the document stack, thus placing it over others with a lower value (the default stack level is 0).
See the CSS absolute and fixed positioning - W3C Wiki for further details.
Two options I can think of:
Use CSS media queries and if the viewport is less than a certain height then change the textbox height or position so the image doesn't cover it.
Set a min-height around the parent div and once its less than a certain height, show a vertical scrollbar.
Related
I have a div that gets taller when a user selects a certain checkbox.
The default behavior of this div was that when the checkbox is selected the div grows equally at the top and bottom. The top becomes higher and the bottom becomes lower. I would like the top of the div to be fixed and only allow the bottom to become lower so that the content of the div that is present regardless of the checkbox state does not move when the user selects or deselects the checkbox.
I found that adding this styling to the div does the trick.
.fixed-top {
position: absolute;
top: 25%;
width: 400px;
}
However, this also moves the div to the left side of the page. I need it to be centered. The div should be a fixed width unless thear window is narrower than that width in which case the div should become narrower.
If I change the position attribute to relative, then the div is centered properly as described above, but the top is no longer fixed.
How can I make the top of the div fixed, while at the same time satisfying the width requirement set forth above?
.fixed-top {
position: fixed;
left: 50%;
text-align: center;
margin-left: -120px;
top: 0;
width:240px;
}
Try this code....
So, this is how I would solve this
First, please make sure the parent element of the div have its own width (in your case, width:100%;) and have any kind of position (e.g. position: relative;) otherwise this trick wont work.
.fixed-top {
position: absolute;
top: 25%;
width: 400px;
// add this
left: 50%;
transform: translateX(-50%);
}
The trick is to set the div's left attribute by 50% of its parent element width, then move (translateX) it back (-50%) by half of the div width.
You can also use this trick on top attribute too.
top: 50%;
transform: translateY(-50%);
or use this to center both top and left
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
EDIT:
If you want the div position attribute to be relative, you can use
.fixed-top {
position: relative;
// instead top, we use margin-top
margin-top: 50px;
width: 400px;
// add this
margin-left: auto;
margin-right: auto;
}
I hope this helps ;)
I have a div with overflow hidden set up in order to cut an image:
The image on the right (the device) but it's affecting the popup on the left which MUST be there.
.hero {
position: relative;
padding: 32px 0 0;
min-height: 504px;
background: #D91A37 url(../images/flagscape-bg.jpg) 0 0/cover no-repeat;
overflow: hidden;
}
That popup already has z-index applied but it is not working due to the overflow hidden on that red background div.
So, is there a way to make that rule and not touching at all the popup on the left?
You should use position: absolute for your popup so that the properties defined on the parent are not inherited by the popup.
Your code should be something like:
.popup {
position: absolute:
top: 50px;
left: 20px;
z-index: 10;
}
And provide position: relative to a general parent above hero and popup.
i am in a Dilemma here.
i am working on a modal gallery and the image css set to resize accoring to the browser window. Now i need a div around it so that i can place some text or buttons on it.
the image is resized fine but i am not able to set the containing div according to the image size.
I tried using the border red for containing div but it failed.
Please help.
here is a Fiddle to help you see what i am trying to do.
thanks.
Here is the CSS Code
#imagePlaceholderContainer {
border: 3px solid Red;
}
#imagePlaceholder {
margin: auto;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 999;
max-height: 80%;
}
HERE IS THE FULL CODE-->
FIDDLE
Get rid of position: fixed, otherwise you must specify a width and height on the parent #imagePlaceholderContainer.
I have a div inside a div and I would like to be able to scroll the inner div around. The outer div is the viewport for the inner one. The inner dive is centered vertically and horizontally and the outer div is setup with overflow:auto so scrolling kicks in if needed.
When the inner div is larger than the outer and I need to scroll I can get to the bottom right just fine, but I can't get to the top left.
Here is a copy of what I've got so far. Change the size to Force Issue to make the inner div big.
CSS -
The width, height, margin-top and margin-left of #Stack are set via javascript.
/* The Stack */
#StackWrapper
{
position: absolute;
top: 5px;
bottom: 5px;
left: 330px;
right: 5px;
overflow: auto;
}
#Stack
{
position: absolute;
top: 50%;
left: 50%;
border: 1px solid black;
background-image: url('../images/stripes.png');
}
Your DTD declaration is set inside the body (and not done correctly) along with your stylesheets.
DTD Delcaration should be above the tag.
Doing this can clear up some issues with quirks mode or things not positioning correctly.
To correct the positioning you should change the following lines of css
element.style { (set by jquery for the selection )
height: 768px;
margin: 0;
padding: 0;
width: 1024px;
}
#Stack {
background-image: url("../images/stripes.png");
border: 1px solid black;
position: absolute;
}
You have to remember that everything should have a 0 margin and padding so it starts at the top left and ends at the bottom right. Your margins where causing cut off.
You may want to look into jquery to position the scroll bars to the middle if you want it to be centered.
Quick JQuery to scroll your div to the center
$("div#StackWrapper").scrollLeft(width/2);
$("div#StackWrapper").scrollTop(height/2);
I have one element below another and I am using position relative to drag the bottom element up just a bit so that it overlays the top element.
The paperOverlay element is the last element on the page, vertically speaking, and I want it to extend to the bottom of the browser window. However, the relative nudging of the element's position leaves an equal amount of whitespace at the bottom. Is there any way to avoid this?
The HTML looks like:
div class="container">
<div class="homePage">
<!-- some content -->
</div>
<div class="paperOverlay" style="position: relative; top: -70px;">
<!-- some more content -->
</div>
</div>
And the CSS looks like:
div.container
{
width: 960px;
margin: 0 auto;
}
div.homePage
{
width: 800px;
height: 500px;
}
div.paperOverlay
{
width: 960px;
min-height: 400px;
background: url('Images/Overlay.png') no-repeat top center;
}
Basically, the bottom layer is a white background with a torn paper edge effect at the top. The goal is to have the torn paper edge slightly overlay the bottom of the element above it. I did try margin-top: -70px as suggested below and it fixed the height, but now the elements in the top element lay on top of the overlay, and I want the overlay to be on top.
Could you try a negative margin rather than relative positioning? Also, could you explain a little bit more why you need to do this and post you css so that we can better suggest a solution?
Try setting the height of the paperOverlay element. It should be the actual height minus the amount moved relatively.
I did try margin-top: -70px as suggested below and it fixed the height, but now the elements in the top element lay on top of the overlay, and I want the overlay to be on top.
Try this:
div.container
{
margin: 0 auto;
width: 960px;
}
div.homePage
{
height: 500px;
position: relative;
width: 800px;
z-index: 1;
}
div.paperOverlay
{
background: url('Images/Overlay.png') no-repeat top center;
min-height: 400px;
position: relative;
top: -70px;
/* you can optionally use bottom: 70px; rather than top: -70px */
width: 960px;
z-index: 2;
}
Using position: relative; on both elements and setting the z-index should get the overlay on top of the top element, rather than the other way around.
You may also want to try using display: block; on all elements where you need fixed width/height (especially divs and other containers that need a fixed width/height, like anchors or list items), to prevent collapsing. It will usually resize non-block-level elements to fit their contents and ignore width and height rules otherwise.
Using the "vh" unit worked for me. I could not get it to work with height: calc(100%-50px)
#main-nav{
width: 55px;
background-color: white;
transition: 400ms;
height: calc(100vh - 50px);
}