Screengrab! 0.95 is a superb Firefox extension developed by Andy Mutton that makes it easy to save a web-page as an image. You can save anything that you can see in a browser window - from a small selection, to a complete page.

The book is beautifully designed and illustrated and leads the reader through the process and concepts of creating a visually compelling presentation. Easy to read sections with insightful case studies from some of the world’s leading brands (Adobe, Hewlett-Packard, Mozilla) help convey the message that you need to create a meaningful relationship between you, your slides and your audience rather than a barrage of slides full of nested bullet lists.

Key areas of the book include:

• Why is a good presentation important and where do you begin
• Planning, research and brainstorming
• Displaying data - diagrams and infographics
• Thinking like a designer - color, grid systems, typeography, layout, templates
• Movement and animation
• Interacting with slides
• Manifesto - The five theses of the Power of a Presentation

The book isn’t about Powerpoint, Keynote or Google Docs, its about concept, storytelling and engaging your audience. It should be read and re-read by anyone responsible for brainstorming, creating, designing and presenting in any organisation who truely cares about their brand.

display:inline-block;

display:block;

The alternative method is to remove all space between tags within your html document, however this makes the mark-up hard to read and edit!

overflow:auto;

Add the following to your stylesheet and hey presto!

html {
min-height: 100%;
height: auto;
}

The solution is simple.

<img src=”image.gif” width=”100″ height=”100″ onerror=”this.src=’error.gif’;”>

If the correct image doesn’t exist the image named error.gif will be used instead.

Credit goes to Rob Gonda for this tip.

ISO 8859-1 Symbol Entities

ISO 8859-1 Character Entities

include
<script type=”text/javascript” src=”js/jquery-1.2.1.min.js”></script>
<script type=”text/javascript” src=”js/common.js”></script>
<script type=”text/javascript” src=”js/jquery.slideshow.js”></script>

javascript for common.js
    // Animate homepage banner…
var obj = $(’#slideshow’);
// check object exists…
if (obj.length>0) {
// remove the hideslide class as javascript is enabled…
$(’#slideshow img.hideslide’).each(function(i){
$(this).removeClass(”hideslide”);
});

$(obj).slideshow({
timeout: 5000,
type: ’sequence’
});
}

 CSS

#slideshow{
margin:0;
padding:0;
height:161px;
}

#slideshow img {
position: relative;
left: 0;
top: 0;
width: 900px;
height: 161px;
}

XHTML 

<div id=”slideshow”>
<img src=”images.jpg” alt=”slide 1″ />
<img src=”images.jpg” alt=”slide 2″ width=”900″ height=”161″ class=”hideslide” />
<img src=”images.jpg” alt=”slide 3″ width=”900″ height=”161″ class=”hideslide” />
<img src=”images.jpg” alt=”slide 4″ width=”900″ height=”161″ class=”hideslide” />
</div>

Solution:

HTML:

<ul class=”form-check”>
<li><input name=”radio” type=”radio” value=”yes” /><label>Yes</label></li>
<li><input name=”radio” type=”radio” value=”no” /><label>No</label></li>
</ul>

CSS:

ul.form-check{
padding: 0;
margin: 0;
}

ul.form-check li{
display: block;
list-style: none;
clear: both;
float: none;
height: auto;
overflow: auto;
background:#f2ffe4;
}

ul.form-check li input{
display: block;
float: left;
}

ul.form-check li label{
display: block;
margin-left: 0.4em;
margin-top: 0.1em;
float: left;
clear: right;
font-size:0.9em;
}

If you would like the list inline:

<ul class=”form-check-inline”>
<li><input name=”checkbox” type=”checkbox” value=”" /><label>Option 1</label></li>
<li><input name=”checkbox” type=”checkbox” value=”" /><label>Option 2</label></li>
<li><input name=”checkbox” type=”checkbox” value=”" /><label>Option 3</label></li>

</ul>

ul.form-check-inline{
padding: 0;
margin: 0;
}

ul.form-check-inline li{
display: inline;
list-style: none;
float: none;
height: auto;
overflow: auto;
background:pink;
}

ul.form-check-inline li input{
display: block;
float: left;
}

ul.form-check-inline li label{
display: block;
margin:1px 10px 0 0;
float: left;
clear: right;
font-size:0.9em;
}