Webmaster Forum

Go Back   Webmaster Forum > Web Development > Coding Forum

Coding Forum Problems with your code? Discuss coding issues, including JavaScript, PHP & MySQL, HTML & CSS, Flash & ActionScript, and more.


Reply
 
Thread Tools Display Modes
Share |
  #1  
Old 02-23-2010, 04:33 PM
Cricket's Avatar
Cricket Cricket is offline
No Longer Active
 
Join Date: 10-13-03
Location: Texas
Posts: 42,181
iTrader: 0 / 0%
Thumbs down Favorite CSS Tips & Tricks

Once again, I am reaching out to our more experienced members, but this time I would like to hear about your favorite CSS tips and tricks. If you prefer, feel free to point us to articles or websites that you especially like to turn to for ideas and help, but please add your reasons concerning why you like these resources.
 
Reply With Quote

Advertisement

Advertisement

  #2  
Old 02-23-2010, 05:08 PM
Cricket's Avatar
Cricket Cricket is offline
No Longer Active
 
Join Date: 10-13-03
Location: Texas
Posts: 42,181
iTrader: 0 / 0%
Favorite Site for CSS Ideas

Although they have way too many ads, CSSplay is still one of my favorite sites for finding ideas (the search options works great) for CSS. I especially like to browse through the demo page (look under photo galleries) for ideas on ways to display images. Why do I like the site so much? Because I can find so many different ideas (and the code) all on one site and can view a demo at the same time so I have a clear visual of how something will look.
 
Reply With Quote
  #3  
Old 02-23-2010, 11:44 PM
megamoose's Avatar
megamoose megamoose is offline
v7n Mentor
 
Join Date: 06-04-06
Location: Guildford
Posts: 557
iTrader: 2 / 100%
This is probably inappropriate, but you know what I'm excited about. For years I have been annoyed that IE6, if you have a display: block; variable in your CSS template, and a a:hover{} section, it will only "hover" when you hover over the text, not the "block".

I only recently discovered if you give the A a height of 1px, that overrides the problem. Of course this is only an IE6 problem ASAIK, but still excites me

A good website I'm interested in and have been following is http://www.css3.info/preview/
It shows the likes of what CSS3 can do, and it has some handy new features. Only problem is it's not used with older browsers and I think is still in development.
 
Reply With Quote
  #4  
Old 02-25-2010, 08:58 PM
HTMLBasicTutor's Avatar
HTMLBasicTutor HTMLBasicTutor is offline
Administrator
 
