Keuze maken van elementen voor poll

[EricBruggema]

Hallo allemaal,

Het is al weer een tijd geleden dat ik mocht inloggen (was mijn wachtwoord kwijt, dus las ik heerlijk mee) maar heb nu mijn wachtwoord terug en wil graag jullie mening over het volgende.

De laatste paar weken ben ik bezig met het maken van een poll in HTML met CSS, alleen kom ik er niet helemaal meer uit. Een poll maken kan natuurlijk vrij simpel, maar eingelijk wil ik zorgen dat mijn poll zo flexibel mogelijk is, dat met een paar aanpassingen in de CSS code de gehele layout simpel veranderd kan worden zonder de HTML structuur aan te passen.

Nu heb ik een paar opties maar weet dus niet welke ik moet gaan kiezen.

De eerste optie is middels divs.

HTML:

<div id="poll"> 
    <div id="poll-header"> 
        <h1>Poll titel</h1> 
    </div> 
    <div id="poll-content"> 
        <div class="answer"><a href="#">Antwoord 1</a></div>
        <div class="image"><img src="line.gif" height="8" width="50%" /></div>
        <div class="votes">50 x</div><br /> 

        <div class="answer"><a href="#">Antwoord 2</a></div>
        <div class="image"><img src="line.gif" height="8" width="25%" /></div>
        <div class="votes">25 x</div><br /> 

        <div class="answer"><a href="#">Antwoord 3</a></div>
        <div class="image"><img src="line.gif" height="8" width="15%" /></div>
        <div class="votes">15 x</div><br /> 
    </div> 
    <div id="poll-footer"> 
        <p id="votes">Aantal stemmen: 100</p> 
        <p id="views">Keer bekeken: 9112</p> 
        <p id="advertisement">Reclame blok</p> 
    </div> 
</div>

Een andere versie is met dl, dt en dd

HTML:

<div id="poll"> 
    <h1 id="poll-header">Poll titel</h1> 
    <dl id="poll-content"> 
     
        <dt><a href="#">Antwoord 1</a></dt> 
        <dd class="bar" style="width: 50%;">50%</dd> 
        <dd class="votes">50 x</dd> 
         
        <dt><a href="#">Antwoord 2</a></dt> 
        <dd class="bar" style="width: 20%;">20%</dd> 
        <dd class="votes">20 x</dd> 
         
        <dt><a href="#">Antwoord 3</a></dt> 
        <dd class="bar" style="width: 10%;">10%</dd> 
        <dd class="votes">10 x</dd> 

    </dl> 
    <ul id="poll-footer"> 
        <li id="votes">Aantal stemmen: 100</li> 
        <li id="views">Keer bekeken: 9112</li> 
        <li id="advertisement">Reclame blok</li> 
    </ul> 
</div>

maar zelf zat ik ook te denken dat dit mogelijk is middels fieldset en labels of lijsten middels ul/li

Voorbeeld van de CSS code (deze is gebruikt voor de dl, dt en dd versie)

Cascading Stylesheet:

#poll { 
    width : 400px; 
    border : 2px solid black; 
} 
#poll-header { 
    background : gray; 
    height : 40px; 
    color : #fff; 
    margin : 0 0 10px 0; 
    padding : 10px 0 0 10px; 
    font-size : 24px; 
    float : none; 
} 
#poll-content { 
    padding : 0; 
    margin : 0; 
} 
#poll-contenta, #poll-content a:link, #poll-content a:active { 
    color : gray; 
    text-decoration : none; 
} 
#poll-content a:hover { 
    text-decoration : underline; 
} 
#poll-content dt { 
    clear : both; 
} 
#poll-content dd.bar { 
    text-indent : -90000px; 
    background : #000; 
    float : left; 
    height : 18px; 
    line-height : 0; 
    width : 300px; 
} 
#poll-content dd.votes { 
    float : right; 
    padding-right : 10px; 
} 
#poll-footer { 
    background : gray; 
    height : 55px; 
    margin : 0; 
    padding : 10px 5px 5px 10px; 
    clear : both; 
    left : 0; 
} 
#poll-footer li { 
    list-style-type : none; 
    margin : 0; 
    padding : 0; 
} 
#poll-footer a, #poll-footer a:link, #poll-footer a:active { 
    color : white; 
    text-decoration : none; 
} 
#poll-footer #votes { 
    float : left; 
} 
#poll-footer #views { 
    float : right; 
    text-align : right; 
} 
#poll-footer #advertisement { 
    clear : both; 
    margin-top : 10px; 
} 

