Jeffrey Zeldman Presents A library of DHTML and AJAX scripts - DHTMLgoodies.com css/edge Please note that none of the demonstrations in css/edge are intended to work in Navigator 4.x. I say this not to denigrate that browser, but instead to spare you any frustration you might otherwise feel. This site exists to explore the cutting edge of HTML+CSS design, and Navigator 4.x is, at four years and counting, just too old to keep up with most things that will be done here. Again, there's nothing wrong with Navigator 4.x, but you probably don't want to use it in this area. Consider it a friendly warning. Welcome to the edge What is this? Expanding our horizons For the last seven years, we've been pushing Web design further and further down the same path. Like tables, there is another highly limiting structure that's composed of rows and cells: a prison. css/edge is intended, first and foremost, to be as relentlessly creative with CSS as we have been practical all these years. Inclusion Criteria Copyright
Complex Spiral Consulting: Publications A collection of articles, white papers, and other material that is of general interest and freely available to all visitors. Many of these were written to address commonly encountered problems in standards-based design, and based on situations we've encountered while working on client projects. Uncollapsing Margins Although margin collapsing usually does what authors want, even if they don't realize it, there are cases where authors will want to effectively disable collapsing. Find out how you can do this when it's necessary. (3 November 2004) Containing Floats You may have stumbled across a situation where a floated element sticks out of its parent element, causing mayhem. Rounding Tab Corners When creating a "navbar" across the top of a page, an author might want to make the links look like folder tabs. Elsewhere Going To Print — Explore the ins and outs of creating a print stylesheet for an existing Web site; in this case, the famous A List Apart.
CSS Positioning Review the W3C CSS standard recommendation. To use CSS for layout effectively, it helps to know how it's used to position page content. This article gives an overview of the methods and rules that govern visual rendering in the CSS2 specification. Although the specification applies to any device for displaying web pages, this article focuses on how it works in browsers. It's important to remember that a given browser may not support a given feature or may even implement it incorrectly. The Box Model To understand positioning in CSS you must first understand the box model. content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content margin border padding content Margins are always transparent. Box Types There are two basic types of boxes, block and inline. Normal Flow
Step by step CSS float tutorial Floatutorial takes you through the basics of floating elements such as images, drop caps, next and back buttons, image galleries, inline lists and multi-column layouts. General info Tutorial 1. Float an image to the right of a block of text and apply a border to the image. Tutorial 2. Float an image and caption to the right of a block of text and apply borders using Descendant Selectors. Tutorial 3. Float a series of images down the right side of the page, with content flowing beside them. Tutorial 4. Float a series of thumbnail images and captions to achieve an image gallery. Tutorial 5. Float a simple list into rollover "back" and next "buttons". Tutorial 6. Float a simple list, converting it into a horizontal navigation bar. Tutorial 7. Float a scaleable drop cap to the left, resize it and adjust line-heights to suit your needs. Tutorial 8. Float a left nav to achieve a two column layout with header and footer. Tutorial 9.
BlueRobot - There's nothing wrong with gray. Selectutorial: CSS selectors Selectutorial - CSS selectors Selectutorial - CSS selectors Selectors are one of the most important aspects of CSS as they are used to "select" elements on an HTML page so that they can be styled. Find out more about selectors including the structure of rules, the document tree, types of selectors and their uses. Rules The document tree - it's a family thing Selectors Advanced stuff Selectors in action - a step by step tutorial Max Design Feeds Recent articles Popular articles Other Max Design articles and presentations Associated with webstandardsgroup.org
Page Layout Generator About the CSS Layout Generator The CSS Layout Generator was first released by Tony Aslett in October 2003, since then over 871,000 layouts have been generated. Updated in November 2010, HTML5 doctype can now be selected and a simple HTML5 template with appropriate tags will be created. The generator helps you create the structure of your website template using valid HTML and CSS. You can create a fluid or fixed width floated column layout, with up to 3 columns and with header and footer. The generator requires a modern DOM capable browser with JavaScript enabled. Instructions To create your layout select the structural elements your site requires (header, footer, columns). Info popups are available where you see InfoMore info example :) icon, just hover over it for more information. Join the CSS Forum to suggest changes or ask for help where needed. Author: Tony Aslett
css Zen Garden: The Beauty in CSS Design