I have the following items.
left arrow slide1 slide2 slide3 slide4 slide5... right arrow
I want to be able to have horizontal scroll bar in my div.
I have something like this
<section id='slide-container'>
<div id='left-nav'><a href='#'><img src='images/left-nav.png'/></a></div>
<ul id='slide-list'>
<li><img src='images/slide1.png' /></li>
<li><img src='images/slide2.png' /></li>
<li><img src='images/slide3.png' /></li>
<li><img src='images/slide4.png' /></li>
<li><img src='images/slide5.png' /></li>
<li><img src='images/slide1.png' /></li>
<li><img src='images/slide2.png' /></li>
<li><img src='images/slide3.png' /></li>
<li><img src='images/slide4.png' /></li>
<li><img src='images/slide5.png' /></li>
</ul>
</section>
css
#slide-container{
width: 970px;
height: 190px;
line-height: 190px;
border:solid 1px #EEEEEE;
position: relative;
overflow: scroll;
}
I can only see the vertical scroll bar and my slides are vertically aligned. I was hoping someone here can help me to keep my slides aligned horizontally and show a scroll bar for it.
My brain is fried...
Thanks a lot!
To #slide-container add white-space: nowrap; overflow: auto;.
For #slide-list li add display: inline-block;.
Please replace your style with this
#slide-container{
width: 970px;
height: 190px;
line-height: 190px;
border:solid 1px #EEEEEE;
position: relative;
overflow-y:hidden;
overflow-x: scroll;
display:block;
}
#slide-list
{
width:1500px; /*i put this for see the scrolling/*
}
Related
This question already has answers here:
How to make a <ul> display in a horizontal row
(9 answers)
Closed 6 years ago.
I try to show images horizontally using css but it did not work ?
can anyone suggest on how to show images horizontally using css ?
here is my code
https://jsfiddle.net/urLdLdLm/3/
i tried :
.outer {width:1000px; margin:0 auto 0 auto;
.outer li img{ display: inline-block;}
.outer {width:1000px; margin:0 auto 0 auto;}
.outer li img{ display: inline-block;}
<div class="outer">
<ul>
<li><img alt="" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQITZTZxY9nTV6pm2M0lbyXVt03SyyD9I1Th1aJ8UfeFbF2FE0oXLoUKUDd"></li>
<li><img alt="" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcT7lw5rwUWCsmOFSTUuFF84niMBZg6J9KeWhws1Ysib3VdVTM8-RA"></li>
<li><img alt="" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQITZTZxY9nTV6pm2M0lbyXVt03SyyD9I1Th1aJ8UfeFbF2FE0oXLoUKUDd"></li>
<li><img alt="" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQITZTZxY9nTV6pm2M0lbyXVt03SyyD9I1Th1aJ8UfeFbF2FE0oXLoUKUDd"></li>
</ul>
</div>
I personally would use flexbox to accomplish that
.outer {
width: 1000px;
margin: 0 auto;
}
.outer ul {
display: flex;
list-style-type: none;
align-items: flex-end;
}
<div class="outer">
<ul>
<li><img alt="" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQITZTZxY9nTV6pm2M0lbyXVt03SyyD9I1Th1aJ8UfeFbF2FE0oXLoUKUDd">
</li>
<li><img alt="" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcT7lw5rwUWCsmOFSTUuFF84niMBZg6J9KeWhws1Ysib3VdVTM8-RA">
</li>
<li><img alt="" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQITZTZxY9nTV6pm2M0lbyXVt03SyyD9I1Th1aJ8UfeFbF2FE0oXLoUKUDd">
</li>
<li><img alt="" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQITZTZxY9nTV6pm2M0lbyXVt03SyyD9I1Th1aJ8UfeFbF2FE0oXLoUKUDd">
</li>
</ul>
</div>
The problem are not your images, but the list, which by default displays its li children underneath each other.
.outer li,
.outer li img {
display: inline-block;
}
Will fix this.
.outer {width:1000px; margin:0 auto 0 auto;}
.outer li,
.outer li img{ display: inline-block;}
<div class="outer">
<ul>
<li><img alt="" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQITZTZxY9nTV6pm2M0lbyXVt03SyyD9I1Th1aJ8UfeFbF2FE0oXLoUKUDd"></li>
<li><img alt="" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcT7lw5rwUWCsmOFSTUuFF84niMBZg6J9KeWhws1Ysib3VdVTM8-RA"></li>
<li><img alt="" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQITZTZxY9nTV6pm2M0lbyXVt03SyyD9I1Th1aJ8UfeFbF2FE0oXLoUKUDd"></li>
<li><img alt="" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQITZTZxY9nTV6pm2M0lbyXVt03SyyD9I1Th1aJ8UfeFbF2FE0oXLoUKUDd"></li>
</ul>
</div>
I have a <ul> that is displayed inline-block and I need it to have a arrow appear when the element is active, see screenshot:
And here is what I have currently:
I already have the functionality with activating the element on hover:
.coffee
$(".solutions-items li").hover ->
$(this).addClass("solutions-items-active").siblings().removeClass "solutions-items-active"
My .html
<div class="text-center">
<ul class="solutions-items">
<li class="solutions-items-active"><img class="home-solutions-icon" src="" alt="online shop"></li>
<li><img class="home-solutions-icon" src="" alt="mobile smartphone"></li>
<li><img class="home-solutions-icon" src="" alt="couch commerce tablet"></li>
<li><img class="home-solutions-icon" src="" alt="pos point of sale"></li>
<li><img class="home-solutions-icon" src="" alt="marketplace"></li>
<li><img class="home-solutions-icon" src="" alt="wearables"></li>
<li><img class="home-solutions-icon" src="" alt="e-commerce innovations"></li>
</ul>
</div>
And here is my css:
.scss
.solutions-items li {
display: inline-block;
}
.home-solutions-icon {
height: 7em;
padding: 0.5em;
}
.solutions-items-active {
background: $green;
}
Any ideas how I can tackle this? Thanks !
You probably just want to add a bit of CSS to do that. If your image has a fixed size, there is a CSS trick to do that :
.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
}
What are some ways I could achieve this layout? I'm going to have a grid of images. Each image will be the same size. I'd like to scale the images up and down based on a user setting which defines the number of columns in the grid. The user setting will be stored in HTML5 local storage.
I've looked at Masonry, but I wonder if that might be overkill since all the images are the same size and the grid will be uniform. Masonry lets me define the column width, which can get me where I need to be, but I'd love something that let me define the number of columns directly. I've also considered using Flexbox for the layout, but I'm not sure how to then change the number of columns with a user-selectable setting. I want to go as lightweight in terms of development overhead as possible with this solution.
Here are some images to help visualize what I want. Here, the user has selected a 5-column layout.
Here are 4- and 3-column layouts.
If your number of options is known, then you can create a container style for each scenario.
.five-col .col {
float: left;
width: 20%;
}
And structure your html as...
<ul class="five-col">
<li class="col"> image </li>
...
</ul>
Create a new container style for each column layout, eg. .four-col .eight-col and just toggle between them.
This does require you to know ahead of time the number of columns you will allow them to choose between, but an 'n' solution might allow the user to create something silly like 20+ columns so vetting the options ahead of time has it's advantages.
If you are interested in a framework that gives you something similar, check out http://unsemantic.com/ or http://960.gs/.
Id do it like this:
*
{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body
{
margin:0;
padding: 0px;
}
.gallery
{
padding: 15px;
margin:0;
list-style: none;
overflow: hidden;
}
.gallery > li
{
margin: 0px;
padding: 2.5px 5px;
float: left;
text-align: center;
}
.gallery > li img
{
max-width: 100%;
}
.gallery.items2 > li
{
width: 50%;
}
.gallery.items3 > li
{
width: 33.333%;
}
.gallery.items4 > li
{
width: 25%;
}
.gallery.items5 > li
{
width: 20%;
}
.gallery.items6 > li
{
width: 16.666%;
}
Some jQuery (or JS)
$("#grid-range").change(function(){
var griditems = $(this).val();
$("#gallery").removeClass("items2 items3 items4 items5 items6");
$("#gallery").addClass("items"+griditems);
});
This HTML:
<input type="range" min="2" id="grid-range" max="6" value="2" step="1" name="power" />
<ul id="gallery" class="gallery items2">
<li><img src="http://www.placehold.it/200x200" /></li>
<li><img src="http://www.placehold.it/200x200" /></li>
<li><img src="http://www.placehold.it/200x200" /></li>
<li><img src="http://www.placehold.it/200x200" /></li>
<li><img src="http://www.placehold.it/200x200" /></li>
<li><img src="http://www.placehold.it/200x200" /></li>
<li><img src="http://www.placehold.it/200x200" /></li>
<li><img src="http://www.placehold.it/200x200" /></li>
<li><img src="http://www.placehold.it/200x200" /></li>
<li><img src="http://www.placehold.it/200x200" /></li>
<li><img src="http://www.placehold.it/200x200" /></li>
<li><img src="http://www.placehold.it/200x200" /></li>
<li><img src="http://www.placehold.it/200x200" /></li>
<li><img src="http://www.placehold.it/200x200" /></li>
<li><img src="http://www.placehold.it/200x200" /></li>
<li><img src="http://www.placehold.it/200x200" /></li>
</ul>
Here is a demo: http://jsfiddle.net/eEnkf/4/
I`m trying to create menu which is opening on clicking parent element and closeing on mouseleave from that one which was opened a while ago. It should work from left to right
Here is
<ul class="menuFirst">
<li><img src="img/ico1.png"></li>
<ul class="">
<li><img src="img/ico2.png" alt="submoduł1"></li>
<li><img src="img/ico2.png" alt="submoduł2"></li>
<li><img src="img/ico2.png" alt="submoduł3"></li>
</ul>
<li><img src="img/ico1.png"></li>
<ul class="menuSecond">
<li><img src="img/ico2.png" alt="submoduł1"></li>
<li><img src="img/ico2.png" alt="submoduł2"></li>
<li><img src="img/ico2.png" alt="submoduł3"></li>
</ul>
<li><img src="img/ico1.png"></li>
<ul class="menuSecond">
<li><img src="img/ico2.png" alt="submoduł1"></li>
<li><img src="img/ico2.png" alt="submoduł2"></li>
<li><img src="img/ico2.png" alt="submoduł3"></li>
</ul>
</ul>
Here is CSS
ul.menuFirst{
list-style-type: none;
border-top: #AAA solid 3px;
border-right: #AAA solid 3px;
border-bottom: #AAA solid 2px;
position: absolute;
left: 0px;
top: 70px;}
ul.menuFirst li{
background: #DDD;
border-bottom: #AAA solid 1px;
}
ul.menuFirst li img{
margin:5px;
}
ul.menuFirst ul{
display: none;
}
ul.menuFirst ul.menuSecond {
list-style: none;
display: table;
position: absolute;
left: 30px;
}
ul.menuFirst ul.menuSecond li{
display: table-cell;
}
And here is jQuery
<script>
$(document).ready(function(){
$("ul.menuFirst li").click(function(){
$(this).next().toggle();
var ypos= $(this).next().position();
alert(ypos.top);
$(this).next().css('top','-=38');
$('ul.menuFirst ul.menuSecond').one('mouseleave',function(){
$(this).css('top', '+=38').toggle();
});
});
});
It works for 1st element but it's pretty buggy. When I'm trying to add .animate() It just didn't work. So I`ve decided to take step back and unbug this one but i don't know how. It should looks like this:
Your HTML is not correct use this
<ul class="menuFirst">
<li><img src="img/ico1.png">
<ul class="">
<li><img src="img/ico2.png" alt="submodul1"></li>
<li><img src="img/ico2.png" alt="submodul2"></li>
<li><img src="img/ico2.png" alt="submodul3"></li>
</ul>
</li>
<li><img src="img/ico1.png">
<ul class="menuSecond">
<li><img src="img/ico2.png" alt="submodul1"></li>
<li><img src="img/ico2.png" alt="submodul2"></li>
<li><img src="img/ico2.png" alt="submodul3"></li>
</ul>
</li>
<li><img src="img/ico1.png">
<ul class="menuSecond">
<li><img src="img/ico2.png" alt="submodul1"></li>
<li><img src="img/ico2.png" alt="submodul2"></li>
<li><img src="img/ico2.png" alt="submodul3"></li>
</ul>
</li>
</ul>
Ok, I`ve fix it....
$('ul.menuFirst ul').each(function(){
$(this).css('top', '-=38').hide();
});
This is executing where DOM is ready I don't need to change position each time while I`m opening or closeing it.
$("ul.menuFirst li").click(function(){
$(this).next().toggle("slide",
{direction: "left"})
});
$('ul.menuFirst ul.menuSecond').mouseleave(function(){
$(this).hide("slide",
{direction: "left"});
Nextly I`m ussing this to animate it.
This code does what I need it to but it has an annoying flicker as it's doing it. What it does is at the base I have an inline list contained in a "large" div (navContainer) and on top of the large div is a smaller div (smallNavContainer). As the large div below is moved left or right the the smaller div displays a different part of the list. When I'm using "margin-left" it works but there is an annoying flicker and if I use just "left" there is no flicker but div once the area that was displayed is offscreen none of the rest of the list that is moving in is displayed. Is there any way to get rid of the flicker from marginLeft? or is there a way to make the rest of the list render when I use "left".
jQuery
$('#capeBtnsPrevTab').live("click",function()
{
$("#navContainer").animate({"margin-left": "+=468"}, 1000, function(){
});
});
$('#capeBtnsNextTab').live("click",function()
{
$("#navContainer").animate({"margin-left": "-=468"}, 1000, function(){
});
});
CSS
.floatIt
{
float:left;
}
div#smallNavContainer
{
left: 50%;
position: absolute;
z-index:0;
overflow:hidden;
width: 780px;
height: 88px;
margin-left:-392px;
margin-top: 72px;
}
#navContainer
{
position: relative;
margin-left:-506px;
margin-top:0px;
}
#navlist li
{
display: inline;
list-style-type: none;
padding-right: 0px;
padding-left: 0px;
margin-right: -2px;
margin-left: -2px;
}
HTML
<img class="floatIt" id="capeBtnsPrevTab" src="btn_1.png" alt="Previous"/></a>
<div class="floatIt" id="smallNavContainer">
<div id="navContainer">
<ul id="navlist">
<li><img id="btn9" src="menu_one.jpg"/></li>
<li><img id="btn10" src="menu_two.jpg"/></li>
<li><img id="btn11" src="menu_three.jpg"/></li>
<li><img id="btn1" src="menu_four.jpg"/></li>
<li><img id="btn2" src="menu_five.jpg"/></li>
<li><img id="btn3" src="menu_six.jpg"/></li>
<li><img id="btn4" src="menu_seven.jpg"/></li>
<li><img id="btn5" src="menu_eight.jpg"/></li>
<li><img id="btn6" src="menu_nine.jpg"/></li>
<li><img id="btn7" src="menu_ten.jpg"/></li>
<li><img id="btn8" src="menu_eleven.jpg"/></li>
</ul>
</div>
</div>
<a><img class="floatIt" id="capeBtnsNextTab" src="UI/btnNext_n.png" alt="Next"/></a><br/>
using % instead of += or -= may help but not sure about it
I figured out what the flickering was, it was IE prematurely removing each button when the edge of it crossed off of the rendered div.