Mijn vraag is dus, wat kan ik het beste gebruiken om mijn poll gemakkelijk van een andere vormgeving te kunnen voorzien? welke keuze zou jij maken en waarom?

[Verwijderd]

Als ik het even goed begrijp dan wil je gewoon de CSS alleen aanpassen. Dit kan het beste met AJAX. gebruik hierbij document.getElementById("IDNAAM").style.

zo kun je bijvoorbeeld

document.getElementById(poll).style.width = 600px; in javascript de width van poll veranderen in 600px ipv 400px.

als je een js bestand aanroept en daar een paar functies inzet met dit soort dingen kun je heel snel de layout aanpassen zonder refresh.

[Bosmonster]

Verwijderd schreef op donderdag 02 april 2009 @ 10:20:
Als ik het even goed begrijp dan wil je gewoon de CSS alleen aanpassen. Dit kan het beste met AJAX. gebruik hierbij document.getElementById("IDNAAM").style.

zo kun je bijvoorbeeld

document.getElementById(poll).style.width = 600px; in javascript de width van poll veranderen in 600px ipv 400px.

als je een js bestand aanroept en daar een paar functies inzet met dit soort dingen kun je heel snel de layout aanpassen zonder refresh.

Dat heeft alleen niks met AJAX te maken

Met betrekking tot de TS vraag. Ik snap het probleem niet zo goed. Als je je HTML flexibel opzet kun je daar toch eenvoudig met CSS verschillende 'skins' voor ontwerpen? Wat je gebruikt voor die html maakt niet zoveel uit. Wat dat betreft kun je beter kijken naar wat voor een poll semantisch enigszins correct is en daar is niet 1-2-3 een beste oplossing voor.

Persoonlijk zou ik het waarschijnlijk doen met een ol/ul, maar dat komt meer doordat ik dl's een verschrikking vind om te stylen.

[ Voor 29% gewijzigd door Bosmonster op 02-04-2009 10:28 ]

[EricBruggema]

@josjen: helaas, mijn vraag heeft idd niets te maken met ajax.

@Bosmonster, ik zal het eens wat duidelijker proberen te maken.

Ik wil een opzet die zo flexibel is als de pest, zodat ik met een beetje aanpassen van de CSS een compleet andere poll krijg maar html technisch de opzet 100% indentiek is. Nu kun je een poll op verschillende manieren opzetten qua html structuur.

tabellen, lists, dl/dt/dd (weet hier de noemer niet van) en fieldsets, echter wil ik graag weten welke opzet het beste is voor een poll opzich, welke dus de meeste mogelijkheden geeft.

sorry voor de slechte uitleg, hier ben ik gewoon zo slecht in (vertellen wat ik precies bedoel)

[Patriot]

EricBruggema schreef op donderdag 02 april 2009 @ 10:31:
@josjen: helaas, mijn vraag heeft idd niets te maken met ajax.

@Bosmonster, ik zal het eens wat duidelijker proberen te maken.

Ik wil een opzet die zo flexibel is als de pest, zodat ik met een beetje aanpassen van de CSS een compleet andere poll krijg maar html technisch de opzet 100% indentiek is. Nu kun je een poll op verschillende manieren opzetten qua html structuur.

tabellen, lists, dl/dt/dd (weet hier de noemer niet van) en fieldsets, echter wil ik graag weten welke opzet het beste is voor een poll opzich, welke dus de meeste mogelijkheden geeft.

sorry voor de slechte uitleg, hier ben ik gewoon zo slecht in (vertellen wat ik precies bedoel)

Ik zou gaan voor een unordered list (dl staat overigens voor definition list, dus die past ook gewoon onder het noemertje "lists"). Dat is semantisch gezien de meest correcte optie (je hebt een lijstje met mogelijkheden). Tabellen is sowieso niet de way to go in dit geval, en echte definities zijn het ook niet. Een fieldset is hier ook geen optie, omdat je de verschillende opties in principe binnen één fieldset hoort te plaatsen. Het zegt dus iets over alle elementen en niet ieder element op zich.

[ Voor 7% gewijzigd door Patriot op 02-04-2009 11:04 ]

[Janoz]

Een ding is mij nog niet helemaal duidelijk:
Gaat het hier over de resultaten pagina, gaat het ook over het scherm waarop je je keuze kunt maken, of is het een combinatie van beiden?

Persoonlijk vind ik de div oplossing erg lelijk. Ikzelf zou eerder ook voor een ul of dl achtige oplossing gaan. Wat erg handig is, en wat ik je nog niet zie doen, is dat je voor een element meerdere classes op kunt geven. Door bv ook last of first als class op te geven kun je ook in IE specifiek het eerste en laatste element stylen.

