We welcome any appropriate tips & wisdom that you would like to contribute to this site. All submissions need to be approved before they are included on the site. This should not take more than 24 hours. If you want to include a url back to your site we will include the link. Your submissions can become part of the full length posts in which case your work will be credited to you and your site (if the url is included). You can include an image, you need to have it located on a server and just give the url to that location.
Portfolios
You can submit a site or your portfolio for our gallery. When submitting sites you need to include an image of the site (about 300px x 200px) and a brief statement about yourself, along with the url for the site.
Your Tips and Wisdom
From the Wise
Amy Wonnell February 5nd, 2010
A Good Usability Book:
"Don't Make Me Think, A Common Sense Approach to Web Usability" by Steve Krug. 2nd Edition.
Amy Wonnell February 5nd, 2010
Using PHP include(); to make header and footer templates
This is a really easy way to make your header and footer into a template, so if you want to change anything, you only need to modify one file.
Your files need to end in .php instead of .html
Make the first page for your website.
Cut and paste everything that will remain the same for the header of your site into another document and call it header.php. This will include the head; CSS links; and opening body and html tags.
Cut and paste everything that will remain the same for the footer of your site into another document and call it footer.php. This will include your closing body and html tags.
You will be left with the remaining content that will change for each page of your site.
At the top of each page put the following code
<?php
$page_title = 'Title of page here';
include ('header..php');
?>
At the bottom of each page put the following code:
<?php
include('footer.php');
?>
In the header.php file, where the title is, put:
<title><?php echo $page_title; ?></title>
That's it, it's really handy!
Patrick Cole
http://www.patrickcole.com/ , March 14th, 2009
Remove link line
LINKS
To remove the dotted outline when clicking a link (image or text) add this in your CSS Stylesheet.
:focus {
outline: 0;
Mary Spense March 14th, 2009
CSS image rollovers on links
You need to create an image that contains both the up image and the hover image.
In the example I have named the image “home.png”.
The image has a width of 78px and a height of 72px
Create a link on your page and give it an id
<a href=”home.html” id=”home”></a>
Now create the CSS so that the up image and the over image is just 36px
You create a id which has half of the image as its background. When the user rolls over the image the other half of the image is shown.
a#home {
display: block;
width: 76px;
height: 36px;
background: url(”images/home.png”) no-repeat 0 0;
text-decoration:none;
}
a#home:hover {
background-position: 0 -36px;}
br />
Sally Hopper July14th, 2009
Target Blank
What do you do now that target_blank is no longer compliant with XHTML Strict and you would still like the external site to open in a new tab.
You can still remain XHTML Strict if you use the rel attribute and a little javaScript.
REL ATTRIBUTE
Use the following in place of target=”_blank” in your external links
rel=”external”
LINK TO JAVASCRIPT
<script type=”text/javascript” src=”js/target.js”
JAVASCRIPT
function externalLinks() {
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName(”a”);
for (var i=0; i<anchors.length; i++) {
var anchor = anchors[i];
if (anchor.getAttribute(”href”) &&
anchor.getAttribute(”rel”) == “external”)
anchor.target = “_blank”;
>
}
}
Klara Schmitt: new window August 5th, 2009
window.onload = externalLinks
Replacing target=”_blank”
Alternatively, if you want to force a new window to open from a link without using target=”_blank”, this bit will validate too.
Add
onclick=”window.open(this.href,’_blank’);return false;”
to your link, instead of target=”_blank”. So the end result looks like:
<a href=”link.htm” onclick=”window.open(this.href,’_blank’);return false;”>Link</a>
Chuck Borowicz http://boroworks.com November 22nd, 2009Target IE6/7
Targeting Internet Explorer 6 and 7 in your CSS
Internet Explorer doesn’t treat CSS the same way as other * cough, cough, better… cough * browsers do. Luckily, there’s a couple ways around this. The best way is to call an alternate stylesheet in the head of your HTML. For instance, here’s one for IE6:
<!–[if IE 6]>–>
But what if you’re not using external CSS? The above method can’t help if you’re inline-styling or placing CSS in the head of your HTML. Enter asterisks and underscores.
The asterisk ( * ) targets Internet Explorer 6 and 7 when placed before the attribute of the element you’re styling. For example:
{
width:300px;
*width:280px;
}
This creates a div width of 280 pixels in Internet Explorer 6 and 7 and 300 pixels in all other browsers. Simple enough, but there are still differences in size and space between IE6 and 7. If you want to target just IE6 and not 7, add an underscore ( _ ) before the attribute in question. Like this:
div{
width:300px;
*width:280px;
_width:240px;
}
Now we’ve got a div that has a width of 240 pixels in IE6, 280 pixels in IE7 and 300 pixels in all the other browsers. This bit of hacking doesn’t work in IE8. Let’s hope this new generation of IE lessens the use of such methods.
While this is a quick and easy way to compensate for Microsoft’s shortcomings, using the underscore and asterisk method will cause your code to NOT validate.
