Items filtered by date: December 2014
Embed an Image in your Outlook Email Signature
Problem
Why do i need this article? Can you not just create an email signature in outlook and add images in its own editor? Yes and No!
You can create signatures with images using outlooks signature editor but it does not always work correctly. The image might appear to be embeded but when the recipient receives the email, the image in the signature is not present.
The recipients email client can also have a bearing on whether it appears correctely at the other end, also the editor you are using in outlook to edit emails might also have an effect, as you know you can edit emails in outlook's Basic Editor or you can use Word which forces emails to be in Rich Text Format (RTF)
If your email signature is working correctely you do not need to do anything, this is for the occassions when it does not, most likely this is just with older version of outlook. I know outlook 2003 has this issue sometimes.
Solution
My solution is to create a manually crafted email in HTML and then install this into outlook. The images in the signature have had their locations manually specified. Using this method forces outlook to properly embed images in the signature. You can edit the signature in outlook but you can never edit the image in outlook because it mangles the code and then the image becomes attached rather than embedded, you will always have to edit the image code manually in the .htm file.
The Code
This is my sample email signature that can be aeasily modified for your needs via the .htm or in outlook itself (not the image though)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Dynamic Email Signature</title>
<meta http-equiv=Content-Type content="text/html; charset=windows-1252">
<meta content="MSHTML 6.00.6000.16705" name=GENERATOR>
<style type="text/css">
.signature-style {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
}
</style>
</head>
<body>
<div class="signature-style">
<p>
<strong>Joe Bloggs<br>
<strong>Marketing Assistant</strong></strong><br>
<strong>Tel:</strong> 01772 1234569<br>
Twitter: <a href="http://twitter.com/twitter">My Twitter Feed</a><br>
Facebook: <a href="http://www.facebook.com/facebook">My Facebook Page</a><br>
<br>
QuantumWarp<br>
Rocky Lane<br>
Manchester <br>
MA1 1QW<br>
<br>
<strong>Box Office:</strong> 01772 123456<br>
<a href="http://quantumwarp.com/" title="QuantumWarp">QuantumWarp.com</a>
</p>
<p>
<a href="http://quantumwarp.com/"><img src="/./dynamic_files/emailsignature.jpg"></a><br>
</p>
<p><em>QuantumWarp, Rocky Lane, Manchester, Lancashire MA1 1QW Company Registered No: 1234567 (England)</em></p>
</div>
</body>
</html>
NB:
- you can view the signature by opening the dynamic.htm in a web browser
- /./dynamic_files should not have the extra / in it, there is a fault with the way the code is stored in the database. should be ./dynamic_files
The Image
Create a folder called dynamic_files and add the image you want to use in to it.
Install the Signature and Image into Outlook
This method will show you how to create an email signature from scratch. If you already have a corporate email it should be fairly easy for you to modify my example signature into your corporate colours and details etc..
NB: You will be required to visit everyones machine to create their dynamic email signature once.
- if you have no signatures at all, you need to create a dummy/blank signature in outlook. This creates the folders where signatures are stored.
- Place your modified signature dynamic.htm and the image folder dynamic_files in the following folder.
Win7 - C:\Users\{user}\AppData\Roaming\Microsoft\Signatures - Open Outlook
- Edit the signature if required. i.e. Alter users name and phone numbers. (do not alter or edit the image in outlook)
Other Resource Identifiers
You can use several different ways to reference images in your email signature
- src="\\server\Shared Files\Marketing\emailsignature.jpg"
- src="file://///server/Shared Files/Marketing/emailsignature.jpg"
There might be more that I have not added.
Outlook 2007/2010/2013 and Newer
To be embed images in these version of outlook requires a registry change. By default outlook disables the embedding of images because there is a thought that you should be using cloud resources and links.
Conclusion
This method is quite robust and once set should keep working and your signatures will always correctly show the image in your outlook and in the recipients client.
Notes
- Updating the Signature Image location - as mentioned earlier you will need to edit the location manually in the dynamic.htm file in the signatures folder, but when you have done this you should delete the related signature files i.e. dynamic.txt and dynamic.rtf, outlook will recreate these from the updated .htm file when required.
- You can add multiple images using this method
Dynamic Email Signature in Outlook
Problem
Do you run a small business, a theatre perhaps where all of your staff have the latest show in their signature? Do you need to go around everyones PC to change this signature everytime the shows changes, then this article is for you.
Solution
I will show you how to create a 'Dynamic' email signature. Well part of it anyway. My solution is that you have all of the show details in an image, the phone and contact number just like you would on a website banner and embed this image in your signature. This image is located on the server and all you have to do to update everyones email signature/banner is to change this image on the server and have you staff close and open outlook to update to the latest image.
Obviously there is some confifuration required to set up the signature in outlook and it must be done in a specific way and this is where these instructions come in to their own
Instructions
NB: you need a server or PC that you can share this image out publicly
This method works by having outlook download an image from the server and have outlook embed it. You cannot just add an image into an email signature because outlook alters the assets location before embedding it and will create a static image, but by creating the code directely you bypass outlook's code sanitisation and as a consequence the image is always dynamically loaded from the server before embedding (download once per outlook session).
Server
- create a banner you want
- create a shared folder on your server (with appropriate permissions if you want)
\\server\Shared Files\Marketing\ - copy your banner to that location which gives the following available asset
\\server\Shared Files\Marketing\emailsignature.jpg
Create the Signature
You need to create a signature template to use for your signature. The following code is a great example of a simple email signature. You can edit this in either a text file or a html editor as long as it does not mangle the code. You might like to experiment. You will note that you can use in-line CSS to style items, you can also style the signature with outlook when the signature installed but it can make a mess of the code. The other thing to note is the image location for the banner, and this is the key to making this whole exercise working. It can never be altered with outlook, if you ever want to change this you will need to alter the code by directly editing the .htm file.
- You need to save the code below as dynamic.htm (or a suitable filename *.htm)
NB: Outlook will create the other versions of the email signature files (ie .txt and .rtf) when required - Alter the file appropriately (ie change names, image location, phone numbers)
- Save the file
The Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Dynamic Email Signature</title>
<meta http-equiv=Content-Type content="text/html; charset=windows-1252">
<meta content="MSHTML 6.00.6000.16705" name=GENERATOR>
<style type="text/css">
.signature-style {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
}
</style>
</head>
<body>
<div class="signature-style">
<p>
<strong>Joe Bloggs<br>
<strong>Marketing Assistant</strong></strong><br>
<strong>Tel:</strong> 01772 1234569<br>
Twitter: <a href="http://twitter.com/twitter">My Twitter Feed</a><br>
Facebook: <a href="http://www.facebook.com/facebook">My Facebook Page</a><br>
<br>
QuantumWarp<br>
Rocky Lane<br>
Manchester <br>
MA1 1QW<br>
<br>
<strong>Box Office:</strong> 01772 123456<br>
<a href="http://quantumwarp.com/" title="QuantumWarp">QuantumWarp.com</a>
</p>
<p>
<a href="http://quantumwarp.com/"><img src="/\\server\Shared Files\Marketing\emailsignature.jpg"></a><br>
</p>
<p><em>QuantumWarp, Rocky Lane, Manchester, Lancashire MA1 1QW Company Registered No: 1234567 (England)</em></p>
</div>
</body>
</html>
NB:
- you can view the signature by opening the dynamic.htm in a web browser
- /\\server should not have the extra / in it, there is a fault with the way the code is stored in the database. should be \\server
Install the Signature into Outlook
This method will show you how to create an email signature from scratch. If you already have a corporate email it should be fairly easy for you to modify my example signature into your corporate colours and details etc..
NB: You will be required to visit everyones machine to create their dynamic email signature once.
- if you have no signatures at all, you need to create a dummy/blank signature in outlook. This creates the folders where signatures are stored.
- Place your modified signature in the following folder.
Win7 - C:\Users\{user}\AppData\Roaming\Microsoft\Signatures - Open Outlook
- Edit the signature if required. i.e. Alter users name and phone numbers. (do not alter or edit the image)
Other Resource Identifiers
You can use several different ways to reference images in your email signature
- src="\\server\Shared Files\Marketing\emailsignature.jpg"
- src="file://///server/Shared Files/Marketing/emailsignature.jpg"
There might be more that I have not added.
Outlook 2007/2010/2013 and Newer
To be embed images in these version of outlook requires a registry change. By default outlook disables the embedding of images because there is a thought that you should be using cloud resources and links.
Conclusion
You have now created a system that allows you to have a Dynamic Email Signature for all of your staff and all you have to do is change the banner to reflect you new show or event.
NB: Remember that users have to logout of outlook and then back in again for changes in the banner to be reflected in the Signature.
Notes
- You will notice i have used a local server ( \\server ) for the storage of the image. You can use a webserver but this might cause issues with caching and security. ie Outlook might not let you use the link and also it might not embed the image because it sees it as a web resource. I have not tried this, but if you must, it might be worth a go.
- the link on the banner cannot be changed dynamically but with a bit of clever thinking you can have the next best thing.
- What i would do is put a unique URL http://quantumwarp.com/currentshow and have it always link toan article on the current show
- or you could use mod_rewrite and use it to redirect http://quantumwarp.com/abcde12345 to a specified page. With mod_rewrite you can change the URL on the fly.
- Updating the Signature Image location - as mentioned earlier you will need to edit the location manually in the dynamic.htm file in the signatures folder, but when you have done this you should delete the related signature files i.e. dynamic.txt and dynamic.rtf, outlook will recreate these from the updated .htm file when required.
- You can add multiple dynamic images using this method
Chaining Multiple Javascript Functions
Here i will show you how to chain multiple javascript functions (chained functions). This is not as simple as it seems because the functions can be dependant on the previous, they can run out of order or they can run independantly.
There are 3 ways of chaining functions (excluding operators).
- stacked functions in a function
function combinedFunction { runFunction1 (); runFunction1 (); runFunction1 (); }You can use operators here but the main purpose of this method is to allow you to declare only 1 script in your HTML and arrange the functions you want running neatly.
- Basic chain - in a submit button
<form method="post" id="contact_form" onsubmit="runFunction1(); runFunction2(); runFunction3();">
See notes on operators. it is particularly important when using a submit button
- Function in function, chain
function runFunction1 { // Do some stuff runFunction2(); }you can keep expanding the number of functions you have and also can apply logic to them
Operators - Submit button
This section will focus on the different outcomes of using operators for the submit button with functions. It must be noted that most of these rules will apply to other Javascript circumstances.
- || or
- & and with no dependancy
- && and but previous function must return true (or not false>)
- !! (runFunction1() && runFunction2()) - check this, it should return a boolean based on all results
- to prevent the submit button functioning, you must add return false; . Iit must be at the end and seperate
- if you use && the function to the left must run true otherwise the next will not run
- & means 'and' but does not require the prior function to be run successfully, might be the same as function bob(); function builder();
- if a function returns false, the submit button will not work. This might be overidden in a non successive chain when one of the subsequent functions returns true
- you can return false / true / return variable / text / nothing (not recommended and depends on your code
- onClick and onSubmit are different. onSubmit can be fired by clicking or by pressing enter.
Examples
Example 1
<form method="post" id="contact_form" onsubmit="runFunction1(); runFunction2(); runFunction3();">
- the functions are seperated by a semi-colon.
- All of these functions will be run, from left to right
- and none of them will be depandant on the other to run or return true.
- the submit button will activate
Example 2
<form method="post" id="contact_form" onsubmit="return myFunction();">
- if myFunction returns false, the submit button will not activate (check this)
- if the myFunction returns true, the submit button will activate
Example 3
<form method="post" id="contact_form" onsubmit="return validator1() && validator2()">
- the function validator2() will not run unless validator1() returns true
- if validator2() returns false, the submit button will not activate (i need to check this)
Example 4
<form method="post" id="contact_form" onsubmit="validateCaptchaCode() && postForm(); return false;">
- postFrom() will not run unless validateCaptchaCode() returns true
- the submit button will not activate because of return false; , irrespective of the return value of postForm()
How to prevent buttons from submitting forms
- Add
type="button"so the return from Javascript works. - Adding
return false;adds an extra method, it prevents default action if there is an exception in your Javascript code. This is toptional. - javascript - How to prevent buttons from submitting forms - Stack Overflow
- Q:
- In the following page, with Firefox the remove button submits the form, but the add button does not.
- How do I prevent the remove button from submitting the form?
- A:
- You're using an HTML5 button element. Remember the reason is this button has a default behaviour of submit, as stated in the W3 specification as seen here: W3C HTML5 Button
- So you need to specify its type explicitly:
<button type="button">Button</button>
- Q:
- html - Keep button from submitting form Javascript - Stack Overflow
- How to Prevent Buttons from Submitting Forms in HTML? - GeeksforGeeks - We will use different approaches for preventing buttons from submitting forms. Disable the submit button and Using the onsubmit Method.
My AJAX Example (xmlhttp.onreadystatechange)
I have tried for hours to get this script to work and i have come to the conclusion, it does not do want i want.
These scripts are asyncronous, which i think mean they are running all the time. My captcha code that i was trying to validate using the code by performing a lookup on a php file (validatecaptcha.php) was resonable successful.
My code
<!-- validate the code via ajax using validate.php to perform the validation -->
<script>
var interval;
var result = null;
// function myFunction(response){result = response;}
// Alert the value of result and clear interval
function getResult()
{
// once we get a result, turn interval off.
if(result != null)
{
interval = clearInterval(interval);
alert(result); // we're clearly out of the onreadystatechange scope with our result.
}
}
function validateCaptchaCode() {
result = null;
enteredCaptchaCode = document.getElementById('ct_captcha').value;
var xmlhttp = new XMLHttpRequest();
// actually POST the data (GET is slighlty different syntax)
xmlhttp.open("POST", 'handlers/validatecaptcha.php', true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("enteredCaptchaCode=" + enteredCaptchaCode);
// http://www.w3schools.com/php/php_ajax_php.asp
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
// document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
// myFunction();
//myFunction(xmlhttp.responseText);
/*if (xmlhttp.responseText == 'true') {
alert("Stuff Working");
} else {
alert("Stuff Not Working");
}*/
result = xmlhttp.responseText;
}
}
// every second (1000 milliseconds) run getResult()
interval = setInterval("getResult()", 1000);
// this statement does not always work because xmlhttp.responseText is sometimes empty
if (result == 'true'){alert('true code'); return true;} else {alert('false code'); return false;}
}
</script>
What Worked
- the actual loading of data from another page based on a POSTed variable
- validatecaptcha.php worked well, i posted a captcha to it and it returned 'true' or 'false' depending if the captcha was correct. I utilised $_SESSION with the rest of the captcha code, securimage.
- within the 'if section' (xmlhttp.readyState == 4 && xmlhttp.status == 200), you can easily access xmlhttp.responseText; you could also use the following and they would all work as expected inside the function. however you cannot get the response out of the function. you can do functions inside but not pass this information out to allow a condition based 'true / false' return. You can pass it to another function but again it is like a floated element outside of the normal DOM
- document.getElementById("txtHint").innerHTML = xmlhttp.responseText; - you can alter text on the page easily with this.
- myFunction();
- myFunction(xmlhttp.responseText)
- if (xmlhttp.responseText == 'true')........ with alerts on screen.
- result = xmlhttp.responseText;
- my if statement logic at the end for returning the validateCaptcha() works when it has the correct variables supplied to it
What doesnt work
- As mentioned already, you cannot pass information outside of the function. You can pass the information to another function but this function is also outside the normal flow
- you can pass the information to a global var (ie var result) but this seems out of sequence so you cannot utilise it for you own code. ie the function 'true / false' closing statement. It appears to maintain what was set in the global variable on the last cycle (i am using a session)
- this code also seems to run after the main function is completed, perhaps this is the asyncronious nature of it.
What would i use this for?
A good example is live updates for an autofill text box (PHP - AJAX and PHP - w3schools). This sort of coding should be considered a process unto itselfs.
You cannot use this for validating stuff if function exit state (true / false) depends on it.
You can use this for loading external content that will change the content on your page, like adding notifications. This will be independant of other javascript on the page.
Some Other Scripts
This is the one where i got the interval idea.
It is worth a read of this thread. Store responseText value to a global variable in JavaScript JavaScript and AJAX forum at WebmasterWorld . The interval setting might not make any difference in this example where i tried to use it to perfom validations. I think that all this does is pass the alert output down a function chain. Remember that httpobj.onreadystatechange occurs outside the normal Javascript runtime because it is asyncronous (run at the same time!).
http://www.webmasterworld.com/javascript/3952568.htm
<script>
var interval;
var result = null; // Set this accordingly based on various return values from your PHP file
httpobj = new XMLHttpRequest(); //FF for now
httpobj.open('get', 'file.php', true);
httpobj.send(null);
httpobj.onreadystatechange = function()
{
if (httpobj.readyState == 4 && httpobj.status == 200)
{
result = httpobj.responseText;
}
}
interval = setInterval("getResult()", 1000);
// Alert the value of result and clear interval
function getResult()
{
// once we get a result, turn interval off.
if(result != null)
{
interval = clearInterval(interval);
alert(result); // we're clearly out of the onreadystatechange scope with our result.
}
}
</script>
This explains the issues i have had with this method and why
Return xmlhttp.responseText From AJAX Function - The SitePoint Forums
"The onreadystatechange function executes long after the other parts of the script have finished, so there is nothing to return anything to. Instead, you can pass the value to another function."
Verify if a function returns true or false
This useful bit of code allows you to run a function and see if it returns true or false.
function testFunction(){
if (validateCaptchaCode() == true) {
alert('true');
} else {
alert('false');}
return;
}
My HTML Notes
Display Types for elements
- display: inline - removes the cariage return from the begining and end of a div
- display: inline-block - maintains its block properties while staying inline
- when using 'block mode' they need their width and height for aligning
- If you absoultely must use a <div> as an inline element, you can set the following in your stylesheet, off course that essentially makes the <div> a <span>.
div {display: inline;}
<IMG>
http://www.w3schools.com/TAGS/att_img_align.asp
The <img> element is an inline element (it does not insert a new line on a page), meaning that text and other elements can wrap around it. Therefore, it can be useful to specify the alignment of the image according to surrounding elements.
<SPAN>
- <span> is inline, no new line, no fixed size, cannot give it fixed size parameters except width?
- <span> the inline version of <div>.
- it is manily used for assigning styles to groups or elements because it has no size.
<P>
<p> is block element, new line, no wrapping, cannot go inside a paragraph, can go inside a <div>, its default size is 100% wide
<DIV>
- <div> is block element, new line, no wrapping (oppposite of span), cannot go inside a paragraph, can go inside a <div>, its default size is 100% wide
- divs are block elements and unless otherwise stated will be 100% with a CR at the begining and one at the end
To center a div in its parent
the key to getting it to work is it must have a defined width (otherwise techincally the width is defined as 100%)
<div style="width: 75%; margin: 0 auto;">center</div>
Center an Image
this will center the image because the <p> is 100% wide
<p style="text-align: center;"> <img style="margin: 10px;" src="/images/pages/home/me-and-holly-on-chisel-beach.jpg" alt="me-and-holly-on-chisel-beach" /> </p>
text-align:center; is still valid - http://www.w3schools.com/cssref/pr_text_text-align.asp - this is set in the parent element and affects the child element.
How to center an item - the modern way
{display: block; margin-left: auto; margin-right: auto}
{display: block; margin: 0 auto} /* this is prefered option */
- The centering will not work unless the element has a defined width. margin: 0 auto; needs a fixed width to work, or %
- This allows the browser to dynamically work out where the element should be and then sets the margin to cause that element to center. It works exactly like text-align: center; except, i think works on more stuff. Also this is applied on the element it is added to, not the child.
- This statement can also vertically center items, but remember it needs to have a specified height to work.
Floating
Floating is a new way of aliging stuff on a page. Floating works like the tetris game except that the blocks float upwards and you can only say wheather the blocks float to the left or the right. A floated block will float up as far as it can (ie if their is room) and then push as far as it can to the side you chose.
NB:
- when you float an element, it becomes a block
- Once a float is set it needs to be cleared.
Types of Clearing
- Clearing is when you have had enough of it you put a line under it and this create a new ceiling where any new float will hit as though it was the top of the browser.
- There are 3 types of clearing left/right/both. Imagine this ceiling can be sepearated in to 2 halfs. This option allows you to create a new ceiling on either side of the browser or the more common clear:both which does boths sides.
- There is only 1 type of clearing with 3 options left/right/both but you can do it in several ways, these are the common ways of clearing
<br style="clear: both;" /> <!-- to be put inside block elements such as <p> & <div> --> <br style="clear: both;"> <!-- to be put inside block elements such as <p> & <div> --> <div style="clear: both;"> </div> <!-- prevents the element being eaten by wysiwyg --> <p style="clear: both;"> </p> <!-- prevents the element being eaten by wysiwyg -->
Notes about <br>, wysiwyg and clearing
- putting <br style="clear: both;" /> at the end of the paragrapgh causes jce to remove it because it is an empty element.
so use <br style="clear: both;"> the escaped space at the end prevents wysiwyg editors stripping the last tag because it is not empty - only block elements can clear floats
- parent with only child floats will cause it to collapse/hide - fix = overflow: auto
Images with Titles
The following are examples on how to put a titlesunderneath or on the side with images vertically or horizontally aligned. This sometimes does not go as easily as planned so these examples should cover all scenarios.
Horizontal
Inline - Horizontal lists with text centered underneath the image.
The whole logo block is centered. do i need all the centering statements. these items will stay centered and will eventually stack vertically when squashed.
<div style="text-align: center;">
<div style="display: inline-block; vertical-align: bottom; margin: 5px;">
<p style="text-align: center;">
<a href="http://www.worcester-bosch.co.uk/homeowner/boilers/find-an-installer"><img src="/images/modules/worcester-bosch-accredited-installer/worcester-bosch-registered-installer.jpg" alt="worcester-bosch-registered-installer" /></a>
</p>
<ul style="text-align: center; list-style-image: url('/images/common/tick.png');">
<li>Worcester Bosch Accredited Installer</li>
</ul>
</div>
<div style="display: inline-block; vertical-align: bottom; margin: 5px; text-align: center;">
<p style="text-align: center;"><img src="/images/modules/worcester-bosch-accredited-installer/7-year-gurantee.jpg" alt="7-year-gurantee" /></p>
<ul style="text-align: center; list-style-image: url('/images/common/tick.png');">
<li>7 Year Guarantee Available</li>
</ul>
</div>
<div style="display: inline-block; vertical-align: bottom; margin: 5px;">
<p style="text-align: center;"><a href="http://www.which.co.uk/"><img src="/images/modules/worcester-bosch-accredited-installer/best-buy-which.jpg" alt="best-buy-which" width="200" height="117" /></a></p>
<ul style="text-align: center; list-style-image: url('/images/common/tick.png');">
<li>Which Best Buy 2013</li>
</ul>
</div>
</div>
All the "text-align: center" declarations are not required (as shown below) because it seems to affect all child elements, thus only 1 is required
<div style="text-align: center;">
<div style="display: inline-block; vertical-align: bottom; margin: 5px;">
<p>
<a href="http://www.worcester-bosch.co.uk/homeowner/boilers/find-an-installer"><img src="/images/modules/worcester-bosch-accredited-installer/worcester-bosch-registered-installer.jpg" alt="worcester-bosch-registered-installer" /></a>
</p>
<ul style="list-style-image: url('/images/common/tick.png');">
<li>Worcester Bosch Accredited Installer</li>
</ul>
</div>
<div style="display: inline-block; vertical-align: bottom; margin: 5px;">
<p"><img src="/images/modules/worcester-bosch-accredited-installer/7-year-gurantee.jpg" alt="7-year-gurantee" /></p>
<ul style="list-style-image: url('/images/common/tick.png');">
<li>7 Year Guarantee Available</li>
</ul>
</div>
<div style="display: inline-block; vertical-align: bottom; margin: 5px;">
<p><a href="http://www.which.co.uk/"><img src="/images/modules/worcester-bosch-accredited-installer/best-buy-which.jpg" alt="best-buy-which" width="200" height="117" /></a></p>
<ul style="list-style-image: url('/images/common/tick.png');">
<li>Which Best Buy 2013</li>
</ul>
</div>
</div>
Text Under Image - Horizontal and Centered
<div style="text-align: center;"> <div style="display: inline-block; vertical-align: bottom;"> <div style="display: block;"> <a href="http://www.gassaferegister.co.uk/" target="_blank" title="Gas Safe Registered Number: 562488"><img style="margin: 5px;" src="/images/modules/logos/gas-safe-white.gif" alt="" /></a> </div> <div style="display: block;"> <a href="http://www.gassaferegister.co.uk/" target="_blank">Gas Safe No: 562488</a> </div> </div> <!-- These are just logos with no text underneath --> <a href="http://www.cityandguilds.com/" target="_blank"><img style="margin: 5px;" src="/images/modules/logos/cityandguilds-logo-qualifications.png" alt="" /></a> <a href="http://www.vaillant.co.uk/" target="_blank" title="Vaillant Accredited installer"><img style="margin: 5px;" src="/images/modules/logos/vaillant_logo.png" alt="" /></a> <a href="http://www.ideal-standard.co.uk/" target="_blank"> <img style="margin: 5px;" src="/images/modules/logos/ideal-standard.jpg" alt="" /></a> </div>
The Basic Method
- works but sometimes the styling gets wrong
<div> <div><img src="/images/pages/home/group-dogs-1.jpg" alt="group-dogs-1" /></div> <div>If you’re working full time hours we can call at lunchtime and treat your dog to over an hours'.</div> </div>
Text Completely Below and Image ie cleared without floats
- Put the image in its own paragraph, this adds a line break into it thus starting the text completely below the image.
<p><img src="/images/pages/home/group-dogs-1.jpg" alt="group-dogs-1" /></p> <p>If you’re working full time hours we can call at lunchtime and treat your dog to over an hours'.</p> or <p> <img src="http://designingmedia.com/tonic.jpg" alt="WordPress Theme"><br> This is some content </p>
Horizontal List - with one image with a link centered underneath it.
<div style="text-align: center;"> <div style="display: inline-block; vertical-align: bottom;"> <div style="display: block;"><a href="http://www.gassaferegister.co.uk/registersearch/Engineers.aspx?businessid=127148&centreid=112514&returnurl=../FindBusiness.aspx&returnname=Find%20a%20business&reload=true" target="_blank" title="Gas Safe Registered Number: 562488"> <img style="margin: 5px;" src="/images/modules/logos/gas-safe-white.gif" alt="" /></a></div> <div style="display: block;"><a href="http://www.gassaferegister.co.uk/registersearch/Engineers.aspx?businessid=127148&centreid=112514&returnurl=../FindBusiness.aspx&returnname=Find%20a%20business&reload=true" target="_blank">Gas Safe No: 562488</a></div> </div> <a href="http://www.cityandguilds.com/" target="_blank"><img style="margin: 5px;" src="/images/modules/logos/cityandguilds-logo-qualifications.png" alt="" /></a> <a href="http://www.vaillant.co.uk/" target="_blank" title="Vaillant Accredited installer"> <img style="margin: 5px;" src="/images/modules/logos/vaillant_logo.png" alt="" /></a> <a href="http://www.ideal-standard.co.uk/" target="_blank"><img style="margin: 5px;" src="/images/modules/logos/ideal-standard.jpg" alt="" /></a> </div>
Inline Horizontally List - margin auto 0
I have not testest this method but you can see the 'margin: 0 auto;' statement is a child on the main <div>. The 'margin: 0 auto;' works on the element it is set on. The other thing to note is that the dive with the 'margin: 0 auto;' statement needs to have a defined width. You can use px, width, Max-width etc.. as long as a width is set. The reason for this is you cann center an item with no width or if the width is 100%.
<div style="margin: 0 auto; width: 80%;">
<div style="display: inline-block; vertical-align: bottom; margin: 5px;">
<p>
<a href="http://www.worcester-bosch.co.uk/homeowner/boilers/find-an-installer"><img src="/images/modules/worcester-bosch-accredited-installer/worcester-bosch-registered-installer.jpg" alt="worcester-bosch-registered-installer" /></a>
</p>
<ul style="list-style-image: url('/images/common/tick.png');">
<li>Worcester Bosch Accredited Installer</li>
</ul>
</div>
<div style="display: inline-block; vertical-align: bottom; margin: 5px;">
<p"><img src="/images/modules/worcester-bosch-accredited-installer/7-year-gurantee.jpg" alt="7-year-gurantee" /></p>
<ul style="list-style-image: url('/images/common/tick.png');">
<li>7 Year Guarantee Available</li>
</ul>
</div>
<div style="display: inline-block; vertical-align: bottom; margin: 5px;">
<p><a href="http://www.which.co.uk/"><img src="/images/modules/worcester-bosch-accredited-installer/best-buy-which.jpg" alt="best-buy-which" width="200" height="117" /></a></p>
<ul style="list-style-image: url('/images/common/tick.png');">
<li>Which Best Buy 2013</li>
</ul>
</div>
</div>
Float Left
This will stack the items either vertically (not level if images are different sizes) or horizontally while keeping the bottoms level (vertically aligned bottom) because floated images go up
<div style="float:left; vertical-align: bottom; margin: 5px;">
<p style="text-align: center;">
<a href="http://www.worcester-bosch.co.uk/homeowner/boilers/find-an-installer"><img src="/images/modules/worcester-bosch-accredited-installer/worcester-bosch-registered-installer.jpg" alt="worcester-bosch-registered-installer" /></a>
</p>
<ul style="text-align: center; list-style-image: url('/images/common/tick.png');">
<li>Worcester Bosch Accredited Installer</li>
</ul>
</div>
<div style="float:left; vertical-align: bottom; margin: 5px;">
<p style="text-align: center;"><img src="/images/modules/worcester-bosch-accredited-installer/7-year-gurantee.jpg" alt="7-year-gurantee" /></p>
<ul style="text-align: center; list-style-image: url('/images/common/tick.png');">
<li>7 Year Guarantee Available</li>
</ul>
</div>
<div style="float:left; vertical-align: bottom; margin: 5px;">
<p style="text-align: center;"><a href="http://www.which.co.uk/"><img src="/images/modules/worcester-bosch-accredited-installer/best-buy-which.jpg" alt="best-buy-which" width="200" height="117" /></a></p>
<ul style="text-align: center; list-style-image: url('/images/common/tick.png');">
<li>Which Best Buy 2013</li>
</ul>
</div>
Vertical
margin 0 auto - vertically stacked and centered
If you dont want to use <li> method, you can replace this with a <div> or <p>
<div style="margin: 0 auto; padding: 5px;">
<p style="text-align: center;">
<a href="http://www.worcester-bosch.co.uk/homeowner/boilers/find-an-installer"><img src="/images/modules/worcester-bosch-accredited-installer/worcester-bosch-registered-installer.jpg" alt="worcester-bosch-registered-installer" /></a>
</p>
<ul style="text-align: center; list-style-image: url('/images/common/tick.png');">
<li>Worcester Bosch Accredited Installer</li>
</ul>
</div>
<div style="margin: 0 auto; padding: 5px;">
<p style="text-align: center;"><img src="/images/modules/worcester-bosch-accredited-installer/7-year-gurantee.jpg" alt="7-year-gurantee" /></p>
<ul style="text-align: center; list-style-image: url('/images/common/tick.png');">
<li>7 Year Guarantee Available</li>
</ul>
</div>
<div style="margin: 0 auto; padding: 5px;">
<p style="text-align: center;"><a href="http://www.which.co.uk/"><img src="/images/modules/worcester-bosch-accredited-installer/best-buy-which.jpg" alt="best-buy-which" width="200" height="117" /></a></p>
<ul style="text-align: center; list-style-image: url('/images/common/tick.png');">
<li>Which Best Buy 2013</li>
</ul>
</div>
Text Under Image - Vertically Stacked
<div style="float: left; width: 150px; margin-right: 40px;"> <div> <div style="display: inline-block;"><a href="http://www.hormann.co.uk" target="_blank"><img src="/../images/hormann.gif" alt="image 1" /></a></div> <h5 style="text-align: center;">Hormann</h5> </div> <div> <div style="display: inline-block;"><a href="http://www.gliderol.co.uk/" target="_blank"><img src="/../images/gliderol.gif" alt="image 2" /></a></div> <h5 style="text-align: center;">Gliderol</h5> </div> <div> <div style="display: inline-block;"><a href="http://www.domesticrollershutters.co.uk/" target="_blank"><img src="/../images/domestic-rollers-logo.jpg" alt="image 2" /></a></div> <h5 style="text-align: center;">Domestic Rollers</h5> </div> </div>
Side
Images with title on the right side vertically centered
<div> <div style="display: inline-block;"><img src="/images/modules/logo-block/logo-200px-high.png" alt="" /></div> <!-- Method 1 --> <div style="display: inline-block; height: 20px; margin: auto auto;">Method 1</div> <!-- Method 2 --> <div style="display: inline-block; height: 100%;"> <p style="display: block; margin: auto auto;">Method 2</p> </div> </div>
- Method 1 - relies on a defined height
- Method 2 - height is dynamically created by the font
Responsive Information Blocks Lists with no text wrapping
The following examples and layouts use the 'overflow:hidden' feature to prevent text wrapping and to allow nice and neat listings whilst keeping them responsive. The examples all comprise of 2 columns. You can either choose to have trhe image on the right or left without issue.
Consider putting the clear both in the <h2> title rather thatn a seperate <div style="clear: both;"> </div> - This makes it neater and one less line. Not having the <div> at the end also prevents the text getting cycled in <div>'s rather than <p>'s.
Single Paragraph Method
Minimum Code Required for overflow to work
HTML
<div style="overflow: hidden;"> <img style="margin: 10px; float: right;" src="/images/pages/dog-sitting/arnside.jpg" alt="arnside" /> <p style="overflow: hidden; min-width: 180px;">Your dog can stay with us at my home. They will be treated just like a member of our family with</p> </div>
Single Paragaph - <br /> Clear Method
Item/Article list (ie rooms) image on the left, minimum width for the item to prevent content/text block wrapping and splitting lines (responsive)
HTML
<div style="overflow: hidden;"> <img style="margin: 10px; float: left;" src="/images/pages/home/group-dogs-1.jpg" alt="group-dogs-1" /> <p style="overflow: hidden; min-width: 180px;"> If you’re working full time hours we can call at lunchtime and treat your dog to over an hours’ worth of exercise and companionship to break up the day. If the mornings are hectic or your dog is young and just can’t wait then maybe our morning walk is for you. I walk in the afternoon too giving you real flexibility if you work shifts or have a busy afterschool schedule. Walkies works Mon to Fri but book only the days you need. Five days a week or five days a year, once you have registered I’m happy to take your dog even when it’s a last minute emergency. Weekends are by arrangement.<br style="clear: both;" /> </p> </div>
Single Paragaph - <div> Clear Method
Item/Article list (ie rooms) image on the left, minimum width for the item to prevent content/text block wrapping and splitting lines (responsive)
HTML
<div style="overflow: hidden;"> <img style="margin: 10px; float: left;" src="/images/pages/home/group-dogs-1.jpg" alt="group-dogs-1" /> <p style="overflow: hidden; min-width: 180px;"> If you’re working full time hours we can call at lunchtime and treat your dog to over an hours’ worth of exercise and companionship to break up the day. If the mornings are hectic or your dog is young and just can’t wait then maybe our morning walk is for you. I walk in the afternoon too giving you real flexibility if you work shifts or have a busy afterschool schedule. Walkies works Mon to Fri but book only the days you need. Five days a week or five days a year, once you have registered I’m happy to take your dog even when it’s a last minute emergency. Weekends are by arrangement. </p> </div> <div style="clear: both;"> </div>
NB: <p style="overflow: hidden; min-width: 180px;"> can be replaced with <div style="overflow: hidden; min-width: 180px;">. This has the benefits of extra spacing that comes with <p> not being applied. However if you use <div>, text will also need to be encapsulated in a <p>. See the following methods.
More Complex DIV Methods
Single <div> Method
- This only allows for images or single items to be floated to the side
- In the 'text/content' <div> you can put anything you want
HTML
<div style="overflow: hidden;"> <img alt="" src="/images/dog-picture.jpg" style="float:left; margin: 10px;"/> <div style="overflow: hidden; min-width: 180px;"> <h2>This is a Title</h2> <p>This is a paragraph of Text</p> <ul class="list-number-digit digit-brown"> <li>We are located in the heart of historic Branston on the main Lincoln Road.</li> <li>Just 10 minutes South East of Lincoln.</li> <li>We have a large selection of quality Guest Beers, Largers, Bitters, Spirits, Soft drinks and Snacks.</li> <li>We also have a long history of serving the community through a number of local and National Charities.</li> <li>If you have any questions please don't hesitate to call us.</li> </ul> <p>Another Paragraph of text (optional)</p> </div> </div>
Double <div> Method
<li> and content with imageshow on the right, text area has mimimum width to prevent text wrapping (responsive)
- With this you can change the side on which the image floats
- It is also possible to put more in the floated <div> than an image, anything you want.
- In the 'text/content' <div> you can put anything you want
- this is the best method, the most flexible.
NB: in this example i set imageshow to 419px width X 336px height, Theme Slider
HTML
<div style="overflow: hidden;">
<div style="float: right; margin: 10px;">{imageshow sl=1 sc=1 /}</div>
<div style="overflow: hidden; min-width: 180px;">
<h2>This is a Title</h2>
<p>This is a paragraph of Text</p>
<ul class="list-number-digit digit-brown">
<li>We are located in the heart of historic Branston on the main Lincoln Road.</li>
<li>Just 10 minutes South East of Lincoln.</li>
<li>We have a large selection of quality Guest Beers, Largers, Bitters, Spirits, Soft drinks and Snacks.</li>
<li>We also have a long history of serving the community through a number of local and National Charities.</li>
<li>If you have any questions please don't hesitate to call us.</li>
</ul>
<p>Another Paragraph of text (optional)</p>
</div>
</div>
Unsorted Examples
Item/Article list (ie rooms) image on the left
Minimum width for the item to prevent title wrapping and splitting lines (responsive)
http://www.inchrye.co.uk/rooms
HTML
<p>Our Rooms at Inchrye Bed and Breakfast are all well maintained but retain a homely feel so you can enjoy your stay in Inverness like it was your own back garden. We have a wide variety of room sizes to suite all family sizes.</p> <p><img alt="Suite Room with Double Bed and own Sitting Room" class="frame-2" src="/images/rooms/suite-room.jpg" style="float: left; margin-left: 15px; margin-right: 15px;" title="Suite Room with Double Bed and own Sitting Room" /></p> <p style="float: left; min-width: 180px;"><strong>Suite Room with Double Bed and own Sitting Room</strong></p> <div style="clear: both;"> </div>
2 columns thing - easier version (responsive)
HTML - Easy Version
<p><img style="float: left;" src="/images/pages/home/white-scomadi.jpg" alt="white-scomadi" width="327" height="260" /></p> <div style="float: left;"> <p>Turismo Leggera</p> <p> The Turismo Leggera range represents the<br />culmination of 10 years of prototype development.<br />Utilising the experience of Scooter Innovation & PM<br />Tuning Racing Products, Scomadi are aimed at<br />providing a new era in scootering for followers of<br />iconic Italian design.<br />With styling cues taken from the Grand Prix model<br />the goal was to create a "Modern Classic".<br />A machine that allows the true enthusiast to retain<br />classic styling without sacrificing reliability or<br />modern day functionality. The Turismo Leggera 250<br />was initially released as a carbon fibre,10 machine<br />limited edition hand built in the UK.<br />Demand for further machines evolved into another<br />30 handmade 300cc machines with the latest mass<br />production series of Scomadis presented today.<br />The Turismo Leggera range will present a dynamic<br />package for the discerning scooterist available<br />firstly as air cooled 50cc and 125cc engine options<br />with a flagship model 300cc due for mid 2014.<br />The Scomadi TL300 will be equipped with the Piaggio<br />“class leader”: QUASAR- 300, 4 valve, liquid cooled,<br />engine. One of the lightest, most compact, and<br />powerful 300cc motors on the market. Powered by<br />22HP at 7,500 rpm. The TL300 ensures top<br />performance in terms of speed and acceleration with<br />reliability. </p> </div>
HTML - Image on alternating side, float left then float right
http://www.sidescansystems.com/brite-side-scan-system
<p> The system consists of 4 Ultrasonic sensors mounted down the left side fo the vehicle and a warning display mounted in the cab. When the left hand indicator is on the unit will sense the presence of a cyclist, pedestrian or vehicle and give its posistion and range up to 1.5 mtrs. At the same time, a spoken voice warning is played saying "This vehicle is turning left" to warn anyone on the nearside. </p> <p> </p> <p style="text-align: right;"><img alt="Side Scan Kit" class="frame-2" src="/images/side-scan-kit.jpg" style="float: right;" title="Side Scan Kit" /></p> <p style="margin-left: 80px;"><strong>Features</strong></p> <ul class="tick" style="margin-left: 80px;"> <li>4 x Ultrasonic Sensor with 1.5 mtr range</li> <li>In cab warning unit which displays range and position</li> <li>98db Voice Sounder - "This vehicle is turning left"</li> <li>IP68 Waterproof rated</li> <li>12v-24v operation</li> <li>Can be fitted to almost any vehicle</li> <li>Low speed sensing - shuts off at higher speeds</li> </ul> <div style="clear: both;"> </div> <p> </p> <p><img alt="Choice of Sensors" class="frame-2" src="/images/choice-of-sensors.jpg" style="float: left; margin-left: 15px; margin-right: 15px;" title="Choice of Sensors" /></p> <p> <strong>Choice of sensors - Underslung or Flush Mount</strong><br /> (Depending on application) </p> <div style="clear: both;"> </div>
Overflow Notes
These are some notes that i used when creating these code samples.
- for the overflow with image trick to work. the image must not be in the same container as the text, ie the <p>, this must be seperate otherwise you are just enabling overflowing for both of them putting you back to square 1.
- the image and paragraph need to be grouped together in their own container. ie a <div>
- the div needs the overflowing enabled because the div will expand with the text not wrapping
- the <p> containing the text will need overflowing enabled because it too will expand due to the text not wrapping.
- also to stop full on text squashing you should use min-width: 180px;
- correction, only the containing <p>/<div> will need the overflow. but they still need to be grouped together so the browser knows what to overflow
- correction, the overflow: hidden on the primary containing div (ie hold the img and the <p>), its purpose is to allow the whole conatiner to resize. if you just have the text overflow command the text does not wrapp around the image but dissaperas off the side of the browser
- min-width: is the best width for showing text on an iPhone. i worked this out by experimenting
- overflow seems to of been the key - see css - How to make an inline-block element fill the remainder of the line? - Stack Overflow (the example code - http://jsfiddle.net/qx32C/36/)
- The magic of “overflow: hidden” — Articles — Colin Aarts, freelance web developer
- both overflows are inportant, the widths etc can be changed
Vertical and Horizontal lists
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>
Increase PHP and phpMyAdmin Execution Time
Just like PHP (ie php.ini), phpMyAdmin also has its own execution time limit. Why? I dont know.
You are most likely to see an error like the one below:
Fatal error: Maximum execution time of 60 seconds exceeded in C:\xampp\phpmyadmin\libraries\dbi\mysql.dbi.lib.php on line 140
To increase the phpMyAmin execution time, you need to edit the file
Add this line to xampp\phpmyadmin\config.inc.php
$cfg['ExecTimeLimit']=6000;You might also want to change the settings below in the normal php.ini file if you still are getting timeout errors.
And Change xampp\php\php.ini to
post_max_size =750M
upload_max_filesize =750M
max_execution_time =5000
max_input_time =5000
memory_limit =1000MAnd change xampp\mysql\bin\my.ini
max_allowed_packet =200M