Computergenie.nl    

Computergenie.nl
  Registreer!
  Registreer
Homepage
Home
Top 10
Top 10
Forum
Forum
Prijsindex
Prijsindex
Nieuws
Nieuws
Downloads
Downloads
Hulp & Uitleg
Hulp & Uitleg
Uitgebreid zoeken
 
  Zoeken •  Gebruikerslijst  •  Gebruikersgroepen   •  Registreer  •  Profiel  •  Log in om je privť berichten te bekijken  •  Ben je al lid?  Log in! 
Ben je al lid?  Log in!
Kies uw onderwerp:
Computer-Cafť
Knowledge Base
Hardware
Software
Internet & netwerken
Games
Scripten & programmeren
Digitale fotografie & video
Multimedia
GSM & mobile
Sitecheck & links
OfficiŽle mededelingen
Feedback
ISL Light
Aanbiedingen
Markt-plaats
Hulp & Uitleg

Sponsors:

Cloud VPS

Relaties:

PC Beveiliger
Forum » Scripten & programmeren » Evenementen agenda tabel
Evenementen agenda tabel

Nieuw onderwerpNieuw antwoord
frehen Bericht Geplaatst op 09-04-2012 Reageer met quote
Senior lid
Hallo allemaal.
Voor een kunstenaarsvereniging ben ik een website aan het maken. Ze willen hierin een agenda/evenementen mogelijkheid die via CMS gevuld moet kunnen worden. Ik heb hiervoor dus per maand een tabel gemaakt met twee kolommen. In de linkerkolom de datum, in de rechter de evt. activiteit. Als ik nu die pagina oproep wordt dus de gehele maand weergegeven. Maar, er zijn dus data waarop niets staat ingevuld. Ik wil dan dat die gehele rij niet wordt weergegeven (auto collapse of zoiets). Hoe is dat te realiseren ? Met javascript of ...
Tabelopbouw is dus:
<tr><td>datum</td><td>"activiteit"</td></tr>
Iemand een idee, ben al aan het googlen geweest, maar kom er niet uit.




grtjs
frehen
renevanh Bericht Geplaatst op 09-04-2012 Reageer met quote
Beheerder
Hoe en waar vandaan komt die data? Is dat statisch of een SQL database?

Je zou namelijk je tabel dynamisch kunnen genereren aan de hand van de data die je uit je database trekt.




Keyboard not found, press F1 to continue...
frehen Bericht Geplaatst op 09-04-2012 Reageer met quote
Senior lid
Hey rene, nee is statisch, niet uit een database.
Gewoon een kalender per maand. Hier de code.
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="nl">
<title>Maart 2012</title>   
<link rel="stylesheet" type="text/css" href="../css/bkv2.css" />

</head>

<body topmargin="00" leftmargin="00" rightmargin="00" bottommargin="00">
<container>
<div id="zijnavigatie" width="130px" style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#8CCD7C', gradientType='1'); width:140px; height:1240px">
   <font size="2" color="#414141">Leden:<br />
   </font><font color="#414141" size="1">
   <br />
   </font><font size="2" color="#414141">Kunstenaars<br />
   Kunstminnaars<br />
   Sponsors<br />
   </font><font color="#414141" size="1">
   <br>
   </font><font size="2" color="#414141">Login Leden<br>
   </font><font color="#414141" size="1">
   <br />
   </font><font size="2" color="#414141">Atelierroutes<br />
   </font><font color="#414141" size="1">
   <br />
   </font>
   <a target="_blank" href="http://work-with-it.nl">
   <font size="2" color="#414141">
   <img border="0" src="../images/wwiwebdesign1a.png" width="120" height="68"></font></a><font size="2" color="#414141"><br>
   </font><font color="#414141" size="1">
   <br>
   </font>
   <a target="_blank" href="http://www.atelierroutebergeijk.nl/">
   <font size="2" color="#414141">
   <a href="http://www.bestemmingbergeijk.nl/" target="_blank">
   <img border="0" src="../images/beleef-bestemming-bergeijk_a.png" width="120" height="90"></a></font></a><font size="2" color="#414141"><br>
   </font><font color="#414141" size="1">
   <br>
   </font><font size="2" color="#414141">© Bergeijkse<br>
