Referring to this website – www.mrandmrsbutt.com – I'm trying to position the 'Upwaltham Barns' graphic at the bottom centre of the viewport, so no matter what size the viewport is the graphic will move with it and stay at the bottom.
I've tried adding the following custom CSS into my WordPress site, but it doesn't seem to work:
.fix{
position:absolute;
bottom:0px;
left:50%;
}
<img src="http://www.mrandmrsbutt.com/wp-content/uploads/2016/01/banner-cta.png" class="fix"/>
Here is all my custom CSS at the moment:
#site-header.overlay-header{background-color:#fff;}
.menu-item a span:hover{color:#dfb5a9;}
#main-banner{
background-image:url(http://www.mrandmrsbutt.com/wp-content/uploads/2016/01/Top-Banner-Background.jpg);
background-size:cover;
background-position:center center;
height:100vh;
}
.centre{
display:inline-block;
text-align:center;
}
#navigation-bar{
background-image:url(http://www.mrandmrsbutt.com/wp-content/uploads/2016/01/navigation-background.jpg);
background-repeat:repeat-x;
height:48px;
}
p{margin-bottom:10px;}
.paper-background{
background: #fff url(http://www.mrandmrsbutt.com/wp-content/uploads/2016/01/white-background.jpg) repeat top left;
}
Can anyone help?
You don't want position: fixed;, you're on the right path using absolute.
The problem is that the parent divs of what you're targeting aren't all 100% height of the viewport. You've set the outer-most parent to height: 100vh;, but it really needs applying to the inner .vc_column_container container (as it's using bootstrap based styles, and BS columns get position relative) - so your down arrow and graphic are being positioned based on that.
Try something like this:
#main-banner .wpex-vc-columns-wrap .vc_column_container {
height: 100vh;
}
#main-banner .wpex-vc-columns-wrap .vc_inner::last-child {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 2.5%;
}
That should get you closer to what you're aiming for, be sure to include all vendor prefixes with transform, however if you're using something like Autoprefixer or Bourbon you'll already have this covered...
There's some "custom" styles in there I'm guessing you've added from a page-builder that might mess the position of the graphic/arrow up, remove the unnecessary padding if it's bugging out.
Good luck with the wedding :-)
I think you need to change position:absolute to position:fixed in the .fix rule
.fix{
position:fixed;
bottom:0px;
left:50%;
}
This should send your graphic to the bottom of the viewport and left there even scrolling. The horizontal center could be a bit tricky, but you could try to use a fixed container with left and right set to 0.
.fixed-container{
position:fixed;
bottom:0px;
left:0;
right: 0;
}
The previous rule sets the container to the bottom of the viewport and extends horizontally.
img.centered {
margin-left: auto;
margin-right: auto;
display: inline-block;
}
This rule is applied to the image to achieve centered alignment inside the container.
HTML code:
<div class="fixed-container">
<img class="centered" src="..image..." />
</div>
I think this should do the trick.
Related
I have a div that is masked off in terms of its width. Inside, I have 2 divs of the same width floated, so 100% + 100%. This means that either the left is visible or the right is visible at any one time.
In fact, what I'm trying to achieve is almost exactly the same as this:
jquery slide div within a div
Just one difference though. The height of my parent isn't fixed, it's dependent on the child size. So when I apply position: absolute; to the parent, it all goes pear-shaped.
Any solutions to this? I can use flexbox if necessary as I don't support IE8/9.
CSS would be something like this
.outer-wrap {
overflow:hidden;
position:relative;
width:300px;
}
.middle-wrap {
overflow:hidden;
position:absolute; // this doesn't work because it has no fixed height
left:0;
width:600px;
}
.middle-wrap.open {
right:0;
}
.inner-wrap {
float:left;
width:300px;
}
HTML
<div class="outer-wrap">
<div class="middle-wrap">
<div class="inner-wrap"></div>
<div class="inner-wrap"></div>
</div>
</div>
Another edit: I created a codepen, it's here: http://codepen.io/anon/pen/oxwmex CLick on the two buttons on the far right, they switch between the states
As you noted, your solution doesn't work because .middle-wrap has no fixed height. Try it with the following settings (note: no floats, no absolute positions):
.outer-wrap {
overflow-x: hidden;
position: relative;
border: 1px solid red;
width: 300px;
margin: 0 auto;
}
.middle-wrap {
position: relative;
width: 600px;
left: 0px;
}
.inner-wrap {
display: inline-block;
width: 300px;
vertical-align: top;
}
This will display the left of the two .inner-wraps within the visible part of .outer-wrap. To make the right .inner-wrap visible apply something like
jQuery(".middle-wrap").css("left", "-300px")
to the element or event you use for switching between the two inner-wraps. Or if you want it animated:
jQuery(".middle-wrap").aminmate({left: "-300px"})
(Plus another method to switch back to left: 0px)
The heigth of all elements is automatically adjusted to the heigth of the higher of the two .inner-wrap elements.
P.S. (edit): Erase the style="height:100px;" settings from the inner-wraps in the HTML, just fill them with some content to see it working.
I am trying to make a simple html site:
http://www.williamcharlesriding.com/test/index3.html
The problem is the buttons, which are png's and I am trying to position over the various areas of the background image, using css like this:
.but1 {
opacity:0;
filter:alpha(opacity=0);
position:fixed;
top:463px;
left:36px;
}
However I have noticed in different browsers and depending on the zoom factor the buttons can be way off their intended mark. Any advice on this would be appreciated,
Thanks
Set your .content container to position: relative and change each button div from position: fixed to position: absolute. The relative position on the container will make the absolute position relative to your div, rather than the browser.
.content {
padding: 10px 0;
background-color: #5a5958;
margin-left: auto;
margin-right: auto;
position: relative;
}
I would probably add another class to each, so you could do something like this:
<div class="but but1">
<div class="but but2">
.but { position: absolute; }
.but1 { top: 463px; left: 36px; }
Normalize.css might help, it contains default CSS for all browsers. Be sure to include it before your main CSS. Sorry, as the other answer states the problem is that you are positioning relative to the browser window, not the parent element.
I know there are a million questions about CSS vertical alignment but I believe I have a slightly new flavour of problem.
I have a container layer and a sublayer inside that, the internal layer has fixed size, however my wrapper layer has a variable height, percentage, with a fixed minimum height.
The issue I have is that I'm able to align it vertically middle either for the min-height scenario or the percentage height scenario but not both.
I have a feeling that the solution will most likely be involving jQuery to determine the height of the wrapper layer in pixels and applying the negative margin to the internal layer on the fly, using position:rel; top:50%; but thought I would asking incase anyone has come across this before.
My css has the following properties:
#container {
height:82%;
min-height:600px;
width:938px;
}
#container div {
width:400px;
height:400px;
padding:70px;
border-radius:100%;
text-align:center;
}
Give the container layer a css property value of display: table. I think that would fix your issue.
#container {
display: table;
}
There is nothing new to this question.
Still, here is the answer:
#container {
height:82%;
min-height:600px;
width:938px;
position: relative;
}
#container div {
width:400px;
height:400px;
padding:70px;
border-radius:100%;
text-align:center;
position: absolute;
top: 50%;
left: 50%
margin-top: -270px;
margin-left: -270px;
}
Another posiibility would be to set the container to display: table and the inner div to display: table-cell and vertical-align: middle.
OK there is an image in a centered div, which is placed at the center of a page. Its width is 400px.
What I'm trying to achieve is:
to place another div - inside of that div with alignment right via CSS.
Due to various screen resolution, I wish to avoid commands "top:, right:".
How to achieve that?
<div class="non"><div class="info">Go top right</div><img src="images/top.jpg"></div>
CSS..
.non { width:400px; background-color:#d20000; }
.info { position:absolute;float:right; background-color:#efefef; }
Example here
Just do this, it should work:
.non { width:400px; background-color:#d20000; position: relative; }
.info { position:absolute; top: 0px; right: 0px; background-color:#efefef; }
I know you want to avoid using top and right, but if you do this, the .info class is positioned perfect top right corner of the .non class div, not the whole page :)
I'm afraid I don't really know how to do this save for float: position or right: 0. I managed to achieve what you want using two positions.. relative of the containing div, and absolute of the inner div:
.non {
width:400px;
background-color:#d20000;
position: relative;
}
.info {
position:absolute;
background-color:#efefef;
right: 0;
}
Other than that, as #HashemQolami has said, just remove the position: absolute from your code, and it works fine.
I need to center a forward and back arrow on either side of an image within a larger div. The div's width and height vary according to the size of the image.
I have a live version of my work so far here: http://danapaigetrentlage.com/cfsa-comps/lff-aboutgoods.html
And here's a jsfiddle to play with: http://jsfiddle.net/thwackukulele/4zHyd/
Though I don't know how much use that will be without the images linked in.
You'll see the forward and backward arrows are at the top of the blue area to either side of the image. I want them to be centered horizontally and vertically within this blue area.
I know that I am using a lot of positioning, and if there's an all around better way to attack this layout, please let me know. This is the best I could come up with. I am eventually handing these layouts off to a developer who is adding database CMS functionality. So my code doesn't need to be perfect, it just has to illustrate my intentions so that he can understand.
Thanks for any help in advance!!
.framewrap-fb{ position:relative; }
.rightarrow, .leftarrow{ position:absolute; top:50%; margin-top:-32px; width:64px; height:64px}
.leftarrow{left:0}
.rightarrow{right:0}
Not sure I understand the question, thats alot of code to read through, maybe only post the code on the focus area.
Try:
.wrapper{
position:relative;
}
.left_arrow{
position:absolute;
left:0;
top:50%;
}
.right_arrow{
position:absolute;
right:0;
top:50%;
}
The solution is to absolute position the links to the div at 50% top and margin-top of negative half of the height of the link so:
http://jsfiddle.net/elclanrs/JKqnm/
html:
<div>
<img />
<a id="next"></a>
<a id="prev"></a>
</div>
css:
div {
position: relative;
height: 300px; /* Set size */
width: 500px;
background: blue;
}
#prev, #next {
position: absolute;
width: 24px;
height: 24px;
top: 50%;
margin-top: -12px;
background: red;
}
#prev {
left: -48px;
}
#next {
right: -48px;
}