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;
}
Related
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;
}
I have a website with the following basic layout. Essentially, I have the NAV div and SIDEBAR div at fixed positions. This is because when a user scrolls down on my page, only the MIDDLE COLUMN div will move.
The problem I have is that when the window gets shrunk horizontally, the SIDEBAR moves to left and eventually overlaps my MIDDLE COLUMN.
I have the body set to a min-width but it only affects the SIDEBAR if it is position:absolute and not position:fixed
Is there a way to keep my same method of scrolling, but have the SIDEBAR div stop moving left after a certain pixel constraint?
Thanks!
EDIT MARKUP:
div.MASTER {
position: inherit;
width:100%;
height:auto;
}
div.NAV {
position:fixed;
top:0;
left:0;
width:200px;
}
div.CONTENT {
float: left;
position: relative;
width:100%;
}
div.MIDDLECOLUMN {
float:left;
width:100%;
height:100%;
text-align:center;
}
div.SIDEBAR {
position:fixed;
top: 0;
right: 0;
width:200px;
}
Ah I see the issue. You need to assign a min width on the main container. Set the min-width to the width of the element right before it breaks.
Add a margin-left equal to the width of the nav bar to the content div.
You can use the scroll function in jquery:
$(document).ready(function()
{
var $left= $('#yourdiv').offset().left + 20; //+20 is optional
$(window).scroll(function()
{
if ($(window).scrollLeft()>$left)
{
$('#yourdiv').addClass('floater');
$('#yourdiv').removeClass('floated')
}
else
{
$('#yourdiv').removeClass('floater');
$('#yourdiv').addClass('floated')
}
});
});
where floater class is with posit absolute and floated is with position fixed.
EDIT 1:
Maybe you can use all percentage width even in the NAV bar like:
.nav{width:20%; position:fixed;}
.master{width:60%; position:absolute;margin-left:21%; }
Currently developing a portfolio theme for a friend and trying to create a video background in the hero area.
Currently, it appears the video is only taking its natural width, is there any way to force this to stretch to fill 100% of the div? I'm not worried about quality, it's blurred anyways.
I'm using videoBG to embed the video content, and the following styles are applied to the containing div:
#hero {
min-width: 100%;
display: block;
height: 400px;
margin: 0 auto;
}
It was actually the 100% height that I was applying to the video that was throwing it off in the first place. Changing this to auto let the video stretch while setting overflow to hidden.
Try to use that:
#hero { /* div filled by video */
position:relative;
/* other properties ... */
}
#video { /* video div */
display:block;
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
}
My container div doesnt expand vertically on one of my pages as I add elements. Hence the bottom most div overlaps onto my footer. The divs in the container are horizontal elements relatively positioned
On my home page it works fine container expands and no overlapping using the css below
If I had any hair left it would be pulled out by now!! :-))
#container {
width: 900px;
margin-left:auto;
margin-right:auto;
top:50px;
position:relative;
height: auto !important;
min-height: 100%;
}
Seems to me to little context, because it is possible that the footer is overlapping your container div, which is set to start with a min-height of 100%, it depends on how the footer is defined related to your container div.
...............Demo
Hi now give to body, html height:100%; than give to any class or id height 100%;
as like this
body, html{
height:100%;
}
LIve demo
rule-selector
{
height: 100%;
}
If this doesn't work for you then a more particular rule might disable this rule, so make your rule-selector as particular as possible. If it is still not particular enough, then:
rule-selector
{
height: 100% !important;
}
Try this:
#container {
width: 900px;
margin-left:auto;
margin-right:auto;
top:50px;
position:relative;
overflow:hidden ;
}
Best,
Cynthia
I have a bizzare issue, I have a DIV that scrolls inside my page... But within that div I have 'header' that is FIXED.... and because my layout is fluid (100%) wide,it is making the "FXED" div cover over the scrollbars of the div below....
What is the best way to fix this? I have attached a simple screenshot of what's going on... hope it helps.
/* BLUE SECTION */
.floatingHeaderBox {
width: 100%;
}
/* RED BOX BELOW */
.contentBoxRight{
position:absolute;
width:80%;
left:20%;
height:100%;
background-color:#FFF;
border-left:1px solid #CCC;
margin-left:-1px;
}
.contentBoxRight{ overflow:auto; overflow-x:hidden; }
i think you can do it like this http://jsfiddle.net/yuliantoadi/bXukG/1/
i don't have your html, so i made it by my self.
If your floatingHeaderBox is inside your scroll box like this:
<div class="contentBoxRight">
<div class="floatingHeaderBox">Hdr</div>
</div>
You can just add a negative left margin to account for scrollbar. since x-overflow is set to hidden, you will not be able to tell that it moved. Add padding or a sub container to get your desired space back on the left side.
.floatingHeaderBox {
width: 100%;
margin-left:-18px;
}