I've having an issue with the background images i have embedded into my carousel. click here I've noticed when i click from one slide to another the background image on my site moves out of place. The margin-top for my carousel is current set to margin-top:-275px; and the background image is set to margin-top:-64px; I am slight concerned about these settings.
Does anyone have a solution to this problem?
In order to activate the slides click the thin red tab under the nav bar
I guess that's because you have
.rslides li {
top:0;
}
It does nothing with position:relative (and the current slide has it), but it moves down the slide with position:absolute (hidden slides).
When you click a tab, there's a moment in which the new one is fading in, but it doesn't have position:relative yet. Then, in that moment, the new slide isn't where you want.
So remove that line.
The jumping is occurring because you are switching the LI items from position: absolute; to position: relative; at the end of the animation toggle. This can be avoided by removing your CSS rule:
.rslides li { left: 0; top: 0; }
Specifying width and height is fine, but as soon as you specify left and top - then switch from relative to absolute positioning, you get that jump you're seeing.
As for the positioning of each panel - it has to do with the way you are laying out your boxes. The sizes you are specifying are not large enough for the content you are providing. For instance: <div id="header"> is 37px tall, which is the appropriate size for the social media buttons, but you also have it as the container for the #nav-menu UL - which is another 102px tall.
It appears that in order to correct this and make things overlap, you are using negative margins - which is getting you all thrown off.
My suggestion would be to use a standardized layout system, such as any of the following:
http://cssgrid.net/
http://960.gs/
http://www.1kbgrid.com/
http://foundation.zurb.com/docs/grid.php
And use it to perform your layout tasks, rather than trying to self-craft overlapping layers with mixed absolute/relative positioning.
Alternatively, if you're going to go the overlapping layers route (again, not suggested), really commit to it. Position things absolutely throughout the layout.
In order to accomplish this, you might consider CSS rules like:
#header {
display: block;
position: absolute;
left: 50%; top: 0px;
height: 139px; /* Your Social media links height + nav buttons height */
width: 1018px; /* Your current width */
margin-left: -509px; /* Half the width - centers on page */
}
Again - this is MUCH more work, MUCH harder to maintain and MUCH less elegant - but will yield you at least a consistent spacing / sizing.
Related
So I have a marquee slider that takes a bunch of images, scrolls them to the left, and when the first image hits the left of the page, it comes back from the right side again infinitely.
My issue is that there is a gap between the last image, and the first image that comes again. I believe the theory to fix this is by using jQuery to calculate the sum of all of the images in the first <span>, subtract that from what the width of the container is, and then adding a negative margin-left with that differential number. I have tried the following code, but the issue is that I am not familiar enough with jQuery to pull the widths. Also, I need a solution that will calculate the new container width on window resize (since the container is set to 100% and will certainly change).
NOTE: The two spans contain THE SAME EXACT IMAGES. The reason for this is for the second span to scroll into view as soon as the first one hits the far left. This loops infinitely.
<script>
var marqueeWidth = $('.marquee div span').innerWidth();
var marqueeWidth2 = 0;
$('.marquee div span img').each(function(){
marqueeWidth2 += $(this).innerWidth();
});
console.log(marqueeWidth / 2);
console.log(marqueeWidth2);
</script>
Full Code on JSFiddle: http://jsfiddle.net/Hybridx24/5nuxfed5/2/
Would this work for you? http://jsfiddle.net/5nuxfed5/11/
I've made some changes to the html, the 2 span are now div.flex_container, which are inline-flex elements with 100% width.
.flex_container {
display: inline-flex;
width: 100%;
}
Also I prevented the images to wrap to the next line with white-space: nowrap
.marquee {
white-space: nowrap;
position: relative;
font-size: 0; /* Inline-block spacing issue hack */
animation: marquee 5s infinite linear;
}
Inside each flex box the images are rescaled within its own container, fitting the entire screen width while keeping its ratio:
.marquee img {
display: block;
width: 100%;
height: auto;
}
Edit: added an outer wrapper to remove scroll bar, and added a flex-grow to grow the img if there's free space.
I have made a slider using jquery, which is little bit different from your query. But I hope it may fulfill your reqirement.
URL: http://demos4clients.com/mygallery/
You need to include jquery library file and image into the slider. Also you can change time duration in jquery code.
I have what seemed like a simple issue but cant quite figure this one out. I am using bootstrap version 3 to create my base layout. I have a footer that needed to be at the bottom of the page so i made it position: absolute; bottom: 0; and worked fine if I zoom out. When the content start getting lengthy it creates the vertical scroll bar and when scrolling the DIV floats around instead of staying at the bottom.
I tried giving the container a position: relative; but dosent seem to do anything. Would anyone have any ideas?
Heres an example of my layout, if you resize the preview section to force the vertical scroll bar you will see that when you scroll the DIV floats around instead of staying in place.
https://jsfiddle.net/DTcHh/10301/
try with fixed
.footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
js fiddle example
non-fixed, see the below:
your problem is (from what I gather) the footer is floating dependent on the content and and you want it to stay put where you call it.
.footerElement {
// base styles all styles
display: inline-block; // add this, does as you imagine
}
"Displays an element as an inline-level block container. The inside of
this block is formatted as block-level box, and the element itself is
formatted as an inline-level box" -W3schools
scrollbar, see the below:
As for the element that has a scrollbar resolving.
.elementwithScrollbar {
// base styles all styles
overflow:hidden; // or use overflow-y:hidden; or x
}
fixed, see the below:
If you want it to be fixed; adding position: fixed; and the value coordinates should all you have to do there. (ie. position:fixed; and where you want it)
"Do not leave space for the element. Instead, position it at a
specified position relative to the screen's viewport and don't move it
when scrolled. When printing, position it at that fixed position on
every page." -MDN
Using fixed only anchors it to the bottom of the screen regardless of which part of the page you are viewing. I think you want to have the footer at the bottom of the page rather than constantly sitting at the bottom of the screen.
To fix, amend your spelling mistake here:
.contrainer-fluid { <-- should be container
position: relative;
}
I am trying to create a container that has two sections - the top section will be a scrolling div that takes up 100% of the vertical height of it's container, minus the height of a sticky footer. The sticky footer cannot have a hardcoded height (because it will work in two modes with two different heights) which is where I'm troubled. I would prefer not to use js, only css if possible.
HTML
<div class="container">
<div class="scrollArea">
a<br/>b<br/>c<br/>d<br/>
a<br/>b<br/>c<br/>d<br/>
a<br/>b<br/>c<br/>d<br/>
a<br/>b<br/>c<br/>d<br/>
</div>
<div class="footer">
<!-- the contents of the footer will determine the height needed -->
</div>
</div>
CSS
.container {
position: relative;
height: 100%;
width: 100%;
}
.scrollArea {
position: absolute;
top: 0px;
bottom [height of sticky footer]; left: 0px;
right: 0px;
overflow-x: hidden;
overflow-y: scroll;
}
.footer {
position: absolute;
bottom: 0px;
height: [height of sticky footer];
left: 0px;
right: 0px;
}
You don't want to be using position: absolute; on everything.. This will make it very difficult to style things because a absolute element technically has no height (from the perspective of other elements). You are further confusing things by using the "stretch technique" of using bottom, left, top and right all 0.
Your question is also a bit confusing in terms of how the height will be set.. Is it to be set through javascript? Through media queries? If it is either of those cases, you could easily set the height of the scroll area through the same method, allowing them to change in tandem.
If, for some reason you have to only set the height for this one element, you can let css table display properties do the work of calculating the new height for the scroll area, by setting the container as display: table;, and adding another wrapper around the scrollarea. Setting that wrapper and the footer to display: table-row; will get them laid out.
Check this out to see what I mean:
http://jsfiddle.net/6gprU/3/
Your code sample suggests that the height will be set, somehow.. though if this is not the case, and you absolutely cannot set the height (which would be the case if the content that went into the footer was dynamic and unpredictable in size) then you are making this increasingly difficult. In this case, it would depend on if the overall container height needs to stay a certain size. If it does, like I assume it would, then you may need to rethink your layout, as you have too many variables to be able to do it with pure css.
As a final addition to that, there is another option that would make this really easy. CSS has a feature called calc():
https://developer.mozilla.org/en-US/docs/Web/CSS/calc
This feature allows you to perform calculations in css, much like you would in javascript, and would allow you to set the height of anything in relation to anything, dynamically. However, I put this last, as browser support is a bit limited. It will not work in IE 8 or below.
Check this site to see where it will work, and then make the decision as to wether this is a valid option for you or not.
http://caniuse.com/calc
I have an issue that only affect Chrome. Furthermore its only visible when the screen is at certain widths.
I've created a fiddle that can replicate the issue.
http://jsfiddle.net/T8LvA/63/
When you rollover the red box the width of the parent is animated to reveal more of the red box.
You may need to adjust the width of the html pane several times before you see the wobble,
Any thoughts on how best to resolve this?
Thanks
Use float:right instead of positioning it absolutely.
http://jsfiddle.net/T8LvA/70/
It happens because when you change the width, it extends to the right - then it's reflowed and moves back to the left to the correct position, which causes the wobble. Floating it to the right always keeps it there.
To clarify: you'll need to replace position: absolute width float: right on both #widget and .hidden for the correct result.
if you use postion you need use left and top, in this case it is useless.
Try fx you css in this way
#wrapper{
width: 100%; // was 600px
height: 100px;
margin: 0 auto;
//position: relative;
}
I'm currently coding a jQuery slideshow effect and need a bit of help.
I have all of the sideshow functionality working properly, my only problem is that I want to have my navigation arrows to be automatically positioned on either side of the slideshow box (960px, centered on the screen).
The end product should be something like Kriesi does here: http://www.kriesi.at/themes/upscale/
I've looked at his code, but can't quite figure it out. Any help would be appreciated!
Thanks!
I don't understand what you mean by "I can't quite figure out how to initially position them over the slideshow... If I do it in CSS, then it won't work on all screen resolutions."...?
If you position the arrows relative to the slideshow, there will be no issue. For example to place them at the top left and top right corners, include the following in your styles:
#slideshowcontainer{
width: 960px;
height: 400px;
position: relative;
}
#leftarrow{
position: absolute;
top: 0px;
left: -40px; /* position the arrow 40px to the left of the slideshow */
}
#rightarrow{
position: absolute;
top: 0px;
right: -40px; /* position the arrow 40px to the right of the slideshow */
}
Obviously you will need to adjust the values to suit, depending on the size of your arrows and where you want them etc
Arrows are situated in . That block is positioned as absolute with top value as 50% - 12px (margin-top: -12px);
Then, there is a list which contains images and other data and affect height of it's parent .
So, basically, in the code, when user clicks on an arrow, jQUery probabaly uses outerHeight() to get height of li elements in and then uses animate() to change height of the which affects height of the and that in it's turn smoothly changes position of the arrows.
Personally, i think it's a bad designing when arrows change it's position. Very annoying when you have to move mouse up and down every time you want to see the next slide.