[css] agenda weergave

[Verwijderd]

Ik ben momenteel bezig met het maken van een eenvoudige agenda.
De agenda moet simpelweg per dag weergegeven worden.

Per dag worden de tijdsintervallen weergegeven met halve uren

Dus:

dag 1
00:00 - 00:30
00:30 - 01:00
01:00 - 01:30

etc.

Dit doe ik met een tabel.

Nu wil ik dus afspraken weergeven in die tabel.
Maar een afspraak kan:
- geheel binnen een tijdsinterval vallen
- starten in een tijdsinterval
- doorlopen in een tijdsinterval
- eindigen in een tijdsinterval

Ik wil de afspraak weergeven dmv bijvoorbeeld een gekleurd vlak van begin- tot eindtijd. (net als in Outlook dus).

Maar hoe kan ik dit nu het beste aanpakken:
1 div voor de gehele afspraak en deze zien te positioneren op de tabel
of
per tijdsinterval regel een div plaatsen en deze voorzien van randen, zodat de verschillende divs 1 vlak vormen?

Nadeel van de laatste mogelijkheid is dat ik weinig tekst kwijt kan in het vak.
In de eerste mogelijkheid zou je het hele vlak voor de tekst kunnen gebruiken.

Iemand tips, ideeen etc hiervoor?

[disjfa]

Tsja als het dan toch al in een tabel zit kan je net zo goed een rowspan gebruiken en je text erin zetten. Ben je in een keer klaar.

maargoed het ligt er maar net aan wat je allemaal met je agenda wilt doen voor welke aanpak het makkelijkste is...

[Verwijderd]

Helaas gaat die optie niet op
Aangezien een afspraak ook om een kwartier kan starten / eindigen.
Dan wil ik dmv de hoogte van de div dus laten zien dat de afspraak niet precies in het interval start / eindigt.

zo dus:
http://dev4.topsite.nl/tmp.html (oplossing 2 is dit)

[ Voor 14% gewijzigd door Verwijderd op 17-06-2005 11:17 ]

[Zoefff]

Ik zou het niet oplossen met tabellen en divs, maar met een defenitionlist. Overzichtelijker, en ook makkelijker te stylen (denk ik).

HTML:

<dl>
    <dt>00.00 - 00.30</dt>
    <dd class='afspraak_1'>Afspraak 1</dd>
    
    <dt>00.30 - 01.00</dt>
    <dd class='afspraak_2'>Afspraak 2</dd>
    
    <dt>01.00 - 01.30</dt>

    <dt>01.30 - 02.00</dt>
    <dd class='afspraak_3'>Afspraak 3</dd>
    <dd class='afspraak_4'>Afspraak 4</dd>
    
    <dt>02.00 - 02.30</dt>
    <dd class='afspraak_5'>Afspraak 5</dd>
</dl>

Dit is je agenda. Op 01.00 - 01.30 heb je dus geen afspraken, maar het half uur daarna heb je er 2. Je kan zo veel dd's per dt maken als je zelf wilt.

Cascading Stylesheet:

body {
    font-family:Arial, Helvetica, sans-serif;
    font-size:13px;
}
dl {
    position:relative;
    padding:0px;
    border:1px solid white;
}
dt {
    line-height:60px;
    margin:0px;
    padding:0px;
    border-bottom:1px dashed gray;
}
dd {
    background-color:#FFFFDD;
    border:1px solid black;
    position:absolute;
}
.afspraak_1 {
    top:0px;
    left:100px;
    width:150px;
    height:118px;
}
.afspraak_2 {
    top:90px;
    left:270px;
    width:150px;
    height:58px;
}
.afspraak_3 {
    top:150px;
    left:100px;
    width:150px;
    height:58px;
}
.afspraak_4 {
    top:183px;
    left:270px;
    width:150px;
    height:118px;
}
.afspraak_5 {
    top:245px;
    left:100px;
    width:150px;
    height:90px;
}

