CodingCSS: min-height

  

Press Ctrl+Enter to quickly submit your post
Quick Reply  
 
 
  
 From:  Peter (BOUGHTONP)   8 Jun 2010 19:42 
 To:  99% of gargoyles look like (MR_BASTARD)       13 of 19 
37448.13 In reply to 37448.12 
I wasn't saying Mike's link was what to use - although I don't see the tough criticism either? (just some moans about browser support)

A monthly calendar with specific rows/cols is tabular - nobody here is disagreeing with that.

But my point is that one should look at what they're doing and decide, rather than assume that "group of dates" automatically must always mean "monthly calendar".

For more sequential/timeline-based things, when the specific day/week are not the key identifier, using a list makes more sense, since it can be laid out both in grid format and regular 'unwrapped' format, and so on.

If you need both, you could do table for one and list for the other, but the point of semantic markup is that the tags don't change; the stylesheets do.

So of course, you could argue this just highlights the need for a date/calendar tag in HTML, where you specify significant information and let the browser handle everything else for you.


Something like...
html code:
<calendar start="Jun 2010" style="display:grid;visibility:month;" weekend="false">
	<event date="8-Jun-2010">Crazy repeating stuff.</event>
	<event date="2-Jul-2010">Something happens.</event>
	<event from="11-Jun-2010" to="11-Jul-2010">Damned football thing.</event>
</calendar>

html code:
<calendar start="today" limit="3 weeks" style="display:agenda;">
	<event date="8-Jun-2010">Crazy repeating stuff.</event>
	<event date="2-Jul-2010">Something happens.</event>
	<event from="11-Jun-2010" to="11-Jul-2010">Damned football thing.</event>
</calendar>


Heh. Maybe I should try getting them to add that to HTML5. :)
0/0
 Reply   Quote More 

 From:  99% of gargoyles look like (MR_BASTARD)    8 Jun 2010 20:26 
 To:  Peter (BOUGHTONP)      14 of 19 
37448.14 In reply to 37448.13 
I wasn't saying Mike's link was what to use

I didn't mean to imply that you did. I was simply agreeing, or something.
although I don't see the tough criticism either? (just some moans about browser support)

Perhaps not as tough as Jeremy Paxman (is he still alive? He was when I left the UK):
quote:
Sorry guys, great proof of concept and all, but a calendar is a table with two axes, weeks and days. It’s all very well to bastardize the ordered list, but why would you when a table already does what you want with minimal fuss.

Especially the fuss regarding body * {display:inline;} (though why you didn’t choose ol.calendar * {display:inline;} escapes me) and having to include display:none on a script element (which the w3c validator doesn’t like in your example).

I have to say, the elasticity of the calendar intrigues me, and I only wonder whether the same thing is possible with a table (surely you can set a table’s width by ems).

Nice idea, but let’s leave a disclaimer to say that no sane person should implement this.

quote:
I would agree with some of the other commenters that a table is indeed more semantically correct for styling calendars – particularly in a grid format where the two axis have semantic meaning. Using ROWSPAN, COLSPAN, THEAD and TH gives a lot of flexibility as well as semantic meaining.

Wow. I never imagined arguing FOR the use of tables, but I think it provides the most semantically rich relationships.

quote:
Let’s not overdo Lists, okay? Tabels do make sense with Calendars…

But then there's always the bubble gum brigade:
quote:
Oh, this is great dude!

For more sequential/timeline-based things, when the specific day/week are not the key identifier, using a list makes more sense, since it can be laid out both in grid format and regular 'unwrapped' format, and so on.

I did try to sell that idea to the client, but she wants a calendar (because everyone else has one) so she will have a calendar.

bastard by name, bastard by nature
0/0
 Reply   Quote More 

 From:  milko   8 Jun 2010 21:12 
 To:  99% of gargoyles look like (MR_BASTARD)       15 of 19 
37448.15 In reply to 37448.14 
who's this Mike guy anyway. If I remember it right I just googled calendar CSS and pasted the first link, buyer beware!

milko
0/0
 Reply   Quote More 

 From:  99% of gargoyles look like (MR_BASTARD)    8 Jun 2010 22:22 
 To:  milko      16 of 19 
37448.16 In reply to 37448.15 
(hug)

bastard by name, bastard by nature
0/0
 Reply   Quote More 

 From:  Rich   2 Sep 2010 01:34 
 To:  99% of gargoyles look like (MR_BASTARD)       17 of 19 
37448.17 In reply to 37448.1 
Hi, sorry for unearthing an old thread, I've been missing for a while and thought I could offer a semblence of help.

