CSS links (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

c1sissy -> CSS links (12/28/2003 10:38:20)

I started to go through all the CSS posts to gather links to helpful information. I thought that it would be great to have these all listed in one place.

Feel Free to add to this list.


CSS Tips

View Font Sizes

Some Font explainations

Alternate Style Sheets

Rich in Style tutorial

CSS Code bloat discussion

Understanding the Cascade

Glish column layouts

W3 schools tutorial for css

Using multiple classes

CSS Beveled button effect-Vertical Format This is also listed as a faq in the forum.

Eric Meyers Lots of interesting information on this guys site. Books, links etc....

CSS Positioning Tutorial

FAQ: Class VS. ID

CSS Online Course-cost-$15.00

Beginner and Advanced CSS tutorial.

NN4 Bugs and work arounds.Accessibility Features of CSS

test web page accessibility

W3C's Web Content Accessibility Guidelines

Cascading Style Sheets, level 2

If you want to follow the development of CSS3, this page should be the place to start. Brain Jar Positioning

The next 3 links are provided courtsey of the Gorilla Database and Fiachra. Search through each of the 3 links to see what there is to offer. There is a large amount of information within each one of the links.
Link #1
Link #2
Link #3

Westciv

This looks like a really great beginner tutorial.

Webworkers tool box tutorial Another excellent looking beginers tutorial.

CSS FAQ from the HTML writers guild.

Web Design Group

Elated has several tutorials for beginner up to advanced.

Max Design-Presentations and articles

Real World Style This site has a tutorial for floating thumbs.

Cutting Edge Css This site has information on Menus, Boxes, Layouts things for mozilla, IE and examples as well as links. I suggest trying this site out.

Gorilla has created an excellent tutorial that you will find HERE. I highly suggest this for newbies, as well as not so newbies. Thank you Gorilla, nice job on this one.

Here is a link to an example with code for a CSS rollover navigation.

Link Order is important This is a posting by gorilla that shows your link order as well as some information from the CSS2 specs. Thanks Gorilla.

3 Column layout

Some CSS Tricks

CSS and Netscape 4.xx Issues

THIS SITE is an excellent site. I keep it tabbed on my browser at all times to reference while trying to learn.


For those who are for javascript with their css here is a link you might find interesting.
http://cssvault.com/cat_cssjavascript.php

CSS Hacks Chart



ritarun -> RE: CSS links (12/29/2003 7:50:41)

And don't forget there is a separate sub-forum that has more links and resources.
CSS Link and Resources

These forums have not been getting much activity so they have been marked as "subforums". Hopefully more folks will post in that section again. I personally found them very helpful and saved me lost of time reviewing all the posts (esp if you have a slow connection to go page by page).



c1sissy -> RE: CSS links (12/29/2003 10:37:30)

Thanks Ritarun, I was going to add it last night, but figured that it could wait till today. It does have lots of links etc.. in it.

If you come across any links just add them in.



Giomanach -> RE: CSS links (1/13/2004 11:22:40)

Muliple Links Styles:

http://www.w3schools.com/css/tryit.asp?filename=trycss_link2

All in the same style sheet too



c1sissy -> RE: CSS links (2/2/2004 8:33:20)

In my search for horizontal Navigation tutorials, I found THIS which seems to be a pretty good explaination on how to do this.

Here is another link for the horizontal Navigation



Giomanach -> RE: CSS links (3/12/2004 11:03:31)

A few to add to the list:

http://www.csszengarden.com

http://www.glish.com

http://www.alistapart.com/topics/css

http://www.meyerweb.com/eric/css/edge

http://www.htmlcenter.com/tutorials/tutorials.cfm/53/CSS



d a v e -> RE: CSS links (3/12/2004 11:10:16)

for easy to make accessible valid horizontal css lists (phew!)
http://css.maxdesign.com.au/listamatic/



Peppergal -> CSS Rollover Image Navigation Menu (5/8/2004 10:10:21)

http://www.projectseven.com/tutorials/css/uberlinks/

All the beauty and style of a traditional image swap/rollover menu,
without javascript and with only two images total
(instead of two images per link).

Fast loading time too.



jaybee -> Emails & CSS (5/14/2004 8:36:01)

quote:



Email readers have far greater diversity than browsers and support of HTML ranges from none to limited CSS. While a few of the newest mail readers might support CSS, its almost always safest to stay with very conservative (ie:old) markup.



read the full article [here]



jaybee -> RE: CSS links (6/18/2004 8:16:58)

[:D][:D] I gather there are a few problems at the moment. Hopefully these links will come out OK.

CSS layouts..........

http://www.benmeadowcroft.com/webdev/csstemplates/template1.html
http://www.csscreator.com/version2/pagelayout.php

_____________________________



Webnauts -> CSS Tips And Tricks (8/11/2004 15:17:08)

CSS Resources, Tutorials, Tips and Tricks (please report broken links)

NEW!!! - CSS Tutorials (all-in-one) http://www.thefixor.com/code_css.php#tutor

Another new one: Tutorials, Demos, and Hacks http://nemesis1.f2o.org/links


1. Rebuilding a Site With Standards http://www.meyerweb.com/eric/talks/2002/wdw-boston/meyer-rebuilding.html

2. The University of Arizona - Cascading Style Sheets http://uaweb.arizona.edu/resources/tutorial/css/index.shtml
3. W3C Web Style Sheets CSS tips & tricks http://www.w3.org/Style/Examples/007/

4. Tables or CSS? Choosing a layout http://www.saila.com/usage/layouts/cssvtables.shtml

5. Tableless Layout with CSS HowTo (W3C) http://www.w3.org/2002/03/csslayout-howto.html.en

6. How to build a web site without tables http://www.mako4css.com/Tutorial.htm

7. CSS Quick Reference http://www.devguru.com/Technologies/css/quickref/css_index.html

8. Real World Table Free Site Development http://www.womendesignersgroup.com/articlerachel.shtml

9. CSS Bugs and Workarounds http://css.nu/pointers/bugs.html

10. How to hide CSS from buggy browsers http://w3development.de/css/hide_css_from_browsers/

11. Hiding CSS form Netscape 4+ http://www.v2studio.com/k/css/n4hide/

12. External link icons the CSS way http://www.kryogenix.org/days/173.html

13. CSS Top Menu Combination - Does not work in Internet Explorer 6.0. It does work in Mozilla 1.4., Opera 6.0., and Safari 1.0. http://moronicbajebus.com/playground/cssplay/top-menu/

14. Hover Sidebar with CSS - It is known to work in Mozilla 1.3b or later (though in Mozilla 1.4a it was buggy but then was fixed) and it also works in Opera 7.0. But alas, it does not work in Internet Explorer 6.0 because Internet Explorer does not support :hover on anything but hyperlinks (<a>). http://moronicbajebus.com/playground/cssplay/hover-sidebar/

15. Erlarger Button Menu with CSS - Overlapping the other elements: http://moronicbajebus.com/playground/cssplay/enlarger-button-menu/ This does not work in Internet Explorer.

16. Reformat the tables with CSS - It works in Mozilla 1.4+ and Opera 7.0. It does not work in Windows Internet Explorer 6. http://moronicbajebus.com/playground/cssplay/reformat-table/

17. Image replacement - no span with CSS - This works great in Windows Internet Explorer 6, Mozilla 1.4+, and Opera 6+; but in Windows Internet Explorer 5 nothing shows up. This can easily be solved, note of problem and solution courtesy... http://moronicbajebus.com/playground/cssplay/image-replacement/

18. Mark you jump - You need a browser that supports CSS3. This is where the time traveling comes in because as of today (2003/2/June) CSS3 is still in the draft stage; but you are in for some luck Mozilla 1.3 does support :target—those wacky Mozilla people. http://moronicbajebus.com/playground/cssplay/markyourjump/

19. Horizontal Menu using CSS http://moronicbajebus.com/playground/cssplay/hormenu/

20. Add banner positioning with CSS http://www.peterbailey.net/test/banner.htm

21. Box Model Hack http://www.tantek.com/CSS/Examples/boxmodelhack.html

22. Designing for two Style Sheets - This method is suitable for use when you have a site that is laid out using CSS positioning as opposed to tables, and where the content is likely to get displayed badly in older browsers.
By carefully planning your layout you can create an alternate stylesheet that will display correctly in older browsers and still be able to do an advanced CSS layout for the rest. http://www.edgeofmyseat.com/showarticle.do?AID=5

23. Use CSS to Color Your Forms http://www.edevcafe.com/viewdoc.php?id=6

24. CSS-driven tabs http://www.clagnut.com/writings/csstabs/

25. CSS: Mix and match Classes http://catcode.com/csstips/classes.html

26. CSS: Graphic List Bullets http://catcode.com/csstips/graphic_list.html

27. CSS: Centered Tables http://catcode.com/csstips/center_table.html

28. CSS and Netscape 4.xx Issues - The market share of browsers that do not support any CSS is now below 0.5%. Therefore web developers have more freedom to actually separate content (HTML) and presentation (CSS).
The biggest challenges that web developers face when implementing CSS is backwards compatibility and browser support. http://www.mako4css.com/Issues.htm

29. Mark external links on your site (and others!) http://www.sitepoint.com/newsletter/viewissue.php?id=3&issue=60&format=html#6

30. CSS Positioning Properties http://www.miswebdesign.com/resources/articles/css-positioning-properties.html

31. CSS Menus - Uberlink CSS Rollovers http://www.projectseven.com/tutorials/css_menus/list_01/index.htm

32: CSS-TD CSS Table Design http://www.projectseven.com/tutorials/css_t/index.htm

33. Css Iframe Mimics http://www.beforethedog.com/tutoriali/tut1.htm

34. Navigation Menu without Images http://www.bravenet.com/resources/tipsandtricks/showtip.php?view=160

35. Dynamic @import CSS files using PHP http://www.1976design.com/blog/archive/2004/02/03/php-dynamic-css/

36. max-width in Internet Explorer http://www.svendtofte.com/code/max_width_in_ie/

37. The Basics of Positioning http://www.communitymx.com/content/article.cfm?cid=3B56F- NEW!
-------

Tools and Utilities (please report broken links)

1. Build tableless (with CSS) pages with this free online tool http://www.fu2k.org/alex/css/layouts/3Col_OrderedAbsolute.mhtml

2. User Style Sheet Wizzard http://www.techdis.ac.uk/seven/wizards/user-style.html

3. FREE Accessible Forms Creator Desktop Software (for building forms with CSS or tables) http://www.hisoftware.com/access/valueadd9.html

4. Style Master - CSS Web Page layout Editor for Windows and Macintosh http://www.westciv.com/style_master/



caz -> CSS lists browser support chart (8/25/2004 15:07:17)

See here for another chart to pin up on the wall,

Browser support for links solutions



caz -> CSS links: designing for handheld browsers (9/16/2004 20:48:04)

I have been interested for some time in knowing how to accomodate handheld users and finally came across this article at A List Apart, which although it concentrates on Opera has very useful information on the whole topic, particularly using css and an ordered layout. There are similarities with the considerations neccessary for text readers too.

http://www.alistapart.com/articles/pocket/


There is also a link to a pocket emulator -

ipaqbrowser

You can just change the web address to test your own sites there...quite a revelation, and not pretty ( in my case, anyway)

Carol



caz -> RE: CSS links (11/1/2004 6:13:24)

Using Frontpage to build your CSS



caz -> RE: CSS links (11/1/2004 6:19:27)

CSS Troubleshooting: guide

An outline of the steps to take when trying to pin down the cause of problems.



tooie -> RE: CSS links (11/2/2004 14:58:41)

There is sooo much information here that now I'm scared!

I have a problem that started out a Javascript issue but then someone on a javascript help forum suggested that I consider a CSS alternative. Now, I know even less about CSS than I do Javascript so now I'm stressing!

This is my issue. If you think CSS is the way to go and you have either directions for me on how to do it or if you have resources that you can point me to that will help me with this issue, can you please forward them to me? I'm afraid that sifting through all of the resources listed in this thread would take me weeks (although i've copied all the URLs to go back and check out when I'm done with this project!)

Thanks! Here it is...

What I'm trying to do is have a chalk board replace another chalk board when the curser hovers over a link. The new chalkboard would stay put on the mouseout because it has a bunch of links on it to other pages. Normally I would use an image map to designate the links on the chalkboard. Here's a link to one of the pages... www.bernardeldredge.org/newsite/index.html . Go over the top link, the PTA News and see the swap. I have different boards for each of the links.

Each bullet on the new chalkboard is a link to another page and the nav buttons on the left is what i want to hover over to change.

If anyone can help, please please do!

Thanks!
Carrie
edited post to get link to work, c1sissy



dpf -> RE: CSS links (11/2/2004 15:30:24)

quote:

Go over the top link, the PTA News and see the swap. I have different boards for each of the links.
ok it worked..what is the problem?



caz -> RE: CSS links - image maps (11/5/2004 8:37:58)

Trying to solve something else image related I came across these from ALA:

Night of the image map

and ( great title [;)])