&nbsp;&nbsp;&nbsp; Kunstenaars<br>
&nbsp;&nbsp;&nbsp; Vereniging<br>
   <br>
   <br>
   <br />
   Disclaimer<br />
   Sitemap<br />
   </font><font size="2">
   <br />
   &nbsp;</font></div>
<div id="inhoud" style="width: 750px; height: 1024px">
<center>

<table border="1" width="670" style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#9F82B2', gradientType='1');" height="10" cellspacing="1" style="font-family: Verdana; font-size: 10pt; font-weight: bold">
   <tr>
      <td width="50" align="center" height="15">
      <p align="center"><b>
      <font face="Verdana" color="#804E94" size="2">&lt;</font></b></td>
      <td width="500" align="center" height="15">
      <p><b><font face="Verdana" color="#804E94" size="2">MAART&nbsp; 2012</font></b></td>
      <td width="50" align="center" height="15">
      <p align="center"><b><font face="Verdana" color="#6699FF">
      <a target="_self" style="text-decoration: none" title="april 2012" href="april2012.htm">
      <font color="#804E94" size="2">&gt;</font></a></font></b></td>
   </tr>
   </table>
<table border="1" width="670" height="10" bordercolorlight="#804E94" bordercolordark="#000000">
   <tr>
      <td width="109" align="left"><b>
      <font color="#804E94" face="Verdana" size="2">Datum</font></b></td>
      <td align="left"><b>
      <font color="#804E94" face="Verdana" size="2">
      Evenement</font></b></td>
   </tr>
</table>
<table border="1" width="670" style="font-family: Verdana; font-size: 10pt" bordercolorlight="#804E94" bordercolordark="#000000" cellspacing="1">
   <tr>
      <td width="110" style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#8CCD7C', gradientType='1');" align="left" bordercolor="#E9E9E9">Do. 1 maart</td>
      <td align="left">Tentoonstelling de Ploeg, Thema &quot;BKV 2012&quot;,
      georganiseerd door de BKV, van 13:00u. - 17:00u.</td>
   </tr>
   <tr>
      <td width="110" style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#8CCD7C', gradientType='1');" align="left" bordercolor="#E9E9E9">Vr. 2 maart</td>
      <td align="left"><br>
&nbsp;</td>
   </tr>
   <tr>
      <td width="110" style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#8CCD7C', gradientType='1');" align="left" bordercolor="#E9E9E9">Zat. 3 maart</td>
      <td align="left"><br>
&nbsp;</td>
   </tr>
   <tr>
      <td width="110" style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#8CCD7C', gradientType='1');" align="left" bordercolor="#E9E9E9">Zo. 4 maart</td>
      <td align="left"><br>
&nbsp;</td>
   </tr>
   <tr>
      <td width="110" style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#8CCD7C', gradientType='1');" align="left" bordercolor="#E9E9E9">Ma. 5 maart</td>
      <td align="left"><br>
&nbsp;</td>
   </tr>
   <tr>
      <td width="110" style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#8CCD7C', gradientType='1');" align="left" bordercolor="#E9E9E9">Di. 6 maart</td>
      <td align="left"><br>
&nbsp;</td>
   </tr>
   <tr>
      <td width="110" style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#8CCD7C', gradientType='1');" align="left" bordercolor="#E9E9E9">Wo. 7 maart</td>
      <td align="left"><br>
&nbsp;</td>
   </tr>
   <tr>
      <td width="110" style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#8CCD7C', gradientType='1');" align="left" bordercolor="#E9E9E9">Do. 8 maart</td>
      <td align="left">BKV Ledenvergadering, locatie de Ploeg, aanvang 20:00u.<br>
&nbsp;</td>
   </tr>
   <tr>
      <td width="110" style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#8CCD7C', gradientType='1');" align="left" bordercolor="#E9E9E9">Vr. 9 maart</td>
      <td align="left"><br>
&nbsp;</td>
   </tr>
   <tr>
      <td width="110" style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#8CCD7C', gradientType='1');" align="left" bordercolor="#E9E9E9">Zat. 10 maart</td>
      <td align="left"><br>
