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 6 2785
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
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
TJ wrote: Looks like tabular data. Use a table.
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
TJ wrote: 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.
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/
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
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');"><i mg
src="graphics/planner/1rightarrow.png"></a>
<a href="javascript:jsCalendarOffset(1,'years');"><im g
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 This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: Herman Kuiper |
last post by:
Hi,
The HTML at the end of this message will render erroneously on IE (at
least 5.0) and prperly on Mozilla (as I've been told). That does not
surprise me, but I *would* like to find some...
|
by: Chris Sharman |
last post by:
I've a very simple page (intranet, but moved to
http://services.ccagroup.co.uk/dtest.html for you - so the links are all
broken).
essentially it's just a list of links.
I've split it into two...
|
by: jonipony |
last post by:
HELP: Float Left box is drifting to the right in ie!
--------------------------
I need som HELP with my CSS coding!
On the following web page my design falls apart at screen size 800 x
600...
|
by: Sjef Janssen |
last post by:
Is it possible to have a box (div) which sets a background-color and which
contains (on the same line) text which is left aligned and text which is
right aligned. (as in a table: two td's left one...
|
by: Oliver Block |
last post by:
Hello,
I am using JavaScript to create a div element as container for severeal
other div elements (children). I want those children to appear side-by-side
within the container, so I've set the...
|
by: Rumba |
last post by:
Hey all, I've got a little problem... I imagine it should be pretty common
though I could not find an answer via google.
What I'm after is a static left nav with a fluid main content to the right...
|
by: notepadman |
last post by:
I have two columns of data . They are enclosed in a global div that defines the background colour, width, border, all that good stuff. Each column also has its own div block which contains a bit...
|
by: dlite922 |
last post by:
The frustrating thing with coding with divs instead of tables is trying to get them to "act" like they're inside each other.
I have a container div, and three sub-divs.
First contains a plus...
|
by: dlite922 |
last post by:
I'm back again,
Intro:
I've got a floating div (outerDIV) with fixed width that contains an image (IMG) and a div that contains a short text (innerDIV)
Problem:
In FF, the innerDIV is...
|
by: taylorcarr |
last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
|
by: Charles Arthur |
last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
|
by: aa123db |
last post by:
Variable and constants
Use var or let for variables and const fror constants.
Var foo ='bar';
Let foo ='bar';const baz ='bar';
Functions
function $name$ ($parameters$) {
}
...
|
by: ryjfgjl |
last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
|
by: ryjfgjl |
last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
|
by: emmanuelkatto |
last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud.
Please let me know.
Thanks!
Emmanuel
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
| |