Join Date: 10-29-07
Location: Canada
Posts: 26,600
iTrader: 5 / 100%
When teaching or helping someone to solve a CSS problem:
  1. w3schools CSS tutorials reference section is a great spot to learn the basics of CSS.
  2. CSS 2.1 Specification properties list is another great reference when having troubles sorting out CSS problems (especially when people add properties to their styles that are not applicable to the HTML element they are formatting.
  3. Comparing the HTML elements list at w3schools and the HTML elements list in the HTML 4.01 Specification (which forms part of the XHTML specification) with what the student is trying to style is a way to show the HTML element does not have the attribute they are trying to format.

Also understanding the following helps alot when CSS problem solving:
My own tips:
  • Don't design for a specific browser. Not everyone uses your chosen favourite.
  • Choose a flexible font size so your design adjusts to suit your visitors visual needs. Not everyone uses the zoom in the bottom right of the IE window.
  • Leave the default text-alignment of left as is. Centered and justified are hard to read on the Web. By the way, you don't have to spec alignment on the Web, left is the default. Save coding by leaving this spec out. The only time you need to set the alignment is for special cases of a block of text or trying to get a menu to line up.
  • Be sure to set the background colour of all elements. Use transparent if you want the background behind the element to show through.
  • Use hex numbers for colours, not named colours or RGB. #FFFFFF is white and #000000 is black.
  • Make sure your colour contrast is good. Even people with good eye sight have troubles reading pages with poor colour contrast.
  • Design your containers so they adjust for different screen resolutions.
  • Select font styles that are available on both Windows and Macs. Keep away from fancy fonts. Some forget that joe/joesy average don't have Office or grahpic programs that add these fancy fonts to their machine.
  • Stay away from hacks to make the page do what you want. The web is not print. You can't control a web page like you do printed material. Those hacks are going to come back to haunt you as browsers improve. e.g. when we went form IE6 to IE7 there a ton of broken sites. Hacks also add unnecessary coding to your CSS and web page coding.
 
Reply With Quote
  #5  
Old 03-01-2010, 12:31 AM
al-zabir al-zabir is offline
Junior Member
 
Join Date: 02-28-10
Posts: 9
iTrader: 0 / 0%
I prefer -

w3schools.com - for beginners
cssplay.com - for tips & tricks
http://www.w3.org/Style/CSS/learning - better resource for css validation

Thanks
 
Reply With Quote
  #6  
Old 03-01-2010, 12:40 AM
csm's Avatar
csm csm is offline
v7n Mentor
 
Join Date: 12-18-09
Location: Rostock, Germany
Posts: 532
iTrader: 0 / 0%
It depends on what you want to achieve.

I would not go with CSS3 that much at the moment.

My tipps:

1. Think of using a CSS reset (like YUI or Eric Meyer's)
2. choose the right DOCTYPE
3. Check your stats for how much users are on IE6, not using JS, ... (if under 4% I would not take care of it that much)
4. Use tools like YSlow, PageSpeed, FireBug, ...
5. To check how your new site looks in different browsers I would go with browsershots.org

That's what I would check first.

Regards,

Michael
 
Reply With Quote
  #7  
Old 03-01-2010, 11:51 PM
HTMLBasicTutor's Avatar
HTMLBasicTutor HTMLBasicTutor is offline
Administrator
 
Join Date: 10-29-07
Location: Canada
Posts: 26,600
iTrader: 5 / 100%
An addition:
Quote:
The way most people link CSS intended for different media types, such as screen, print, or handheld, is to use multiple files. The files are then linked either through link elements with a media attribute or through @import statements with one or more media types specified....
Continued: CSS efficiency tip: use a single stylesheet file for multiple media
 
Reply With Quote
  #8  
Old 03-04-2010, 09:26 AM
abajan's Avatar
abajan abajan is offline
v7n Mentor
 
Join Date: 08-08-09
Location: Barbados
Posts: 270
iTrader: 0 / 0%
Well, one of my favorite resources for CSS tricks is CSS-Tricks.com, of course! The videos are usually well presented and the author doesn’t edit out his mistakes.
A really cool trick is featured in a video posted there just today, about image switching using just CSS: No JavaScript required. How sweet is that?
 
Reply With Quote
  #9  
Old 03-04-2010, 09:40 AM
HTMLBasicTutor's Avatar
HTMLBasicTutor HTMLBasicTutor is offline
Administrator
 
Join Date: 10-29-07
Location: Canada
Posts: 26,600
iTrader: 5 / 100%
Quote:
Originally Posted by abajan View Post
A really cool trick is featured in a video posted there just today, about image switching using just CSS: No JavaScript required. How sweet is that?
That is cool!
 
Reply With Quote
  #10  
Old 03-05-2010, 04:34 PM
HTMLBasicTutor's Avatar
HTMLBasicTutor HTMLBasicTutor is offline
Administrator
 
Join Date: 10-29-07
Location: Canada
Posts: 26,600
iTrader: 5 / 100%
Creating Beveled Images with CSS Technique #4 looks like the one to use.

Quote:
Background images, just as the name implies, are part of the BACKGROUND of a website, not part of the actual content. The most common place to add a background image to, is the entire canvas – aka the body tag
How to Add a Background Image with CSS

Last edited by HTMLBasicTutor; 03-05-2010 at 04:47 PM.
 
Reply With Quote
  #11  
Old 03-09-2010, 12:53 AM
HTMLBasicTutor's Avatar
HTMLBasicTutor HTMLBasicTutor is offline
Administrator
 
Join Date: 10-29-07
Location: Canada
Posts: 26,600
iTrader: 5 / 100%
Seeing the concept of margins and padding and how they relate to the box model is difficult for some people:
Quote:
In the first of the CSS In depth series, well be talking about margins, padding and the box model. Margins and padding are some of the most widely used styles in CSS, but are often the source of frustration in cross-browser compatibility....
CSS In Depth: Margins, Padding & The Box Model
 
Reply With Quote
  #12  
Old 03-09-2010, 04:45 AM
abajan's Avatar
abajan abajan is offline
v7n Mentor
 
Join Date: 08-08-09
Location: Barbados
Posts: 270
iTrader: 0 / 0%
Another excellent reference on all things CSS is MaxDesign. I find their tutorials easy to understand because of the heavy usage of illustrations. Its the old adage: A picture is worth a thousand words.
The slide shows on the homepage are quite good but be sure to also check out the Floatutorial, Selectutorial, Listutorial etc.
 
Reply With Quote
  #13  
Old 05-03-2010, 10:01 AM
HTMLBasicTutor's Avatar
HTMLBasicTutor HTMLBasicTutor is offline
Administrator
 
Join Date: 10-29-07
Location: Canada
Posts: 26,600
iTrader: 5 / 100%
Best Practice for ID and Class Names

Quote:
covering recommendations for IDs and classes
Best Practice for ID and Class Names
 
Reply With Quote
Go Back   Webmaster Forum > Web Development > Coding Forum

Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
PHP Tips And Tricks platter007 Web Design Lobby 4 09-09-2008 10:08 AM
Windows Tips and Tricks raphnix Tech Talk 1 09-09-2008 07:56 AM


V7N Network
Get exposure! V7N I Love Photography V7N SEO Blog V7N Directory


All times are GMT -7. The time now is 04:03 AM.
Powered by vBulletin
Copyright 2000-2014 Jelsoft Enterprises Limited.
Copyright © 2003 - 2018 VIX-WomensForum LLC