I have a list and I want to get image and text value using JavaScript how can i do that? right now i'm getting only selected li id.
My Code:-
function reply_click()
{
console.log(event.target.id);
}
ul.coinList{ margin:0px; padding:0px;}
ul.coinList li{ list-style:none; border:1px solid #ccc; padding:10px; display:flex; margin-bottom:20px; display:block;}
<ul class="coinList">
<li id="1" onClick="reply_click();">
<img src="https://via.placeholder.com/140x100" />
<span class="coinText">one</span>
</li>
<li id="2" onClick="reply_click();">
<img src="https://via.placeholder.com/140x100" />
<span class="coinText">two</span>
</li>
</ul>
Thanks for your efforts!
First of all the event listener can just be on the <ul>. And then you can find the <li> by using Element.closest() from the element that was clicked (e.target). From there you can find the two child elements with Document.querySelector().
function reply_click(e) {
let li_elm = e.target.closest('li');
let img_elm = li_elm.querySelector('img');
let span_elm = li_elm.querySelector('span');
console.log('id:', li_elm.id, 'img:', img_elm.src, 'text:', span_elm.textContent);
}
document.querySelector('ul.coinList').addEventListener('click', reply_click);
ul.coinList {
margin: 0px;
padding: 0px;
}
ul.coinList li {
list-style: none;
border: 1px solid #ccc;
padding: 10px;
display: flex;
margin-bottom: 20px;
display: block;
}
<ul class="coinList">
<li id="1">
<img src="https://via.placeholder.com/140x100" />
<span class="coinText">one</span>
</li>
<li id="2">
<img src="https://via.placeholder.com/140x100" />
<span class="coinText">two</span>
</li>
</ul>
function reply_click()
{
if(event.currentTarget.tagName==="LI") {
alert(event.currentTarget.id);
alert(event.currentTarget.querySelector('img').src);
}
}
ul.coinList{ margin:0px; padding:0px;}
ul.coinList li{ list-style:none; border:1px solid #ccc; padding:10px; display:flex; margin-bottom:20px; display:block;}
<ul class="coinList">
<li id="1" onClick="reply_click();">
<img src="https://via.placeholder.com/140x100" />
<span class="coinText">one</span>
</li>
<li id="2" onClick="reply_click();">
<img src="https://via.placeholder.com/140x100" />
<span class="coinText">two</span>
</li>
</ul>
Related
What I am looking to achieve is to make the items in the list continue scrolling even at the last item in both directions. i.e: Let it continue to scroll starting from the first OR last item all over again. I have worked out the HTML and CSS but don't know what method to use in js/jquery. I'd really appreciate any help or a good pointer.
Here is the HTML
<html>
<div class="container">
<ul class="horscroll" id="autoscrollR">
<li>
<a href="#myGallery" data-slide-to="0" data-tooltip="acci"><img
class="img-thumbnail"
src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=1" >
</a>
</li>
<li>
<a href="#myGallery2" data-slide-to="1" data-tooltip="aiico"><img
class="img-thumbnail"
src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=2">
</a>
</li>
<li>
<a href="#myGallery3" data-slide-to="2" data-tooltip="asaba"><img
class="img-thumbnail"
src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=3">
</a>
</li>
...........
</ul>
</div> </html>
And the CSS is used is very basic for an example:
.container{
max-width: 100%;
}
.horscroll {
display: -webkit-inline-box;
width: 100%;
overflow: auto;
margin:10px;
}
ul {
padding: 0;
margin: 0;
list-style: none;
}
li {
display: list-item;
text-align: -webkit-match-parent;
}
.img-thumbnail {
margin: 5px 5px 0px 5px;
border: 1px solid #;
border-radius: 4px;
}
Now the Js function to use is where I am stuck.
Here is the FIDDLE LINK
So you are looking for something like this:-
var bgWidth = 350; //Max-width of <li> you would like to set.
var scrollPos = Math.ceil($('body').width() / 20);
$(document).ready(function() {
$('body').width(bgWidth + $(window).width());
$(window).scroll(function() {
if ($(window).scrollLeft() >= ($('body').width() - $(window).width())) {
$(window).scrollLeft(1 + scrollPos / 4);
} else if ($(window).scrollLeft() == 0) {
$(window).scrollLeft($('body').width() - $(window).width() - scrollPos / 4);
}
});
});
$(window).resize(function() {
$('body').width(bgWidth + $(window).width());
});
.container {
max-width: 100%;
}
.horscroll {
display: -webkit-inline-box;
width: 100%;
overflow: auto;
margin: 10px;
}
ul {
padding: 0;
margin: 0;
list-style: none;
}
li {
display: list-item;
text-align: -webkit-match-parent;
}
.img-thumbnail {
margin: 5px 5px 0px 5px;
border: 1px solid #;
border-radius: 4px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<ul class="horscroll" id="autoscrollR">
<li>
<a href="#myGallery" data-slide-to="0" data-tooltip="acci"><img class="img-thumbnail" src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=1">
</a>
</li>
<li>
<a href="#myGallery2" data-slide-to="1" data-tooltip="aiico"><img class="img-thumbnail" src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=2">
</a>
</li>
<li>
<a href="#myGallery3" data-slide-to="2" data-tooltip="asaba"><img class="img-thumbnail" src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=3">
</a>
</li>
<li>
<img class="img-thumbnail " src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=4 ">
</li>
<li>
<a href="#myGallery" data-slide-to="0" data-tooltip="acci"><img class="img-thumbnail" src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=5">
</a>
</li>
<li>
<a href="#myGallery2" data-slide-to="1" data-tooltip="aiico"><img class="img-thumbnail" src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=6">
</a>
</li>
<li>
<a href="#myGallery3" data-slide-to="2" data-tooltip="asaba"><img class="img-thumbnail" src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=7">
</a>
</li>
<li>
<img class="img-thumbnail " src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=8 ">
</li>
</ul>
</div>
Hope this helps you!
I am trying to make my content inside the tab slide up when you chose the tab. So when you click on a tab the text inside that tab will slide up from the bottom.
$(document).ready(function() {
var selectedtab;
$('ul.tabs li').click(function() {
var tab_id = $(this).attr('data-tab');
$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current');
if (selectedtab) $("#" + selectedtab).hide();
$("#" + tab_id).slideUp("slow", function() {
// Animation complete.
});
selectedtab = tab_id;
$(this).addClass('current');
})
})
.container {
display: flex;
}
.purpleBackground {
align-self: flex-end;
background-color: #65308b;
opacity: 0.9;
width: 60%;
height: 80%;
bottom: 0px !important;
padding: 60px 40px;
border: 1px solid #fff;
}
.whiteText {
color: #fff;
}
ul.tabs {
margin: 0px;
padding: 0px;
}
ul.tabs li {
background: none;
color: #222;
display: block;
padding: 20px 15px;
cursor: pointer;
font-size: 17px;
border-width: 0px 0px 1px 0px;
}
ul.tabs li.current {
background: #65308b;
color: #fff;
}
.tab-content {
display: none;
color: #fff;
}
.tab-content.current {
display: inherit;
}
.sectionBackground {
background: url("http://www.choicecare.ds-
demo.co.uk/wp-content/uploads/2017/12/placeholder.png");
background-size:cover;
display: flex;
/** I have just put a height value, but when you come to use match height
See Line 14 in the .JS**/
height: 450px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="col-md-4 ">
<ul class="tabs">
<li class="tab-link current" data-tab="tab-1">General Care</li>
<li class="tab-link" data-tab="tab-2">Dementia Care</li>
<li class="tab-link" data-tab="tab-3">End of Life (EOLC)</li>
<li class="tab-link" data-tab="tab-4">Hospital Discharge</li>
<li class="tab-link" data-tab="tab-5">Review and Monitoring</li>
<li class="tab-link" data-tab="tab-6">Holiday Cover</li>
<li class="tab-link" data-tab="tab-7">Advanced Care Planning (ACP)
</li>
</ul>
</div>
<div class="col-md-8">
<div class="sectionBackground">
<div class="purpleBackground">
<div id="tab-1" class="tab-content current">Test</div>
<div id="tab-2" class="tab-content">Test</div>
<div id="tab-3" class="tab-content">Test</div>
</div>
</div>
</div>
</div><!-- container -->
What would I do in the JS to make this work? The correct code and an explanation would be greatly appreciated!
That's a great question lian geary. In maximum time we need to use tab systems. You can make those tab animations fading or sliding. Now I'm going to show you the code that how to make a tab system in HTML5, CSS2 and jQuery ( Mostly JavaScript)...
The HTML5 code...
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<title>Webcoachbd Tab System tutorials</title>
<link rel="stylesheet" href="../tabSystem/style.css"
type="text/css" />
<script src="../jquery_latest.js" type="text/javascript"></script>
<script src="../tabSystem/script.js" type="text/javascript"></script>
</head>
<body>
<div id="tab_system"><!-- start of tab_system-->
<ul id="tab_bar">
<li>
Current Hits
</li>
<li>
Our Favourites
</li>
<li>
All Time
</li>
</ul>
<ul id="current" class="tab_list">
<li>
Who behind behind this | About us
</li>
<li>
HTML tutorials
</li>
<li>
Jquery Tutorials
</li>
<li>
Contact us if need
</li>
</ul>
<ul id="favorite" class="tab_list">
<li>
</li>
<li>
this is our favorite post
</li>
<li>
Short Sale Info
</li>
<li>
Testimonials
</li>
<li>
Contact
</li>
</ul>
<ul id="all_time" class="tab_list">
<li>
Mortgage Forgiveness Debt Relief Act
</li>
<li>
5 Reasons to Hire Us
</li>
<li>
this is our favorite post
</li>
<li>
this is our fav post 2
</li>
</ul>
</div><!-- end of tab_system-->
</body>
</html>
The CSS2 code...
body{
font-family:Verdana;
font-size:13px;
}
ul{
padding:0;
margin:5px 0 0 0;
}
#tab_system{
width:400px;
margin:0 auto;
overflow:hidden;
border:1px solid #ccc;
border-radius:5px;
padding:10px;
}
#tab_bar{
float:left;
}
#tab_bar li .running{
background:#fff;
border-top:1px solid #ccc;
border-right:1px solid #ccc;
border-left:1px solid #ccc;
color:#000;
}
#tab_bar li{
list-style:none;
float:left;
}
#tab_bar li a{
padding:5px;
text-decoration:none;
background:#333;
border:#111;
color:#fff;
}
#tab_bar li a:nth-child(1),#tab_bar li a:nth-child(2){
margin-right:2px;
}
#tab_system .tab_list li{
list-style:none;
}
#tab_system .tab_list{
float:left;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
min-width:260px;
}
#tab_system .tab_list li a{
padding:5px;
text-decoration:none;
display:block;
float:left;
clear:both;
}
#tab_system .tab_list li a:hover{
text-decoration:underline;
}
And finally the jQuery code...
//tab slider jquery code
$(document).ready(function(){//Default view
$('#current').show();
$('#tab_bar li:nth-child(1) a').addClass('running');
$('#favorite,#all_time').hide();
$('#tab_bar li:nth-child(1) a').click(function(event){//Fire when Current hit clicks
event.preventDefault();
$(this).addClass('running');
$('#tab_bar li:nth-child(2) a,#tab_bar li:nth-child(3) a').removeClass('running');
$('#current').slideDown(500);
$('#favorite,#all_time').hide();
});
$('#tab_bar li:nth-child(2) a').click(function(event){//Fire when All time clicks
event.preventDefault();
$(this).addClass('running');
$('#tab_bar li:nth-child(1) a,#tab_bar li:nth-child(3) a').removeClass('running');
$('#favorite').slideDown(500);
$('#current,#all_time').hide();
});
$('#tab_bar li:nth-child(3) a').click(function(event){//Fire when Favorite clicks
event.preventDefault();
$(this).addClass('running');
$('#tab_bar li:nth-child(1) a,#tab_bar li:nth-child(2) a').removeClass('running');
$('#all_time').slideDown(500);
$('#favorite,#current').hide();
});
});
That's it. 100% guaranteed the code will work... Thank you...
Hi I'm trying to learn how to select image and I've done this so far. I just don't get how to select 2 image at the same time because I already tried removing .removeClass('selected'); in the images_list li function.
HTML:
<div class="images_list">
<li class="border" title="content_1">
<img src="http://www.p69.com.br/wp-content/uploads/2013/04/imagens-lindas-6.jpg?0bce15" width="150" height="150" />
<span>
<img src="http://icons.iconarchive.com/icons/icojam/blue-bits/24/symbol-check-icon.png" />
</span>
</li>
<li class="border" title="content_2">
<img src="http://www.p69.com.br/wp-content/uploads/2013/04/imagens-lindas-6.jpg?0bce15" width="150" height="150" />
<span>
<img src="http://icons.iconarchive.com/icons/icojam/blue-bits/24/symbol-check-icon.png" />
</span>
</li>
</div>
<br><br><br><br><br><br><br><br><br>
<div class="img_info">
<div id="content_1" class="content hidden">content1</div>
<div id="content_2" class="content hidden">content2</div>
</div>
CSS
.images_list li {
list-style: none;
float: left;
width: 150px;
height: 150px;
margin-right: 10px;
}
.images_list li span {
display:none;
position:absolute;
top:0px;
left:0px;
width:24px;
height:24px;
}
.border {
border: 6px solid #D8D8D8;
background: url(upload/check.jpg);
}
.selected {
border: 6px solid green;
position:relative;
}
.hidden {
display:none;
}
.images_list li.selected span {
display:block;
}
JS: here's my JS where I'm having a problem with. I hope somebody can help me, Thanks!
$('.images_list li').click(function() {
$('.images_list .selected').removeClass('selected');
$(this).toggleClass('selected');
var clicked = $(this).attr('title');
$("#"+clicked).removeClass("hidden").siblings().addClass("hidden");
});
you can see my fiddle here: http://jsfiddle.net/jasonc21/59swswz7/
Simply comment out the removeClass line entirely.
$('.images_list li').click(function() {
// Left the following in, in case later you want to make it single again.
// $('.images_list .selected').removeClass('selected');
$(this).toggleClass('selected');
var clicked = $(this).attr('title');
$("#"+clicked).removeClass("hidden").siblings().addClass("hidden");
});
.images_list li {
list-style: none;
float: left;
width: 150px;
height: 150px;
margin-right: 10px;
}
.images_list li span {
display:none;
position:absolute;
top:0px;
left:0px;
width:24px;
height:24px;
}
.border {
border: 6px solid #D8D8D8;
background: url(upload/check.jpg);
}
.selected {
border: 6px solid green;
position:relative;
}
.hidden {
display:none;
}
.images_list li.selected span {
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="images_list">
<li class="border" title="content_1">
<img src="http://www.p69.com.br/wp-content/uploads/2013/04/imagens-lindas-6.jpg?0bce15" width="150" height="150" />
<span>
<img src="http://icons.iconarchive.com/icons/icojam/blue-bits/24/symbol-check-icon.png" />
</span>
</li>
<li class="border" title="content_2">
<img src="http://www.p69.com.br/wp-content/uploads/2013/04/imagens-lindas-6.jpg?0bce15" width="150" height="150" />
<span>
<img src="http://icons.iconarchive.com/icons/icojam/blue-bits/24/symbol-check-icon.png" />
</span>
</li>
</div>
<br><br><br><br><br><br><br><br><br>
<div class="img_info">
<div id="content_1" class="content hidden">content1</div>
<div id="content_2" class="content hidden">content2</div>
</div>
I'm trying to make a new cool menu animation for my website. But i can't get the menu to animate smoothly.
When I click on a menu item, javascript set a remove all classes "selected" from menu items and add "selected" to menu item that is clicked.
The menu html
<div class="piranya-menu-wrapper responsive">
<ul id="piranya-menu-2" class="piranya-menu open">
<li data-offset="0" class="piranya-menu-item-1 piranya-menu-item-first" style="transition-delay: 0s;">Forside</li>
<li data-offset="1" aria-haspopup="true" class="piranya-menu-item-2 piranya-menu-item-intermediate parent selected" style="transition-delay: 0.05s;">
<img src="/Image/8239" alt="menuicon" class="piranya-menu-item-icon">Løsninger <i class="piranya-icon-text piranya-expander"></i>
<ul>
<li data-offset="0" class="piranya-menu-item-1 piranya-menu-item-first">Hjemmeside</li>
<li data-offset="1" class="piranya-menu-item-2 piranya-menu-item-intermediate">Webshop</li>
<li data-offset="2" class="piranya-menu-item-3 piranya-menu-item-intermediate">Infoscreen</li>
<li data-offset="3" class="piranya-menu-item-4 piranya-menu-item-intermediate">SEO</li>
<li data-offset="4" class="piranya-menu-item-5 piranya-menu-item-intermediate">Hosting og drift</li>
<li data-offset="5" class="piranya-menu-item-6 piranya-menu-item-last">Special løsninger</li>
</ul>
</li>
<li data-offset="2" aria-haspopup="true" class="piranya-menu-item-3 piranya-menu-item-intermediate parent" style="transition-delay: 0.1s;">
<img src="/Image/8242" alt="menuicon" class="piranya-menu-item-icon">Platform <i class="piranya-icon-text piranya-expander"></i>
<ul>
<li data-offset="0" class="piranya-menu-item-1 piranya-menu-item-first">CMS</li>
<li data-offset="1" class="piranya-menu-item-2 piranya-menu-item-intermediate">E-commerce</li>
<li data-offset="2" class="piranya-menu-item-3 piranya-menu-item-intermediate">Social Media</li>
<li data-offset="3" class="piranya-menu-item-4 piranya-menu-item-intermediate">Markedsføring</li>
<li data-offset="4" class="piranya-menu-item-5 piranya-menu-item-intermediate">Infoscreen</li>
<li data-offset="5" class="piranya-menu-item-6 piranya-menu-item-intermediate">Booking</li>
<li data-offset="6" class="piranya-menu-item-7 piranya-menu-item-intermediate">Apps</li>
<li data-offset="7" class="piranya-menu-item-8 piranya-menu-item-last">Integration</li>
</ul>
</li>
<li data-offset="3" aria-haspopup="true" class="piranya-menu-item-4 piranya-menu-item-intermediate parent" style="transition-delay: 0.15s;">
<img src="/Image/8245" alt="menuicon" class="piranya-menu-item-icon">Cases <i class="piranya-icon-text piranya-expander"></i>
<ul>
<li data-offset="0" class="piranya-menu-item-1 piranya-menu-item-first">Hjemmeside</li>
<li data-offset="1" class="piranya-menu-item-2 piranya-menu-item-last">Infoscreen</li>
</ul>
</li>
<li data-offset="4" class="piranya-menu-item-5 piranya-menu-item-intermediate" style="transition-delay: 0.2s;">
<img src="/Image/8247" alt="menuicon" class="piranya-menu-item-icon">Support
</li>
<li data-offset="5" class="piranya-menu-item-6 piranya-menu-item-last" style="transition-delay: 0.25s;">
<img src="/Image/8246" alt="menuicon" class="piranya-menu-item-icon">Kontakt
</li>
<div class="close-btn"></div>
</ul>
</div>
The css for the menu
header .piranya-menu
{
display: flex;
width: 100%;
}
#piranya-menu-2 > .piranya-menu-item-first
{
display: none;
}
header .piranya-menu-wrapper.responsive > ul > li
{
padding: 0px 8px;
cursor: pointer;
transition: flex 1000ms ease;
}
header .piranya-menu-wrapper.responsive > ul > li > a
{
color: white;
clear: both;
width: 100%;
float: left;
font-size: .8em;
text-align: center;
}
header .piranya-menu-wrapper.responsive > ul > li.selected
{
flex: 1;
}
header .piranya-menu-wrapper.responsive > ul > li.selected > a
{
line-height: 60px;
clear: none;
width: auto;
font-size: 1em;
padding-right: 5px;
background-color: #00253b;
}
#piranya-menu-2 > li.selected > img
{
height: 32px;
padding: 14px 10px 14px 5px;
margin: 0;
background-color: #00253b;
float: left;
}
header .piranya-menu-wrapper.responsive > ul > li:not(.selected):hover
{
background-color: rgba(0, 37, 59, 0.5);
}
header .piranya-menu-wrapper.responsive > ul > li > img
{
height: 24px;
margin: 8px auto;
float: none;
display: block;
}
But it doesn't look correct. When a menu item is clicked, the text is on a new line and a split second later it's show correctly - Any ideas anyone?
You can see the site here
http://piranya.dk/velkommen
Best Regards
Alex Sleiborg
Do this to fix the animation:
body > div.main-wrapper > div > header > div.lower > div > div {
max-height: 60px
}
It will prevent the container from expanding to a larger size.
is this smoother yet? javascript doesn't involved yet. And i just removed the sub-menu to see the progress step by step.
header{
width:100%;
position:relative;}
.upper, .lower{
width:100%;
position:relative;
display:flex;
}
.upper{
background:#ccc;
padding:10px 0;
}
.upper img{
width:200px;}
.lower{
background:#000;}
.center{
width:80%;
color:#fff;
text-decoration:none;
align-self:center;
margin:0 auto;}
.center a{
text-decoration:none;
color:#fff;
transition: all 1s ease-in-out}
.lower ul{
list-style: none;
padding:0;
margin:0;
display:flex;
flex-direction:row;
}
.lower li{
height:54px;
width:36px;
margin:5px;
display:flex;
align-items:center;
display:flex;
flex-direction:column;
transition: all 1s ease-in-out
}
.lower img{
height:32px;
margin:2px;
transition: all 1s ease-in-out
}
.lower li:hover{
flex-direction:row;
transition:all 1s ease-in-out;
width:160px;
}
<header>
<div class="upper">
<div class="center">
<img src="http://piranya.dk/image/8254">
</div>
</div>
<div class="lower">
<div class="center">
<ul>
<li>
<img src="http://piranya.dk/Image/8239">
menu
</li>
<li>
<img src="http://piranya.dk/Image/8239">
menu
</li>
<li>
<img src="http://piranya.dk/Image/8239">
menu
</li>
<li>
<img src="http://piranya.dk/Image/8239">
menu
</li>
</ul>
</div>
</div>
</header>
I have the following div:
<div id="features">
<div class="wrapper">
<ul>
<li class="feature-1"><img src="img/black/blackMainImg.jpg" height="400px" width="180px"></li>
<li class="feature-2"><img src="img/blue/blueMainImg.jpg" height="400px" width="180px"></li>
<li class="feature-3"><img src="img/green/greenMainImg.jpg" height="400px" width="180px"></li>
<li class="feature-4"><img src="img/red/redMainImg.jpg" height="400px" width="180px"></li>
<li class="feature-5"><img src="img/yellow/yellowMainImg.jpg"height="400px" width="180px"></li>
<div class="clear"></div>
</ul>
</div>
and I want that the images will be at the same size but be in different levels
I cant upload photo but I attaching a link for a page that is a very good example of what I mean to
http://www.wix.com/website-template/view/html/760?originUrl=http%3A%2F%2Fwww.wix.com%2Fwebsite%2Ftemplates%2Fhtml%2Fall%2F32&bookName=new-ecom&galleryDocIndex=0&category=all&metaSiteId=
This is one way to do it, if I got your question right.
.wrapper ul {
display: flex;
}
.wrapper ul li {
margin: 10px;
list-style: none;
}
.wrapper ul li:nth-child(odd) {
margin-top: 50px !important;
}
<div class="wrapper">
<ul>
<li class="feature-1"><img src="img/black/blackMainImg.jpg" height="400px" width="180px"></li>
<li class="feature-2"><img src="img/blue/blueMainImg.jpg" height="400px" width="180px"></li>
<li class="feature-3"><img src="img/green/greenMainImg.jpg" height="400px" width="180px"></li>
<li class="feature-4"><img src="img/red/redMainImg.jpg" height="400px" width="180px"></li>
<li class="feature-5"><img src="img/yellow/yellowMainImg.jpg"height="400px" width="180px"></li>
<div class="clear"></div>
</ul>
</div>
You could solve it like this:
.wrapper li {
float: left; /* Puts them on the same row. */
margin: 10px; /* Some space around them. */
list-style: none; /* Remove the bullet point. */
}
/* Individual top margins for the different list items. */
li.feature-1 { margin-top: 20px; }
li.feature-2 { margin-top: 40px; }
li.feature-3 { margin-top: 0px; }
/* ...and so on... */
You could also use the nth-child() pseudo-selector as suggested in other answers, but then it will not work in IE 8 and below (not a big problem, but still).
I've created something similar but without the images as I do not have them
https://jsfiddle.net/cjqzpb7p/
<div id="features">
<div class="wrapper">
<ul>
<li class="feature-1">Hi</li>
<li class="feature-2">Block</li>
<li class="feature-3">Blockz</li>
<li class="feature-4">Blocks</li>
<li class="feature-5">Blockx</li>
</ul>
</div>
</div>
#features li {
height: 400px;
background: red;
width: 180px;
display: block;
list-style-type: none;
float: left;
&:nth-child(2n+2) {
margin: 50px 20px 0 20px;
}
}
Markup CSS done in SASS