Group items tagged CSS-Tables - CSS Evangelist

PingMag - The Tokyo-based magazine about "Design and Making Things" » Archive... - 7 views

www.pingmag.jp/...5-steps-to-css-heaven

mag

shared by helloe on 04 Mar 07 - Cached

Writing CSS is very much like having sex. Not everyone does it the same way and there is no particular “right” way to do it. I guess for me the similarities actually end there, seeing as writing CSS is something I do every day whereas having sex is…anyway I digress. The W3C have set the standards but beyond this, writing CSS is down to an individual’s preferences. Here are 5 little tips and ideas I’ve adopted in the last 6 months that you can use to make your CSS more streamlined, maintainable and easy to read. Written by Jon Disclaimer: The CSS example files are exactly that. They are not meant to be fully functional CSS documents. Class names in the CSS files are named merely so that you may visualise the document in your head (because there is no accompanying html), not because I condone the naming convention in them.
...

Cancel
1) Make a table of contents At the top of your CSS document, write out a table of contents. For example, you could outline the different areas that your CSS document is styling (header, main, footer etc). Then, use a large, obvious section break to separate the areas. Not only does this make your CSS look neater, but when it comes to making quick adjustments to certain areas of your website at a later date, finding the corresponding area in your CSS will be much easier. View Example File 1
...

Cancel
3) Isolate single properties that you are likely to reuse a lot If you find yourself using a single property a lot, isolate it to save yourself repeating it over and over again and also enabling you to change the display of all parts of the site that use it. View Example File 3
...

Cancel

Everything You Know About CSS Is Wrong | Digital Web Magazine: Rachel Andrew - 0 views

www.digital-web.com/...ng_you_know_about_CSS_Is_wrong

HTML-CSS rachel-andrew CSS-Tables CSS-Layout

shared by Gary Edwards on 27 Oct 08 - Cached

Gary Edwards on 27 Oct 08

The easy way to use CSS2.1 to solve difficult cross-browser layout issues: CSS tables solve all the problems encountered when using absolute positioning or floats to create multi-column layouts in modern browsers. Specifying the value table for the display property of an element allows you to display the element and its descendants as though they're table elements. The main benefit of CSS table-based layouts is the ability to easily define the boundaries of a cell so that we can add backgrounds and so on to it-without the semantic problems of marking up non-tabular content as a HTML table in the document.

<div class="cArrow"> </div><div class="cContentInner">The easy way to use CSS2.1 to solve difficult cross-browser layout issues: CSS tables solve all the problems encountered when using absolute positioning or floats to create multi-column layouts in modern browsers. Specifying the value table for the display property of an element allows you to display the element and its descendants as though they're table elements. The main benefit of CSS table-based layouts is the ability to easily define the boundaries of a cell so that we can add backgrounds and so on to it-without the semantic problems of marking up non-tabular content as a HTML table in the document.</div>

...

Cancel

Design Shack - Inspirational CSS and Blog Design - 0 views

www.designshack.co.uk/index.php

webdev css

shared by mikhail-miguel on 19 Feb 07 - Cached

Brand's Vistro 415 Views - Visit Site 5 Elan Snowboards 143 Views - Visit Site 6 Stock Temple 115 Views - Visit Site 5 Mein Brandenburg 347 Views - Visit Site 7 Kineda 277 Views - Visit Site 4 Emma's Bridal Jewelry 220 Views - Visit Site 8 Footnote 552 Views - Visit Site 5 Triple Crown 343 Views - Visit Site 7 Arts and Sciences
...

Cancel

Template:css, a searchable repository of css based layouts / una raccolta di modelli di... - 0 views

tools.i-use.it

css

shared by offerl on 16 Feb 07 - Cached

Total found:32
...

Cancel

Construct Your CSS | WYSIWYG Layout Editor, Semantic & Table-Free | Based on Blueprint ... - 0 views

constructyourcss.com

christian-montoya css css3 css-framework css-wysiwg jQuery

shared by Gary Edwards on 19 Jun 09 - Cached

Gary Edwards on 19 Jun 09

Construct is a visual layout editor based on Blueprint & jQuery! This is version 0.5, last updated on April 27, 2008. This project was built by Christian Montoya, and exists both as a useful tool for CSS designers and as proof that a visual layout editor is possible to acheive with clean CSS & semantic HTML.

<div class="cArrow"> </div><div class="cContentInner">Construct is a visual layout editor based on Blueprint & jQuery! This is version 0.5, last updated on April 27, 2008. This project was built by Christian Montoya, and exists both as a useful tool for CSS designers and as proof that a visual layout editor is possible to acheive with clean CSS & semantic HTML. </div>

...

Cancel

NealGrosskopf.com l CSS Template Layouts: A Simpler CSS Layout System, Now Possible Wit... - 1 views

www.nealgrosskopf.com/...thread.asp

webdev webdesign css jquery template layouts layout toread todo

shared by kie guy on 07 May 09 - Cached

kie guy on 07 May 09

