I have a simple slider consisting of images and text-only slides. I'm trying to set a background colour overlay on the slides, but I'm having trouble positioning and setting an exact width of the overlay in percentage.
Here's a codepen of what I'm working with: http://codepen.io/anon/pen/RrewXV
.slide-text-half {
background:rgba(130,20,20,0.8);
color:#fff;
padding:0px;
height:100%;
width:inherit;
z-index:2;
position:absolute;
top:0;
}
Setting a 50% width on the slide-text-half class sends the background into a frenzy and I can't figure out why. Any suggestions?
Elements with position: absolute are sized according to its first parent that have a position different than static.
So if you want to size the div proportionally of the slide, you have to add a position: relative on the slides, and make sure they have the height of the slider with:
.slick-track {
height: 100%;
}
.slick-slide {
position: relative;
}
Here is a pen: http://codepen.io/tzi/pen/eJPmbZ
You need to add
.slick-initialized .slick-slide {
position: relative;
}
Related
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.
I am trying to align a div on top of my image. Horizontal alignment works fine, vertical offset however doesn't. Also, the background-color of #studentenlijn is not applied.
HTML Snippet:
<div id="container">
<div id="studentenlijn">STUDENTENLIJN</div>
<img src="http://lsvb.nl/s/lsvbheader.jpg" class="banner" />
</div>
Relevant CSS
#studentenlijn {
width: 10%;
height: 10%;
position: absolute;
top: 30%;
left: 72%;
background-color: #660000;
}
JSFiddle: http://jsfiddle.net/YGeLA/
Any ideas?
Your body had a height of 0, thus affecting the height of the containers within it when you try to specify a percentage height. Another problem was that you had a floating image within your container div, and thus you need to hide the overflow in order for the container to properly calculate the heights of elements within.
I have made some minor changes to your fiddle here:
http://jsfiddle.net/YGeLA/1/
I added:
height: 100%; to the body element
overflow: hidden; to #container which forces the container to respect the height of all elements within it.
The size of your div is:
#studentenlijn {
width: 10%;
height: 10%;
}
So it'll be a % of the parent element. The parent element, your container, is:
#container {
width: 100%;
height: 100%;
}
At this point, your browser can't determine which size should have your block.
So you won't be able to center it (Since you can't center an element which have not a browser-determined size).
You can't see the background-color for the same reason. It is applied, but you won't see your colored block because his size is 0.
Try to solve it, and it would be easier to center your div. In case it doesn't help you, edit your post with your modification :)
the container height is 0px. so you can't give height 100%
you have to set height in px
look at this update
#container {
position:relative;
width:100%;
height:100%;
line-height: 0;
}
.banner {
width:100%;
}
#studentenlijn {
width:200px;
height:30px;
position:absolute;
top:35px;
left:72%;
background-color:#660000;
line-height:30px
}
http://jsfiddle.net/YGeLA/2/
I am developing a webpage for images on a carousel. How can I move an image down in a DIV, or even center it vertically?
Here is my CSS code:
.carousel .item {
height: 900px;
background-color: #777;
}
.carousel-inner > .item > img {
display: block;
margin-left: auto;
margin-right: auto
}
Here is a URL to the webpage in question to show you that the image is too high: http://www.canninginc.co.nz/canluciddream/screenshots.html
EDIT
Ok, I have edited the code by changing the:
margin-top: 50px;
I am still after the image to be lower in the div. I can increase the top margin, but this leaves a white background. What would be the best way to move the image a little bit lower?
First of all make the .item position relative and then
on css:
.carousel-inner > .item > img {
position:absolute;
top:25%;
left:25%;
}
This will center the image vertically
Give margin top of 130px to the image and it looks cool!
margin-top: 130px;
Put image inside the main body, set the main body to position: relative, then set the image to position: absolute; top: 0; left: 0;
If you can't put the image inside the main body, then add a negative margin-top to the main body.
Your problem is not the image being placed too high - it is fixed header. So set margin-top:50px instead of -80px for .myCarousel.
The reason the image is going behind the navigation bar at the top is because you have the navigation bar's position set to fixed. This removes it from the rest of the page for styling purposes, in that the other divs/elements do not recognize it when they position themselves. If you remove the position: fixed; css on that item, the other elements will position relative to that one. Another option would be to add enough of a top margin to the image element to push it down below the top bar by default, whichever you prefer.
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'm attempting to change the width of the Nivo slider on my blog. Currently it spans the entire width of the page wrapper and I'd like to put a left and right margin so it is centered and aligned with the navigation bar and not stretching out to the sides. (I will be resizing the images to fit once I can figure out how to change the width of the wrapper. I've tried changing the width under the css section below. The width changes, however the slider and image are then align hard left. I've also tried sticking in margin tags but it doesnt seem to affect it. I'm stumped.
My Blog
#slider-wrapper-full { width:1000x;
height:400px;
overflow:hidden;
padding-top:10px; }
#slider-wrapper-full #slider { width:1000px;
height:400px;
background:url(images/loading.gif) no-repeat 50% 50%; }
I changed this:
.nivoSlider { position:absolute;
overflow:hidden; }
to this:
.nivoSlider { width: 900px;
overflow:hidden; }
Change the width of the nivoSlider class
.nivoSlider {
width: 900px;
}