Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Another DIV positioning problem 2

Status
Not open for further replies.

vb6novice

Programmer
Sep 23, 2002
288
US
Please forgive me for asking another 'How do I position my <div>' question.[sad]

My page is a .php file that creates a monthly calendar (7 days across, 5 or 6 rows down) on the fly by pulling records from a mySQL database, and creating the table rows and cells and filling the cell with the appropriate day number and any events for that day as it goes. The database includes a value for event duration. Single day events have a duration of 1 or 0 and just put text in the cell, but if the duration of the event is greater than 1 (e.g. 7 means a weeklong event), I want the event to cover the number of days equal to its duration (like a multiple day event does in Microsoft Outlook).

I want to use a div for the multi-day events. I tried having the php create the div when it encountered a multi-day event,but the div never shows up on the screen, regarless of whether I use absolute or relative positioning.

I also tried creating a string of text to create the div, storing that text to a variable, and then calling that variable in php code after the </table> tag of the calendar, but it just shows up at the bottom of the page and without any of the formatting I tried to give it.

I appreciate all suggestions.

 
Without seeing any of your code it is virtually impossible to advise you. I gather from what you've wrote that the calendar is a table and within this table you're trying to position a div that will hover over multiple cells. That will need to use absolute positioning but for anything more I need to see more code. Please paste your code from parsed page, not php code but the processed html that you cen get by doing 'view source' on the page. Or give us a link.
 
You gather correctly. Here's the code from View Source and the link is after it.

Thanks.



