Stylesheets - align batch of spans with float:left to a new block

Author

align batch of spans with float:left to a new block

2004-08-26, 7:17 pm

I've got a calendar that is based on the concept of lots of blocks that are
spans with float:left. I would like to be able to have a detail section on
the right side of the screen, so that when the user selects an item on the
calendar, the detail can get displayed on the right side there. What I
have below appears to look perfect in mozilla based browsers - the detail
is aligned at the top right corner of the calendar, but in IE the detail
section appears at the bottom left corner of the calendar. Instead, when I
define my detail section as float:left, it is floated at the bottom right
corner of the calendar (as if it is another calendar day)... so not
floating it seems to be the closest I can get on my own.

Want (x = div1, D = div2):
XXXXXXX DDD
XXXXXXX DDD
XXXXXXX DDD
XXXXXXX
XXXXXXX

1. Is there a better way to do this (without using spans for my daily
blocks)?
2. I need a recommendation on how I get the detail info displayed without
using stinky html form elements (in other words - using javascript instead
of making a trip to the server to get a newly generated page)?

Thanks!

<style type="text/css">
#calendar {padding-top: .5em; width: 60em; margin-left:2em; font-family:
century gothic, arial, tahoma;}
#calendar span {float: left; width: 8em; height: 6em; padding: 0; margin:
0.125em; text-align: left; border: 1px dotted #E0E0E0; overflow:hidden;}
#calendar{clear: left; font-size: 9pt; color: navy;}
.dead {color: #C0C0C0; background-color: #F0F0F0;}
p.event {font-size: 6pt; color: navy; margin: 0;}
p.date {font-weight: bold; margin: 0;}
img {margin-left: 2px; margin-right: 2px;}
.month {font-size: large; text-transform: capitalize; letter-spacing: 3px;
vertical-align:text-bottom;}
#detail {}
</style>

<div id="calendar">
<p class="month">August 2004</p>
<span class="day">1</span>
<span class="day">2<p class="event"><img
src="graphics/planner/birthday.gif">Name</p>
</span>
<span class="day">3</span>
<span class="day">4</span>
<span class="day">5</span>
<span class="day">6</span>
<span class="day">7</span>
<span class="day">8<p class="event"><img
src="graphics/planner/anniversary.gif">Name</p>
</span>
<span class="day">9</span>
<span class="day">10<p class="event"><img
src="graphics/planner/anniversary.gif">Name</p>
</span>
<span class="day">11</span>
<span class="day">12<p class="event"><img
src="graphics/planner/birthday.gif">Name</p>
</span>
<span class="day">13<p class="event"><img
src="graphics/planner/anniversary.gif">Name</p>
</span>
<span class="day">14</span>
<span class="day">15</span>
<span class="day">16<p class="event"><img
src="graphics/planner/birthday.gif">Name</p>
</span>
<span class="day">17<p class="event"><img
src="graphics/planner/anniversary.gif">Name</p>
</span>
<span class="day">18<p class="event"><img
src="graphics/planner/birthday.gif">Name</p>
</span>
<span class="day">19</span>
<span class="day">20</span>
<span class="day">21</span>
<span class="day">22</span>
<span class="day">23</span>
<span class="day">24</span>
<span class="day">25</span>
<span class="day"><p class="date">26</p></span>
<span class="day">27</span>
<span class="day">28</span>
<span class="day">29</span>
<span class="day">30</span>
<span class="day">31</span>
<span class="dead">1</span>
<span class="dead">2<p class="event"><img
src="graphics/planner/anniversary.gif">Name</p>
</span>
<span class="dead">3</span>
<span class="dead">4</span>
</div>

<div id="detail">
detail section<BR>
description<BR>
start<BR>
end<BR>
due<BR>
completed<BR>
</div>
--
TJ

David Dorward

2004-08-26, 7:17 pm

TJ wrote:

> 1. Is there a better way to do this (without using spans for my daily
> blocks)?

Rows: Weeks
Columns: Days

Looks like tabular data. Use a table.

> 2. I need a recommendation on how I get the detail info displayed without
> using stinky html form elements (in other words - using javascript instead
> of making a trip to the server to get a newly generated page)?

http://w3.org/DOM/ - read the level 1 spec. You want to create and and
replace text nodes. Make sure you have the round-trip to the server as fall
back for browsers which don't support it. You should also consider the
implications on link sharing and bookmarking.

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

2004-08-26, 7:17 pm

David Dorward wrote:
> Rows: Weeks
> Columns: Days
> Looks like tabular data. Use a table.

I was originally thinking that the purpose of CSS was simply to separate the
content from the formatting. What I seem to be picking up from this
newsgroup is that there are presentational purposes that require certain or
specific CSS methods. Should I be trying to figure out how the content
will look "acceptable" without formatting prior to applying a css? There
seems to be a bit of uncertainty as to which side of the dotted line the
html table tag falls... when and how it is used. In my application, I was
trying to avoid table cells for two reasons - because of a few articles
from people screaming that tables shouldn't be a part of a presentation
that is formatted with CSS... and because i wasn't planning on always
presenting a finite number of cells for a given calendar month. The span
tag allowed me to do both - not use tables and to not know the number of
cells.

> http://w3.org/DOM/ - read the level 1 spec. You want to create and and
> replace text nodes. Make sure you have the round-trip to the server as
> fall back for browsers which don't support it. You should also consider
> the implications on link sharing and bookmarking.
>

Ah! (and thanks so much for not berating me about it!)

--
TJ

David Dorward

2004-08-26, 11:15 pm

TJ wrote:

[color=darkred]
> There seems to be a bit of uncertainty as to which side of the dotted line
> the html table tag falls... when and how it is used. In my application, I
> was trying to avoid table cells for two reasons - because of a few
> articles from people screaming that tables shouldn't be a part of a
> presentation that is formatted with CSS...

The message has got a bit muddled I'm afraid. Somehow "Don't use tables for
layout" has suffered from Chinese Whispers and become "Don't use tables".

HTML should be used to describe the data and its relationship to other data.
In the case of data which can be divided in to rows and columns with
specified meaning (e.g. Each row contains cells representing days which are
part of the same week. Each column contains cells representing the same day
of different weeks.) Then a table is the correct HTML to describe the
relationship.

It is tables which don't describe such a relationship that should be avoided
(this top cell, which spans 3 columns, contains the page header. The first
and last cells of the next row contain side bars, and the middle contains
the actual page content).

> and because i wasn't planning on always presenting a finite number of
> cells for a given calendar month.

I don't think it is possible to have an infinite number of days in a
month :)