&nbsp;</td>
   </tr>
   <tr>
      <td width="110" style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#8CCD7C', gradientType='1');" align="left" bordercolor="#E9E9E9">Zo. 11 maart</td>
      <td align="left"><br>
&nbsp;</td>
   </tr>
   <tr>
      <td width="110" style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#8CCD7C', gradientType='1');" align="left" bordercolor="#E9E9E9">Ma. 12 maart</td>
      <td align="left"><br>
&nbsp;</td>
   </tr>
   <tr>
      <td width="110" style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#8CCD7C', gradientType='1');" align="left" bordercolor="#E9E9E9">Di. 13 maart</td>
      <td align="left"><br>
&nbsp;</td>
   </tr>
   <tr>
      <td width="110" style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#8CCD7C', gradientType='1');" align="left" bordercolor="#E9E9E9">Wo. 14 maart</td>
      <td align="left"><br>
&nbsp;</td>
   </tr>
   <tr>
      <td width="110" style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#8CCD7C', gradientType='1');" align="left" bordercolor="#E9E9E9">Do. 15 maart</td>
      <td align="left"><br>
&nbsp;</td>
   </tr>
   <tr>
      <td width="110" style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#8CCD7C', gradientType='1');" align="left" bordercolor="#E9E9E9">
      <p>Vr. 16 maart</td>
      <td align="left"><br>
&nbsp;</td>
   </tr>
   <tr>
      <td width="110" style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#8CCD7C', gradientType='1');" align="left" bordercolor="#E9E9E9">Zat. 17 maart</td>
      <td align="left"><br>
&nbsp;</td>
   </tr>
   <tr>
      <td width="110" style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#8CCD7C', gradientType='1');" align="left" bordercolor="#E9E9E9">Zo. 18 maart</td>
      <td align="left"><br>
&nbsp;</td>
   </tr>
   <tr>
      <td width="110" style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#8CCD7C', gradientType='1');" align="left" bordercolor="#E9E9E9">Ma. 19 maart</td>
      <td align="left"><br>
&nbsp;</td>
   </tr>
   <tr>
      <td width="110" style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#8CCD7C', gradientType='1');" align="left" bordercolor="#E9E9E9">Di. 20 maart</td>
      <td align="left"><br>
&nbsp;</td>
   </tr>
   <tr>
      <td width="110" style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#8CCD7C', gradientType='1');" align="left" bordercolor="#E9E9E9">Wo. 21 maart</td>
      <td align="left"><br>
&nbsp;</td>
   </tr>
   <tr>
      <td width="110" style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#8CCD7C', gradientType='1');" align="left" bordercolor="#E9E9E9">Do. 22 maart</td>
      <td align="left"><br>
&nbsp;</td>
   </tr>
   <tr>
      <td width="110" style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#8CCD7C', gradientType='1');" align="left" bordercolor="#E9E9E9">Vr. 23 maart</td>
      <td align="left"><br>
&nbsp;</td>
   </tr>
   <tr>
      <td width="110" style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#8CCD7C', gradientType='1');" align="left" bordercolor="#E9E9E9">Zat. 24 maart</td>
      <td align="left"><br>
&nbsp;</td>
   </tr>
   <tr>
      <td width="110" style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#8CCD7C', gradientType='1');" align="left" bordercolor="#E9E9E9">Zo. 25 maart</td>
      <td align="left"><br>
&nbsp;</td>
   </tr>
   <tr>
      <td width="110" style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#8CCD7C', gradientType='1');" align="left" bordercolor="#E9E9E9">Ma. 26 maart</td>
      <td align="left"><br>
&nbsp;</td>
   </tr>
   <tr>
      <td width="110" style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#8CCD7C', gradientType='1');" align="left" bordercolor="#E9E9E9">Di. 27 maart</td>
      <td align="left"><br>
&nbsp;</td>
   </tr>
   <tr>
      <td width="110" style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#8CCD7C', gradientType='1');" align="left" bordercolor="#E9E9E9">Wo. 28 maart</td>
      <td align="left"><br>
&nbsp;</td>
   </tr>
   <tr>
      <td width="110" style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#8CCD7C', gradientType='1');" align="left" bordercolor="#E9E9E9">Do. 29 maart</td>
      <td align="left"><br>
