I'm trying to set an image size to its container size + 20px. The container size is relative and will change depending the screen size.
Usually, if I had to resize a div with a background, I'll just set it to position absolute with negatives positions values, but it seems like the img element doesn't follow the same rules. Any solution you know?
HTML:
<div>
<img />
</div>
Css:
div {
position: relative;
overflow: hidden;
width: 100%;
padding-top: 56.5%;
}
div img {
position: absolute;
top: -20px;
right: -20px;
bottom: -20px;
left: -20px;
}
Remember, absolute positioning removes the element from the flow of the document and thus it's container. If you want the image to be relative to the container that it is in, then the position needs to be relative, add the size to it that is needed.
Thinking about this logically, why not actually wrap an extra div around the primary content div and give it some padding?
<div id=container>
<div id=content>
some content
</div>
</div>
Where container has the bg image and padding of 20px.
Why dont you just use calc function.
width: calc(100% + 20px);
Here is the fiddle http://jsfiddle.net/7hbq5/14/
Calc function have a good support http://caniuse.com/#search=calc
Related
So, from some time I'm trying to do this with Bootstrap, but I can't find a working way.Maybe it's something even more simple than the things i'm trying, i don't know anymore.
https://imgur.com/uZkCChn
Please for some suggestions.Thank you.
Here are the basics of absolute positioning inside relative containers:
Relative positioned containers are relative to other elements on the page.
A relative containers margin will always go from the last element on your page, not your page as a whole.
See https://jsfiddle.net/kknfLfh5/ for an example of relative positioned elements.
div2 has a
top: 0;
property, but it's not on the upper page border rather than at the lower border of div1.
If we changed the positioning of div2 to absolute, it will look like this.
We now have an absolute positioned div that ignores it's siblings and positiones itself on page level.
With your image, you want a similiar approach. Try wrapping your image inside a wrapper div that has relative positioning. Your text should have absolute positioning like this:
Css:
.wrapper{
position: relative;
display: inline-block;
}
img{
position: relative;
height: 100%;
width: 100%;
}
h1{
position: absolute;
left: 0;
top: 0;
}
p{
position: absolute;
right: 0;
top: 10px;
}
and your html:
<div class="wrapper">
<img src="http://via.placeholder.com/350x150" />
<h1>
I am a header.
</h1>
<p>
I am text.
</p>
</div>
Check this fiddle for a working sample: https://jsfiddle.net/4osq7tqo/
I have a full-width cover image. Inside of that, I have a bootstrap container class with an absolute positioned image that sits on top of the cover image. What I would like to to do is have that image positioned to the right-hand side of the container only.
Here is my code:
<div id="header">
<div class="container">
<img src="header-icon.png" class="header-icon" />
</div>
</div>
#header {
background-image: url('cover.jpg');
background-size: cover;
height: 300px;
position: relative;
.header-icon {
position: absolute;
bottom: 0;
}
}
Of course, when I add right: 0 to the header-icon, it aligns outside the container. I could, of course, create media queries and try and position the icon based on screen size, but I'm wondering if a better way to do it exists.
I have also tried to make the icon relative to the container, but this seems to break what I am trying to achieve.
I'm not 100% sure what you are trying to achieve, but it sounds like you want right: 0 to align the image to the right of the container and not the header.
position: absolute will position an element absolutely according to the first parent element that is not positioned statically. Right now, you have #header with relative position, but .container still has static position. Therefore, you want to apply position: relative to the container:
#header .container {
position: relative;
}
Also, the code you posted seems to be missing a </div>.
Is this what you are looking for jsfiddle, this is the code i added
#header .container {
position: relative;
height: 400px;
}
As you can see in this page: http://pitchfork.com/ , there are some audio elements on the right side. I've inspected them and they seem to have absolute positioning. But if you scroll down, you'll see that they are fixed.
How can achieve this behavior? Can be an element Absolute and Fixed positioned?
This is the only way I've found: like #DreamTek said:
<div id="relative-layer">
<div id="fixed-layer">
</div>
</div>
and in the styles file:
#relative-layer {
position:relative;
}
#fixed-layer {
position: fixed;
margin-top: 10px;
margin-left: 10px;
}
because using top and right rules positions the layer relative to the window, but if using margin-top and margin-left it is positioned relative to the parent layer.
JSFIDDLE: http://jsfiddle.net/9HQ4b/1/
Create a fixed scrolling sidebar with no JavaScript and a few lines of CSS.
The fixed div in the fiddle below appears to be positioned relative to the container but this is just an illusion.
It can be achieved using percentage widths or by using fixed widths and the setting a negative margin relative to the container width.
FLUID WIDTH
.wrap {
background: #ccc;
width: 90%;
height: 1000px;
}
.fixed {
position: fixed;
top: 10px;
right: 0;
background: #333;
height: 100px;
width: 10%;
}
<div class="wrap">WRAP</div>
<div class="fixed">FIXED</div>
FIXED WIDTH
.wrap {
background: #ccc;
width: 200px;
height: 1000px;
margin: 0 auto;
}
.fixed {
position: fixed;
top: 20px;
right: 50%;
background: #333;
height: 100px;
width: 50px;
margin-right: -160px;
}
<div class="wrap">WRAP</div>
<div class="fixed">FIXED</div>
A note about CSS positioning.
FIXED
Element is always positioned relative to the screen.
ABSOLUTE
Element is positioned relative to the nearest parent container with a position attribute.
Well, the inspected element IS absolute positioned, but is placed inside a wrapper (in another parent element) - #player-modal, which is fixed positioned!
The absolute position is used inside the fixed positioned parent, so the .hud element to be just a few pixels outside the content area (same spacing in every resolution!). This way the floating is fixed to the content area, instead of depending on the resolution (using fixed positioning + using the "right: 20px;" setting).
I just forgot to mention that it's possible, because the site has fixed width and not responsive layout, adjusting to every resolution. If you plan to use this efect on site with fixed width - it will work, otherwise you could need another solution.
I hope I've explained it well! :-)
You can also use calc() to achieve this. (supported in IE9+):
.fixed {
position: fixed;
right: calc(50% - 360px);
/* Replace 360px with half of container width plus desired positioning */
}
or if you want your fixed div on the left, for instance:
.fixed {
position: fixed;
left: calc(50% - 360px);
/* Replace 360px with half of container width plus desired positioning */
}
Let's say I want to place an element in the center of my viewport for use as a popup message. It should fulfil the following:
Element should remain centered (both horizontally and vertically) within the browser, even if element size changes dynamically
Element should stay centered if browser is resized
No Javascript is allowed
Would still work on IE7
Is there a nicer way of achieving this without resorting to the table-based solution below?
<table style="position:absolute;width:100%;height:100%">
<tr>
<td align="center">
<span id="centeredContent">I always remain centered</span>
</td>
</tr>
</table>
The best solution (in my opinion) is to use absolute positioning to place the top left of the element at 50%/50%, then shoving the element back into the centre using negative margins. The only drawback is that you have to specify a width and height of the element. Here's an example:
HTML:
<div id="centerme">
Hello, world!
</div>
CSS:
#centerme
{
position: absolute;
left: 50%;
top: 50%;
/* You must set a size manually */
width: 100px;
height: 50px;
/* Set negative margins equal to half the size */
margin-left: -50px;
margin-top: -25px;
background-color: cornflowerblue;
}
Here's a demonstration on jsfiddle: http://jsfiddle.net/UGm2V/
If you really require the centred content to have a dynamic height, there's a more advanced solution. Be ware that it won't work in older IE browsers. The HTML goes as follows:
<div id="outter-container">
<div id="inner-container">
<div id="centred">
<p>I have a dynamic height!</p>
<p>Sup!</p>
</div>
</div>
</div>
The outter container is required to cover the width and height of the page. It's a block element with absolute positioning.
The inner container is actually a table! That's decided by the display: table css property. The win here is that you don't actually need any table HTML.
The #centred div is the last required element. It still covers 100% of the page's width and height, but anything placed inside it will be centred both vertically and horizontally. This is the css you need, with explanations:
/*
An outter container is needed because the table
won't cover the page width and height on it's own
*/
#outter-container
{
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
/*
The inner container is a table which is set to
cover the width and height of the page.
*/
#inner-container
{
display: table;
width: 100%;
height: 100%;
}
/*
This table cell will cover 100% of the page width
and height, but everything placed inside it will
be placed in the absolute centre.
*/
#centred
{
display: table-cell;
vertical-align: middle;
text-align: center;
}
And of course, here's a jsfiddle demonstration to go with it: http://jsfiddle.net/N7ZAr/3/
If it is a fixed size element, you can do something like this:
#centered {
position:absolute;
width:200px;
height:400px;
top:50%;
left:50%;
margin-left:-100px; // negative-half of element's width
margin-top:-200px; // negative-half of element's height
}
The trick here is top:50%; left:50%;. Combine it with a margin-left and a margin-top equal to negative-half of your width and height, and your element will be centered in your page.
If you do not use a reset stylesheet such as Eric Meyer's CSS reset or normalize.css, it's important you set your body to margin:0; for this trick to work.
Here is a jsfiddle: http://jsfiddle.net/remibreton/fZywe/1/
Live example of a site I did: http://althotels.ca/
http://milov.nl/code/css/verticalcenter.html
check the source code
If you don't know the size of the centered content, you need a two step centering
Example here: http://jsfiddle.net/G6fUE/
<div class="popup-center">
<div class="content">
sadalshd<br />
sadalshd<br />
<img src="http://www.lorempixel.com/200/200" />
sadalshd<br>
</div>
</div>
.popup-center {
position: absolute;
top: 50%;
left: 50%;
}
.popup-center div {
margin-left: -50%;
margin-top: -50%;
}
for left/right centering, you can specify a width for the element and set the left and right margins to "auto".
For vertical centering, it's a bit trickier. You can use percentage heights, but remember to set the height of the body to be 100% or this won't work.
Don't know if this works in IE7, sorry.
Exactly as the title says, I have an element that dynamically resizes itself to fit the content. I would like this element to be positioned proportionally to its size (so it stays centered on a fixed point). The problem I'm facing is that the parent element I'm using to position the child element is not inheriting the calculated size of the child element. I don't know if there's any CSS tricks to make the parent element get it's child's height without having to specify it using javascript.
The following fiddle demonstrates the problem, with the issue being displayed on the left and the desired final product on the right (minus the ability to do it dynamically).
http://jsfiddle.net/YEcx6/
The html:
<div class="parent">
<div class="child">This content is dynamic</div>
</div>
<div id="static" class="parent">
<div class="child">This content is static</div>
</div>
and the CSS:
.child {
position: relative;
right: -50%;
top: -50%;
}
.parent {
position: absolute;
top: 50px;
left: 10px;
background: #ddd;
}
#static {
left: 100px;
height: 54px;
}
.child {
background: red;
max-width: 50px;
}
== EDIT ==
I now know there is no way to do any relational positioning with regard to height without using javascript.
What about height:auto and width:auto on the parent ?
The problem is in order to get the vertical positioning to work right, you need to have a defined height to reference by. Since you want a dynamic height, it makes it challenging. I tried using negative margin-top instead of top but that, as I suspected, defaults to using the width of the element to determine the height offset (which does not achieve your effect). I found a solution that might work for you if you can compromise by setting the position of the upper left corner of the .child rather than the upper left corner of the .parent. Here is the solution, with the explanation following (this was only tested in FF).
HTML
<div class="parent">
<div class="child">This content is dynamic
<div class="bkg"></div>
</div>
</div>
CSS
.parent {
position: absolute;
top: 50px;
left: 10px;
}
.child {
position: relative;
}
.bkg{
position: absolute;
width: 100%;
height: 100%;
top: 50%;
bottom: -50%
left: -50%;
right: 50%;
background-color: #ddd;
z-index: -1;
}
The .parent now is supposed to be the final position of the upper left of where .child will be. The .child contains the content you want but gives a relative position by which .bkg will be related. By giving .bkg a width and height of 100%, that set's its size, which apparent is enough to correctly then calculate the correct 50% offsets to reposition it down and to the left (which is the same relationship you wanted for your original look).