> The span tag allowed me to do both - not use tables and to not know the
> number of cells.

You could use a script to generate the table for the current month. There
are probably dozens out there prewritten. I believe that Word Press
includes some PHP code that does it and that you can use under a Free
license.

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

Brian

2004-08-26, 11:15 pm

TJ wrote:

> David Dorward wrote:
>
>
> I was originally thinking that the purpose of CSS was simply to
> separate the content from the formatting.

To separate content and meaning from the presentation details, yes. That
doesn't mean there is not presentation at all, since the ua will use
some (hopefully suitable) presentation.

> What I seem to be picking up from this newsgroup is that there are
> presentational purposes that require certain or specific CSS methods.
>
I don't understand what you're trying to say here.

> Should I be trying to figure out how the content will look
> "acceptable" without formatting prior to applying a css?

In a sense, yes. CSS is optional, per the spec. So the content should be
comprehensible without it. But that presentation is up to the ua,
really. Your job is to use the correct markup. After that, look at the
default rendering in a browser or two, and use css to adjust to taste.

> There seems to be a bit of uncertainty as to which side of the dotted
> line the html table tag falls... when and how it is used.

<table> markup should be used to markup tabular data, that is, any data
where information in a cell bears a relationship to data in cells in the
same row or column.

> In my application,

It's a calendar, right? So, as D. Dorward said, each column is a day of
the week. Thus, each <td> in a column has a relationship to the others:
each one is a Monday, or a Tuesday, or... And each row also shares a
relationship, namely, they all belong to a week. Yep, it's a table.

> from people screaming that tables shouldn't be a part of a
> presentation that is formatted with CSS...

It shouldn't be used to layout material that does *not* share any data
relationship. Use css for layout.

> and because i wasn't planning on always presenting a finite number of
> cells for a given calendar month. The span tag allowed me to do both
> - not use tables and to not know the number of cells.

Is there no convenient way to use a table? It does seem natural, but
only you know your application.

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/

2004-08-26, 11:16 pm

Brian wrote:

> I don't understand what you're trying to say here.

You've already answered it - when & why to use a table in a presentation
containing css. Thanks.

I'll post my next attempt at cleaning this in a few minutes on the other
branch of this thread.

--
TJ

2004-08-26, 11:16 pm

Thanks for your reply. I'll study up on the DOM, but until then, my (php)
solution is:

xxxxxxx ddd
xxxxxxx ddd
xxxxxxx
xxxxxxx
xxxxxxx