Code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="formats.css">
<style type = "text/css">
span.multi_days { background-color:#DCDCDC; border:1px solid #808080;}
</style>
</head>

<body background="images/gra-wht-lines.jpg" leftmargin="0" topmargin="0">
<table id="baseGrid" border="0" bordercolor="#990000" width="780" cellspacing="0" cellpadding="0" align="center" ><!-- THIS TABLE ENCOMPASSES THE ENTIRE PAGE -->
	<tr valign="top"><!-- THIS IS THE ONLY ROW IN THE MAIN TABLE -->
		<!-- <td width="1" bgcolor="#DCDCDC"><img src="images/vspacer_red.gif" width="1" height="500"></td> -->
    <td width="778" bgcolor="#FFFFFA"> <!-- THIS IS THE ONLY CELL IN THE ONLY ROW IN THE MAIN TABLE -->
		<table bgcolor="#FDFDFD" border="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#990000" width="778" height="100%" cellpadding="0">
		    <tr>
				<td bgcolor="#FFFFFF" align="center" valign="top" bordercolor="#990000">
					<img src="images/labc_banner.jpg" width="780" height="80" align="center" alt="HOME">
				</td>
			</tr>
		</table>
		<table bgcolor="#880000" border="1" cellspacing="0" style="border-collapse: collapse" bordercolor="#E0E0D6" width="100%" height="8" cellpadding="0">
		</table>
<!-- THIS PAGE HAS NO DROP DOWN MENUS -->		
		<table bgcolor="#FFFFFF" border="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#990000" width="100%" height="4" cellpadding="0">
		    <tr>
				<td background="images/ltgraydk.gif" align="center" >
				</td>
		    </tr>
		</table>
<!-- THIS STARTS THE MAIN CONTENT FOR THE PAGE -->
<!-- INSERT DIFFERENTIATED CONTENT BETWEEN HERE: -->
			<table border="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#000099" width="100%" cellpadding="0"><!-- start of headers table -->
				<tr>
    				<td align="left" valign="middle" width="75">
						&nbsp;<input type=button value="Back" onClick="history.go(-1)">
					</td>
					<td>
						<span class="homehdrtext">Calendar of Events</span>&nbsp;&nbsp;<span class="bodytext">(regularly scheduled services appear on the <a href="[URL unfurl="true"]http://labcnc.com/labcschedule.htm">Schedule[/URL] of Services</a> page)</span><br>
						<span class="bodytext"><font color="#000000"><i>Hold mouse over any underlined event to see details</i></font>
											</td>
				</tr>
			</table>
			<table border="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#000099" width="100%" cellpadding="0"><!-- start of headers table -->
				<tr>
					<td width="8%">&nbsp;</td>
					<td width="42%" valign="top">
						<span class="datetext"><font color="#000000"><b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Today is 
							Friday, September 9, 2005.</font></b></span>
					</td>
					<td width="49%" align="right" valign="top"><!--<p class="subtitletxt">Change month: -->
						<form action="labccoe.php" method="get">
						<!-- <input type="hidden" name="os" value="ds"> -->
						<select class="flat" name="selected_mo_yr" id="sel_month"><!--  onChange="Submit(sel_month.value)" -->
							<option SELECTED value="none">--Change Month-- <!-- value="none"-->
							<option value="2005-07-01">July, 2005
							<option value="2005-08-01">August, 2005
							<option value="2005-09-01">September, 2005
							<option value="2005-10-01">October, 2005
							<option value="2005-11-01">November, 2005
							<option value="2005-12-01">December, 2005
							<option value="2006-01-01">January, 2006
							<option value="2006-02-01">February, 2006
							<option value="2006-03-01">March, 2006
							<option value="2006-04-01">April, 2006
							<option value="2006-05-01">May, 2006
							<option value="2006-06-01">June, 2006
						</select>
						<input type="submit" name="calendar_select" value="Go" />
						</form>
						<!-- <input type="button" class="contentSubmit" value="    OK    " onClick="change_month('tblItems', sel_month.value)"></p> -->
					</td>
					<td width="1%">&nbsp;</td>
				</tr>
			</table><!-- end of headers table -->
			<table border="0" align="center" width="778" cellspacing="0" cellpadding="0" bordercolor="#000000">
        		<tr>
					<td align="left">
							<table border="1" width="100%" cellspacing="0" cellpadding="0" style="border-collapse: collapse" bordercolor="#000000">
								<tr width="100%" height=30 bgcolor="#FFFFFF" align="center" valign="middle" border="1" >
									<td><span class='homehdrtext'><b>
									September, 2005									 </b></span></td>
								</tr>
							</table>
							<table border="1" width="100%" cellspacing="0" cellpadding="5" style="border-collapse: collapse" bordercolor="#000000">
								<tr height=18>
									<td align=center width="12%" bgcolor="#EEEEE3"><span class="calendartxt"><b>&nbsp;Sun&nbsp;</b></span></td>
									<td align=center width="12%" bgcolor="#EEEEE3"><span class="calendartxt"><b>&nbsp;Mon&nbsp;</b></span></td>
									<td align=center width="12%" bgcolor="#EEEEE3"><span class="calendartxt"><b>&nbsp;Tue&nbsp;</b></span></td>
									<td align=center width="12%" bgcolor="#EEEEE3"><span class="calendartxt"><b>&nbsp;Wed&nbsp;</b></span></td>
									<td align=center width="12%" bgcolor="#EEEEE3"><span class="calendartxt"><b>&nbsp;Thu&nbsp;</b></span></td>
									<td align=center width="12%" bgcolor="#EEEEE3"><span class="calendartxt"><b>&nbsp;Fri&nbsp;</b></span></td>
									<td align=center width="12%" bgcolor="#EEEEE3"><span class="calendartxt"><b>&nbsp;Sat&nbsp;</b></span></td>
								</tr>
								<td height=120 align=left valign=top bgcolor=#dcdcdc></td><td height=120 align=left valign=top bgcolor=#dcdcdc></td><td height=120 align=left valign=top bgcolor=#dcdcdc></td><td height=120 align=left valign=top bgcolor=#dcdcdc></td><td bgcolor=#ffffff height=120 align=left valign=top><span class=calendartxt>1</span><br></td><td bgcolor=#ffffff height=120 align=left valign=top><span class=calendartxt>2</span><br></td><td bgcolor=#ffffff height=120 align=left valign=top><span class=calendartxt>3</span><br></td></tr><tr bgcolor=#ffffff><td bgcolor=#ffffff height=120 align=left valign=top><span class=calendartxt>4</span><br><span class=bodytextsm><b>8:00 am</b><br><a title="Brotherhood Breakfast"><u>Brotherhood Breakfast</u></a><br></span></td><td bgcolor=#ffffff height=120 align=left valign=top><span class=calendartxt>5</span><br><span class=bodytextsm><b>8:00 am</b><br><a title="Labor Day - Church Office Closed"><u>Labor Day - Church Office Closed</u></a><br></span></td><td bgcolor=#ffffff height=120 align=left valign=top><span class=calendartxt>6</span><br><span class=bodytextsm><b>6:30 pm</b><br><a title="Deacons Meeting"><u>Deacons Meeting</u></a><br></span></td><td bgcolor=#ffffff height=120 align=left valign=top><span class=calendartxt>7</span><br></td><td bgcolor=#ffffff height=120 align=left valign=top><span class=calendartxt>8</span><br></td><td bgcolor=#ffffff height=120 align=left valign=top><span class=calendartxt>9</span><br><span class=bodytextsm><b>5:30 pm</b><br><a title="Wedding Rehearsal"><u>Wedding Rehearsal</u></a><br></span></td><td bgcolor=#ffffff height=120 align=left valign=top><span class=calendartxt>10</span><br><span class=bodytextsm><b>6:00 pm</b><br><a title="Wedding - Campbell & Baker"><u>Wedding - Campbell & Baker</u></a><br></span></td></tr><tr bgcolor=#ffffff><td bgcolor=#ffffff height=120 align=left valign=top><span class=calendartxt>11</span><br></td><td bgcolor=#ffffff height=120 align=left valign=top><span class=calendartxt>12</span><br></td><td bgcolor=#ffffff height=120 align=left valign=top><span class=calendartxt>13</span><br></td><td bgcolor=#ffffff height=120 align=left valign=top><span class=calendartxt>14</span><br><span class=bodytextsm><b>4:30 pm</b><br><a title="Monthly Church Business Meeting"><u>Church Conference</u></a><br></span></td><td bgcolor=#ffffff height=120 align=left valign=top><span class=calendartxt>15</span><br></td><td bgcolor=#ffffff height=120 align=left valign=top><span class=calendartxt>16</span><br></td><td bgcolor=#ffffff height=120 align=left valign=top><span class=calendartxt>17</span><br></td></tr><tr bgcolor=#ffffff><td bgcolor=#ffffff height=120 align=left valign=top><span class=calendartxt>18</span><br></u></a><br></span><hr size=1 width=100% align=center><span class=bodytextsm><b>7:30 pm</b><br><a title="Monthly Meeting of LABC Youth"><u>3rd Sunday at the ROCK</u></a><br></span></td><td bgcolor=#ffffff height=120 align=left valign=top><span class=calendartxt>19</span><br></td><td bgcolor=#ffffff height=120 align=left valign=top><span class=calendartxt>20</span><br><span class=bodytextsm><b>12:00 am</b><br><a title="CTBA Associational Meeting"><u>CTBA Associational Meeting</u></a><br></span></td><td bgcolor=#ffffff height=120 align=left valign=top><span class=calendartxt>21</span><br></td><td bgcolor=#ffffff height=120 align=left valign=top><span class=calendartxt>22</span><br></td><td bgcolor=#ffffff height=120 align=left valign=top><span class=calendartxt>23</span><br></td><td bgcolor=#ffffff height=120 align=left valign=top><span class=calendartxt>24</span><br><span class=bodytextsm><b>12:00 pm</b><br><a title="This trip is for the kidies to go to some place called Lazy 5 Ranch. Cost is $0.  Have your little monster at the church by 11:45 AM"><u>Lazy 5 Ranch Trip</u></a><br></span></td></tr><tr bgcolor=#ffffff><td bgcolor=#ffffff height=120 align=left valign=top><span class=calendartxt>25</span><br><span class=bodytextsm><b>8:45 am</b><br><a title="IMPACT Contemporary Worship Inaugural Service"><u>IMPACT  Service</u></a><br></span></td><td bgcolor=#ffffff height=120 align=left valign=top><span class=calendartxt>26</span><br></td><td bgcolor=#ffffff height=120 align=left valign=top><span class=calendartxt>27</span><br></td><td bgcolor=#ffffff height=120 align=left valign=top><span class=calendartxt>28</span><br></td><td bgcolor=#ffffff height=120 align=left valign=top><span class=calendartxt>29</span><br></td><td bgcolor=#ffffff height=120 align=left valign=top><span class=calendartxt>30</span><br></td><td height=120 align=left valign=top bgcolor=#dcdcdc></td></tr>						</table>
					</td>
				</tr>
			</table>
<!-- AND HERE -->
<!-- THIS IS THE END OF THE MAIN CONTENT FOR THE PAGES -->
		</td>
		<!-- <td width="1" bgcolor="#DCDCDC"><img src="images/vspacer_red.gif" width="1" height="500"></td> -->
	</tr>
</table>
			<div style=z-index: 1; position: absolute; left: 210px; top: 210px; background-color: #DCDCDC; width: 7780px; padding: 0px; color: black;>
															<table bgcolor=EEEEE3 border=1 cellspacing=1 style=border-collapse: collapse bordercolor=#880000"width=100% cellpadding=0>
															<tr><td ><span class=bodytextsm>Week of Prayer for NC Missions</span></td></tr></table></div>

</body>
</html>

The page is
 
Ok, let's start with the obvious. Attributes in HTML are between the begining quote and ending quote. When quotes can be omitted, attribute is considered from the equal sign (=) until the first space. Taking that into consideration, your code is saying this:
div with a style z-index: and a whole bunch of attributes like 1; position:, absolute; etc. Truly, this leaves html terribly confused and then it just renders div as a regular div. And there you have it. All gets ignored. XHTML's nagging about quoting all the attributes is not there just to piss people off.

Second, you will be relying on the viewport with this code. Absolutely positioned items are positioned according their first positioned parent element, or if none provided, the viewport (AKA browser window). Since the latter is not the most precise method and can lead to terrible results, I strongly advise against it. As such, I suggest you put your calnedar table inside a div with position: relative; and then work with absolutely positioned div inside the first div.

Last but not least, why are you putting a table inside your div? There is absolutely no need for a single cell table in there. While I would agree with you that calendar can be considered as tabular data (mainly because alternative floats will cause you more grief than joy when being mauled into a calendar) I cannot agree with your overuse of tables in the page altogether. Apart from the calendar, I wouldn't use any other tables.
 
Vrag,

Thanks for your attention to this. It will take me a while to sort out what you said, however, what is obvious to you requires eduction on my part. Not having had any formal training in HTML (that's not whining, just a factor why my code is like it is), I have to go with what I can learn from other people's pages that work like I want mine to work. Couldn't find a calendar that worked just like I wanted so I made my own. That being said, I'm willing to learn the rules regarding element positioning and qutoes among the attributes.

Regarding the quotes, I know they need to be there for some things but not everything. I have had success leaving them out of many things, including some things in the php code. I guess this is a place where they must be included. So how do I include them in the php code for them to be properly parsed?

Regarding your comment about the viewport and positioning, am I correct in understanding that the entire calndar table should be inside a div with position relative. Not to sound sarcastic (OK, I do mean to sound sarcastic), but if the div is positioned relative, what will it be relative to? The entire page is tables within tables within a table. Should I include the banner and the stuff just above the calendar in the div or do you mean just the part of the calendar that has the cells for the days?

Regarding putting a table in the div, it was an attempt to get the div to look like it had border and background color, which it doesn't seem to want to do, regardless of whether the table is in there or not.

Thanks again for your help.


 
Ok. First let me tell you that I am only here to try and help you and not put you down. If my language at times sounds rough or abusive I apologize -- I mean nothing of such, it is just the way I talk ... umm, type.

Let's see. The quotes. You're right. In HTML you can get away without using quotes in many occasions, for reasons explained in my above post. Since most of the attribute values actually do not contain spaces (or don't have to), you will run into such problems very rarely. However, think of quotes in html just like greeting somebody before you start talking to them. Most people won't really mind if you don't greet them. Now and them you will find someone who will smirk at you or refuse to continue the conversation due to your rudeness. But if you greet everyone, it won't hurt. You will avoid being rude to people who mind and those who don't mind still won't mind if you do greet them. So I suggest you use them all the time, even though you wouldn't have to in certain occasions. To conquer php and quotes you have many options:
Code:
$string = '<div style="text-align: right;"></div>';
$string = "<div style='text-align: right;'></div>";
$string = '<div style=\'text-align: right;\'></div>';
$string = "<div style=\"text-align: right;\"></div>";
The former two examples show using different quotes to delimit strings in php and attributes in html and the latter two show escaping quotes within quotes. You can decide which method suits you best. I opt for the first one.

Moving to positioning. The div should contain only the table with calendar data (cells with days of the month), however, I would rework your page in order that all other tables would become other divs. Div is an unstyled block level element that is used to divide your page into ... divisions. Since you are using single celled tables, you will find it is much easier to do only one div, which accomplishes the same and can have padding, borders, margins, backgrounds and everything else applied to it.

It may seem weird at first, but your relatively positioned div will be positioned relatively to its preceding sibling element. When no values for top/bottom/left/right exist it will be positioned in the top left corner. Ultimately, a relatively positioned element without any other values, will be at the exact same place as non-positioned element. The only difference (and the one we're interested in) is that it will be positioned and as such will serve as boundaries for any enclosed positioned element. So, when you will be positioning your 'multiple day event' div, you will be positioning it inside this given relatively positioned enclosing div. For example, without the div, top: 0; left: 0; would mean top left corner of the page (no use) and wiht the div it would mean top left corner of the div that holds the calendar (a lot better). Hope that is clear.

As for table in the div. Div can have any styling you need -- borders, backgrounds, etc.
 
Vrag,

This is vb6novice using my at-home handle.

I don't mind the tone. My wife says that when I teach people I do that same thing. Just want to learn more.

I got the quotes thing resolved as you recommended.

I don't think I understand the divs vs. tables thing completely. When you say rework the page so all other tables become divs, does that mean I can just take out the <table> tags and replace them with <div> and leave the <tr> and <td> stuff alone, or do you mean to replace each table-row-cell combo with a div?

Please explain.

Thans again for the help.

 
A singe-celled table is the same as a box, right? So, the question is, why use table, table-row and table-cell syntax to draw a box, if a simple div does the same. That is why using tables to do that is not smart and creates more overhead (and is also more complicated for reading) than using divs.
 
Certainly your suggestion is a good one, but I'm not sure about how the individual divs will position.

I'd need 5 or 6 rows of 7 divs, all 12% wide, 120px height but growable since every div in the row has to grow the same to match the height of the div with the most events or the events with names that wrap.

It was easy to control that with a table, a <tr> and 7 <td>'s, because the cells go right to left in a row, then stack top to bottom for succeeding rows. My limited experience with table-less pages (I started about 15 minutes ago) indicates to me that I would have to position the 35 or 42 divs absolutely. And it will take some doing to get all the ones in the row to grow to the same height.

What am I missing?

 
I spent the last 3 hours doing trial and error with many combinations of positioning of the divs, trying to overcome the CSS rules for flow of boxes, but couldn't seem to do it even with some fancy php math and various positioning methods.

I managed, however, to get a matrix of rows and columns using divs and spans (span also being a box - but an inline one). That way I didn't have to position them, they flowed left to right, and the subsequent div flowed below the previous one, so I filled it with spans. Creating rows and columns was the only way I could figure out how to get all the boxes in a row to be the same size and growable without having to have some very fancy coding to determine what the height of the tallest box in the row is and resetting all the ones on that row to that max height.

So I ask myself, how is 7 spans inside a div, repeated 5 times any better than a table with 5 rows (<tr>) and 7 cells(<td>). The answer is I don't know.

You said it's "not smart and creates more overhead (and is also more complicated for reading) than using divs". The code difference is about 2 lines. Perhaps it is harder to read from the view source perspective, but how many people are really interested in doing that? The only thing I seem to have gained is that I only use 2 types of elements instead of 3.

I've discovered 2 differences, 1 good and 1 bad:
The good: I was able to set an id for each span so I can get its xy coordinates for the placement of the multi_day div.

The bad: the borders on the spans and divs wont combine to make a single pixel border between two adjacent blocks, so it's ugly.

Please tell me if I am totally way off here. If there is a simple way to solve the issues of how to place each of the 35 or 42 divs, I'd sure like to learn it?

Thanks for reading my blather.

 
What you're missing is me telling you you should keep the calendar in the table (7 header rows cells with day names and 30/31/28 cells of each day) and get rid of all the other tables. Like I said, while not strictly tabular data, using tables is still the best way to create a calendar. I was talking simply of the other tables you use on your site. You know, the ones with just one cell. Sorry about the confusion and extra work.
 
OK. Well I learned a thing or two about different types of blocks and how they flow, and how I can simplify many of my pages by replacing single celled tables with a div.

But I still haven't solved my basic problem, which is how to get the xy position for the multi_day div. In all the pages I have with pull down menus, the js returns the position of the menu title cell just fine, and in my experimental table-less page, the js works great. The js relies on the position of the parent element and those are dealing with a parent div. In the calendar page it doesn't work, returning -1 for both x and y Perhaps I don't have the div set up right or it's buried too deep in tables and cells.

I'll let you know how it works out.
 
I wouldn't try to position a <div> over the calendar table to fill mutiple cells - there are simply too many unknowns to deal with. If there can only be one event happening on any given day, you could use the [tt]colspan[/tt] attribute to allow a single <td> to span multiple columns. That won't work if multiple events can overlap, in which case I'd just repeat the listing on each day. That's what I did here, and I think it looks OK.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Neither the availability calendar linked by FesterSXS nor the comments by ChrisHunt seem to capture what I'm trying to accomplish.

Imagine 7 cells side by side. In the upper left of each cell is a number representing the day. In each cell there may be listed from 0 to n events for a day, each containing the start time of the event followed by the name of the event (for events of 1 day or less). The hight of the row may end up being 300px. Rather than having an event which is more than one day listed in each of the days it is to occur, I'm trying to get a div to, for lack of a better term, 'hover' over the days the event will occupy. I don't want it to fill the cell. It will only be about 20px tall, with a different color bcakground. I want it to have start 10px from the left side and end 10px from the right side. I've already worked out the math for that. Visit to see what I'm trying to get. The div that starts on the 18th is in the right place but only because it's position is hard coded

The issue is how to get the xy position of the cell that the div will start in. Since that cell is being generated by php, the js doesn't want to give me ths cell psotion. My function works well for cells which are not being php generated,but not for the php generated ones. See also thread435-1120658 for info about this issue.
 
Regularly created page and a page created via PHP are just the same to JavaScript, since JS runs on the client and works when the page was loaded and PHP runs on the server and is done (stops working) when the page is served. So that cannot be a problem. Just a food for thought regarding your project:

Have you thought about an event that (in your calendar) is taking place between 21st and 27th? How are you going to handle that dynamically?
 
instead of placing a <div> to span muliple days, how about having an icon or short line of text appearing on each day of an event. You could use the title attribute to provide further information when the user mouses over the icon/text.

Each event could have text with a different background color maybe.

Tony

Spirax-Sarco - steam traps control valves heat exchangers
Sun Villa - Luxury Florida accommodation
 
I think Vragabond has hit the nail on the head. As far as js is concerned, there should't be any difference between an element id that is hard coded in the html and one that is generated by the php. Since the element id is what the js is using to locate the element, and since it works when tested on an earlier part of the page, then it should work for an ewlement later in the page. Perhaps there is something else deep in the page that I am overlooking (it work when the cell is in the first row of a table that is in a cell that is in the first row of another table.

Code:
<table>
      <tr>
            <td>
                <table>
                     <tr>
                        <td id=mycell ... >
                        </td>                        
                    <script>get_cell_xy("mycell");</script>
                      </tr>
                  </table>
           you get the idea...

Regarding an event that would wrap from one week to the next, the cell for each day has a unique id, which basically has the number of the day in it, so it's just math to determine how much of the event is in the first week and creating the div for that , and then getting the xy of the day it starts in the second week and then putting what's left over in the second week. SO the only is is the problem I've been trying to resolve all along, which is getting the xy of a cell that is created with php.

Theoretically, I should be able to do it.
 
Well, once I got thinking about it, it wasn't all that hard to do. Here's a simplified demonstration (with only three cells, but easily scaled up):
Code:
<!doctype html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
  <title>Spanning Event Links</title>
  <style type="text/css">
    table {
       border-collapse: collapse;
    }

    .calendar td {
       border: 1px solid black;
       padding: 0;
       width: 5em;
       height: 7em;
       vertical-align: top;
    }

    .calendar div {
       position: relative;
    }

    .calendar a {
       display: block;
       position: absolute;
       border: 1px solid black;
       background: #fcc;
       height: 1.25em;
       left: 0;
       text-align: center;
    }
  </style>
</head>
<body>
  <table class="calendar">
    <tr>
      <td><div>1<a href="#" style="top:1em;width:10em;">Hello</a></div></td>
      <td><div>2<a href="#" style="top:2.5em;width:10em;">World</a></div></td>
      <td><div>3</div></td>
    </tr>
  </table>
</body>
</html>
You'll have to manage values allocated to each event's [tt]top[/tt] and [tt]width[/tt] values when you generate the page, keeping track of how many concurrent events you have each week will be fun. Events that span more than one week will need an <a> for each of them. Note that I've used ems for all measurements, so the layout doesn't break if the text is resized.

I've tested this and it works in IE6 and FF. Other modern browsers should cope, but older ones may be badly broken by the absolute positioning used.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top