Your Feedback

Klara Schmitt: Web Resources Depot  September 27, 2010

One of the best things I've discovered (besides Delicious) is the Web Resources Depot RSS feed, which you can have emailed to you whenever new items are posted.

The Web Resources Depot (http://www.webresourcesdepot.com) is good for a whole slew of free things including SEO tools, typography elements, jquery plugins, html5 templates, css3 articles, wireframing tools and a lot more. Plus there's an feature in the emails to bookmark that particular page to Delicious.


Submit Your Comments Casey Fox: delicious August 5, 2010
www.casey-fox.com
I would advise everyone to sign up with Delicious. It's an online source to store website bookmarks. Download it to your personal computer for easy bookmarking, and you can access the links anywhere via their website! It allows you to tag links for easy sorting, and you can search other professional designers bookmarks.

http://delicious.com/

Submit Your Comments Amy Wonnell February 5, 2010

A Good Usability Book:

"Don't Make Me Think, A Common Sense Approach to Web Usability" by Steve Krug. 2nd Edition.

Amazon link

Submit Your Comments Amy Wonnell February 5, 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!


Submit Your Comments Chuck Borowicz http://boroworks.com  November 22, 2009
Target 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]&gt;–>

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.

Submit Your Comments Sally Hopper July14, 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”; >
}
}

Submit Your Comments Klara Schmitt: new window  August 5, 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>

 

Submit Your Comments

Sally Hopper July14, 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”; >
}
}


Submit Your Comments Patrick Cole http://www.patrickcole.com/ ,  March 14, 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;


Submit Your Comments
Mary Spense March 14, 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 />

 

Your Tips and Wisdom

All submissions need to be approved before they are included on the site. This should not take more than 24 hours.