You almost hit on the nice-feeling and standards-compliant answer with the 'display:' property in your table style:

quote: 37448.1
CSS code:
        table
        {
            border-collapse: collapse;
            table-layout: fixed;
            display: table;
        }
 


You could use divs which use table-type 'display:' properties so they are formatted as you need:

CSS code:
 
div.calendar
{
        display: table;
}
 
div.week
{
        display: table-row;
        min-height: 3em;
}
 
div.day 
{
        display: table-cell;
        width: 10em;
	height: 3em;
	text-align: right;
	background-color: #C0C0C0;
	overflow: visible;
	border: 1px solid #000000;
	padding: 0.2em;
}
 


Put this into practice:

HTML code:
 
<div class="calendar">
		<div class="week">
			<div class="day">&nbsp;</div>
			<div class="day">&nbsp;</div>
			<div class="day">1</div>
			<div class="day">2</div>
			<div class="day">3</div>
			<div class="day">4</div>
			<div class="day">5</div>
		</div>
		<div class="week">
			<div class="day">6</div>
			<div class="day">7</div>
			<div class="day">8</div>
			<div class="day">9</div>
			<div class="day">10</div>
			<div class="day">11</div>
			<div class="day">12</div>
		</div>
		<div class="week">
			<div class="day">13</div>
			<div class="day">14<br />
				<span style="color: #FF0000">
				<strong>Geoff's birthday.</strong><br /> Must
				remember to buy him a present this year. 
				Last year he cried like a bitch when we 
				all forgot he'd been dropping hints about that 				
				god-awful DVD box-set...</span></div>
			<div class="day">15</div>
			<div class="day">16</div>
			<div class="day">17</div>
			<div class="day">18</div>
			<div class="day">19</div>
		</div>
		<div class="week">
			<div class="day">20</div>
			<div class="day">21</div>
			<div class="day">22</div>
			<div class="day">23</div>
			<div class="day">24</div>
			<div class="day">25</div>
			<div class="day">26</div>
		</div>
		<div class="week">
			<div class="day">27</div>
			<div class="day">28</div>
			<div class="day">29</div>
			<div class="day">30</div>
			<div class="day">31</div>
			<div class="day">&nbsp;</div>
			<div class="day">&nbsp;</div>
		</div>
	</div>
 



Which results in:



As a word of caution, however, CSS doesn't (as far as my experience has shown) support rowspan and colspan, so is ideally suited for things like calendars and tabular data, but not for more fancier layouts which have been where legacy <table/>'s have been useful.




Rich
Web: LostJohnnies.com
Email: rich [at] lostjohnnies [dot] com
MSN Messenger: dexta1984 [at] hotmail [dot] com
____________________________________________________
0/0
 Reply   Quote More 

 From:  CHYRON (DSMITHHFX)   2 Sep 2010 01:50 
 To:  Rich      18 of 19 
37448.18 In reply to 37448.17 
I've had better luck using this type of structure:

code:
<div name="row-1" style="white-space:nowrap;">
     <div name="col-1" style="float:left;width:100px;">
     </div>
     <div name="col-2" style="float:left;width:150px;">
     </div>
     <div name="col-3" style="float:left;width:40px;">
     </div>
</div>
<div name="row-2" style="white-space:nowrap;">
     <div name="col-1" style="float:left;width:100px;">
     </div>
     <div name="col-2" style="float:left;width:150px;">
     </div>
     <div name="col-3" style="float:left;width:40px;">
     </div>
</div>


-- It is relatively bullet-proof and standards-compliant across browsers including IE6 <groan>, unlike display:table-cell etc.

On the other hand, it actually makes sense to just use a table for something like a calendar

----
What can't social media do?
  • Make coffee
  • Tie its shoes
  • Spell
0/0
 Reply   Quote More 

 From:  99% of gargoyles look like (MR_BASTARD)    7 Sep 2010 07:34 
 To:  Rich      19 of 19 
37448.19 In reply to 37448.17 

Thank you. As Mr Smith observes, display:tablexxx goes to pot with some older (but still widely used) browsers, and a table actually does make sense for a calendar.

 

But the lack of colspan shouldn't be an impediment since the cell width is fixed, so you could just apply another class to override the generic width with another.

bastard by name, bastard by nature
0/0
 Reply   Quote More 

Reply to All    
 

1–19

Rate my interest:

Adjust text size : Smaller 10 Larger

Beehive Forum 1.5.2 |  FAQ |  Docs |  Support |  Donate! ©2002 - 2024 Project Beehive Forum

Forum Stats