Alle afspraken zijn nu wel individueel gestyled. Een half uur is 60px (+2 voor de border) groot, dus als je om 2 uur een afspraak hebt, moet je dat blok 240px naar beneden schuiven. Ze worden nu binnen de dl absolute neergezet, volgens mij moet dat ook relative kunnen, maar daar kwam ik even niet uit.

Die witte border om de dl staat daar overigens omdat IE het anders niet helemaal snapt

Ohja. Voorbeeldje: http://zoefff.gotdns.com/got/agenda.htm

[ Voor 10% gewijzigd door Zoefff op 17-06-2005 13:32 ]

[Zoefff]

En met PHP kan je vast wel iets creatiefs klussen dat deze styles automatisch maakt. 30px per kwartier, dat zal toch niet al te lastig zijn

[Verwijderd]

Hey daar had ik helemaal niet aan gedacht, dat ziet er goed uit! Bedankt, daar ga ik me eens verder in verdiepen!

[Verwijderd]

Misschien dat een unordered list beter is om te positiioneren? Ik krijg het zo ook niet netjes voor elkaar zonder heel veel classes aan te maken.

[Zoefff]

Dat denk ik niet. Je zal alsnog iedere afspraak afzonderlijk moeten stylen, en bovendien is een unordered list semantisch minder correct dan een defenition list.

En, zo heel veel classes zijn het toch niet, 1tje per afspraak.

Als je dat te veel vind, moet je even uitvogelen hoe je de boel relatief kan positioneren, dus iedere afspraak ten opzichte van "zijn" dd positioneren. Dan heb je maar 3 classes nodig, 1 voor een kwartier eerder, 1 voor precies dat blok, en 1 voor een kwartier later (ofzo).

Maar, als je dit door PHP laat genereren, dan heb je er toch weinig last van? Oke, je CSS word wel wat uitgebreid, maar daar hoef je niet zelf aan te knutselen

[Verwijderd]

Zoefff schreef op vrijdag 17 juni 2005 @ 15:13:
Dat denk ik niet. Je zal alsnog iedere afspraak afzonderlijk moeten stylen, en bovendien is een unordered list semantisch minder correct dan een defenition list....

je kunt ook style aanmaken en dan erachter zetten acher bijv <dd class="afspraak" style="position: top: 200;">

[ Voor 6% gewijzigd door Verwijderd op 17-06-2005 16:46 ]

[Zoefff]

Jup, maar dat is netto ongeveer evenveel code, en imho minder overzichtelijk

[Verwijderd]

Ben het nu volledig met divs in elkaar aan het goochelen.
Dit werkt prima, maar 1 probleem:
De grijze onderbroken strepen blijven zichtbaar door de afspraakvelden heen.
Wat ik ook probeer, ik krijg ze niet weg. (z-index mocht niet baten).

S:\dev4.topsite.nl\tmp4.html

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=iso-8859-1" />
<title>Agenda - test 4</title>
<style type="text/css" media="all">
body,p,div,a,select,textarea,input,pre{
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
}
body,html{
    padding: 10px;
    margin: 10px;
} 
#dayContainer{
    position: relative;
    padding: 5px;
    border:1px solid #000000;
}
.dayInterval{
    position:relative;
    height: 60px;
    vertical-align: top;
    border-bottom: 1px dashed #ccc;
}
.app{
    position: absolute;
    padding: 5px;
    top: 0px;
    left: 0px;
    border:1px solid #cccccc;
    background-color:#FFFFCC;
    width: 200px;   
}
.col1{
    left: 180px;
}
.col2{
    left: 400px;
}
</style>
</head>

<body>
<div id="dayContainer">
 <div class="dayInterval">00:00 - 00:30
    <div class="app col1" style="top: 30px; height: 50px;">afspraak 1<br />00:15-00:45</div>
    <div class="app col2" style="top: 0px; height: 170px; z-index: 100;">afspraak 2<br />00:00-01:30</div>
 </div>
 <div class="dayInterval">00:30 - 01:00</div>
 <div class="dayInterval">01:00 - 01:30</div>
 <div class="dayInterval">01:30 - 02:00
    <div class="app col1" style="">afspraak 3</div>
 </div>
 <div class="dayInterval">02:00 - 02:30</div>
 <div class="dayInterval">02:30 - 03:00
    <div class="app col1" style="top: 20px;height:50px;">afspraak 4<br />02:40-03:15</div>
    <div class="app col2" style="">afspraak 5</div>
 </div>
 <div class="dayInterval">03:00 - 03:30</div>
 <div>&nbsp;</div>
