[resolved]Calendar navigation

[McCain]

I'm making a calendar but I'm having troubles with the navigation. I want it to look like this:

<<       1       >>
<<    October    >>
<<     2004      >>

The thing is that I don't want to use tables, but I do want it to work even if the user doesn't use stylesheets. Any ideas anyone?

//Tobbe

[CornedBee]

You could make it so that it degrades if the user doesn't use stylesheets. To something like
<< 1 >>
<< October >>
<< 2004 >>

It's not as beautiful, but that's HTML without CSS: not beautiful.

[McCain]

Yeah, that's exactly what I want, but I can't make it work

When I disable the css I got right now I get this:
<<
<<
<<
1
October
2004
>>
>>
>>

And that is not good enough...

[McCain]

The code I have right now, that I don't think is good enough looks like this:

<div id="datenav">
	<div class="left">
		<a href="./calendar.php?day=<?php echo $aDay-1;?>&month=<?php echo $aMonth;?>&year=<?php echo $aYear;?>">&lt;&lt;</a><br />
		<a href="./calendar.php?day=<?php echo $aDay;?>&month=<?php echo $aMonth-1;?>&year=<?php echo $aYear;?>">&lt;&lt;</a><br />
		<a href="./calendar.php?day=<?php echo $aDay;?>&month=<?php echo $aMonth;?>&year=<?php echo $aYear-1;?>">&lt;&lt;</a><br />
	</div>
	<div class="middle">
		<?php echo $aDay ?><br />
		<?php echo $sweMonths[$aMonth - 1] ?><br />
		<?php echo $aYear ?><br />
	</div>
	<div class="right">
		<a href="./calendar.php?day=<?php echo $aDay+1;?>&month=<?php echo $aMonth;?>&year=<?php echo $aYear;?>">&gt;&gt;</a><br />
		<a href="./calendar.php?day=<?php echo $aDay;?>&month=<?php echo $aMonth+1;?>&year=<?php echo $aYear;?>">&gt;&gt;</a><br />
		<a href="./calendar.php?day=<?php echo $aDay;?>&month=<?php echo $aMonth;?>&year=<?php echo $aYear+1;?>">&gt;&gt;</a><br />				
	</div>
</div>

And here's the CSS:

div#datenav
{
	position: relative;
	line-height: 1.8em;
	width: 12em;
	margin: auto;
	padding-bottom: 20px;
	text-align: left;
}

div#datenav div.left
{
	position: relative;
	left: 0;
	top: 0;
	width: 2em;
	font-weight: bolder;
}

div#datenav div.middle
{
	position: absolute;
	left: 2em;
	top: 0;
	width: 8em;
	text-align: center;
}

div#datenav div.right
{
	position: absolute;
	left: 10em;
	top: 0;
	width: 2em;
	font-weight: bolder;
}

[CornedBee]

So reorder it:

<div class="calnavline">
<a class="calnavback" href="...">&lt;&lt;</a>
<span class="calnavnum">$day</span>
<a class="calnavfwd" href="...">&gt;&gt;</a>
<!-- This is an unfortunate necessity in IE:
<br class="clearer"/>
</div>
<div class="calnavline">
<a class="calnavback" href="...">&lt;&lt;</a>
<span class="calnavnum">$month</span>
<a class="calnavfwd" href="...">&gt;&gt;</a>
<!-- This is an unfortunate necessity in IE:
<br class="clearer"/>
</div>
<div class="calnavline">
<a class="calnavback" href="...">&lt;&lt;</a>
<span class="calnavnum">$year</span>
<a class="calnavfwd" href="...">&gt;&gt;</a>
<!-- This is an unfortunate necessity in IE:
<br class="clearer"/>
</div>

CSS:
.calnavback, .calnavfwd {
  float: left;
  width: 3em;
  text-align: center;
}
.calnavnum {
  float: left;
  width: 7em;
  text-align: center;
}
.clearer {
  clear: both;
}

[McCain]

Thank you, I will try it as soon as I get home

[McCain]

Worked like a charm (not that I expected anything else, comming from you and all...)

Thanks

[McCain]

I tried the code you gave me in IE6 today. I couldn't believe my eyes! This is what it looks like:

Where does the extra > come from?
This is the code:

