I'm trying to set up a responsive header that takes an image and resizes it to the browser – easy enough. What I can't manage to achieve is centring the image vertically within it's container (in this case an a element)
See example:
http://jsfiddle.net/jwoodcreative/tUW3k/
I've tried a few css tricks that havent worked and some jQuery. Either type of solution would suit if anyone knows of one.
You can always use the top:50%, bottom: 50% trick like here: jsfiddle v13
.outerElement {
position: relative;
height: XXpx;
top: 50%;
}
.innerElement {
position: absolute;
bottom: 50%;
}
This works, because the height of the innerElement is not the same as the one of the outer Element, so you can center your element (if the heights were identical, you'd just position it to pos:0 again)
Like this? I've changed the image to be a background-image, which can be centered very easily in CSS. To make sure the link is shown, I have added a non-breaking space ( ). I think this is what you want, right?
You can change the appearance of the image more by looking here, at the documentation of the background property.
Related
Im trying to accomplish this:
http://codepen.io/Mest/pen/oKBIu?editors=110
.child-div {
width: 100vw;
position: relative;
left: calc(-50vw + 50%);}
but instead of a "child-div" i want to target an img-class, like this:
http://codepen.io/dantveita/pen/ZGdKmd
.parent-div img {
width: 100vw;
position: relative;
left: calc(-50vw + 50%);}
When i do this, im getting a horizontal scrollbar, and im not sure why. Could anyone explain this to me. And if possible, provide a solution?
Thanks
Since you are using position: relative, moving the image to the left doesn't actually take it outside of the document flow, so, according to the browser, it still thinks the image is sticking out.
Because there are no containing elements, there's also no need to use viewport-width over a percentage. For some reason, using viewport-width instead of a percentage adds a little extra space on the right, underneath the scrollbar, even when the image is absolutely positioned.
However, this works:
.parent-div img {
position: absolute;
left: 0;
width: 100%;
}
You may also want to remove the width="1400px" from your image tag, as it isn't necessary and may cause inheritance issues later on.
Im going to go with
.parent-div img {
display:block;
width: 100vw;
position: relative;
left: calc(-50vw + 50%);}
on the img-class for now, while hiding overflow-x, until something comes up that makes hiding the scrollbar prevent users from viewing content.
The reason for using this method, and not closing the "previous" container (which would be the obvious choice) is that i want a quick solution for a wordpress blogtemplate, where all images given a specific img-class will stretch full width, when media is inserted from post-editor.
Heres an example of the effect im looking for (theverge.com is obviously closing containers):
http://www.theverge.com/2015/8/4/9090897/mlb-bam-live-streaming-internet-tv-nhl-hbo-now-espn
I'm trying to understand this code in order to both crop and center an image.
I think I've understood most of it, but I'm still not figuring out why I need this:
.img-crop img{
/* removes(sorta) image from the flow */
padding-left: 100%;
margin: -100% -100%;
}
I think margin: -100% -100% is for centering the image both vertically and horizontally, but why is it placed on the left of the container (and therefore: why do I need that padding-left: 100%)?
I think I figured out how it works. here you can find an example I tried to write for you from scratch. The image has been replaced by a div, but since they are both displayed as inline-block, the last one is convenient for changing heights and play with it.
Let me say it's quite useful if you don't want to use jquery to heavily manipulate all your DOM! Crop and centering just in a bunch of css rulesets.
I have a div which i want vertically aligned to 50% of the height of the browser window at all times.
I don't know what the height of the browser window is going to be at all times, should the user scale this window. If placing it within another element is necessary, great, but as just specified, I have no idea how tall the viewport is going to be at any one time.
I'm not going to be using javascript either.
I have read through the site, i have gone hunting for a solution, but I really want to throw this out there (again) as I have yet to find a solution that does exactly this, either by hook or by crook.
Thanks.
You don't specify if the has a fixed height or not? If so then you can do this with one element, just add the following example CSS:
.centered {
height: 100px;
width: 100%;
background: red;
position: absolute;
top: 50%;
left: 0;
margin-top: -50px; /* half the height of the element */
}
You could use a number of techniques, depends on how you exactly want to implement it. Some (older) but still relevant reading here.
I have a website with typical blog layout - one post under another. I would like to place a div that would be like a 'pipe' joining them all - from the top one to the one at the bottom.
THIS picture might explain help you understand my idea. (sorry for handwriting)
I were thinking for example of wrapping whole post area inside of div, resizing it horizontally to smaller, fixed width and centering but could I do that without affecting the contents? I want just the background of that 'pipe' to appear.
Thank you
You can wrap it in a div, and absolutely position the pipe behind it.
Something like:
.wrapper {
poisition: relative;
}
.pipe {
position: absolute;
top:5%;
width: 50px;
height: 90%;
}
Like this: http://jsfiddle.net/eMKaW/
Check out this picture to see what I am trying to accomplish. Basically I want to use a full screen background image and then overlay a div (in the linked picture, this is the gray area in the middle with the red lines around it) after the logo and nav on the left that will always have a 100% height regardless of scrolling.
The only way I think I can pull this off is to use a background image for the gray area that is repeated vertically, and then make a div for the full screen background image and change the z-indexes around to get the desired layering.
The css I was using for the overlay div was:
#overlay
{
position: absolute;
left: 360px;
top: 0;
bottom: 0;
width: 600px;
height: 100%;
}
But when you have to scroll for larger content, the div always ends at the "fold" and then the background image takes over for the rest of the content.
Are there any tricks I can take advantage of to do this in purely CSS? Also, I don't want to use CSS3 multiple backgrounds because of cross-browser concerns.
Try deleting the height: 100% and changing the position to relative.
You may need to add some padding and margins to get it exactly how you want but this should just about fix it.