Great video tut for CS4
http://www.youtube.com/user/websiteguru
Dreamweaver CSS resources from Adobe
http://www.adobe.com/devnet/dreamweaver/css.html
test
Archive for the ‘CSS’ Category
CSS revision Dreamweaver CS4 resources
Monday, February 7th, 2011Top 10 list for CSS3
Monday, August 2nd, 2010This article by Webcredible- usability experts extraordinaires on their top 10 list for CSS3 is a good point to start with CSS3. They have included details on the browser specific syntax required to make them work.
While CSS3 is still in draft form itCSS3 is starting to gather momentum with many of the commands outlined in the CSS3 working draft supported by Firefox, Safari and Google Chrome.
why adhere to web standards?
Tuesday, August 4th, 2009Ten reasons to learn and use web standards
If you’re a web developer or designer new to the concept of web standards and are undecided on whether you should spend the time to learn all about them or not, here are some of the most important reasons for doing so.
This is also a useful list reason for when you need to validate why you work to web standards even if other don’t.
1. You look more professional
Other web professionals, prospective employers and clients can look at your work and know that you are a person who likes to keep up with changes in technology and make sure that your knowledge and skills are always current. It will make you look like a real web professional.
2.You’ll make your clients look good
Use web standards combined with best practices for accessibility and give your clients a chance to talk about how they cater to all people, and how they find it important that everybody can use their services or find information about their products. You will also avoid the bad publicity that can be caused by shutting out visitors like disabled people, Mac users, and mobile phone users. Remember when a user has a good experience on your web site they tell one person if they have a bad experience they’ll tell 10!!!
3. your maximising the number of potential visitors
You don’t know which device visitors will use to access your site. You may think you know, but unless you’re building an Intranet for a company that controls what browsers are installed on all machines then you really have no idea what device or technologies your users are using so by adhering to standards you have more chance of ensuring that your web pages look as you expect.
By using web standards properly you make sure that you have done your part in making your site work with the largest possible number of browsing devices.
4. Faster loading and reduced bandwidth usage
Well-structured markup that separates structure and content from presentation is generally much more compact than table-and-spacer-image-based tag soup. Documents will be smaller and faster for visitors to download. Like it or not, there are still many, many people connecting to the Internet through dialup.
5. Provide the foundation for accessibility
Using web standards does not guarantee that all aspects of your site will be accessible to people with disabilities, but it is a very good start. Make sure your documents are valid, well-structured, and semantic, and you’re well on the way towards having an accessible site.
6. Improve search engine rankings
Well-written content delivered through clean, well-structured, and semantic markup is delicious food for search engine spiders and will help your rankings. This, of course, will lead to increased traffic, which is what most website owners want.
7. Make your markup easier to maintain
Would you rather wade through many kilobytes of multiply nested tables and spacer images or just browse through a clean and well-structured document when you need to update your site?
Removing, inserting or editing presentation-free content is much easier and more efficient than having to make sure you get all the presentational cruft right. Using CSS to control layout also makes it much easier to make site-wide design changes.
8. Future-proof content
There is no way anyone can guarantee with 100% certainty that the documents created and stored electronically today will be readable in a hundred years. Or even fifty years. But if you separate content from presentation and use current web standards, you have done the best you can to ensure that your content can still be read even after you’re gone.
9. Good business sense
Why would any business owner say no to more visitors? A faster site? Improved search engine rankings? Potential good publicity? It doesn’t make sense to do so.
10. It’s the right way to do things
The web standards way is the way we should have built the web from the beginning. And now that we can, why not do something the right way and have a really excellent reason to feel good about yourself.
CSS vs Tables
Thursday, October 2nd, 2008Before I begin I must admit there are many site that I really like that uses tables for layout rather than css but I think this is a reflection on the designers rather than tables therefore below are a few reason why I think website development should use css rather than tables.
- Separation of formatting information from content- better for updating and maintaining sites
- Faster page loading
- Redesigns are more efficient
- Easier for teams to maintain (and individuals)
- Easier for site development to be team based
- Accessibility
- Quick website-wide updates
- Better for SEO
- CSS sites download faster than tables
- css sites can be viewed on more devices such as mobile phones so have a greater reach and potential audience
Here are some good articles on the subject of CSS vs Tables
why-a-css-website-layout-will-make-you-money
Same navigation code on every page –different look
Monday, September 8th, 2008Most websites highlight the navigation item of the user’s location in the website, to help users orientate themselves. This is a fundamental requirement for basic usability, but can be a pain as you’ll need to tweak the HTML code behind the navigation for each and every page. So is it possible to have the navigation highlighted on every page, without having to tweak the HTML code on each and every page? Of course it is but the answers below require a lot more tweaking than is below if you are using Dreamweaver templates- but that’s for a post next week 
But what you need to do is assign a class to each navigation item:
<ul>
<li><a href=”#” class=”home”>Home</a></li>
<li><a href=”#” class=”about”>About us</a></li>
<li><a href=”#” class=”contact”>Contact us</a></li>
</ul>
You’ll then need to insert an id into the <body> tag. The id should be representative of where users are in the site and should change when users move to a different site section. When in ‘Home’ it should read <body id=”home”>, in ‘About Us’ it should be <body id=”about”> and in ‘Contact Us’ <body id=”contact”> etc.
Next, you create a new CSS rule:
#home .home, #about .about, #contact .contact
{
css rules go here
}
This creates rules that only takes effect when class=”home” is contained within id=”home”, and when class=”about” is in id=”about” and class=”contact” is in id=”contact”. These situations will only occur when the user is on the appropriate page, seamlessly creating our highlighted navigation item. Pretty cool!
More of this type of thing can be found here.
http://www.webcredible.co.uk/user-friendly-resources/css/more-css-tricks.shtml
CSS IE Hacks – conditional comments
Sunday, August 17th, 2008As many of you are doing the right thing and testing your sites in more than just one browser you are becoming more likely to face the dreaded problem of ie browsers not rendering your styles as you expecting. The problems that we notice are usually are not subtle rendering issues but full blown nightmares such as your 3rd column is sitting below your other columns not next to them!!!
Possible solution- a JavaScript browser detection but I think this is overkill and pointless if the user has JavaScript turned off.
Which brings are to the other possible solutions of CSS hacks and conditional comments.
Conditional comments only work in IE so are perfect for giving instructions just for IE. They are supported from Internet Explorer 5 onwards, and it is even possible to distinguish between 5.0, 5.5 and 6.0.
Conditional comments work as follows:
<!–[if IE 6]>
Special instructions for IE 6 here
<![endif]–>
As you can see the basic structure is the same as an HTML comment (<!– –>). Therefore all other browsers will see them as normal comments and will ignore them entirely.
Internet explorer though, has been programmed to recognize the special <!–[if IE]> syntax, resolves the if and parses the content of the conditional comment as if it were normal page content.
Since conditional comments use the HTML comment structure, they can only be included in HTML files, and not in CSS files. You can also put an entire new <link> tag in the conditional comment referring to an extra style sheet.
So one possible options to avoid your ie problems is to create an alternative style sheet and use a conditional statement to which feed specific style sheets for specific browsers.
Here’s some example syntax rules to feed the different IE versions:
<link rel=”stylesheet” href=”styles.css” type=”text/css” />
<!–[if IE]>
<link rel=”stylesheet” href=”IEStyles.css” type=”text/css” />
<![endif]–>
<!–[if IE 5]>
<link rel=”stylesheet” href=”IE5Styles.css” type=”text/css” />
<![endif]–>
<!–[if IE] 5.5>
<link rel=”stylesheet” href=”IE5_5Styles.css” type=”text/css” />
<![endif]–>
<!–[if IE 6]>
<link rel=”stylesheet” href=”IE6Styles.css” type=”text/css” />
<![endif]–>
<!–[if IE 7]>
<link rel=”stylesheet” href=”IE7Styles.css” type=”text/css” />
<![endif]–>
<!–[if gte IE 5]>
<link rel=”stylesheet” href=”IE+5Styles.css” type=”text/css” />
<![endif]–>
<!–[if lt IE 6]>
<link rel=”stylesheet” href=”IE-6Styles.css” type=”text/css” />
<![endif]–>
<!–[if gt IE 6]>
<link rel=”stylesheet” href=”IE+6Styles.css” type=”text/css” />
<![endif]–>
Code
The syntax means:
<!–[if IE]>
According to the conditional comment this is Internet Explorer
<![endif]–>
<!–[if IE 5]>
According to the conditional comment this is Internet Explorer 5
<![endif]–>
<!–[if IE 5.5]>
According to the conditional comment this is Internet Explorer 5.5
<![endif]–>
<!–[if IE 6]>
According to the conditional comment this is Internet Explorer 6
<![endif]–>
<!–[if IE 7]>
According to the conditional comment this is Internet Explorer 7
<![endif]–>
<!–[if gte IE 5]>
According to the conditional comment this is Internet Explorer 5 and up
<![endif]–>
<!–[if lt IE 6]>
According to the conditional comment this is Internet Explorer lower than 6
<![endif]–>
<!–[if lte IE 5.5]>
According to the conditional comment this is Internet Explorer lower or equal to 5.5
<![endif]–>
<!–[if gt IE 6]>
According to the conditional comment this is Internet Explorer greater than 6
<![endif]–>
Note the special syntax:
- gt: greater than
- lte: less than or equal to
These conditional statements can also be used to override just single style declarations rather than having to have complete alternative style sheets but more on that later.
What’s a div tag
Saturday, April 19th, 2008According to the O’Reilly HTML Reference, “the DIV element gives structure and context to any block-level content in the document. Each DIV element becomes a generic block-level container for all content within the required start and end tags.”
So the DIV tag is a powerful generic element well suited for being used as a container within our Web page rahter than tables or cells because the div tag can be use for creating sections or (div)isions of Web pages.
The concept is very intuitive. Instead of using tables as layout elements, we can use DIVS as excellent content containers to build our page layout. In conjunction with several CSS declarations, DIVS based layout are pretty easy to get.
They reduce the amount of code in our documents which is good for the search engine and if we use an external style sheet we will be separating the formatting/presentation information from the content which is great for maintenance and readability.