Reflektert dagbok – multimediedesign

Adobe Dreamweaver – CSS

Vi skulle jobbe videre med CSS på den enkle nettsiden som vi har laget i Notepad og Dreamweaver. Med CSS skulle vi legge til forskjellige bakgrunnsfarger i div-tag boksene som jeg har definert i HTML dokumentet. Deretter skulle vi utheve et av ordene som gjentar seg på nettsiden. Dette kunne være farge, font, størrelse, bold osv. Så skulle vi legge en tynn border som er sort og solid på et av tag elementene på nettsiden.

Jeg har tidligere prøvd å legge forskjellige bakgrunnsfarger på div-tag boksene, og fikk til på alle bortsett fra på sidebar. Jeg fikk tips på forumet at det sikkert skyldtes at jeg hadde skrevet «sidebar» i HTML og «SideBar» i CSS. Det må være helt likt overalt. Fikk endret dette nå, og ble riktig. Koden er altså casesensitive, den gjør forskjell på stor og liten bokstav, så det er viktig at det er 100% identisk. Greit å vite!

Hadde noe tull med at bildene ikke kom frem, men fant til slutt ut at url’en eller stien til bildet viste stien på min pc, og ikke stien på serveren! Det må den selvfølgelig gjøre. Når jeg endret det kom det fint fram.

Prøvde også med andre farger på bokser og tekst.

Så skulle vi fremheve et ord. Jeg ville fremheve ordet HTML ved å gjøre det bold, i rød farge, med gul bakgrunn. HTML og CSS er helt nytt for meg så jeg måtte lete, prøve og feile temmelig lenge før jeg fikk det til. Først ble det avsnitt før og etter HTML = fant ut at jeg hadde brukt «class» med p-tag, det var jo klart! Så Prøvde jeg å flytte den til før og etter setningen, men da ble så klart hele setningen rød og gul. Tilslutt fant jeg «span class» tag’en som kunne brukes til å settes inn foran og bak det ene ordet jeg ville fremheve! Hurra! Da virket det!

Men jeg fikk det ikke til å virke i overskriften. Sannsynligvis kan man ikke kode «class» i h1-overskrifter?

Lurer også på om jeg har gjort det riktig ved å kode inn span class foran ordet som jeg skulle fremheve, hver gang det dukker opp, i HTML-dokumentet. Det er jo ikke særlig effektivt. Man må inn og kode for hvert ord. Det som er bra er at ved å endre CSS’en skifter alle disse pre-kodede ordene samtidig. Men man må inn og gjøre en jobb i HTML’en først. Det ville vært mer logisk om man kunne kode ett sted i HTML at hver gang det kom et ord med kombinasjonen av bokstavene «html» så skulle det betyr «class so and so», og så dersom det stod i CSS’en hvordan «class so and so» skulle se ut, ut så ville man slippe fra det med å kode kun en gang i HTML. Men det er sikkert ikke slik?

Jeg la til slutt en tynn svart ramme (border) på «sidebar». Dette elementet er allerede ganske mørkt grå, men ser du godt etter så ser du rammen.

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