Hvordan lage en faktaboks ?

Dette er faktateksten som havner i faktaboksen
Du har nok sett de,  små firkanta bokser med kortfattet “leksikonsk”  info  som supplerer artiklenes innhold med klargjørende fakta.  Praktiske og ryddige greier og fine å ha med når det trengs.

Den enkle metoden:

Skriv teksten som skal være i faktaboksen slik:

Jeg har her lagt kodeeksempelet inn som et screenshot fra editoren min, ellers hadde det blitt en boks av det.  Oppe til høyre ser du hvordan den vil bli.


Den litt vanskeligere metoden:

Det lett å lage slike selv og bruke de i innleggene dine, og de settes opp etter reglene som er definert i CSS (Cascading Style Sheet). CSS’en inngår som en del av innleggets HTML.

Var du skræmt no ?  Ikke bli det, det er slett ingen heksekunst.

Sjekk eksempelet under her:

Her er den lesbare teksten  lagt inn i en sk div-tag (overskriften er laget med en header-tag, slik <h3>Krisefryd</h3>).    I sin enkleste form ser en div tag slik ut i html’en;  <div>Lesbar tekst</div>.

Den består altså  av tre ting;

  • start-tag’en:  <div> (med parametre, kommer til det lenger nede)
  • den lesbare teksten: blablabla…
  • end-tag’en: </div>

For eksempelet over har jeg brukt følgende html:


<div style=”float: right; width: 200px; background-color: gray; padding: 3px; margin: 3px 0 7px 10px; border-style: solid; border-width: 1px; border-color: black;”><h3>Krisefryd</h3>
Eksessivt fokus på, og overdrivelse av betydningen av deprimerende, sjokkerede og grelle nyheter.  Gjerne nyheter som er såpass lokale/sære at de ikke har noe å gjøre i riksdekkene mediaoppslag.
</div>


Parametrene skrives alle inn i start-tag’en, og her har jeg bare benyttet meg av style-parameteren.  Den skrives slik:

style=”element-navn1: element-verdi1; element-navn2: element-verdi2; etc.”

Legg merke til bruken av apostrofer, kolon og semikolon.  Viktig.

Her er forklaring på enkeltelementene i style parameteren jeg har brukt.

  • float – angir hvor du vil ha boksen (left/right)
  • width – angir boksens bredde, her har jeg oppgitt 200px (piksler)
  • background-color – boksens bakgrunnsfarge
  • padding – boksens indre margbredde.  Skrevet slik som over her så vil denne bredden (3px) gjelde for øvre, høyre, bunn og venstre marg.  Helt rundt altså.
  • margin – boksens ytre margbredde.  Skrevet slik som her så vil dette gi øvre marg=3px, høyre marg=0px, bunnmarg=7px og venstre marg = 10px.  De fire verdiene skrevet slik med mellomrom følger altså klokkeretningen der øverst kommer først.  Nullverdier trenger egentlig  ikke “px” -endelsen.
  • border-style – hvordan rammen rundt boksen skal se ut, solid = heltrukken strek
  • border-width – rammebredden
  • border-color – rammefargen

 

Tilslutt noen viktige ting å huske:

Når du skriver/kopierer inn div tag’en må editoren være i html modus.   I visual modus er alle tags usynlige.  Klikk på html-fanen oppe i høyre hjørne i editoren for å få til dette.

Legg så inn div-tag’en og klikk deg tilbake til visual modus for å se boksen slik den vi bli på nettet.

Så kan du fortsette som vanlig med innlegget ditt.  Skriver du inni faktaboksen så vil den automatisk justere  seg i høyden etterhvert som du legger til eller fjerner tekst.  Skriver du utenfor vil teksten “flyte” rundt boksen.

Dette er bare en minimal smakebit på hva man kan gjøre med CSS.  Eksempelvis kan du, hvis du vil ha runde hjørner på boksen legge inn dette i style parameteren:  border-radius: 6px;  Jo høyere verdi jo større hjørnerunding.   Vil du endre tekstfargen gjør du det med dette tillegget i style parameteren: color: red;

Hvis du vil gjøre det ekstra fancy med skygge under boksen så kan du f.eks. legge inn denne i style parameteren box-shadow: 10px 10px 5px #888888;

For de av dere som putler litt med photoshop og lignende kan det være greit å vite at farger også kan oppgis i RGB-koder.  Disse må i såfall oppgis som sekssifrete verdier med hashtegn (#) først: color: #ff0000; vil gi eksempelvis være  knallrødt, color: #0000ff; vil være knallblått  og color: #cccccc; vil være grått.

For mer om de forskjellige fidusene som er tilgjengelige i CSS så kan du lese om det her.

1
 
 
 
 

Legg igjen et svar