</div>
</body>
</html>

[Erkens]

Zoefff schreef op vrijdag 17 juni 2005 @ 15:13:
En, zo heel veel classes zijn het toch niet, 1tje per afspraak.

offtopic:
als je zoiets schrijft weet je eigenlijk al dat je hiervoor beter een id kan gebruiken dan een class

[Verwijderd]

Het is nu even een haastklus (het moet gratis en mag niets kosten ) ... dus leek me divjes even het makkelijkst. Maar ik ga dat met die dl ook zeker nog uitzoeken.

[Zoefff]

Erkens schreef op vrijdag 17 juni 2005 @ 16:42:
[...]

offtopic:
als je zoiets schrijft weet je eigenlijk al dat je hiervoor beter een id kan gebruiken dan een class

Dat is niet waar, want een id moet uniek zijn op een pagina. Dit zijn wel 3 unieke posities, maar ze worden wel per afspraak herhaald zegmaar

[Erkens]

Zoefff schreef op vrijdag 17 juni 2005 @ 16:44:
[...]

Dat is niet waar, want een id moet uniek zijn op een pagina. Dit zijn wel 3 unieke posities, maar ze worden wel per afspraak herhaald zegmaar

maar ehm, een afspraak is toch ook uniek, of kijk ik verkeerd

[Verwijderd]

Een afspraak is idd uniek ... maarre ... iemand nog tips voor mijn 'probleempje' hierboven?
De hoogte en top-positie zijn afhankelijk van de starttijd. Vandaar dat die nu even inline staan.
Maar die grijze stippellijn

oplossing: een negative z-index dus ... zucht

[ Voor 13% gewijzigd door Verwijderd op 17-06-2005 16:49 ]

[Zoefff]

Ja, maar wat ik bedoel, je hebt 3 verschillende soorten. Een kwartier voor, op heel, of een kwartier na. Dat zijn op zich unieke dingen, maar er kunnen natuurlijk meerdere afspraken zijn die een kwartier voor beginnen. Dan ga je dus al de mist in met je id's

[Verwijderd]

hoezo een kwartier op, voor, na ???
Een afspraak kan in principe ook om 12:25 beginnen dus dat gaat niet op.

[Erkens]

Zoefff schreef op vrijdag 17 juni 2005 @ 16:48:
Ja, maar wat ik bedoel, je hebt 3 verschillende soorten. Een kwartier voor, op heel, of een kwartier na. Dat zijn op zich unieke dingen, maar er kunnen natuurlijk meerdere afspraken zijn die een kwartier voor beginnen. Dan ga je dus al de mist in met je id's

een bepaalde afspraak begint op een bepaald moment en eindigt op een bepaald moment.
Zodra je meerdere afspraken hebt gelijktijdig dan heb je toch een andere locatie waar die moet staan. Eventueel kan je natuurlijk een level en tijd class hebben, maar een class per afspraak is niet handig, want die gebruik je toch maar 1x

[Zoefff]

Nee!

Correct:

HTML:

<dl>
    <dt>00.00 - 00.30</dt>
    <dd class='kwartier_voor'>Afspraak 1</dd>

    <dt>00.30 - 01.00</dt>
    <dd class='kwartier_na'>Afspraak 2</dd>
    
        <dt>01.00 - 01.30</dt>

    <dt>01.30 - 02.00</dt>
    <dd class='kwartier_na'>Afspraak 3</dd>
    
    <dt>02.00 - 02.30</dt>
    <dd class='kwartier_voor'>Afspraak 4</dd>
</dl>

Fout:

HTML:

