Artikelen

Enquête

Er is een voorbeeld enquête gemaakt en geplaatst in de voorbeeld website onderaan de rechterkolom. De module class suffix is "_voorbeeld". Naast de module zelf is er ook een pagina met enquête resultaten, wanneer geklikt wordt op de button van de module onderaan rechts.

De module enquête ziet er in IE8 zonder aanvullende stijling als volgt uit.

In Firefox ziet deze module er zonder aanvullende stijling als volgt uit.

Omdat deze module in deze browsers verschillend worden getoond gaan we proberen om met het stijlen ze gelijk te krigjen.

Structuur

Stijlen
We willen een aantal stijlen aanpassen voor de voorbeeld website. De tekst van de enquête items willen we iets kleiner maken, de items links laten lijnen en iets meer ondermarge met de buttons. Bovendien willen we de enquête items onderscheiden met een verschillende achtergrondkleur. Verder willen we iets meer onder en rechter marge van de gehele module. De toegepast stijlen zijn hieronder aangegeven.

div.moduletable_voorbeeld {
   margin: 0 0 15px 0;
}

div.moduletable_voorbeeld h3 { }

div.moduletable_voorbeeld form { }

table.poll_voorbeeld { }
table.poll_voorbeeld td {}

table.pollstableborder_voorbeeld {
   text-align: left;
   font-size: 11px;
   margin-bottom: 10px;
}

table.pollstableborder_voorbeeld td.sectiontableentry2_voorbeeld {
   background-color: #cccccc;
}

table.pollstableborder_voorbeeld td.sectiontableentry2_voorbeeld input#voteid1 { }
table.pollstableborder_voorbeeld td.sectiontableentry2_voorbeeld label { }

table.pollstableborder_voorbeeld td.sectiontableentry1_voorbeeld { }

table.pollstableborder_voorbeeld td.sectiontableentry1_voorbeeld input#voteid2 { }
table.pollstableborder_voorbeeld td.sectiontableentry1_voorbeeld label { }

Na het toepassen van de stijlen ziet de module er in IE8 als volgt uit.

In FireFox ziet de module na het toepassen van bovenstaande stijlen er als volgt uit.

De module toont nu in deze browsers redelijk hetzelfde.

Resultatenpagina

De resultatenpagina ziet er zonder aanvullende stijling als volgt uit.

Structuur

Er zijn 2 verschillende groottes van het lettertype in het resultatenoverzicht, terwijl het 1 grootte moet zijn. Dit komt door een eerdere stijling die we hebben toegepast bij de contact categorie lijst (font-size: 10px). We willen de lettergrootte van de contact categorielijst (tr.sectiontableentry1 en tr.sectiontableentry2) niet wijzigen, dus passen we de stijl hier ook toe op tr.sectiontableentry0. Hieronder zijn de stijlen weergegeven.

form#poll {
  text-align: left;
}

div.componentheading  { }
div.contentpane { }
table.pollstableborder { }

table.pollstableborder th.sectiontableheader {
	padding-bottom: 10px;
}

table.pollstableborder th.sectiontableheader img { }

table.pollstableborder tr.sectiontableentry0 {
	font-size: 10px;
}

table.pollstableborder tr.sectiontableentry1 { }

div.polls_color_1 { }
div.polls_color_2 { }
div.polls_color_3 { }
/* div.polls_color_etc */

table td.smalldark { }

Na stijling ziet de pagina er als volgf uit.

• Toevoegen

Reacties (0)

Post een commentaar of stel een vraag

Uw contact gegevens:

Naam:

Email: Stuur mij GEEN E-mail bericht bij een reactieHoud mij op de hoogte bij een reactie reactie

Website:

Reacties:

Onderwerp:

Commentaar of vraag:

Spam beveiliging

Voer de anti-spam code in die in het plaatje staat.

Powered by Compojoom comment 4.2.1