&nbsp;</td>
   </tr>
   <tr>
      <td width="110" style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#8CCD7C', gradientType='1');" align="left" bordercolor="#E9E9E9">Vr. 30 maart</td>
      <td align="left"><br>
&nbsp;</td>
   </tr>
   <tr>
      <td width="110" style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#8CCD7C', gradientType='1');" align="left" bordercolor="#E9E9E9">Zat. 31 maart</td>
      <td align="left"><br>
&nbsp;</td>
   </tr>
</table>

</center>
</div>
</container>
</body>

</html>

Degene die dat via CMS gaat bijhouden roept de betreffende maand op en kan data vullen in het tekstveld rechts.
Ik wil alleen dat online op de agendapagina echter alleen de data te zien zijn waar werkelijk iets is ingevuld in de kolom rechts.
Ben al bezig geweest met een javascript maar dat kreeg ik niet aan de gang.... maar dan moet de doctype ook strict zijn niet ? Niet transitional ... of heeft dat hier geen invloed ?



Laatst aangepast door frehen op 10-04-2012, in totaal 1 keer bewerkt



grtjs
frehen
vosManz Bericht Geplaatst op 09-04-2012 Reageer met quote
Technische man
Hoi frehen,

Je geeft aan dat de tabel beheerd wordt vanuit een CMS. Normaal gesproken worden er dan gegevens in een database (of eventueel tekst-bestand)opgeslagen. Met die gegevens kun je een html-pagina genereren als je een agenda-item opslaat, of de pagina iedere keer dynamisch aanmaken als iemand deze bezoekt. In beide gevallen is het erg eenvoudig om de lege dagen over te slaan. Er komen voor lege dagen dus geen tr's bij, en je probleem is dan dus meteen opgelost.

Strict of Transitional heeft niets met de werking van javascript te maken, maar geeft enkel aan hoe streng je je aan de (X)HTML standaarden houdt. Transitional is hier waarschijnlijk de beste keuze.

Hoe wordt de pagina nu opgebouwd? Als dit dynamisch is (dus door middel van PHP of een andere script-taal) kun je de tr's gewoon overslaan. Of eventueel de lege tr's een class meegeven, en daar met CSS de opmaak 'display: none;' aan meegeven zodat de TR niet zichtbaar is.




::: vosManz :::
frehen Bericht Geplaatst op 10-04-2012 Reageer met quote
Senior lid
hoi vosmanz
Heb hierboven de paginacode geplaatst ipv de url. Dit zegt meer.
Er is gekozen om handmatig data te vullen als die er zijn. Dus
geen enkele dynamica. De maandpagina's (html/div) staan in een
map waar alleen de gene die erover gaat toegang toe heeft en die
vult de activiteiten in. Simpel. Zo heel veel gaat dat nl. niet voorkomen.
Vandaar, dus zoek toch iets met ja een class en dan css ja, of evt. een
javascript wat hetzelfde doet, maar dan wel auto.
Het gaat erover dat bekeken wordt of er tekst in die tweede kolom staat
(die van het evenement/activiteit) zo niet, dan de hele rij niet weergeven.
Ik heb al zo zitten modderen en het nog niet werkbaar gekregen...




grtjs
frehen
renevanh Bericht Geplaatst op 10-04-2012 Reageer met quote
Beheerder
Jquery heeft hier ongetwijfeld functies voor... maar zo goed ken ik Jquery niet dat ik het zo zou kunnen roepen.



Keyboard not found, press F1 to continue...
vosManz Bericht Geplaatst op 10-04-2012 Reageer met quote
Technische man
Ik ken wel wat jQuery. Met onderstaande moet het lukken, maar dan moet je er wel zeker van zijn dat de td's helemaal leeg zijn (dus geen spatie, <br> of wat dan ook er in)

Download jquery via jquery.com (de productie-versie is het beste voor online-gebruik).

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="nl" />
<title>Maart 2012</title>
<link rel="stylesheet" type="text/css" href="../css/bkv2.css" />
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  var calendarTable = $( '#calendarMonthTable tr' );
   calendarTable.each( function( index, value ) {
      if( $( 'td:nth-child(2)', value ).html() == '' )
         $( '#calendarMonthTable tr:nth-child( ' + ( index + 1 ) + ')' ).css( 'display', 'none' );
   });
});
</script>