<dl>
    <dt>00.00 - 00.30</dt>
    <dd id='kwartier_voor'>Afspraak 1</dd>

    <dt>00.30 - 01.00</dt>
    <dd id='kwartier_na'>Afspraak 2</dd>
    
        <dt>01.00 - 01.30</dt>

    <dt>01.30 - 02.00</dt>
    <dd id='kwartier_na'>Afspraak 3</dd>
    
    <dt>02.00 - 02.30</dt>
    <dd id='kwartier_voor'>Afspraak 4</dd>
</dl>

Dat bedoel ik dus

Maarja, dat is dus behoorlijk offtopic

[ Voor 31% gewijzigd door Zoefff op 17-06-2005 16:55 ]

[Verwijderd]

Dit is het even geworden: http://dev4.topsite.nl/tmp5.html

Maar de code vind ik nu wel onduidelijk, zeker door al die z-indexen.
Heb de z-indexen anders proberen op te lossen (door ze in de class te zetten, maar dat werkte niet. Het leek wel of de z-index dan genegeerd wordt).

[Erkens]

Verwijderd schreef op vrijdag 17 juni 2005 @ 17:00:
Dit is het even geworden: http://dev4.topsite.nl/tmp5.html

Maar de code vind ik nu wel onduidelijk, zeker door al die z-indexen.
Heb de z-indexen anders proberen op te lossen (door ze in de class te zetten, maar dat werkte niet. Het leek wel of de z-index dan genegeerd wordt).

leuk, in firefox zie je alleen een groot wit rechthoek door verkeerd gebruik van die z-index

[Zoefff]

Het werkt niet in FireFox.

Nu wel

[ Voor 27% gewijzigd door Zoefff op 17-06-2005 17:02 ]

[Xander]

Zoefff schreef op vrijdag 17 juni 2005 @ 16:55:
Dat bedoel ik dus

Maarja, dat is dus behoorlijk offtopic

En dat snapt Erkens ook echt wel lijkt me. Alleen je doet het nu toch wel een beetje anders dan in [rml]Zoefff in "[ css] agenda weergave"[/rml] waar je voor iedere afspraak een aparte class maakte, waar je net zogoed id's had kunnen gebruiken

[Zoefff]

offtopic:
Sneaky in #area61 meelezen, en dat tegen mij gebruiken he. Gluiperd

[Zoefff]

Ik snap alleen nog niet waarom je mijn oplossing niet gebruikt.

Het is netto even veel werk, aangezien je nu ook ieder divje apart aan het stylen bent, maar een defenitionlist is wel overzichtelijker en makkelijker te onderhouden.

Nouja, je moet het zelf weten

[Verwijderd]

Die heb ik (nog) niet gebruikt, omdat ik het niet voor elkaar kreeg om alles goed te positioneren ...
Maar dat ga ik nog wel onder de loep nemen hoor

Nou ik ben ermee bezig, maar het is toch niet zo handig als je denkt ..
Aangezien de dd's t.o.v. de dl worden gepositioneerd en niet van de dt.
Om dat voor elkaar te krijgen (want ik wil de afspraken positioneren vanaf de top en dat kan alleen met absolute volgens mij) heb ik dus divs om de dt heen moeten zetten.

<dl>
<div>
<dt>00:00 - 00:30</dt>
<dd class="col1">Afspraak 1<br />00:15 - 01:20</dd>
<dd class="col2">Afspraak 2<br />00:25 - 00:45</dd>
</div>
<div>
<dt>00:00 - 01:00</dt>
</div>
<div>
<dt>01:00 - 01:30</dt>
<dd class="col1">Afspraak 3</dd>
</div>
<div>
<dt>01:30 - 02:00</dt>
</div>
<div>
<dt>02:00 - 02:30</dt>
<dd class="col1">Afspraak 4</dd>
<dd class="col2">Afspraak 5</dd>
</div>
<div>
<dt>02:30 - 03:00</dt>
</div>
</dl>

Dus wordt alsnog een zootje

[ Voor 74% gewijzigd door Verwijderd op 17-06-2005 20:48 ]

[Erkens]