CSS Sprites: Image slicing's kiss of death

You may find something of help there - that's what these links are for; but they could benefit from being broadly categorised, I agree.
Carol



tooie -> RE: CSS links (11/5/2004 17:03:00)

The problem is that on the new boards there are links to pages. i can't get the links to work because there isn't any room in the image swap js code for image maps. I don't know how to make the bulleted items on the new chalkboard become links to other pages.

Any ideas? I'm open to just about anything! Thanks!



c1sissy -> RE: CSS links (11/5/2004 21:20:06)

Please try to keep this section for posting links to css related things. If you have a question about something, please post it in the css section with the appropriate title? Someone will answer your question. Thanks!



Shirley -> RE: CSS links (11/12/2004 23:35:52)

My version of on mouseover pop up image using css
http://moneytreesystems.com/css/picpopup.html

I found it here>> http://www.stunicholls.myby.co.uk along with some other really neat effects



d a v e -> RE: CSS links (12/8/2004 10:44:36)

This is very useful: QuirksMode Bug Reports, "entirely dedicated to finding, mending, and publishing CSS and JavaScript browser bugs." You can search by browser or by keyword, or just go to that page to see the last seven reported bugs.

http://www.quirksmode.org/bugreports/



LoriL1212 -> RE: CSS links (12/14/2004 21:56:38)