</head>

<body topmargin="00" leftmargin="00" rightmargin="00" bottommargin="00">

<div id="zijnavigatie" width="130px" style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#8CCD7C', gradientType='1'); width:140px; height:1240px">
    <font size="2" color="#414141">Leden:<br />
   </font><font color="#414141" size="1">
   <br />
   </font><font size="2" color="#414141">Kunstenaars<br />
   Kunstminnaars<br />
   Sponsors<br />
   </font><font color="#414141" size="1">
   <br />
   </font><font size="2" color="#414141">Login Leden<br />
   </font><font color="#414141" size="1">
   <br />
   </font><font size="2" color="#414141">Atelierroutes<br />
   </font><font color="#414141" size="1">
   <br />
   </font>
   <a target="_blank" href="http://work-with-it.nl">
   <font size="2" color="#414141">
   <img border="0" src="../images/wwiwebdesign1a.png" width="120" height="68"></font></a><font size="2" color="#414141"><br>
    </font><font color="#414141" size="1">
   <br />
   </font>
   <a target="_blank" href="http://www.atelierroutebergeijk.nl/">
   <font size="2" color="#414141">
   <a href="http://www.bestemmingbergeijk.nl/" target="_blank">
   <img border="0" src="../images/beleef-bestemming-bergeijk_a.png" width="120" height="90"></a></font></a><font size="2" color="#414141"><br>
    </font><font color="#414141" size="1">
   <br />
   </font><font size="2" color="#414141">© Bergeijkse<br />
&nbsp;&nbsp;&nbsp; Kunstenaars<br />
&nbsp;&nbsp;&nbsp; Vereniging<br />
   <br />
   <br />
   <br />
   Disclaimer<br />
   Sitemap<br />
   </font><font size="2">
   <br />
   &nbsp;</font></div>
<div id="inhoud" style="width: 750px; height: 1024px">
<center>

<table border="1" width="670" style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#9F82B2', gradientType='1');" height="10" cellspacing="1" style="font-family: Verdana; font-size: 10pt; font-weight: bold">
    <tr>
      <td width="50" align="center" height="15">
      <p align="center"><b>
      <font face="Verdana" color="#804E94" size="2">&lt;</font></b></td>
      <td width="500" align="center" height="15">
      <p><b><font face="Verdana" color="#804E94" size="2">MAART&nbsp; 2012</font></b></td>
       <td width="50" align="center" height="15">
      <p align="center"><b><font face="Verdana" color="#6699FF">
      <a target="_self" style="text-decoration: none" title="april 2012" href="april2012.htm">
       <font color="#804E94" size="2">&gt;</font></a></font></b></td>
   </tr>
   </table>
<table border="1" width="670" height="10" bordercolorlight="#804E94" bordercolordark="#000000">
    <tr>
      <td width="109" align="left"><b>
      <font color="#804E94" face="Verdana" size="2">Datum</font></b></td>
      <td align="left"><b>
      <font color="#804E94" face="Verdana" size="2">
      Evenement</font></b></td>
   </tr>
