Vertical Lists:
Vertical list with alternative bullet
You can use any image for a list bullet as shown below but they must be small enought to fit otherwise the text will become out of alignment with the icon. If you want to use larger images you need to use a different method.
- Single room with bed and breakfast £30 per person
- Double Room with bed and breakfast £35 per person
- (All Prices shown above are per night)
- (All rooms are en Suite)
HTML
<ul style="margin-left: 40px; list-style-image: url('/images/kb/2014/498/lists-with-large-custom-icons-that-are-vertically-aligned/tick.png');">
<li>Single room with bed and breakfast £30 per person</li>
<li>Double Room with bed and breakfast £35 per person</li>
<li>(All Prices shown above are per night)</li>
<li>(All rooms are en Suite)</li>
</ul>
Vertical list with Icons
- Disable bullet points and then use backgrounds and padding on the <li> to get same effect, however this is then not using bullet images and could possible cause cropping.
- Use position: relative and then move the text with a top: -10px etc.. This works and still uses bullet points
position: relative method
This method sets a separate icon for each <li> item although you can set a global icon in the <ul>. When you do this the text in the <li> is moved out of horizontal alignment with the icon so it looks messey. To fix this I have surrounded the 'text'/'the whole on the <li> contents' and then I have used a position: relative and top: -10px statement to move the text back into the center of the icons. You now have a nice looking list with large custom icons. The position: relative in the <ul> is important for this to work. You can also put all of the styling into a CSS file if you want.
- Wi-Fi
- Tea and Coffee
- TV
- Fresh Towels
- Our stay includes a traditional English breakfast.
- We also have a variation of cereals and fruits available.
HTML
<ul style="margin-left: 40px; position: relative;">
<li style="list-style-image: url('/images/kb/2014/498/small-icons/wi_fi_32.png');"><span style="position: relative; top: -10px;">Wi-Fi</span></li>
<li style="list-style-image: url('/images/kb/2014/498/small-icons/coffee_maker_32.png');"><span style="position: relative; top: -10px;">Tea and Coffee</span></li>
<li style="list-style-image: url('/images/kb/2014/498/small-icons/television_32.png');"><span style="position: relative; top: -10px;">TV</span></li>
<li style="list-style-image: url('/images/kb/2014/498/small-icons/towel_32.png');"><span style="position: relative; top: -10px;">Fresh Towels</span></li>
<li style="list-style-image: url('/images/kb/2014/498/small-icons/bulls-eye-eggs-with-toast-and-bacon_32.png');"><span style="position: relative; top: -10px;">Our stay includes a traditional English breakfast.</span></li>
<li style="list-style-image: url('/images/kb/2014/498/small-icons/corn_flakes_32.png');"><span style="position: relative; top: -10px;">We also have a variation of cereals and fruits available.</span></li>
</ul>
Horizontal Lists:
Joomlashine Version
grid layout works by splitting the width up by % but on 'mobile' devices, grids fallback to 1 vertical column. Thi sis not ideal in all situations but is an option.
HTML
<div class="grid-layout"> <div>Text in column 1</div> <div>Text in column 2</div> </div>
Centered Horizontal Ordered or UnOrdered List with no bullet points
This is method is really useful for making horizontal menus. You can make all of the items appear on the same line if you make the <ul> wider. I have not tried playing with min-width and max-width but they should work.
- Electrician in Kent
- Electrician in Canterbury
- Electrician in Dover
- Electrician in Ashford
HTML
<ul>
<li>Electrician in Kent</li>
<li>Electrician in Canterbury</li>
<li>Electrician in Dover</li>
<li>Electrician in Ashford</li>
</ul>
CSS
ul {
list-style: none;
margin: 0 auto;
width: 400px;
padding: 0;
}
li {
float: left;
}
DIV Inline List (Joomla Footer Keyword List )
- Solar Thermal Panels in Lincolnshire
- Ground Heat Source Pumps in Lincolnshire
- Wind Turbine Installations in Lincolnshire
- Renewable Energy Services in Lincolnshire
- Solar Photovoltaic Panels in Lincolnshire
- All Ways Green Ltd
HTML
<ul style="list-style: none;"> <li style="display: inline;">Solar Thermal Panels in Lincolnshire</li> <li style="display: inline;">Ground Heat Source Pumps in Lincolnshire</li> <li style="display: inline;">Wind Turbine Installations in Lincolnshire</li> <li style="display: inline;">Renewable Energy Services in Lincolnshire</li> <li style="display: inline;">Solar Photovoltaic Panels in Lincolnshire</li> <li style="display: inline;">All Ways Green Ltd</li> </ul>
or
- this make a nice horizontal list with no styling.
- not sure what the outside does and not 100% tested
- Electrician in Kent
- Electrician in Canterbury
- Electrician in Dover
- Electrician in Ashford
CSS
.centered-list li {
float: left;
list-style: none outside none;
padding: 5px;
}
HTML
<ul class="centered-list"> <li>Electrician in Kent</li> <li>Electrician in Canterbury</li> <li>Electrician in Dover</li> <li>Electrician in Ashford</li> </ul> <div style="clear: both;"> </div>
you can also use the line below instead of inline CSS
<li style="float: left; list-style: none outside none; padding: 5px;"></li>
DIV Horizontal List
This is a basic horizontal list using <div>
HTML
<div style="text-align: center; valign: top; background-color: white;"> <div style="width: 150px; display: inline-block;"> <a title="City and Guilds NPTC" href="http://www.nptc.org.uk/" target="_blank"> <img src="/images/modules/498/medium-icons/city-and-guilds-nptc.jpg" alt="City and Guilds NPTC" /> </a> </div> <div style="width: 150px; display: inline-block;"> <a title="International Society of Arboriculture" href="http://www.isa-arbor.com/" target="_blank"> <img src="/images/modules/498/medium-icons/international-society-of-arboriculture.jpg" alt="International Society of Arboriculture" /> </a> </div> <div style="width: 150px; display: inline-block;"> <a title="Constuction Line" href="http://www.constructionline.co.uk/" target="_blank"> <img src="/images/modules/498/medium-icons/constuction-line.png" alt="Constuction Line" /> </a> </div> <div style="width: 150px; display: inline-block;"> <a title="Acclaim Accreditation" href="http://www.constructionline.co.uk/static/acclaim/" target="_blank"> <img src="/images/modules/498/medium-icons/acclaim-accreditation.png" alt="Acclaim Accreditation" /> </a> </div> </div>
Horizontal List - position:relative method
- Electrician in Kent
- Electrician in Canterbury
- Electrician in Dover
- Electrician in Ashford
CSS
<style type="text/css">
.qw-list {
overflow: hidden;
}
.qw-list ul {
list-style: none;
position: relative;
float: left;
display: block;
left: 50%;
}
.qw-list ul li {
position: relative;
float: left;
display: block;
right: 50%;
}
</style>
HTML
<div class="qw-list"> <ul> <li>Electrician in Kent</li> <li>Electrician in Canterbury</li> <li>Electrician in Dover</li> <li>Electrician in Ashford</li> </ul> </div>
Horizontal List / Menu (Simple)
CSS
<style type="text/css">
ul.qw-divmenu {
width: 75%;
margin: 0 auto;
padding: 0;
list-style: none;
}
ul.qw-divmenu li {
display: inline-block;
}
</style>
HTML
<ul class="qw-divmenu"> <li>Electrician in Kent</li> <li>Electrician in Canterbury</li> <li>Electrician in Dover</li> <li>Electrician in Ashford</li> </ul>
Ordered and Un-Ordered List Method <li>
I came across this method at WebFusion where they took a clever method for making list with images by using ordered and unoredered lists and replacing the bullet point wiht an image.
So this method will requires some html code and some CSS code. The CSS code could be inline if you needed.
- Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
- Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
CSS
ul.icon_list {
list-style: none;
}
.icon_list li {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 18px;
margin-left: 0px;
}
.medium .customised {
/*background-position: 0px -4695px;*/
}
.medium .flexible {
/*background-position: 0px -4895px;*/
}
.icon_list.medium li {
padding-left: 60px;
background-color: transparent;
background-image: url("images/modules/498/small-icons/television_32.png");
background-repeat: no-repeat;
background-attachment: scroll;
/*background-position: 0px 5px;*/
background-clip: border-box;
background-origin: padding-box;
background-size: auto auto;
}
This CSS code utilises image sprites but can easily be adapted to use normal images
HTML
<ul class="icon_list medium green"> <li class="customised"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </li> <li class="flexible"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </li> </ul>
Using Icons as bullet points
-
Address: 198 Example street, Suite 7s new York, NY 10013
-
Phone: 112 345 6798
-
Email: example@email.com
CSS
.fu-list li {
clear: both;
margin: 15px 0 0;
padding-bottom: 0;
list-style-type: none;
list-style-position: outside;
}
.fu-list .fu-icon-wrapper {
width: 20px;
height: auto;
line-height: 24px;
margin: 1px 10px 0 0;
z-index: 9;
text-align: center; /* evens all the icons up */
float: left;
}
.fu-list .fu-icon-wrapper i[class*="fa"] {
font-size: 18px;
display: block !important;
color: #000;
}
.fu-list .fu-content {
overflow: hidden; /* this prevents the text flowing under the icon */
}
.fu-list .fu-content p {
padding: 0;
margin: 0;
}
HTML
<ul class="fu-list"> <li> <div class="fu-icon-wrapper"><i class="fa fa-map-marker"></i></div> <div class="fu-content"><p>Address: 198 Example street, Suite 7s new York, NY 10013</p></div> </li> <li> <div class="fu-icon-wrapper"><i class="fa fa-mobile"></i></div> <div class="fu-content"><p>Phone: 112 345 6798</p></div> </li> <li> <div class="fu-icon-wrapper"><i class="fa fa-envelope"></i></div> <div class="fu-content"><p>Email: <a href="mailto:example@email.com">example@email.com</a></p></div> </li> </ul> <div style="clear: both;"> </div>
Notes
- This requires that you have FontAwesome installed
- This also employs a different method for making a list
Product List with Manual Icons
This is a really nice solution to having icons in a list.
- Product List Title
- Example Product 1
- Example Product 2
- Example Product 3
- Example Product 4
- Example Product 5
CSS
.product-list {
font-family: wf_segoe-ui_normal, 'Segoe UI', Segoe, 'Segoe WP', Tahoma, Verdana, Arial, sans-serif;
font-size: 100%;
}
.product-list ul {
list-style: none;
list-style-type: none;
margin: 0;
padding: 0;
}
.product-list li {
margin: 0;
padding: 0;
line-height: 1.25;
display: block;
margin: 0 0 0.75em;
font-size: 1em;
}
.product-list li.heading {
font-size: 1em;
font-weight: normal;
margin-bottom: 0.65em;
}
.product-list .product-link {
}
.product-list li a {
color: #1A1A1A;
font-size: 0.9em;
font-size: 1em;
cursor: pointer;
text-decoration: none;
height: 10px;
vertical-align: top;
}
.product-list li img {
display: inline-block;
height: 26px;
width: 26px;
margin-bottom: -0.45em;
margin-right: 10px;
max-width: 100%;
border: none;
}
.product-list li img.product-left {
float: left;
}
@screen and (min-width: 540px;) {
.product-list ul:first-child {
margin-top: 0em;
}
}
HTML
<div class="product-list"> <ul> <li class="heading">Product List Title</li> <li><a target="_self" class="product-link" href="http://quantumwarp.com/">Example Product 1<img src="/images/modules/498/medium-icons/city-and-guilds-nptc.jpg" class="product-image product-left" alt="logo"></a></li> <li><a target="_self" class="product-link" href="http://quantumwarp.com/">Example Product 2<img src="/images/modules/498/medium-icons/city-and-guilds-nptc.jpg" class="product-image product-left" alt="logo"></a></li> <li><a target="_self" class="product-link" href="http://quantumwarp.com/">Example Product 3<img src="/images/modules/498/medium-icons/city-and-guilds-nptc.jpg" class="product-image product-left" alt="logo"></a></li> <li><a target="_self" class="product-link" href="http://quantumwarp.com/">Example Product 4<img src="/images/modules/498/medium-icons/city-and-guilds-nptc.jpg" class="product-image product-left" alt="logo"></a></li> <li><a target="_self" class="product-link" href="http://quantumwarp.com/">Example Product 5<img src="/images/modules/498/medium-icons/city-and-guilds-nptc.jpg" class="product-image product-left" alt="logo"></a></li> </ul> </div>