Printable View
I'm making a calendar but I'm having troubles with the navigation. I want it to look like this: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?Code:<< 1 >>
<< October >>
<< 2004 >>
//Tobbe
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.
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...
The code I have right now, that I don't think is good enough looks like this:And here's the CSS:Code:<div id="datenav">
<div class="left">
<a href="./calendar.php?day=<?php echo $aDay-1;?>&month=<?php echo $aMonth;?>&year=<?php echo $aYear;?>"><<</a><br />
<a href="./calendar.php?day=<?php echo $aDay;?>&month=<?php echo $aMonth-1;?>&year=<?php echo $aYear;?>"><<</a><br />
<a href="./calendar.php?day=<?php echo $aDay;?>&month=<?php echo $aMonth;?>&year=<?php echo $aYear-1;?>"><<</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;?>">>></a><br />
<a href="./calendar.php?day=<?php echo $aDay;?>&month=<?php echo $aMonth+1;?>&year=<?php echo $aYear;?>">>></a><br />
<a href="./calendar.php?day=<?php echo $aDay;?>&month=<?php echo $aMonth;?>&year=<?php echo $aYear+1;?>">>></a><br />
</div>
</div>
Code: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;
}
So reorder it:
Code:<div class="calnavline">
<a class="calnavback" href="..."><<</a>
<span class="calnavnum">$day</span>
<a class="calnavfwd" href="...">>></a>
<!-- This is an unfortunate necessity in IE:
<br class="clearer"/>
</div>
<div class="calnavline">
<a class="calnavback" href="..."><<</a>
<span class="calnavnum">$month</span>
<a class="calnavfwd" href="...">>></a>
<!-- This is an unfortunate necessity in IE:
<br class="clearer"/>
</div>
<div class="calnavline">
<a class="calnavback" href="..."><<</a>
<span class="calnavnum">$year</span>
<a class="calnavfwd" href="...">>></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;
}
Thank you, I will try it as soon as I get home
Worked like a charm (not that I expected anything else, comming from you and all...)
Thanks
I tried the code you gave me in IE6 today. I couldn't believe my eyes! This is what it looks like:
http://w1.481.telia.com/~u48111784/bugg.gif
Where does the extra > come from?
This is the code:
Code:<div id="datenav">
<div class="calnavline">
<a href="./calendar.php?<?php echo newLinkDate($aDay, $aMonth, $aYear, 'day', -1);?>" class="calnavback"><<</a>
<span class="calnavnum"><?php echo $aDay ?></span>
<a href="./calendar.php?<?php echo newLinkDate($aDay, $aMonth, $aYear, 'day', +1);?>" class="calnavfwd">>></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"><<</a>
<span class="calnavnum"><?php echo $sweMonths[$aMonth - 1] ?></span>
<a href="./calendar.php?<?php echo newLinkDate($aDay, $aMonth, $aYear, 'month', +1);?>" class="calnavfwd">>></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"><<</a>
<span class="calnavnum"><?php echo $aYear ?></span>
<a href="./calendar.php?<?php echo newLinkDate($aDay, $aMonth, $aYear, 'year', +1);?>" class="calnavfwd">>></a>end
</div>
</div>
Code: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;
}
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.
I'm using xhtml
But if I change "class="calnavfwd">>></a>" to "class="calnavfwd">bb</a>" it will show a 'b' on the next line.
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.
I removed the comments. Didn't help.
The code:
Still the same CSSCode:<div id="datenav">
<div class="calnavline">
<a href="./calendar.php?<?php echo newLinkDate($aDay, $aMonth, $aYear, 'day', -1);?>" class="calnavback"><<</a>
<span class="calnavnum"><?php echo $aDay ?></span>
<a href="./calendar.php?<?php echo newLinkDate($aDay, $aMonth, $aYear, 'day', +1);?>" class="calnavfwd">>></a>
<br class="clearer" />
</div>
<div class="calnavline">
<a href="./calendar.php?<?php echo newLinkDate($aDay, $aMonth, $aYear, 'month', -1);?>" class="calnavback"><<</a>
<span class="calnavnum"><?php echo $sweMonths[$aMonth - 1] ?></span>
<a href="./calendar.php?<?php echo newLinkDate($aDay, $aMonth, $aYear, 'month', +1);?>" class="calnavfwd">>></a>
<br class="clearer" />
</div>
<div class="calnavline">
<a href="./calendar.php?<?php echo newLinkDate($aDay, $aMonth, $aYear, 'year', -1);?>" class="calnavback"><<</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>
I have no idea what caused the bug, but I have fixed it by doing what they suggested att pie.So I changed my CSS to this:Quote:
Fixes and Workarounds
One easy fix is to put a -3px right margin on the last left float.
Code:.calnavback, .calnavfwd
{
float: left;
width: 3em;
text-align: center;
font-weight: bolder;
margin-right: -3px;
}