Design-hjelp for NNO's Sertifiserings-System

Her finner du hjelp til hvordan du kan kontrollere plasseringen av NNO's Sertifiseringsikon på ditt nettsted.

• NNO's Sertifikat-script

• Plassering i tabel

• Bruk av div-tagg og styles

• Hvordan sette marginer

• Vertikal plassering i en celle

• Tekstflyt

1 • NNO's Sertifikat-script

Når du legger inn NNO's Sertifikat-script på nettsiden din, kommer NNO's Sertifiserings-ikon til syne.

Dette er et ikon med størelse 100x40 px, som vist i boksen til høyre.

NNO's Sertifikat-script som frembringer ikonet og dets funksjoner vises under. XXXXXXXXX skal erstattes med organisasjons-nummeret ditt:

Hvis du vil kontrollere hvordan ikonet plasserer seg på siden din, finner du noen metoder i avsnittene som følger.

2 • Plassering i tabell

For å kontrollere plasseringen på ikonet, kan du ikke bruke atributter som på et bilde, fordi det her er snakk om et script.

Som scriptet er i seg selv, er det kun omgivelsene som påvirker hvor ikonet havner på siden.

I eksempelet til høyre, vises hvordan ikonet plasserer seg hvis du plasserer scriptet i en celle i en tabell med følgende atributter:

Ikonet blir plassert horisontalt venstrestilt og vertikalt midtstilt. Siden tabellen har atributtet cellpadding="0", blir ikonet plasset helt inntil rammekanten.

3 • Bruk av div-tagg og styles

For å forrandre utfallet i eksempelet over, kan man forrandre atributtene til tabellen eller cellen som scriptet ligger i. Ved å gi andre atributter til cellen, kan du påvirke den horisontale og vertikale plasseringen av ikonet, men vil også påvirke andre elementer i cellen. Du kan påvirke marginer mellom celler eller marginer mellom rammekant og innholdet i cellene ved hjelp av cellspacing- og cellpadding-atributtene, men dette påvirker alle celler i tabellen.

Hvis du kun vil styre ikonets marginer og plassering, kan du sette Sertifikat-scriptet i en div-tagg:

<div style="text-align:right">Sertifikat-script</div>

Som vist, kan man her tillegge atributter ved help av Styles. I eksempelet styres den horisontale plasseringen slik at ikonet plasseres til høyre.

4 • Hvordan sette marginer

I forrige eksempel ga vi et eksempel på hvordan du kan styre ikonets horisontale posisjon. Siden tabellen har atributtet cellpadding="0", sitter det helt inntil høyre rammekant. Du kan styre marginene rundt ikonet ved å tillegge margin-atributtene som vist i dette eksempelet.

I eksempelet har vi laget en margin på 4px på alle ikonets sider:

<div style="text-align:right;
margin-top:4px;
margin-left:4px;
margin-right:4px;
margin-bottom:4px">
Sertifikat-script
</div>

5 • Vertikal plassering i en celle

I dette eksempelet flyttes ikonet vertikalt til toppen av cellen. Dette gjør vi ved å tillegge en Style til cellen i selve tabellen som alt er plassert i.

Vi har også satt ikonet horisontalt midtstilt ved å forrandre text-align taggen i div til text-align:center.

<td style="vertical-align:top">
<div style="text-align:center;
margin-top:4px;
margin-left:4px;
margin-right:4px;
margin-bottom:4px">
Sertifikat-script
</div>
</td>

6 • Tekstflyt

Du kan få tekst til å flyte rundt ikonet vet å bruke float-atributtet. Her har vi valgt å legge ikonet til venstre, men det kan også legges til høyre.

<div style="float:left;
margin-top:4px;
margin-left:4px;
margin-right:4px;">
Sertifikat-script
</div>

I eksempelet har vi også lagt teksten i en div-tagg for å få marginer langs rammekantene. Til dette har vi brukt følgende styles:

padding-top:4px; padding-left:4px; padding-right:4px; padding-bottom:4px;

Lorem ipsum dolor sit amet tincidunt, consectetuer adipiscing elit. Vivamus ultrices volutpat dolor. Morbi neque. Aliquam ut mi vel dolor blandit aliquam. Vivamus nulla. Quisque vel est. Ut eget magna consequat justo vulputate vehicula. Nunc molestie tellus at libero. Pellentesque semper. Nulla euismod. Cras turpis diam, commodo non, tincidunt et, blandit sit amet, felis. Morbi faucibus magna vel justo. Phasellus sit amet pede. Aliquam vulputate vehicula molestie semper consequat.

Lorem ipsum mi dolor sit amet, consectetuer adipiscing elit. Vivamus ultrices volutpat dolor. Morbi neque. Aliquam ut mi et vel dolor blandit aliquam. Vivamus nulla. Quisque vel est. Ut eget magna consequat justo vulputate vehicula. Nunc molestie tellus at libero. Pellentesque semper. Nulla euismod. Cras turpis diam, commodo non, tincidunt et, blandit sit amet, felis. Morbi faucibus magna vel justo.