Here is one that I don't see here on this list of super links...

Dave Shea's CSS Crib Sheet - http://www.mezzoblue.com/css/cribsheet/



caz -> Typography/font sizing resources (3/21/2005 7:43:03)

Text sizing - up the garden path
http://www.thenoodleincident.com/tutorials/box_lesson/font/index.html

Size matters
http://www.alistapart.com/articles/sizematters/

Typography template - sane CSS
http://www.thenoodleincident.com/tutorials/typography


Reference guide to visually compare px and pt sizes to ems and % sized fonts
http://4ums.com/tools/font-size_em_reference.html

All are good, but as with all things browser side the user is boss of his/her own screen.

Carol



jaybee -> Convert tables to liquid css tutorial (3/30/2005 18:17:13)

Thought this might be of use for those looking to move from tables to css layout.

http://www.mardiros.net/liquid-css-layouts.html



jaybee -> Will the browser apply the rule(s)? (5/12/2005 5:57:28)

Handy tool for checking whether css tags work properly in your chosen browser.

Turn on interactive highlight and click on the command names and you'll get taken to further explanations.

http://centricle.com/ref/css/filters/?highlight_columns=true



caz -> RE: Will the browser apply the rule(s)? (6/7/2005 19:03:35)

A friend passed this link on to me, so I thought that you might like to have a look at CSS Tab Designer.

http://www.highdots.com/css-list/css-tab.php


"And leaves muttering things about approaching senility ...................."

edited for page link correction by c1sissy



Tailslide -> RE: CSS styled Guestbook (7/23/2005 9:43:05)

Here's a PHP Guestbook that you can style completely in CSS to integrate with your page:

http://www.bzabza.com/scripts/107/

Edit: To get the guestbook to fully validate (as XHTML 1.0 strict) stick this bit of code at the start of the script to combat sneaky ampersands in the session id: 

 ini_set( 'arg_separator.output' , '&' );



spitfire -> RE: CSS links (8/6/2005 11:54:42)

Many of the css sites mentioned above are contributors to this huge wiki.
http://css-discuss.incutio.com
A must if you want to get rid of thousands of bookmarks and keep what's left of your sanity[;)]



jaybee -> RE: CSS links (8/7/2005 6:30:54)

By heck! Blow me down and stap me sideways! Where has that been hiding? My entire css bookmark structure wiped out in one go.

I suppose there's no chance the site will ever disappear though? [&:]



Page: [1] 2   next >   >>

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.078125