1. Calendar is now a table
2. Always render 5 weeks gives finite number of days for rows & cols
3. Calendar is in a span (to get horiz align w/detail)
4. Detail is in a span (to get horiz align w/cal)
5. Table cell width & height are fixed using a div tag in each cell, to
show a minimum amount of data
6. Table cell overflow:hidden to prevent expansion

More feedback welcome.
Thanks!

<style type="text/css">
#calendar {float:left; padding-top: 0; margin-left:1em; table-layout:
fixed; font-family: century gothic, arial, tahoma; font-size: 9pt;
color:navy;}
.calcell{height: 6em; overflow:hidden;}
.day {vertical-align: top; text-align: left; width: 8em; height: 6em;
padding: 0; margin: 0.125em; border: 1px dotted #E0E0E0;}
.dead {vertical-align: top; text-align: left; color: #C0C0C0;
background-color: #F0F0F0;}
p.event {font-size: 6pt; color: navy; margin: 0;}
p.date {font-weight: bold; text-decoration: blink; margin: 0;}
img {margin-left: 2px; margin-right: 2px;}
.month {font-size: large; text-transform: capitalize; letter-spacing: 3px;
vertical-align:text-bottom;}
#detail {}
</style>

<span id="calendar">
<p class="month">
<a href="javascript:jsCalendarOffset(-1,'years');"><img
src="graphics/planner/2leftarrow.png"></a>
<a href="javascript:jsCalendarOffset(-1,'months');"><img
src="graphics/planner/1leftarrow.png"></a>
August 2004
<a href="javascript:jsCalendarOffset(1,'months');"><img
src="graphics/planner/1rightarrow.png"></a>
<a href="javascript:jsCalendarOffset(1,'years');"><img
src="graphics/planner/2rightarrow.png"></a>
</p>
<table class="calendar">
<tr>
<td class="day"><div class="calcell">1</div></td>
<td class="day"><div class="calcell">2<p class="event"><img
src="graphics/planner/birthday.gif">EventName</p></div></td>
<td class="day"><div class="calcell">3</div></td>
<td class="day"><div class="calcell">4</div></td>
<td class="day"><div class="calcell">5</div></td>
<td class="day"><div class="calcell">6</div></td>
<td class="day"><div class="calcell">7</div></td>
</tr>
<tr>
<td class="day"><div class="calcell">8<p class="event"><img
src="graphics/planner/anniversary.gif">EventName/p></div></td>
<td class="day"><div class="calcell">9</div></td>
<td class="day"><div class="calcell">10<p class="event"><img
src="graphics/planner/anniversary.gif">EventName/p></div></td>
<td class="day"><div class="calcell">11</div></td>
<td class="day"><div class="calcell">12<p class="event"><img
src="graphics/planner/birthday.gif">EventName</p></div></td>
<td class="day"><div class="calcell">13<p class="event"><img
src="graphics/planner/anniversary.gif">EventName</p></div></td>
<td class="day"><div class="calcell">14</div></td>
</tr>
<tr>
<td class="day"><div class="calcell">15</div></td>
<td class="day"><div class="calcell">16<p class="event"><img
src="graphics/planner/birthday.gif">EventName</p></div></td>
<td class="day"><div class="calcell">17<p class="event"><img
src="graphics/planner/anniversary.gif">EventName</p></div></td>
<td class="day"><div class="calcell">18<p class="event"><img
src="graphics/planner/birthday.gif">EventNamel</p></div></td>
<td class="day"><div class="calcell">19</div></td>
<td class="day"><div class="calcell">20</div></td>
<td class="day"><div class="calcell">21</div></td>
</tr>
<tr>
<td class="day"><div class="calcell">22</div></td>
<td class="day"><div class="calcell">23</div></td>
<td class="day"><div class="calcell">24</div></td>
<td class="day"><div class="calcell">25</div></td>
<td class="day"><div class="calcell"><p class="date">26</p></div></td>
<td class="day"><div class="calcell">27</div></td>
<td class="day"><div class="calcell">28</div></td>
</tr>
<tr>
<td class="day"><div class="calcell">29</div></td>
<td class="day"><div class="calcell">30</div></td>
<td class="day"><div class="calcell">31</div></td>
<td class="dead"><div class="calcell">1</div></td>
<td class="dead"><div class="calcell">2<p class="event"><img
src="graphics/planner/anniversary.gif">EventName/p></div></td>
<td class="dead"><div class="calcell">3</div></td>
<td class="dead"><div class="calcell">4</div></td>
<tr>
</table>
</span>

<span id="detail">
detail section<BR>
description<BR>
start<BR>
end<BR>
due<BR>
completed<BR>
</span>

--
TJ