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.
Related
What I want seems to be simple but I cannot achieve it! :(
I am trying to modify and use the Web template example given here. However, there are a few problems:
First, I want the footer to be at bottom of the page at all times. In the given example, the footer looks like a footer at the bottom of the page because it's only using a fraction of the browser. However, if you run the code as an independent page, you see it is not stuck to the bottom.
Second, I also don't like the below line. I don't want to specify a height.
.row.content {height: 450px}
How I can achieve both at the same time?
This question has been asked many times but here's the code anyways:
footer {
bottom: 0;
position: fixed;
width: 100%;
}
.row.content {
position: fixed;
height: 100%;
}
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
Please excuse me if there are any mistakes in the following code or with my question, I don't know much about code but am learning :). Sorry for spaces in links and lack of these things - < - really struggling posting code :)
On my website http:// second to nature .co.uk/en/ I am trying to create background images with ivy down both sides of the website. Is it a prestashop website.
I did manage to achieve this with the following css code, however it would not work in ie 6-8 - because those browsers do not support css3.
background:url(http:// second to nature.co.uk/img/backgroundleft.jpg) top left fixed
no-repeat, url(http:// second to nature.co.uk/img/backgroundright.jpg) top right fixed no-repeat;
Therefore after some researching, I tried to create the wanted effect with two divs:
<div id="container">
<div id="inner-container">
</div>
</div>
And then use the following css to implement this.
And as you can see if you visit the site, the left image is shown properly, but the right does not show up.
#container {
background: url(http:// second to nature.co.uk/img/backgroundleft.jpg) repeat-y;
position: fixed;
top: 0px;
left: 0px;
width: 130px;
height: 1000px;
}
#inner-container {
background: transparent url(http:// second to nature.co.uk/img/backgroundright.jpg)) repeat-y;
position: fixed;
top: 0px;
right: 0px;
width: 130px;
height: 1000px;
}
Can anyone see where I am going wrong or have a fix? Help would be much appreciated.
Many thanks
You have a typo in your CSS:
url(http://secondtonature.co.uk/img/backgroundright.jpg))
There is a double )) at the end of the URL where there should be only one.
HOWEVER ... your HTML is all messed up, and there's a better way to do this. Firstly, you have a whole bunch of meta tags and other asset links inside your body element, when they should all be up in the head.
A better way to do this would be to wrap two divs around your content (they would be 100% width by default) and place the bg images on each of those.
You could use Modernizr and then us CSS3 border image. Then the border image will show up in IE6, 7 and 8.
A shame that you have IE6 users to worry about. It's such a bad, buggy and unsafe browser.
http://modernizr.com/
I'm having much problems with my header.
I'm using joomla 2.5 and I've installed maximenuck for the header, but I can't center it at screen.
You can see my web here: http://www.barataweb.es/lourdes/.
I hope this code may help you
.maximenuck{
width: 960px;
margin: 0 auto;
}
paste this code in your .css file and check it weather its center or not.
......................
......
Hi now used to this css
#header ul.menu.maximenuck {
margin-top: 44px;
position: static;
width: 1000px;
}
your navigation define is position absolute than first you change to position and now define your navi min width than apply css according to your design
First of all, you're doing something wierd with the placement (#wrapper2, #main)
You cannot center it, even using Selva's answer, because the ul has position:absolute. Change it to relative, then apply Selva's values.
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;
}