Tot slot zou ik het gebruik van id's tot een minimum beperken. Zoals je tweede voorbeeld nu is kun je maar 1 poll op je pagina zetten. Het is onnodig aangezien je op die plekken ook gewoon een class kunt gebruiken.

[moozzuzz]

Ook ik zou gaan voor lists (maar dan wel voor een OL: je antwoorden zijn geordend van antwoord 1 tem N). Verder zijn een aantal wrapperdivs (zoals je nu reeds doet) altijd handig (maar semantisch eigenlijk onnodig) voor het meer fancy-werk. Zoals Janoz aangeeft kan je met classes een deel vd divs over boord gooien.

Semantisch gezien zou ik de P ook vervangen door DIV of UL, aangezien het hier echt niet gaat over paragrafen, maar kleine brokjes tekst.

H1 lijkt me tot slot wat overdreven (die reserveer ik doorgaans enkel voor de paginatitel), maar dat ligt natuurlijk afhankelijk van jouw andere pagina-inhoud.

[ Voor 0% gewijzigd door moozzuzz op 02-04-2009 13:32 . Reden: typo ]

[EricBruggema]

De layout is bedoeld voor zowel display van de resultaten als het kiezen/geven van de antwoorden.

Zelf ben ik ook al aardig te vreden met de tweede opzet en zal ws in de toekomst wel meerdere classes gaan ondersteunen. Zelf denk ik ook dat het handiger is om ipv id's classes te gaan gebruiken.

Alleen weet ik niet of ik nou moet kiezen voor ul/dl/ol... maar goed... daar kom ik dan ooit nog wel uit denk ik

[Janoz]

Ikzelf zou voor weergaven en kiezen een ander stuk html gebruiken.

Voor het kiezen zou ik radio buttons gebruiken en dan de keuze in een label aan deze radiobutton koppelen. Dat zou semantisch het meest correct zijn. Radiobuttons kun je vervolgens niet weergeven, maar het drukken op het label zal er wel voor zorgen dat hij geselecteerd wordt.

[EricBruggema]

Janoz, waarom allerbeide appart?

En kun je eens een voorbeeld laten zien van radio buttons en labels? snap namelijk niet precies wat je bedoelt.

[MueR]

HTML:

<form id="poll">
<label><input type="radio" id="pollOption1" name="pollOption" value="1" /> Optie 1</label>
<label><input type="radio" id="pollOption2" name="pollOption" value="2" /> Optie 2</label>
</form>

Cascading Stylesheet:

form#poll label input {
  display: none;
}

Hoe is dit niet te snappen?

[Janoz]

<input type="radio" id="idVanDeRadioButton"/><label for="idVanDeRadioButton">Deze keuze</label>

of, zonder dat je een id nodig hebt:

<label><input type="radio" />Deze keuze</label>

Ik zou het in verschillende stukken html zetten omdat het imo twee verschillende widgets zijn. De ene is voor het zelf maken van een keuze en de ander is om de resultaten weer te geven.

[EricBruggema]

Ik snapte het niet aangezien ik dacht (dus nu niet meer) dat labels binnen fieldset hoorden.

Nu snap ik het idee inderdaad wel maar het stemmen gebeurt niet via een form/submit maar gewoon via een link.

En welke moet of kan ik het beste nu gebruiken? als ik naar bovenstaande reacties kijk zie ik 2 verschillende versies

[ Voor 22% gewijzigd door EricBruggema op 02-04-2009 17:00 ]

[MueR]

Beide zijn toegestaan. Het loskoppelen van label en input dmv de for attribute heeft wel wat voordelen voor je toepassing: het is makkelijker om er onclick javascripts in te hangen bijvoorbeeld, minder hoofdpijn.

[Bosmonster]

Janoz schreef op donderdag 02 april 2009 @ 16:23:
<input type="radio" id="idVanDeRadioButton"/><label for="idVanDeRadioButton">Deze keuze</label>

of, zonder dat je een id nodig hebt:

<label><input type="radio" />Deze keuze</label>

Ik zou het in verschillende stukken html zetten omdat het imo twee verschillende widgets zijn. De ene is voor het zelf maken van een keuze en de ander is om de resultaten weer te geven.

Input in label mag niet voor zover ik weet of is in ieder geval af te raden. (en werkt ook niet in alle browsers 100%).

Edit: even opgezocht, mag wel, maar werkt dus niet lekker in alle browsers Persoonlijk vind ik het ook oerlelijk.

[ Voor 10% gewijzigd door Bosmonster op 02-04-2009 17:45 ]

[Janoz]