A new layout system to replace floats or display:table or html tables. Based on the W3C's proposed 'CSS Template Layout Module' for CSS3; but using jquery to take advantage of this technique today.

<div class="cArrow"> </div><div class="cContentInner">A new layout system to replace floats or display:table or html tables. Based on the W3C's proposed 'CSS Template Layout Module' for CSS3; but using jquery to take advantage of this technique today.</div>

...

Cancel

CSS vs Tables - 13 Reasons Why CSS Is Superior to Tables in Website Design | Profession... - 0 views

www.chromaticsites.com/...or-to-tables-in-website-design

css

shared by anonymous on 04 Apr 08 - Cached

13 Reasons Why CSS Is Superior to Tables in Website Design
...

Cancel

Web Designer Notebook » How to use Modernizr - 0 views

webdesignernotebook.com/...how-to-use-modernizr

html5 css3 javascript library browser modernizr css webdesign

shared by Vernon Fowler on 15 Mar 14 - No Cached

Modernizr doesn’t actually magically enable these properties for browsers that don’t support them. It just tells the page whether that feature is supported on the browser the visitor is using or not.
...

Cancel
To install Modernizr, download the file from this page. Then, on your site’s head tag, add a link to the file. For example: ?1<script src="js/modernizr-1.0.min.js"></script> The second step is to include on your html tag a class of “no-js”: ?1<html class="no-js"> Why add this tag? Because that will be the default state of the page. If JavaScript (js) isn’t on, then Modernizr won’t work at all (and probably other features of your site won’t work either…), so it’s good that we have a fallback for that case. If JavaScript is indeed enabled, once that page is loaded on the browser, that class will be replaced dynamically and it may look something like this: ?1<html class="js canvas canvastext geolocation rgba hsla no-multiplebgs borderimage borderradius boxshadow opacity no-cssanimations csscolumns no-cssgradients no-cssreflections csstransforms no-csstransforms3d no-csstransitions  video audio cufon-active fontface cufon-ready">
...

Cancel

Vernon Fowler on 15 Mar 14

"There is a tool that came to make our lives as progressive web designers a bit easier: Modernizr. In this short tutorial, learn how to apply this handy script to maximum effect on your sites."

<div class="cArrow"> </div><div class="cContentInner">"There is a tool that came to make our lives as progressive web designers a bit easier: Modernizr. In this short tutorial, learn how to apply this handy script to maximum effect on your sites."</div>

...

Cancel

An introduction to LESS, and comparison to Sass | Smashing Coding - 0 views

coding.smashingmagazine.com/...to-less-and-comparison-to-sass

less sass css comparison webdesign css3 preprocessor

shared by Vernon Fowler on 25 Feb 14 - No Cached

The only difference in variables between LESS and Sass is that, while LESS uses @, Sass uses $. There are some scope differences as well, which I’ll get to shortly.
...

Cancel
With Sass, you declare @mixin prior to the style to identify it as a mixin. Later, you declare @include to call it.
...

Cancel
Parametric Mixins Like having functions in your CSS (*swoon*), these can be immensely useful for those seemingly redundant tasks of modern-day CSS.
...

Cancel
...8 more annotations...
.border-radius( @radius: 3px ) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; }
...

Cancel
The syntax in Sass is very similar to that of LESS. Just use the $ for variables, and call the mixins with the @mixin and @include method mentioned earlier.
...

