I need help for owl carousel - synced owls.
I want to use it in left column. but i can't hide other big imagesexcept main big image. It is overflow on right column and outside the container.
Other thing is how can i make it auto change images ?
I am waiting for helps. Thanks.
Here is link : codepen
codepen.io/erenesto/pen/zqKZKq
As per your code you use owl carousel v1.3.2 js and CSS v2.0.
So USe OWL CSS V1.3.2 Instead of Owl CSS V2.0.
Im not really good coder, hardly now any code. But adding overflow:hidden to colum1 helps. Now you just need to work on your margins and padding:
.col-1 {
width: 60%;
float: left;
overflow: hidden;
}
Related
I want to create an infinite fullscreen slider in Html + Css + JavaScript (Plural). I don't want to use libraries, like "Slick" or something like this. The first slide should be in the senter. I need to see half of the third block and half of the last block(example in the photo). Can anyone help, please ?
Example: https://i.stack.imgur.com/FORxN.jpg
You can do a full-screen container and then place your images in it, and with a little bit of JS you can achieve it.
Create a div and inside the div, place your images.
.container{
width: 100%;
height: 100%;
img{
width: 100%;
height: auto;
This is for the HTML and CSS, but you can always mess around with the height and width and finalize with what suits you and for JS I'd recommend you watching this video or this video. I've previously watched'em both and they are pretty easy to understand.
I have a situation where I have 3 divs :
- Menu - Header (#rt-top-surround)
- Showcase (#rt-showcase)
- Main Body content (#rt-mainbody-surround)
The Menu is 'sticky' with position: fixed. Therefor I have to move the div that is rendered below it with padding (padding-top: 120px; margin-bottom: -120px;).
The problem that I run into is that on some pages the second DIV is #rt-mainbody-surround. (Than this div is rendered properly.)
But on other pages I have #rt-showcase (that displays some promotional images) as second DIV followed by the main body DIV.
So what I would need to implement is a rule that not adds the padding & margin on the rt-mainbody-surround div when the rt-showcase is displayed. And I'm not wether to do this with Javascript or with PHP and how to accomplish this.
I've made an illustration to show what I exactly mean.
Hope anyone can help me out here! Thanks!
Illustration
If I understand the question correctly you want a margin below a specific div only if another div isn't actively visible. The best way to handle this is to add a bottom margin to the top div and negative margin to the div below it (that can be shown and hidden). The css for that is:
.top {
margin-bottom: 20px;
}
.middle {
margin-top: -20px;
}
Sometimes a picture is worth more than some code though so I created a fiddle here. Enjoy!
I have implemented the FlexSlider slider. It works great but I cant seem to find how to make the navigational "dots" smaller or bigger.
I was hoping it used images but I cant find the images, I think they are created dynamicly using JS.
Something like below would be perfect
$(window).load(function(){
$('.flexslider').flexslider({
navigationDotSize: '30px',
start: function(slider){}
});
Silly me,
I should know by now CSS does all this. haha
.flex-control-paging li a {width: 30px; height: 30px; }
I am doing a javascript slider for practice.
However, the picture in the slider is not centered.
Here's the link: http://eddieli.org/flee/
Which part of the coding have I done wrong?
The pictures are not aligned with the slider...
Thanks for helping.
well, i added position: relative; left: -40px; to the li of the sliders #container #left_col #slider li, and they get aligned, i don`t know which size images are, but you must always check the starting position before doing the slider itself, you must check all styles fit right.
I'm wondering how I can accomplish the effect in figure 1.
What I have got so far is
.box { display: inline-block; vertical-align: top; width: 100px;}
This gives me the result illustrated in figure 2.
(Notice: I'm aware I can accomplish the same with float: left)
My HTML code looks something like this:
<span class="box">A<br><br><br><br></span>
<span class="box">B<br></span>
<span class="box">C<br><br><br></span>
<span class="box">D<br><br><br></span>
<span class="box">E<br><br><br><br><br><br></span>
<span class="box">F</span>
<span class="box">G<br><br><br><br></span>
<span class="box">H<br></span>
<span class="box">I<br><br></span>
I want every element to be floated to the left as far as possible, but meanwhile floating upwards.
Is it possible to do this with pure css, or will i need some javascript?
EDIT:
It is important for me that the entire grid is positioned to the center of the page. That's why I use display:inline-block. The grid should also not be fixed to the page because I want it to reflow when I resize my window.
You can use the popular library Masonry.
A dynamic layout plugin for jQuery The flip-side of CSS floats
Here is a code example...
$('#container').masonry({
itemSelector: '.box'
});
Here is the source on Github and an interview with David Desandro on the Shoptalk podcast.
For folks that aren't using jQuery, note that there's also Vanilla Masonry which is the framework-free version.
Tip: Make sure the parent container has position:relative so all the content is bound to your container.
Since you are already using jquery, jquery masonry might interest you: http://masonry.desandro.com
Well, if you only aim to support the most modern browser, the CSS3 multi-column layout could help. One problem with this approach is that it will not keep the same order, but you can play with the order in the HTML (or Javascript).
I added a container around your spans called #container.
#container {
-webkit-column-width: 100px;
-moz-column-width: 100px;
column-width: 100px;
}
jsFiddle Demo