@Bosmonster
Ik persoonlijk gebruik ook liever de variant met 'for'. Maar je helaas niet altijd de volledige controle over de id's die formuliervelden gaan krijgen. In dat geval ben je op de geneste variant aangewezen.


@Eric
Eigenlijk horen je formuliervelden binnen een fieldset. Het is inderdaad wel erg netjes (helaas nog niet gebruikelijk) om een radiobutton vraag ook in een fieldset te vangen.

HTML:

<fieldset>
  <legend>Wat vind je van Dreft?</legend>
  <ul>
    <li>
      <input type="radio" name="poll" id="poll:1" value="1" />
      <label for="poll:1">Groen</label>
    </li>
    <li>
      <input type="radio" name="poll" id="poll:2" value="2" />
      <label for="poll:2">42</label>
    </li>
    <li>
      <input type="radio" name="poll" id="poll:3" value="3" />
      <label for="poll:3">Stiekum toch een tank</label>
    </li>
  </ul>
</fieldset>

[ Voor 5% gewijzigd door Janoz op 02-04-2009 20:54 ]

[EricBruggema]

Jullie maken het me wel moeilijk hoor er komen steeds meer mogelijkheden bij

De laatste versie is wel erg mooi opgezet. Alleen in een eerdere post werdt me vermeld dat het niet handig is om id's te gebruiken.

Waar kunnen jullie het overeens worden?

fieldset versie, dt/dl/dd versie? ik weet het niet meer het gaat mij er om dat het zo flexibel als de pest moet zijn en dat iemand (als iemand dat uberhoubt al wil) zijn eigen CSS versie van de poll kan maken zonder daarvoor de HTML technische opzet te veranderen.

[Verwijderd]

EricBruggema schreef op donderdag 02 april 2009 @ 21:18:

De laatste versie is wel erg mooi opgezet. Alleen in een eerdere post werdt me vermeld dat het niet handig is om id's te gebruiken.

Gebruik "unieke id's" en je hebt daar geen last van. Verwerk er gewoon gegevens in die per poll uniek zijn, zoals een poll ID. Die id's moet je vervolgens alléén voor de technische werking gebruiken, dus voor de combinatie <label for="p124o1"...> en <input id="p124o1"...> waarin je dus "poll 124 option 1" als id gebruikt.

Voor de weergave (CSS) zou je juist géén id's moeten gebruiken en liefst zo weinig mogelijk classes en zoveel mogelijk "context" door handig met CSS selectors om te springen.

fieldset versie, dt/dl/dd versie? ik weet het niet meer het gaat mij er om dat het zo flexibel als de pest moet zijn en dat iemand (als iemand dat uberhoubt al wil) zijn eigen CSS versie van de poll kan maken zonder daarvoor de HTML technische opzet te veranderen.

Waarom bied je niet gewoon meerdere mogelijkheden aan? Een tabel zou in sommige gevallen ook zeer gepast kunnen zijn.

[harrald]

ik zou gaan voor de versie van Janoz. En wanneer je deze in het wild gaat gebruiken kom je er snel genoeg achter of er misschien toch nog ergens een span of div extra bij moet. Dan heb je deze versie die al goed is verbeterd en opgewaardeert naar laten we zeggen de 1.2 versie

[EricBruggema]

@Cheatah; je doelt dus op CSS opzet bv

Cascading Stylesheet:

.pollBody {
}

.pollBody h1 { }
.pollBody ul,
.pollBody li, { }

etcetc

en waarom zou ik kiezen voor meerdere keuzes qua HTML technische opzet? kost mij persoonlijk nog veel meer tijd om poll ontwerpen te kunnen realiseren, en daar ben ik al zo goed in

Ik zoek gewoon een opzet (zoals ik al eerder vermelde) die de meeste mogelijkheden bied(t?)

@harrald; die van Janoz is inderdaad erg netjes qua opzet maar niet als je ook de display (resultaten) wilt laten zien (tegelijke tijd met optie om te antwoorden). Upgraden kan altijd maar wil het liefste beginnen met een opzet die ik kan behouden.

Iig alvast allemaal vriendelijk bedankt voor alle informatie, het heeft mj weer heel veel meer inzichten gegeven (en kopzorgen )

[edit]

Kleine vraag voordat ik verder ga, hoe is het mogelijk om alle 'css' instellingen voor een div en alle elementen die daar binnen in gebruikt worden te resetten? ik heb wel wat gevonden maar dat reset alle elementen en dat is niet de bedoeling, alleen alles binnen een gegeven class (div class="test"> .. alles wat hier binnen in valt</div>)

[ Voor 17% gewijzigd door EricBruggema op 03-04-2009 09:21 . Reden: reset methode ]