September 9, 2008 PLEASE FORWARD
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Tips, Tricks, News and Reviews for Web Coders
by Kevin Yank (techtimes@sitepoint.com)
Read the HTML version of this newsletter, with graphics, at:
http://www.sitepoint.com/newsletter/viewissue.php?id=3&issue=206
Note: This newsletter is supported solely by advertisers like the
one below. We stand 100% behind every ad that we run. If you ever
have a problem with a company that advertises here please contact
us and we will try to get it resolved.
INTRODUCTION - - - - - - - - - - - - - - - - - - - - - - - - - -
"...we've implemented every property in CSS 2.1 and are closing
in on our goal of complete support for the CSS 2.1 specification
by the time we release."
If you were to guess who recently made that statement you'd be
forgiven for thinking it came from the Opera, Safari, or Firefox
team; they have always seemed to be the most standards-conscious
browser vendors. In fact, this quote comes from Doug Stamper of
Microsoft, regarding Internet Explorer 8 [1].
It seems the very thing web designers have been asking for --
mature support for CSS2.1 across all major browsers -- is
actually about to happen. Back in Tech Times #185 [2], Kevin
Yank wrote about what this would mean to web designers in
Table-Based Layout Is The Next Big Thing [3]. In short, he said
that CSS tables would become the best tool for CSS page layout.
There were mixed reactions [4] to that article, particularly on
the point of row and column spans. HTML tables let you create
cells that span multiple rows or columns, but CSS tables don't
provide that same freedom.
Well, in his research for an as yet unannounced, potentially
controversial book on CSS, Kevin has found an answer. In this
issue, he returns to the topic of CSS-table layouts and
describes a method for simulating row and column spans.
[1] <http://blogs.msdn.com/ie/archive/2008/09/08/internet-explorer-8-beta-2-platform-improvements.aspx>
[2] <http://www.sitepoint.com/newsletter/viewissue.php?id=3&issue=185>
[3] <http://www.sitepoint.com/newsletter/viewissue.php?id=3&issue=185#5>
[4] <http://www.sitepoint.com/blogs/2008/02/28/table-based-layout-is-the-next-big-thing/#comments>
SPONSOR'S MESSAGE - - - - - - - - - - - - - - - - - - - - - - - -
ektron
What do you want your website to do?
Ektron CMS400.NET gives you all the tools you need to create,
deploy, and manage your Web site - all rolled into one application.
* Corporate Web Site: Put authoring in the hands of your subject matter experts
* Intranet: support inter-departmental communication
* Social Networking Platform: Make your site an online destination
* Web 2.0 Toolbox: Make your site more interactive & engaging
* Ektron Starter Sites: Build your site faster and smarter.
Version 7.5 now available! Watch an INSTANT DEMO now:
http://www.ektron.com/instant_demo.cfm?cpcid=4323&cpid=NLC-2689&campaignid=2689
IN THIS ISSUE - - - - - - - - - - - - - - - - - - - - - - - - - -
- Introduction
- Rowspans & Colspans in CSS Tables
- New Technical Articles
- Techy Forum Threads
- More Techy Blog Entries
ROWSPANS & COLSPANS IN CSS TABLES - - - - - - - - - - - - - -
by Kevin Yank
If you've had experience building layouts using HTML
tables, you'll be familiar with the use of the colspan and
rowspan attributes of the td element. These attributes offer
complex possibilities to a simple table, enabling cells to span
columns and rows.
CSS tables lack any concept of row or column spanning, making it
trickier to use one single layout structure than what might have
been possible when using tables. However, similar layouts can be
achieved by using nested CSS tables.
Of course, nested tables are not a perfect solution. When you
want to match the dimensions of cells across nested tables, for
example, things can get messy in a hurry, and the extra <div>
tags really start to add up.
As it turns out, it's also possible to simulate row and
column spanning using absolute positioning of table cells, in
many cases. In this example, we'll make the second cell of
the first row of a table span both rows of the table (as if it
had a rowspan of 2). First, let's take a look at the HTML
code:
<div class="tablewrapper">
<div class="table">
<div class="row">
<div class="cell"> Top left </div>
<div class="rowspanned cell"> Center </div>
<div class="cell"> Top right </div>
</div>
<div class="row">
<div class="cell"> Bottom left </div>
<div class="empty cell"></div>
<div class="cell"> Bottom right </div>
</div>
</div>
</div>
You'll notice that we've wrapped our table div in an
extra div with a class of "tablewrapper". This extra div is
needed to provide a CSS positioning context -- which we
create by giving it relative positioning:
.tablewrapper {
position: relative;
}
According to the CSS spec, we should be able to simply apply
relative positioning to the table div, but current browsers
don't seem to support this.
Read on below for the CSS code that makes the row span possible.
SPONSOR'S MESSAGE - - - - - - - - - - - - - - - - - - - - - - - -
Maintaining a website can be both fun and sometimes frustrating
especially if the web host does not catch up to your needs. The
owners behind WebHostingBuzz have experienced it all.
We have been there and done it. We know what YOU want when it comes
to running a script oriented website. We know what YOU want when it
comes to value for your web hosting dollars. We host over 150,000
domains across the globe. Surely we can host yours!
Host unlimited websites under one account. Get a free domain name
for life, tons of web space and transfer for only $40 per year.
http://www.webhostingbuzz.com/website-hosting.shtml?host_sitepoint-special
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Now, we can use absolute positioning to control the size and
position of the div with class "rowspanned cell":
.cell.rowspanned {
position: absolute;
top: 0;
bottom: 0;
width: 100px;
}
With the top and bottom properties both set to zero, the cell
will stretch to fill the full height of the table, simulating a
row span. Depending on the needs of your layout, you could use
different values for top and bottom, or even set the
cell's height directly to achieve other row-spanning
layouts.
You also need to specify the width of the cell. Usually, the
easiest way to do this is just to set its width property, but
depending what you know of the dimensions of surrounding table
cells, you could also do this by setting left and right.
Since the positioned cell doesn't actually span multiple
rows of the table, the table must still contain a corresponding
cell in each of the other rows. These cells are simply empty
placeholders, though; note the div with class "empty cell" in
the HTML code above. The function of this cell is to hold open
the space that will be occupied by the "spanned"
cell, so we must ensure its width matches the width we specified
for the "rowspanned cell":
.cell.empty {
width: 100px;
}
And that's all there is to it! To complete the style sheet
for this example, we need only set the appropriate display
property values, and add some borders so we can see what's
going on:
.tablewrapper {
position: relative;
}
.table {
display: table;
}
.row {
display: table-row;
}
.cell {
border: 1px solid red;
display: table-cell;
}
.cell.empty {
border: none;
width: 100px;
}
.cell.rowspanned {
position: absolute;
top: 0;
bottom: 0;
width: 100px;
}
In essence, by using absolute positioning we are telling the
browser, "Let me handle the layout of this table
cell -- you take care of the rest." Here's what the
results look like:
http://i2.sitepoint.com/g/nl/tt/csstables-rowspan.jpg
This example works in all major browsers except for Internet
Explorer 7, and also works in the current IE8 Beta 2 release.
What do you think? Can you see yourself switching to CSS tables
for layout as your Internet Explorer users make the move to IE8?
Leave a comment to let me know:
Rowspans & Colspans in CSS Tables [1]
by Kevin Yank
JavaScript & CSS Blog: Stylish Scripting
[1] <http://www.sitepoint.com/blogs/2008/09/09/rowspans-colspans-in-css-tables/>
SPONSOR'S MESSAGE - - - - - - - - - - - - - - - - - - - - - - - -
Learn the Greatest Hits of PHP
The PHP Anthology. Save time, and eliminate the frustration of
completing PHP5 tasks, with this comprehensive collection of
ready-to-use solutions.
* Build functional forms, tables, and SEO-friendly URLs.
* Reduce load time with client-and server-side caching.
* Produce and utilize web services with XML.
* Secure your site using access control systems.
* Easily work with files, emails, and images.
* And much more... Too much to mention here!
Order a copy today! Available in PDF or hardcopy format.
https://sitepoint.com/bookstore/go/120/1cde39/
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
See you next week for another issue of the Tech Times!
Kevin Yank
techtimes@sitepoint.com
Editor, The SitePoint Tech Times
NEW TECHNICAL ARTICLES - - - - - - - - - - - - - - - - - - - - -
Build a Yahoo Music Mashup with Adobe AIR
by Jack Herrington
Ever wanted to do more with your iTunes library? In this
tutorial, Jack shows you how you can leverage the Yahoo Music
API to create video timelines of your favorite artists--and get
your hands dirty with Flex and AIR along the way! Oh, and there
are more books to be won...
http://www.sitepoint.com/article/1668
TECHY FORUM THREADS - - - - - - - - - - - - - - - - - - - - - - -
How to do a site that is user updatable?
<http://www.sitepoint.com/forums/showthread.php?threadid=570222>
What is Computer Vision Syndrome (CVS) and what we can do to
avoid it
<http://www.sitepoint.com/forums/showthread.php?threadid=570612>
for AJAX, is the status 200 and 304 both needed to be considered
for a success?
<http://www.sitepoint.com/forums/showthread.php?threadid=570588>
More book and PDF giveaways...
<http://www.sitepoint.com/forums/showthread.php?threadid=569857>
Too Busy to Appreciate ..
<http://www.sitepoint.com/forums/showthread.php?threadid=568951>
Failure to pay for completed website. Options?
<http://www.sitepoint.com/forums/showthread.php?threadid=567358>
MORE TECHY BLOG ENTRIES - - - - - - - - - - - - - - - - - - - - -
Web Tech Blog: TECHNICALLY SPEAKING
SitePoint Technical Editor Might Just Be Your Dream Job (12
comments)
http://www.sitepoint.com/blogs/2008/09/05/sitepoint-technical-editor-might-just-be-your-dream-job/
ColdFusion Blog: INFUSED
The release of ColdFusion 9...
http://www.sitepoint.com/blogs/2008/09/05/the-release-of-coldfusion-9/
News & Trends Blog: INDUSTRY NEWS FOR WEB PROFESSIONALS
Scalability: Traction from a Slippery Beast (5 comments)
http://www.sitepoint.com/blogs/2008/08/26/scalability-traction-from-a-slippery-beast/
ADVERTISING INFORMATION - - - - - - - - - - - - - - - - - - - - -
Find out what thousands of savvy Internet marketers already know:
email newsletter advertising works! (You're reading an email ad
now, aren't you?)
Find out how to get YOUR sponsorship ad in this newsletter and
reach 95,000+ opt-in subscribers! Check out
http://www.sitepoint.com/mediakit/ for details, or email us at
mailto:adinfo@sitepoint.com
HELP YOUR FRIENDS OUT - - - - - - - - - - - - - - - - - - - - - -
People you care about can take charge of their Website by
effectively using the information and resources available on the
Internet. Help them learn how - forward them a copy
of this week's SitePoint Tech Times.
ADDRESSES - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Send suggestions and comments to:
techtimes@sitepoint.com
To subscribe, send a blank email to:
subscribe@sitepoint.com
The Archives are located at:
http://www.sitepoint.com/newsletter/archives.php
The SitePoint Tech Times is (c) 1998-2008 SitePoint Pty. Ltd. All
Rights Reserved. No part of this Newsletter may be reproduced in
whole or in part without written permission. All guest articles
are copyright their respective owners and are reproduced with
permission.
SitePoint Pty. Ltd.
48 Cambridge Street
Collingwood, VIC 3066
AUSTRALIA
You are currently subscribed to The SitePoint Tech Times as:
ignoble.experiment@arconati.us
To change the email address that you currently subscribe with:
http://sitepoint.com/newsletter/manage.php
To switch to the HTML version of this newsletter:
<http://sitepoint.com/newsletter/htmlplease.php?email=ignoble.experiment@arconati.us>
To leave this list, send a blank email to:
leave-2489718-2266608.e57363ef99c8b59c8667cca2fd106cbe@sitepoint.sparklist.com
Do Not Reply to this email to unsubscribe.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
No comments:
Post a Comment
Keep a civil tongue.