</table>
<table id="calendarMonthTable" border="1" width="670" style="font-family: Verdana; font-size: 10pt" bordercolorlight="#804E94" bordercolordark="#000000" cellspacing="1">
    <tr>
      <td width="110" style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#8CCD7C', gradientType='1');" align="left" bordercolor="#E9E9E9">Do. 1 maart</td>
       <td align="left">Tentoonstelling de Ploeg, Thema &quot;BKV 2012&quot;,
      georganiseerd door de BKV, van 13:00u. - 17:00u.</td>
   </tr>
   <tr>
      <td width="110" style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#8CCD7C', gradientType='1');" align="left" bordercolor="#E9E9E9">Vr. 2 maart</td>
       <td align="left"></td>
   </tr>
   <tr>
      <td width="110" style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#8CCD7C', gradientType='1');" align="left" bordercolor="#E9E9E9">Zat. 3 maart</td>
       <td align="left"></td>
   </tr>
   <tr>
      <td width="110" style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#8CCD7C', gradientType='1');" align="left" bordercolor="#E9E9E9">Zo. 4 maart</td>
       <td align="left"></td>
   </tr>
   <tr>
      <td width="110" style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#8CCD7C', gradientType='1');" align="left" bordercolor="#E9E9E9">Ma. 5 maart</td>
       <td align="left"></td>
   </tr>
   <tr>
      <td width="110" style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#8CCD7C', gradientType='1');" align="left" bordercolor="#E9E9E9">Di. 6 maart</td>
       <td align="left"></td>
   </tr>
   <tr>
      <td width="110" style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#8CCD7C', gradientType='1');" align="left" bordercolor="#E9E9E9">Wo. 7 maart</td>
       <td align="left"></td>
   </tr>
   <tr>
      <td width="110" style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#8CCD7C', gradientType='1');" align="left" bordercolor="#E9E9E9">Do. 8 maart</td>
       <td align="left">BKV Ledenvergadering, locatie de Ploeg, aanvang 20:00u.<br>
 &nbsp;</td>
   </tr>
   <tr>
      <td width="110" style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#8CCD7C', gradientType='1');" align="left" bordercolor="#E9E9E9">Vr. 9 maart</td>
       <td align="left"></td>
   </tr>
   <tr>
      <td width="110" style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#8CCD7C', gradientType='1');" align="left" bordercolor="#E9E9E9">Zat. 10 maart</td>
       <td align="left"></td>
   </tr>
   <tr>
      <td width="110" style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#8CCD7C', gradientType='1');" align="left" bordercolor="#E9E9E9">Zo. 11 maart</td>
       <td align="left"></td>
   </tr>
   <tr>
      <td width="110" style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#8CCD7C', gradientType='1');" align="left" bordercolor="#E9E9E9">Ma. 12 maart</td>
       <td align="left"></td>
   </tr>
   <tr>
      <td width="110" style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#8CCD7C', gradientType='1');" align="left" bordercolor="#E9E9E9">Di. 13 maart</td>
       <td align="left"></td>
   </tr>
   <tr>
      <td width="110" style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#8CCD7C', gradientType='1');" align="left" bordercolor="#E9E9E9">Wo. 14 maart</td>
       <td align="left"></td>
   </tr>
   <tr>
      <td width="110" style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#8CCD7C', gradientType='1');" align="left" bordercolor="#E9E9E9">Do. 15 maart</td>
       <td align="left"></td>
   </tr>
   <tr>
      <td width="110" style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#8CCD7C', gradientType='1');" align="left" bordercolor="#E9E9E9">
       <p>Vr. 16 maart</td>
      <td align="left"></td>
   </tr>
   <tr>
      <td width="110" style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#8CCD7C', gradientType='1');" align="left" bordercolor="#E9E9E9">Zat. 17 maart</td>
       <td align="left"></td>
   </tr>
   <tr>
      <td width="110" style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#8CCD7C', gradientType='1');" align="left" bordercolor="#E9E9E9">Zo. 18 maart</td>
       <td align="left"></td>
   </tr>
   <tr>
      <td width="110" style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#8CCD7C', gradientType='1');" align="left" bordercolor="#E9E9E9">Ma. 19 maart</td>
       <td align="left"></td>
   </tr>
   <tr>
      <td width="110" style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#8CCD7C', gradientType='1');" align="left" bordercolor="#E9E9E9">Di. 20 maart</td>
       <td align="left"></td>
   </tr>
   <tr>
      <td width="110" style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#8CCD7C', gradientType='1');" align="left" bordercolor="#E9E9E9">Wo. 21 maart</td>
       <td align="left"></td>
   </tr>
   <tr>
      <td width="110" style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#8CCD7C', gradientType='1');" align="left" bordercolor="#E9E9E9">Do. 22 maart</td>
       <td align="left"></td>
   </tr>
   <tr>
      <td width="110" style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#8CCD7C', gradientType='1');" align="left" bordercolor="#E9E9E9">Vr. 23 maart</td>
       <td align="left"></td>
   </tr>
   <tr>
      <td width="110" style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#8CCD7C', gradientType='1');" align="left" bordercolor="#E9E9E9">Zat. 24 maart</td>
       <td align="left"></td>
   </tr>
   <tr>
      <td width="110" style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#8CCD7C', gradientType='1');" align="left" bordercolor="#E9E9E9">Zo. 25 maart</td>
       <td align="left"></td>
   </tr>
   <tr>
      <td width="110" style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#8CCD7C', gradientType='1');" align="left" bordercolor="#E9E9E9">Ma. 26 maart</td>
       <td align="left"></td>
   </tr>
   <tr>
      <td width="110" style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#8CCD7C', gradientType='1');" align="left" bordercolor="#E9E9E9">Di. 27 maart</td>
       <td align="left"></td>
   </tr>
   <tr>
      <td width="110" style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#8CCD7C', gradientType='1');" align="left" bordercolor="#E9E9E9">Wo. 28 maart</td>
       <td align="left"></td>
   </tr>
   <tr>
      <td width="110" style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#8CCD7C', gradientType='1');" align="left" bordercolor="#E9E9E9">Do. 29 maart</td>
       <td align="left"></td>
   </tr>
   <tr>
      <td width="110" style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#8CCD7C', gradientType='1');" align="left" bordercolor="#E9E9E9">Vr. 30 maart</td>
       <td align="left"></td>
   </tr>
   <tr>
      <td width="110" style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#8CCD7C', gradientType='1');" align="left" bordercolor="#E9E9E9">Zat. 31 maart</td>
       <td align="left"></td>
   </tr>
