Watch
GitHub Core
Show your support for Zikula! Sign up at Github account and watch the Core project!
GitHub Modules
Forum Activity
- rgasch created topic »Using PageUtil::addVar() to load script code« 11:48 AM
- michiel responded to »password problem« 10:01 AM
- mazdev responded to »Hide "Register new account" and change template to 3 col« 07:50 AM
- mesteele101 created topic »Zikula 1.3.3 - Site Search 1.5.2 - Unable to turn off plug-ins« 07:48 AM
- mesteele101 responded to »ERR (3): E_USER_ERROR: Smarty error: [in pagesvar:pagesitem2en line XXX]…« 25. May
- mazdev responded to »Pages 2.5.0 and updating - Page not found« 25. May
- mesteele101 responded to »Zikula 1.3.3 - Selecting a category in Pages not working« 25. May
Zikula Blog
- Anatomy of Open Source Projects on Mar 07
- Continuous Review on Mar 01
- Not Invented Here on Feb 24
- How to Contribute Your Code at Github on Jan 13
- 10 Steps to Coding-Nirvana: Tips for Successful Module Writing on Nov 12
- Submitting Bug Report Tickets That Get Results on Aug 17
- Cozi Tricks #1: Syntax Highlighting on Aug 07
Login
html magic?
-
- Rank: Developer
- Registered: Jun 16, 2003
- Last visit: May 29, 2010
- Posts: 1966
Posted: Feb 17, 2010 - 02:40 AM
anyone know if it is possible to have a div that extends across multiple table cells? any idea how to accomplish it? -
- Rank: Team Member
- Registered: Jun 10, 2008
- Last visit: May 24, 2010
- Posts: 43
Posted: Feb 19, 2010 - 10:07 AM
According to the W3C HTML Markup Validator, you cannot have a div inside a table structure that groups only td elements.
In other words,
Code
does not validate. It says that the div tag is not allowed to be there.
What are you ultimately trying to accomplish?
--
- Robert
-
- Rank: Team Member
- Registered: Jan 19, 2003
- Last visit: Apr 06, 2010
- Posts: 442
Posted: Feb 19, 2010 - 10:49 AM
Not a div, but a table may contain multiple tbody sections. With several different tbody elements you can divide your table structurally. Alternatively (or in addition) you might consider using classes for table rows.
--
Guite | ModuleStudio -
- Rank: Developer
- Registered: Jun 16, 2003
- Last visit: May 29, 2010
- Posts: 1966
Posted: Feb 19, 2010 - 11:45 AM
Quote
What are you ultimately trying to accomplish?
something more like:
-
- Rank: Team Member
- Registered: Jun 10, 2008
- Last visit: May 24, 2010
- Posts: 43
Posted: Feb 19, 2010 - 12:13 PM
So the first column spans three table columns, then there's columns 4 and 5?
Code
The div used there is probably not the right tag, since it is a block-level tag. A span is probably the better (more correct) choice.
If, on the other hand, you are trying to get the second and third cells to also be red, then you have two options. Use a class on each of the td tags and define the class' style in a style sheet, or use a style attribute on each of the td tags. In both cases, neither a div nor a span are needed (unless you want to style only a portion of each cell's contents. Something like this:
Code
edited by: rmburkhead, datetimebrief
--
- Robert
-
- Rank: Developer
- Registered: Jun 16, 2003
- Last visit: May 29, 2010
- Posts: 1966
Posted: Feb 19, 2010 - 02:45 PM
Quote
So the first column spans three table columns, then there's columns 4 and 5?
no - this is more advanced than that. Think of a calendar (seven columns - days) and event that spans three days. I want the div to cover the span, but there will also be events that are only in the one day. -
- Rank: Developer
- Registered: Dec 31, 1969
- Last visit: Jun 01, 2010
- Posts: 6859
Posted: Feb 19, 2010 - 03:41 PM
-
- Rank: Team Member
- Registered: Jun 10, 2008
- Last visit: May 24, 2010
- Posts: 43
Posted: Feb 19, 2010 - 06:21 PM
craigh
Think of a calendar (seven columns - days) and event that spans three days. I want the div to cover the span, but there will also be events that are only in the one day.
Ahh... that's clearer. The only way I can think of to do it with a div is to play with combination of z-order and positioning. You'd have the table at a lower z order, and then position the div on top of it at a higher z order. Your mileage will vary wildly with different browser brands and versions.
Another way to attack it is to split up one logical calendar "row" (continuing your example) into several structural table rows. You can style them appropriately to appear to the eye as one row on the calendar, but they'd be made up of several tr's behind the scenes. In this case, colspan with td's will work (without necessarily needing any span's or div's). You should be able to control the number of physical rows per logical (or visual) rows programmaticaly, and with a little bit of up-front calculation you should be able to make all the logical rows the same height (if that's desired) if you know the max number of events in any given day (including events that span into or across a day).
--
- Robert
-
- Rank: Developer
- Registered: Dec 31, 1969
- Last visit: Jun 01, 2010
- Posts: 6859
Posted: Feb 19, 2010 - 08:11 PM
The biggest issue with either of those, Robert, would be if the span crosses rows, say starts on Friday and ends on the following Tuesday. I'd say give multi day events a class="multiday" and apply it to the text in the TD. You already have to figure out how to handle an event that spans multiple weeks anyway. Or use your own version of a div based grid instead of a table.
edited by: HalbrookTech, datetimebrief
--
Home Page | Find on Facebook | Follow on Twitter
-
- Rank: Team Member
- Registered: Jun 10, 2008
- Last visit: May 24, 2010
- Posts: 43
Posted: Feb 20, 2010 - 08:19 AM
HalbrookTech
The biggest issue with either of those, ... would be if the span crosses rows, say starts on Friday and ends on the following Tuesday.
I can't think of any technique that auto-magically solves that issue an still gives you some semblance of control over the visual layout of the data items. That's a problem that has to be solved programaticaly until CSS and the browsers provide much more complex layout managers.
--
- Robert
-
- Rank: Developer
- Registered: Dec 31, 1969
- Last visit: Jun 01, 2010
- Posts: 6859
Posted: Feb 20, 2010 - 09:57 AM
He's already got the basis of the idea in his head, just use a span for the muliday event instead of a div. Even with Divs he'd have to contend with a multi day event that wraps week. So it's just a matter of figuring out if the event goes to the next week, and modifying the number of days in the table coding. (IF the event is from Friday to Sunday, and Sunday is Day 1, then there should be a 2 col tablespan and a 1 col span, then span the info in the blocks to style it right.
--
Home Page | Find on Facebook | Follow on Twitter
-
- Rank: Team Member
- Registered: Jun 10, 2008
- Last visit: May 24, 2010
- Posts: 43
Posted: Feb 20, 2010 - 02:42 PM
HalbrookTech
just use a span for the multiday event instead of a div. ... (IF the event is from Friday to Sunday, and Sunday is Day 1, then there should be a 2 col tablespan and a 1 col span, then span the info in the blocks to style it right.
You've lost me. Are you talking about a span tag, or are you talking about a colspan attribute on a td tag?
--
- Robert
-
- Rank: Developer
- Registered: Dec 31, 1969
- Last visit: Jun 01, 2010
- Posts: 6859
Posted: Feb 20, 2010 - 05:13 PM
Both actually, based on how Craig presented it.
Let's say we're dealing with a 5 day event running Monday to Friday, Sunday is the first day of the week, So the code for that particular event would be...
Code
<tr>
<td>Normal empty day or event display</td>
<td colspan="5"><span class="multidayevent>Event Title</span></td>
<td>Normal empty day or event display</td>
</tr>
However as I type this, this isn't the ideal way to handle the multi-day event thing really. Since my currently most complex implementation of PostCalendar is for my Church's site, multiple groups in play. Let's say there's a week long youth conference that runs from Monday to Friday. You run in to a problem with this implementation because You create a 5 col span, but what about Wednesday when we have evening events to display weekly, Monday we host a special guest speaker for an event, and Friday the adult choir has a party on friday, then we totally mess up the appearance. things by having a 5 col span. I think the best thing to do, is to use a span on the title of the event to define it as a Multi day event. Then you still have two issues to deal with, one fairly easy to hand, the other more difficult. The easier of the two is making sure that multi day events are always first, and in the same order (so that if you've gotta Monday to Friday event and a Tuesday to Thursday event the same week, the 5 day event comes first and the 3 day one shows second to be visually coherent. The second is related to overlap, where one is Mon-Thurs and the other is Wed-Fri.. Then you end up with a display issue because if you put Monday's event first then Friday will be aligned with the earlier event, if you put the later one first, then you end up with Mon & Tues out of alignment with the rest of that event. Not sure the best way to handle that one, I'm sure there's CSS magic that can be used, but you have to figure out a way to detect what the absolute position the events and when they don't overlap, use the absolute position on the event. I know it CAN be done, just not how. Could be a case where an alternative method is called for using lists or a div based display rather than a table. A case can be made for using lists for the displayed events, and divs for each day as being used so you'd have a simplified version of a fluid grid (classes 1day 2 day 3day etc). But then you run in to the problem of week wrap and stacked events, both of which could conceivably be solved with some fancy math work in the code and div trickery, I can explain in plain english, but don't know how complex it will be to work out. In plain English what I am thinking is:
Each week has 2 divs, Multi Day and One time, this takes care of putting single day events in the same area as multiday events.
Then for displaying, check to see if the week as any multiday events. If yes, create the multi div. Each event would have it's own div, using the grid system (mevent1, mevent 2 etc) That way you can make sure multi day events line up with each other if there's the above overlap. For each day the event doesn't happen, put a blank day (so you get the Date and a a visible date separator with a border) For the days that are a part of the event, you determine how many of the days are in the current week, if any are in the next week, and do a multi day span to make the event day a single bar. So if the multi day event is tues-fri, and First day is Sunday. You end up with div class=1 div class=1 div class=4 div class=1 Which adds up to 7 days. If the event is Friday to Sunday you'd have div class=5 and div class=2 this week, then a div class=1 and div class=6. .
keep the events in the same order each week they happen in. If a week has no multi-day events, with Smarty if statments you don't even have to render the main multi week div at all.
Probably a bit complex to work out, hardest case I'd think would be an event that covers part of two weeks. may even be possible to do in a table never really done much with styling tables to that degree, but I know it can be done with divs, because nesting in that nature is how most grid systems work in the firstplace.
--
Home Page | Find on Facebook | Follow on Twitter
- Moderated by:
- Support