Waarom zet je er div's omheen? Als je wilt kan je namelijk een dt of welk element dan ook als hetzelfde behandelen alleen de standaard "style" is anders, maar dat is eenvoudig aan te passen.
Waarom je dan toch een dt/dd structuur moet gebruiken is puur om het feit dat het symatisch beter is.
Daarnaast kan je volgens mij op die manier geen div plaatsen.

[Zoefff]

Verwijderd schreef op vrijdag 17 juni 2005 @ 19:55:
Die heb ik (nog) niet gebruikt, omdat ik het niet voor elkaar kreeg om alles goed te positioneren ...
Maar dat ga ik nog wel onder de loep nemen hoor

Nou ik ben ermee bezig, maar het is toch niet zo handig als je denkt ..
Aangezien de dd's t.o.v. de dl worden gepositioneerd en niet van de dt.
Om dat voor elkaar te krijgen (want ik wil de afspraken positioneren vanaf de top en dat kan alleen met absolute volgens mij) heb ik dus divs om de dt heen moeten zetten.

<dl>
<div>
<dt>00:00 - 00:30</dt>
<dd class="col1">Afspraak 1<br />00:15 - 01:20</dd>
<dd class="col2">Afspraak 2<br />00:25 - 00:45</dd>
</div>
<div>
<dt>00:00 - 01:00</dt>
</div>
<div>
<dt>01:00 - 01:30</dt>
<dd class="col1">Afspraak 3</dd>
</div>
<div>
<dt>01:30 - 02:00</dt>
</div>
<div>
<dt>02:00 - 02:30</dt>
<dd class="col1">Afspraak 4</dd>
<dd class="col2">Afspraak 5</dd>
</div>
<div>
<dt>02:30 - 03:00</dt>
</div>
</dl>

Dus wordt alsnog een zootje

Huh

Ik snap niet precies wat je bedoelt, maar volgens mij denk je veel te ingewikkeld.

Er zijn een aantal dingen waar je rekening mee moet houden:
[list]• De tijden (01.00-01.30) worden allemaal op gelijke afstand van elkaar geplaatst. Dit doe je (bijvoorbeeld) door het element dt een line-height van 60px mee te geven.
• De afspraken (de dd) wil je vanaf de top van de dl absoluut positioneren. Dit doe je door iedere dd een eigen afstand vanaf de top (en vanaf links) mee te geven. Waarom je die div er omheen plaatst is me een raadsel, want die is totaal overbodig (en mag bovendien niet op die plaats staan).

[Verwijderd]

[ ... domme opmerkingen ...]

Heb het nu idd ook zonder divjes voor elkaar gekregen

[ Voor 85% gewijzigd door Verwijderd op 29-06-2005 10:01 ]

[Verwijderd]

sterker nog: je hoeft dus ook niet per interval te kijken welke afspraken erin staan.
Je kunt gewoon alles afspraken onder elkaar onder de eerste <dt> zetten ... wel zo overzichtelijk

[semicon]

misshcien klinkt het heel dom ofzo, maar kan je het niet beter met een div of tabel doen met een achtergrondplaatje (gif), als je de uren erin zit wordt zon plaatje nooit groot ookal is ie misshcien wel 700px hoog en het werkt perfect, als je een gedeelte wilt overlappeen reken je met timediff() of iets in die richting het vershcil tussen 0 en het uur uit en dat is je [top] px en de hoogte is het aantal uren/minuten whatver naar pix omrekenen.

voorbeeld, elk half uur is 20 pix.

- 0u top = 0
- 0.30 top = top + 20
- 1.u als het om 1u begint dan is top = 20
- 1.30
-

[Verwijderd]

Met de dl,dt en dd werkt het prima! Ook de berekeningen van de top en de hoogte zijn zeer eenvoudig. De hele pagina inclusief 10 afspraken op 1 dag wordt nu in 0.015 seconden geparsed en getoond in de browser

[Zoefff]

Mooi! Fijn om te horen dat je de juiste oplossing hebt gebruikt

[Verwijderd]

ipv line-height=60px heb ik height=60px gebruikt.
Bij line-height kon ik de tekst niet bovenin uitlijnen (vertical-align: top;) en bij height wel.
Voor de rest werkte alles perfect!