Develop Reference

why images not showing horizontally in css? [duplicate]

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>

Adding bottom arrow/triangle to a hovered active element

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;
}

Logo and menus are not aligned

My problem is that I want the logo and ΛΟΓΙΣΜΙΚΟ menu to be aligned.
I've tried everything and I can't make them move together. The menus move a lot faster...
I'm trying with javascript to get the positions and set the logo to move with the same position as the menu but I can't figure it out here is the page http://www.altasoft.gr/index_.htm
<div class="header">
<div style="position:relative;top:10px; z-index:99; width:50%"><img src="images/Altasoft_Logo.png" alt="" width="354" height="91" /></div>
<div style="position:relative; left:10%; top:-30px; z-index:5; width:80%; min-width:550px;"> <img style="float:right;" src="images/telephone.gif" alt="" width="142" height="16" /></div>
</div>
.nav-container {
background: #eaeaeb;
/*background: #fff url(../images/menu_bg.gif) no-repeat 50% 0%;*/
clear: both;
height: 48px;
}
#nav {
/*padding: 0px 0px 0px 30px;*/
width: 931px/*920px*/;
}
#nav li {
padding-right: 8px;
margin-top: 10px;
padding-bottom: 10px;
text-decoration: none;
}

<div class="header">
<div style="left: 17%;
top: 10px;
z-index: 99;
width: 859px;
margin: auto;"><img width="354" height="91" alt="" src="images/Altasoft_Logo.png"></div>
<div style="position:relative; left:10%; top:-30px; z-index:5; width:80%; min-width:550px;"> <img width="142" height="16" alt="" src="images/telephone.gif" style="float:right;"></div>
</div>

hey actually you should follow the mentioned below code i hope this will work for you please change your header DIV code with my code :-
HTML
<div class="header">
<div style="margin: auto; width: 931px;"><img width="354" height="91" alt="" src="images/Altasoft_Logo.png"></div>
<div style="position:relative; left:10%; top:-30px; z-index:5; width:80%; min-width:550px;"> <img width="142" height="16" alt="" src="images/telephone.gif" style="float:right;"></div>
</div>
U have to remove the position property from your logo div and its position values top & left and just define the width:931px; with margin:auto and its working fine as per your requirement....

Just change the width of the #nav
Screenshot:

jQuery - Animation flickering? (IE8)

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.

display a caption over an image using CSS and JQUERY

I have the following jsfiddle but it doesnt seem to show the caption up:
http://jsfiddle.net/KumcX/189/
HTML:
<ul>
<li>
<div class="caption" style="width: 220px; height: 140px; display: block; opacity: 0.0524612;">this is my caption</div>
<img src="http://dribbble.com/system/users/22122/screenshots/244072/empirestate02_d_teaser.png?1314126367" alt=""></li>
<li>
<div class="caption" style="width: 220px; height: 140px; display: block; opacity: 0.0524612;">this is my caption</div>
<img src="http://dribbble.com/system/users/22122/screenshots/244072/empirestate02_d_teaser.png?1314126367" alt=""></li>
<li>
<div class="caption" style="width: 220px; height: 140px; display: block; opacity: 0.0524612;">this is my caption</div>
<img src="http://dribbble.com/system/users/22122/screenshots/244072/empirestate02_d_teaser.png?1314126367" alt=""></li>
<li>
<div class="caption" style="width: 220px; height: 140px; display: block; opacity: 0.0524612;">this is my caption</div>
<img src="http://dribbble.com/system/users/22122/screenshots/244072/empirestate02_d_teaser.png?1314126367" alt=""></li>
<li>
<div class="caption" style="width: 220px; height: 140px; display: block; opacity: 0.0524612;">this is my caption</div>
<img src="http://dribbble.com/system/users/22122/screenshots/244072/empirestate02_d_teaser.png?1314126367" alt=""></li>
<li>
<div class="caption" style="width: 220px; height: 140px; display: block; opacity: 0.0524612;">this is my caption</div>
<img src="http://dribbble.com/system/users/22122/screenshots/244072/empirestate02_d_teaser.png?1314126367" alt=""></li>
</ul>
CSS:
ul li{ float:left; padding:20px; border:solid gray 4px; margin:5px;}
ul li div{display:none; background:white; opacity:.5; position:absolute;}
JS:
$('ul li').mouseenter(function(){
var image= $(this).find('a img'),
caption = $(this).find('div');
caption.width(image.width());
caption.height(image.height());
caption.fadeIn();
}).mouseleave(function(){
var image= $(this).find('img'),
caption = $(this).find('div');
caption.width(image.width());
caption.height(image.height());
caption.fadeOut();
});
It should show the caption, but its not.. Any ideas?

You probably copy the html with firebug,
delete the styles on the li elements.
check this
http://jsfiddle.net/kuyabiye/KumcX/194/

Refactored some of the JS, ditched the inline caption styling, and updated the css class
jQuery
$(".caption").css('opacity', 0);
$('ul li').mouseenter(function() {
$(this).find(".caption").animate({ 'opacity': 0.9 });
}).mouseleave(function() {
$(this).find(".caption").animate({ 'opacity': 0 });
});​
css
ul li {
float:left;
padding:20px;
border:solid gray 4px;
margin:5px;
}
.caption {
width: 220px;
background: #fff;
height: 150px;
position: absolute;
}​​​
example: http://jsfiddle.net/hunter/KumcX/201/

Use animate effect, configuring opacity:
$('ul li').mouseenter(function(){
var image= $(this).find('a img'),
caption = $(this).find('div');
caption.width(image.width());
caption.height(image.height());
caption.animate({'opacity':0.5});
}).mouseleave(function(){
var image= $(this).find('img'),
caption = $(this).find('div');
caption.width(image.width());
caption.height(image.height());
caption.animate({'opacity':0});
});

Just a couple of tweaks needed, first of all in your CSS you need to give your <div> a left and top position as well as some height and width which I've set to 100% to span the image and your <li> a position relative so the caption is nicely positioned over the image. Oh I also gave the <div> background an rgba color of 255,255,255,0.5 to achieve your transparent effect.
Your JS is fine but your problem in the fiddle is that you have lots of inline styles so delete those and everything should work ok from then on in.
Here's an updated fiddle: http://jsfiddle.net/KumcX/197/
And the updated CSS:
ul li{ float:left; padding:20px; border:solid gray 4px; margin:5px;position:relative}
ul li div{display:none; background:rgba(255,255,255,.5); position:absolute;left:0;top:0;width:100%;height:100%;}
​Hope this helps.