Cancel
Selector Inheritance Here’s something not provided in LESS. With this ability, you can append a selector to a previously established selector without the need to add it in a comma-separated format. .menu { border: 1px solid #ddd; } .footer { @extend .menu; } /* will render like so: */ .menu, .footer { border: 1px solid #ddd; }
...

Cancel
With LESS, you can nest ids, classes and elements as you go.
...

Cancel
You can also refer in element styles to their pseudo-elements by using the &, which in this case functions similar to this in JavaScript.
...

Cancel
Sass is a lot more versatile with numbers than LESS. It has built into it conversion tables to combine comparable units.
...

Cancel
Sass seems to have a lot more color options — not that I would need them all. Lighten and darken are the only ones that I see myself using often.
...

Cancel
Conditionals and Control This is rather nifty, and another thing not provided by LESS. With Sass, you have the ability to use if { } else { } conditional statements, as well as for { } loops. It supports and, or and not, as well as the <, >, <=, >= and == operators.
...

Cancel

CSSRank - CSS Gallery For The Best Designed Web 2.0 Sites - 172 views

The development of web applications has drastically changed since its advent. Websites were normally designed with dominant tables in it. But this changed to a more portable and reliable method of ...

general

started by css rank on 28 Oct 08 no follow-up yet

Can I use... Support tables for HTML5, CSS3, etc - 6 views

caniuse.com

css support html5 html

shared by mikhail-miguel on 01 May 10 - Cached

yc c on 01 May 10

PNG HTML5 DOM CSS3 CSS2 SVG Canvas http://caniuse.com/#agents=All&eras=All&cats=PNG,HTML5,DOM,CSS3,Other,CSS2,SVG,Summary&statuses=rec,pr,cr,wd,ietf

<div class="cArrow"> </div><div class="cContentInner">PNG HTML5 DOM CSS3 CSS2 SVG Canvas <a href="http://caniuse.com/#agents=All&eras=All&cats=PNG,HTML5,DOM,CSS3,Other,CSS2,SVG,Summary&statuses=rec,pr,cr,wd,ietf" rel="nofollow" target="_blank">http://caniuse.com/#agents=All&eras=All&cats=PNG,HTML5,DOM,CSS3,Other,CSS2,SVG,Summary&statuses=rec,pr,cr,wd,ietf</a></div>

...

Cancel

A CSS styled table - 0 views

veerle.duoh.com/...a_css_styled_table

css webdesign table

shared by Hussain M Elius on 20 Nov 08 - Cached

Hussain M Elius on 20 Nov 08

Styling a table using CSS

<div class="cArrow"> </div><div class="cContentInner">Styling a table using CSS</div>

...

Cancel

CSS - Contents and compatibility - 0 views

www.quirksmode.org/...contents.html

browser css

shared by yc c on 12 Feb 08 - Cached

Quirks Mode
...

Cancel

Perry Branch on 12 Feb 08

This is an excellent resource comparing browser CSS support.

<div class="cArrow"> </div><div class="cContentInner">This is an excellent resource comparing browser CSS support.</div>

...

Cancel
Perry Branch on 12 Feb 08

A very readable table of CSS feature support across several current browsers.

<div class="cArrow"> </div><div class="cContentInner">A very readable table of CSS feature support across several current browsers.</div>

...

Cancel

Grid design basics: Grids for Web page layouts - Opera Developer Community - 2 views

dev.opera.com/...gn-basics-grids-for-web-page-l

css3 opera modular-grids

shared by Gary Edwards on 16 Mar 09 - Cached

Gary Edwards on 16 Mar 09

Since tables were co-opted for layout purposes, columns have become key to many Web design layouts, and this thinking continued when CSS took over from tables (at least in the minds of savvy designers) for Web-page presentation. However, other fields of layout design don't think in arbitrary columns, they work with grids, and these form the basis for the structure of page designs. This article will provide the lowdown on grid design for Web pages. Thinking modular Grids are a template, a framework within which creativity can flourish. Too many designers spend time looking at a blank canvas, trying to figure out where elements should be positioned, but, if you have a flexible underlying grid, many such problems are already solved for you. It becomes obvious where and how elements should and can be positioned, thereby leaving you, the designer, with more time to work on graphic design and other page components.

<div class="cArrow"> </div><div class="cContentInner">Since tables were co-opted for layout purposes, columns have become key to many Web design layouts, and this thinking continued when CSS took over from tables (at least in the minds of savvy designers) for Web-page presentation. However, other fields of layout design don't think in arbitrary columns, they work with grids, and these form the basis for the structure of page designs. This article will provide the lowdown on grid design for Web pages. Thinking modular Grids are a template, a framework within which creativity can flourish. Too many designers spend time looking at a blank canvas, trying to figure out where elements should be positioned, but, if you have a flexible underlying grid, many such problems are already solved for you. It becomes obvious where and how elements should and can be positioned, thereby leaving you, the designer, with more time to work on graphic design and other page components.</div>

...

Cancel

CSS3: Media Queries in the Wild | The Inspiration Blog - 0 views

www.theinspirationblog.net/...css3-media-queries-in-the-wild

media queries reference

shared by Alexis Sgavel on 01 Apr 11 - No Cached

Alexis Sgavel on 01 Apr 11

Media Queries are here! The new, 'hip' approach to fluid web development. This awesome CSS technique allows web developers to provide multiple site layouts based on the width of the web browser. Percentage based tables, eat your heart out!

<div class="cArrow"> </div><div class="cContentInner">Media Queries are here! The new, 'hip' approach to fluid web development. This awesome CSS technique allows web developers to provide multiple site layouts based on the width of the web browser. Percentage based tables, eat your heart out!</div>

...

Cancel

CSS Tables - 0 views

rino.bowdoin.edu/...css-tables

css techniques webdev css

shared by mikhail-miguel on 05 Mar 18 - Cached

Accessible CSS Forms: Using CSS to Create a Two-Column Layout - replace tables with css... - 0 views

www.websiteoptimization.com/...forms

css

shared by ronzuo on 18 Feb 07 - Cached

CSS Basics - Making Cascading Style Sheets Easy to Understand - 1 views

www.cssbasics.com

css theory webdev css

shared by mikhail-miguel on 14 Feb 07 - Cached

You've heard the buzz about the seperation of style from content, but you are stuck in the world of nested tables and deprecated markup. If so, you have come to the right place! Using CSS to style your (X)HTML files, will benefit you and your visitors in many ways.
...

Cancel

css-only table-less forms - 0 views

jeffhowden.com/forms