</table>

</center>
</div>
</body>

</html>


Overigens heb ik ook nog een aantal tips over je code. Een aantal tags klopt namelijk niet, of worden niet (meer/in alle browsers) ondersteund.
- <br> moet in xhtml <br /> zijn (alle tags moeten afgesloten worden). Dit geldt ook voor andere tags, zoals bijvoorbeeld <img />
- filter:progid:DXImageTransform.Microsoft.Gradient is, zoals de naam het al zegt, specifiek voor Microsoft. Dit zal dan ook niet werken op andere browsers dan Interet Explorer. Beter gebruik je hiervoor een (repeating) achtergrond afbeelding.
- Opmaak moet in xhtml via het style-attribuut. De attributen (top/bottom/right/left)margin, bordercolorlight, bordercolordark enz. zijn dus niet meer toegestaan.
- Vanwege het bovenstaande punt is het ook niet meer verstandig om font,b,i,u,strong, enz.. -tags te gebruiken. In Transitional mode is dit nog toegestaan, maar in Strict volgens mij niet meer. In de toekomst zal deze tag verdwijnen.
- In de eerste tabel open je een aantal <p> tags, maar deze worden nergens afgesloten.
- Je gebruikt de tag <container>. Deze bestaat echter niet, en kan dus niet gebruikt worden.

Zie dit niet als kritiek, maar als verbeterpunten :) Het is tegenwoordig steeds belangrijker om een website in alle browsers te laten werken en er hetzelfde uit te laten zien. Als je de standaarden volgt, zal dit veel eenvoudiger zijn, en zul je zien dat de website ook beter op mobiele browsers en tablets werkt :)
Het is aan te raden je code af en toe te valideren via http://validator.w3.org/




::: vosManz :::
frehen Bericht Geplaatst op 14-04-2012 Reageer met quote
Senior lid
Hey vosmanz, dank je wel zeg, dit werkt als een tierelier !!
Zie je verdere opmerkingen ook niet als kritiek. Dat gradient van MS was
ik inmiddels ook achter en dat checken via validator doe ik ook steeds
vaker, maar zat nu nog midden in de bouw. Komt goed allemaal.
Die container had ik bedacht maar nog niet in de css ondergebracht.
Het was nl. mijn bedoeling de onderzijde van de website dynamisch te
maken, dus dat die naar de onderkant van de browser zich uitrekt
navenant hij de ruimte heeft qua resolutie. Maar dat krijg ik niet voor
mekaar, ook niet met overflow:auto, dus ik hou het maar op de max.
hoogte van 768px de site.
De agendapagina overigens die ik hier heb geplaatst wordt geopend in
een iframe in de agendapagina wat me de mogelijkheid geeft om binnen
die iframe van maand te veranderen online.




grtjs
frehen
Nieuw onderwerpNieuw antwoord   


Forum » Scripten & programmeren » Evenementen agenda tabel

Powered by Cloud VPS - High Availability Cloud Servers