I want to set an element so that it hides from page view and it's top touches exactly the bottom of page (the element is out of sight). I was doing botttom: -66px;' at first when the element had constant height of 66px. But now I need this for an element of any size.
If I do bottom: -100%; it sets it to 100% of the size of parent. How do set it to -100% of its own height.
You are looking for "position: fixed" and "transform: translateY(100%);". This allows you to move your div out of your viewport by 100%, independent of the height of the div.
Example:
div {
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 40px;
background-color: red;
color: #fff;
transform: translateY(100%);
}
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 ;)
So after a long time of searching, I finally found out how to crop an image without distorting/squashing an image using overflow: hidden;.
Now my next problem; How would I have the image show a part I want, meaning, when using the overflow:hidden it shows the image from the top of it rather than the middle or bottom. How can I adjust that and show the image from the bottom or middle? To help give a better understanding, please view the images below which I created in photoshop. Image description in order: default image, what css does in default with overflow: hidden, what I want (middle pov), what I want (bottom pov).
Thanks.
Edit: My layout is: parent div with the image div as the child. Parent div's height defined at 600px and width at 100%. And height and width of image div defined as 100%.
Assuming your desired width/height and overflow: hidden is applied to an outer containing div, you can add something like:
.container img {
position: relative;
top: 50%;
transform: translateY(-50%);
}
This would move the displayed area of the image down 50% of the container height (top: 50%), then back up 50% of the image height (transform: translateY(-50%)), which ends up centering it inside the container.
You can adjust these values to achieve different positioning, or add in left: and transform: translateX() to adjust the horizontal axis.
In which way are you using this image?
If you're using this as a background image the solution is much simpler and would simply involve using background positioning. If you're using this as an image pulled in using an img tag you can try the below to manipulate the image.
Be aware that this won't work on every browser.
.new-image-container {
position: relative;
width: 250px;
height: 250px;
overflow: hidden;
}
.new-image-container img {
position: absolute;
left: 50%;
top: 50%;
height: 100%;
width: auto;
-webkit-transform: translate(-50%,-90%);
-ms-transform: translate(-50%,-90%);
transform: translate(-50%,-90%);
}
<div class="new-image-container">
<img src="http://i.stack.imgur.com/j8aQR.jpg"></img>
</div>
Here is my answer/solution for anyone that comes across this post.
#Banner {
width: 100%;
height: 350px
}
#backgroundBanner {
width: 100%;
height: 100%;
overflow: hidden;
}
#backgroundBanner img {
width: 100%;
position: relative;
top: 70%; /*make changes to this and below to adjust the positioning of the image*/
transform: translateY(-70%);
<div id="Banner">
<div id="backgroundBanner">
<img src="https://www.mathworks.com/matlabcentral/mlc-downloads/downloads/submissions/55312/versions/4/screenshot.jpg">
</div>
</div>
I have issues with understanding the div position (relative, absolute, fixed) properties. I basically have an absolute div centered. Inside the div it should be possible to scroll vertically and horizontally. Inside this div should be a fixed header with a width larger than to screen (overflow) and a content div which has an overflow vertically and horizontally as well.
html,
body {
height: 100%;
width: 100%;
background: #fff;
margin: 0px auto;
padding: 0px auto;
position: fixed;
}
.container {
width: calc(100% - 20px);
height: calc(100% - 20px);
top: 10px;
left: 10px;
background: #2924aa;
overflow: scroll;
display: flex;
position: absolute;
z-index: 20;
}
.container-header {
width: calc(100%);
height: calc(10%);
background: #2924aa;
overflow: visible;
z-index: 10;
position: fixed;
background: red;
}
.container-body {
width: calc(110%);
height: calc(110%);
background: #2924aa;
overflow: auto;
position: absolute;
background: green;
}
<div class="container">
<div class="container-header"></div>
<div class="container-body"></div>
</div>
Here is my plunker:
https://plnkr.co/edit/wCWvHPcuYmVMql5HulHy
So i think the main question you have is in regards to the Position Attribute in CSS3. Below is a brief summary of each possible value.
CSS Positioning
The CSS positioning attribute of position has four different values.
Static - Static is the default value for position. It keeps the element on the page in its place, and it scrolls up the page as you scroll.
Relative - Relative positioning is pretty much as the same as static; however, you can use the left, right, top, and bottom attributes to alter the placement of the element relative to its original position.
Fixed - A fixed element's position is in relation to the viewport (i.e. the browser) therefore, an element with a fixed position does not scroll with the page, because when you scroll the viewport does not change. However, if you resize the browser, the element will change position.
Absolute - A element with an absolute position, is positioned relative to its parent element (i.e. the element that contains it).
A good resource for more information, including some diagrams can be found here.
I have a container element with long content which is scaled:
.container {
transform: scale(0.9);
}
inside this container I have a child div which is used to be a popup. It's positioned absolute with top 50%
.popup {
width: 300px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
}
but unfortunately when container is scaled this 50% is not working. I need to use ~240% if it appears on the bottom of a page.
Do you now some specifics on applying positioning on children of scaled elements?
DEMO: http://labs.voronianski.com/test/scaled-positioning.html
Add to .wrap:
.wrap {
...
position: relative;
/*some prefix*/-transform-origin: 0 0;
}
You'll need to reposition the .popup (now the reference frame is the .wrap, instead of the html element), but in Chrome the scale toggle works fine after this change.
See: When using CSS Scale in Firefox, element keeps original position
I'm an iPhone Developer mainly, I'm a bit rubbish at CSS and I'm trying to make a webpage for my app.
I want to make my footer have the following properties:
Fixed width of 640px
Centered
Attached to bottom of screen, not page. So when the user resizes the window, the footer is always at the bottom
All the other styling I can do myself, it's just positional styling that I find really difficult.
Can someone please explain to me how to do this in just CSS.
footer {
width: 640px;
margin: 0% -320px;
position: fixed;
left: 50%;
bottom: 0%;
}
Example: http://jsbin.com/imisig/3
Example with heaps of text: http://jsbin.com/imisig/4
Put the footer HTML into a <div id="footer">. And the CSS would be something like this:
#footer {
width: 640px;
position: fixed;
bottom: 0px;
left: 50%;
margin-left: -320px;
}
Explanation
The width property sets the width to 640px
position: fixed will make it so it scrolls with the page
bottom: 0px makes it fixed on the bottom of the page (distance to bottom = 0px)
left: 50% puts the left side of the div to the center of the page
margin-left: -320px - now we have to move it 320px from the left to make it centered
.footer{
width:100%;
position: fixed;
bottom: 0%;
}
position: fixed will make it so it scrolls with the page
bottom: 0px makes it fixed on the bottom of the page (distance to bottom = 0px)
The width property sets the width to 100%