Changing spacing (padding, margin, height, width, etc) for inline elements can be tricky. Here’s a nice explanation of the differences and how to get inline elements to display as block elements.
http://www.maxdesign.com.au/articles/inline/
In addition to changing inline elements to display:block and floating them (e.g. float: left), you can use display: inline-block.
In CSS, you can specify line-height of text that span multiple lines. Though you can specify this in pixels or other units, you should specify them without any units so it becomes a fraction or percentage of font size.
Example:
If you have font size set to 12 px and your line height is set to 18 px, you can convert your line height to 1.5 (18px/12px = 1.5). This way, if you font size changes or if you use a different font, the line height will adjust proportionally.
When designing a website, it’s easy to forget about users from other countries who may want to view your website in another language by translating it with, say, Google Translate. That’s why, it’s best to design your pages in such a way that when text becomes longer or shorter, your pages won’t break. Usually your content area is safe. But, your header and navigation areas can easily break if you design them to be fixed width.
Tip: always use flexible width for text that may expand or collapse when translated into a different language.
Creating HTML emails is a pain in the ass! It’s much worse than just trying to get your website to look right in all the browsers. Here are some things I learned that can save you some time.
The above font stack means the following:
– Email clients will use Open Sans font if they can load it from the internet.
– Email clients that only use native fonts (there are several such clients in popular use) will use one of these equivalent fonts: Lucida Grande (Mac) or Lucida Sans Unicode (PC).
– Extremely old email clients (that don’t have the common default fonts) will use whatever sans-serif font is available to them. Get the Open Sans font using the following
<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700);
</style>Here’s a simple example of adding AJAX functionality to you website using jQuery.
[cc lang=”javascript”]
$(document).ready(function() {
$.ajax({
type: “GET”,
url: “http://www.somedomain.com/path/to/script.php”,
error: function () {
// do something
},
success: function(data, textStatus, jqXHR) {
console.log(data);
// do something
}
});
});
[/cc]
Since the call to http://www.somedomain.com/path/to/script.php happens behind the scenes, use Firebug’s Network tab to see what the response is from that call.
To learn more about the features included in jQuery’s AJAX functionality, visit
Many hosting services say they guarantee 99% uptime. But how would you really know without checking your site every often. Pingdom is a popular web service that allows you to automate this by telling it to ping your website every specified interval (e.g. 1 minute). Based on certain settings, you can have it notify you when your site is down. You can give it a URL to a page to ping. But, don’t give it your home page since that would inflate your Google Analytics (or other statistics software) home page visit count. Instead, specify a URL to a unlinked page like http://www.yoursite.com/pingtest.htm
Back in the day (a few years ago), if I needed to parse content from an HTML source, I’d write a script that would search for tokens / identifiers in the code to mark the start and end points and then use string manipulation functions to extract what I’d need. Now, a much easier way is to use Simple PHP DOM Parser which lets you select elements jQuery style and process them easily in PHP. Here’s an example from their website:
[cc lang=”php”]
// Create DOM from URL
$html = file_get_html(‘http://slashdot.org/’);
// Find all article blocks
foreach($html->find(‘div.article’) as $article) {
$item[‘title’] = $article->find(‘div.title’, 0)->plaintext;
$item[‘intro’] = $article->find(‘div.intro’, 0)->plaintext;
$item[‘details’] = $article->find(‘div.details’, 0)->plaintext;
$articles[] = $item;
}
print_r($articles);
[/cc]
Many websites uses gradients (the blending of colors from one color to another) to create nice visual effects. Sometimes, it’s not easy find what colors to fade to. I came across this web site that fixes that problem. Check it out.
If you have pasted some text into a web page and it doesn’t wrap, here’s one way to fix that.
[cc lang=”css”]
pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}[/cc]
Recently, I needed to search all URLs in a document in Dreamweaver and wrap them with <a> tags to turn them into links. The URLs themselves would be the text to click on. In Dreamweaver, you can use regular expressions and capture matches for use in replacements as follows:
[cc lang=”html”]SEARCH: ((https?|ftp|file)://S+)
REPLACE: $1[/cc]
Notice I wrapped the SEARCH regex with parentheses ( ) to capture that match and use it in the REPLACE using $1. If I had more parentheses to capture other matches, I could use them in the REPLACE using $2, $3, and so on.
Make sure you have “Regular Expressions” checked when you do this.