I'm trying to place an img to the bottom of the outer div.
Sadly it is not working as the default styles from wordpress are making it impossible...
My Project
The img I'm talking about is the small image on the left next to the big main one...
I would appreciate any help as this is already driving me crazy for hours!
Any help is appreciated!
Thanks
edit:
Here's a picture of what it should look like later:
It would help if you posted a picture of what you want the end result to be, but to put an element at the bottom of a container the usual way is setting it's style to something like position: absolute; bottom: 0 you can put a small value in bottom: to offset it a bit to match, you can then use left or rightto set the offset with the other limits of the container.
Edit: I tried this code in the img tag with firebug, seemed to work like in your picture:
element.style {
bottom: 90px;
position: absolute;
right: 350px;
}
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 used part of the wordpress theme of another developer and now this slider content is floating to top
I want to center content vertically and horizontally with padding on all sides padding:100px;
Someone can visit my site and help with centering this block? This is url of my mywebsite, please share some knowledge and hope I will solve this problem.
I looked through your code, (thank god for Inspect Element on Google Chrome!) and it seems you have the header inside the body of the code, try moving the page header above the body in your html. I have found this to work for me in some cases.
Also next time try adding code relevant to the question to your OP, will help get faster and better answers
EDIT: You can centre it horizontally by changing the left and right tags in the css:
.//div class here {
left: 10%;
right: 10%;
width: 80%;
}
EDIT 2: Try this, im not sure if it will work but its worth a show:
.//div class here {
left: 10%;
right: 10%;
width: 80%;
height: 80%;
top: 10%;
bottom: 10%;
}
Try doing the steps explained on this site: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/. You will most likely want to apply this to:
.image img
which is the CSS selector for the div with a class of image containing an image tag. This may be too general though and I actually recommend giving your image an ID and targeting that.
I have created http://amitchauhan.site88.net/EPC%20Website/Website%201/ as you can see on the home page the site fits perfectly without giving excess blank space on the right but on the rest of the pages i get excess space on the right. Can some one help me sort this problem as i dont think there is a problem in the css.
reolaces the existing CSS declarations for id address2 with this.
#address2 {
position: absolute;
/* width: 100%; */
height: 29px;
z-index: 3;
left: 21%;
top: 1526px;
}
The div with the id of address2 is the problem. If you remove the width: 100% it will fix this problem
You can fix this by adding html {overflow-x:hidden;} to you CSS.
This tells the browser to crop anything out of view that is out of the 100% width on the right or left.
Another option is to add html {width:100%;} to your CSS.
This tells the browser to move all elements into the 100% visible width. It would eliminate scrolling left or right, but may disposition elements if your site is not responsive.
Hope this helped!
I have a very simple background image of a couple of lines on my webpage. The code I'm currently using for it is:
{
background-image:url('stripe.png');
background-repeat:repeat-x;
background-attachment:fixed;
}
Super simple. But when I'm scrolling down in the page, I want things to underlap it, rather than overlap it.
Considering it's a small image (only 8px tall and 1px wide), it needs to go the entire edge of the page, and needs to meet the top edges to look right. Because of this, I don't know how to do it as anything other than a background image. Any suggestions?
Thank you.
Edit: If you know of a way to do this as being something other than a background, that'd be great! It doesn't need to be a background, so long as the effect is there.
Edit again: Thank you, here is a link to the page in question: What's going on really is that I want a bar to appear between the frames (but a nice looking bar, not like the ones that are automatically made) And I can't figure out how to make one that will stay on top.
I've got the two frames, and most pages don't scroll, so it's not a problem. So I have the bar as the background of the bottom frame, but when viewing scroll able pages, the effect falls apart.
Thanks everyone! I was able to edit things by adding a div at the top and having it formatted like this
#stripe {
background-image:url('stripe.png');
position: fixed;
width: 100%;
height: 8px;
left: 0;
top: 0;
}
That way I still had my image as the border, and was able to make the div exactly the right size and everything. Thank you for your help!
It is a background, so it is in the back. If you want something in the front, you need to have an element that is in front of the page.
HTML:
<div id="header"></div>
CSS:
#header {
background: gold;
position: fixed;
width: 200px;
height: 200px;
left: 0;
top: 0;
}
JsFiddle
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.