Reflektert dagbok – multimediedesign

CSS – Box model

I denne oppgaven skulle vi jobbe med CSS utenfor det enkle nettstedet vi har jobbet med hittil. Vi skulle åpne et nytt HTML dokument og legge inn tre valgfrie <p>-tagger. Vi skulle legge de tre taggene inn i en valgfri div-tagg. Så skulle vi lage et nytt CSS stylingdokument hvor vi gave <p>-taggen følgende styling:

margin:15px
padding: 5px
background-color: #999
border: thin-solid: #000

Så skulle vi teste siden i en nettleser og lage en printscreen og skrive på box-modellens innhold. Innholdet er her: innhold (teksten) + padding (med grå bakgrunn) + margin.

Testet i Internet Explorer (med tekstforklaring):

I Firefox:

Hmm… Trodde egentlig «border: thin-solid: #000» skulle bety at jeg fikk en tynn svart ramme rundt boksene på alle de grå feltene <p>-taggene, men det fikk jeg ikke. Har refreshet og lagret hundre ganger, men det fortsetter å være uten ramme…

Jeg hadde skrevet «border: thin-solid: #000;» manuelt inn i CSS-dokumentet. Det var tydeligvis feil. Da jeg gikk inn via DreamWeaver dobbeltklikket på CSS-dokumentet og fikk opp boksen for CSS-rules, og her valgte «border», «thin» og «solid» så fikk jeg endelig svart ramme rundt boksene. Men CSS dokumentet fikk masse ekstra linjer… hmmf! Slik:

Det var da en fryktelig lang remse med kode i forhold til den første. Lurer på hvorfor det ikke virket bare med «border: thin-solid: #000;» ??

Slik ble det i hvertfall til slutt:

Legg igjen en kommentar

Fyll inn i feltene under, eller klikk på et ikon for å logge inn:

WordPress.com-logo

Du kommenterer med bruk av din WordPress.com konto. Logg ut / Endre )

Twitter picture

Du kommenterer med bruk av din Twitter konto. Logg ut / Endre )

Facebookbilde

Du kommenterer med bruk av din Facebook konto. Logg ut / Endre )

Google+ photo

Du kommenterer med bruk av din Google+ konto. Logg ut / Endre )

Kobler til %s