<div id="datenav">		
	<div class="calnavline">
		<a href="./calendar.php?<?php echo newLinkDate($aDay, $aMonth, $aYear, 'day', -1);?>" class="calnavback">&lt;&lt;</a>
		<span class="calnavnum"><?php echo $aDay ?></span>
		<a href="./calendar.php?<?php echo newLinkDate($aDay, $aMonth, $aYear, 'day', +1);?>" class="calnavfwd">&gt;&gt;</a>
		<!-- This is an unfortunate necessity in IE: -->
		<br class="clearer" />
	</div>
	<div class="calnavline">
		<a href="./calendar.php?<?php echo newLinkDate($aDay, $aMonth, $aYear, 'month', -1);?>" class="calnavback">&lt;&lt;</a>
		<span class="calnavnum"><?php echo $sweMonths[$aMonth - 1] ?></span>
		<a href="./calendar.php?<?php echo newLinkDate($aDay, $aMonth, $aYear, 'month', +1);?>" class="calnavfwd">&gt;&gt;</a>
		<!-- This is an unfortunate necessity in IE: -->
		<br class="clearer" />
	</div>
	<div class="calnavline">
		<a href="./calendar.php?<?php echo newLinkDate($aDay, $aMonth, $aYear, 'year', -1);?>" class="calnavback">&lt;&lt;</a>
		<span class="calnavnum"><?php echo $aYear ?></span>
		<a href="./calendar.php?<?php echo newLinkDate($aDay, $aMonth, $aYear, 'year', +1);?>" class="calnavfwd">&gt;&gt;</a>end
	</div>
</div>

div#datenav
{
	position: relative;
	line-height: 1.8em;
	width: 13em;
	margin: auto;
	padding-bottom: 20px;
	text-align: left;
}

div#datenav a
{
	color: #765;
	text-decoration: none;
}

div#datenav a:hover
{
	color: #000;
}

.calnavback, .calnavfwd 
{
	float: left;
	width: 3em;
	text-align: center;
	font-weight: bolder;
}

.calnavnum 
{
	float: left;
	width: 7em;
	text-align: center;
}

.clearer 
{
	clear: both;
}

[CornedBee]

If you're using a HTML doctype, I'd say it comes from an actually correct SGML parse of the HTML code, thus making the > in <br /> show up. The weird thing about "HTML-compatible" XHTML 1.0 is that it relies on a parsing bug in what I thought was every single generic web browser available.

If you're using a HTML doctype, use the normal <br>. If you're using an XHTML doctype - perhaps you shouldn't. IE doesn't support XHTML anyway, it only pretends it does.

[McCain]

I'm using xhtml

But if I change "class="calnavfwd">&gt;&gt;</a>" to "class="calnavfwd">bb</a>" it will show a 'b' on the next line.

[CornedBee]

Oh, then it's a layout bug. It might even be one I've heard of. Let me think...

Found it:
http://www.positioniseverything.net/...haracters.html

Apparently you need to remove the comments.

[McCain]

I removed the comments. Didn't help.

The code:

<div id="datenav">		
	<div class="calnavline">
		<a href="./calendar.php?<?php echo newLinkDate($aDay, $aMonth, $aYear, 'day', -1);?>" class="calnavback">&lt;&lt;</a>
		<span class="calnavnum"><?php echo $aDay ?></span>
		<a href="./calendar.php?<?php echo newLinkDate($aDay, $aMonth, $aYear, 'day', +1);?>" class="calnavfwd">&gt;&gt;</a>
		<br class="clearer" />
	</div>
	<div class="calnavline">
		<a href="./calendar.php?<?php echo newLinkDate($aDay, $aMonth, $aYear, 'month', -1);?>" class="calnavback">&lt;&lt;</a>
		<span class="calnavnum"><?php echo $sweMonths[$aMonth - 1] ?></span>
		<a href="./calendar.php?<?php echo newLinkDate($aDay, $aMonth, $aYear, 'month', +1);?>" class="calnavfwd">&gt;&gt;</a>
		<br class="clearer" />
	</div>
	<div class="calnavline">
		<a href="./calendar.php?<?php echo newLinkDate($aDay, $aMonth, $aYear, 'year', -1);?>" class="calnavback">&lt;&lt;</a>
		<span class="calnavnum"><?php echo $aYear ?></span>
		<a href="./calendar.php?<?php echo newLinkDate($aDay, $aMonth, $aYear, 'year', +1);?>" class="calnavfwd">bb</a>end
	</div>
</div>

Still the same CSS

[McCain]

I have no idea what caused the bug, but I have fixed it by doing what they suggested att pie.

Fixes and Workarounds
One easy fix is to put a -3px right margin on the last left float.

So I changed my CSS to this:

.calnavback, .calnavfwd 
{
	float: left;
	width: 3em;
	text-align: center;
	font-weight: bolder;
	margin-right: -3px;
}