CSS float – clear (CSS Position)
Jeg fortsatte å eksperimentere med FLOAT og CLEAR under CSS Position. Her har det gule elementet blitt satt til float, right:
Det gule står fortsatt med float, right, men det blå har fått økt bredde fra 200 px til 712 px (som er størrelsen på kontaineren, her usynlig fordi jeg ikke har laget noen border rundt):
Fortsatt samme som forrige bilde, men har i tillegg satt container-elementet (boksen rundt som ikke synes her) til clear, both.
Da legger den brede blå seg pent under den gule:
Her har jeg tilbakestilt størrelsen på det blå til 200px og er tilbake til utgangspunktet. Men har satt både gult (a) element og rosa (b) element til float, right:
Samme som ovenfor, men her er alle tre elementene satt til float, right:
På forrige bilde flyter alle tre elementene ovenfor eller utenfor kontaineren, og dermed kollapser denne. Dette er ikke synlig her, men for å hindre dette kan man sette kontaineren selv til clear. Her har jeg satt kontaineren til clear, left. Fordi jeg ikke har border på kontaineren må det vises i DreamWeaver: (Den stiplede linjen er kontaineren,og den er igjen tilbake rundt elementene).
En annen måte å unngå at kontaineren kollapser er å lage line break og en ny css-rule .clear som legger til et usynlig element i kontaineren. Dette har jeg ikke testet så mye ut denne gang, men skal prøve det senere.
CSS position
Denne gangen skulle vi bruke CSS-dokumentet fra forrige øvelse og plassere de tre <p>-taggene fra en vertikal til en horisontal plassering. Vi skulle sette bredde på div-taggen og på p-taggene, og øve på position absolute, position relative og float right.
Det kom masse ekstra kode når jeg skulle sette på border sist, og jeg prøvde å gjøre det omigjen og fikk det plutselig til denne gangen, med riktig kode. Her er koden:
Og slik ble det riktig:
Endret teksten og satte div-tagger på hvert avsnitt, samt satte bredden på hver av dem til 200px:
Satte inn bakgrunnsfarge, men selv om hver setning/hvert avsnitt nå hadde fått egne div-tagger (#paragraf-a, #paragraf-b, #paragraf-c) så var jo p-taggene fortsatt kodet med grå bakgrunn.
Fjernet den grå bakgrunnsfargen på p-taggene:
Testet ut ABSOLUTE POSISTION, denne er med 215 px til venstre og 10px fra toppen:
ABSOLUTE POSISTION, med 215 px til venstre og 68px fra toppen:
RELATIVE POSISTION, med 215 px til venstre og 5px fra toppen:
RELATIVE POSISTION, med 215 px til venstre og 20px fra toppen:
RELATIVE POSISTION, med 215 px til venstre og 68px fra toppen:
ABSOLUTE POSISTION, med 215 px til venstre og MINUS 65px fra toppen:
Der stod den gule og den blå endelig likt på linje på toppen.
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:
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.
CSS font og farger
Som en fortsettelse av forrige oppgave skulle vi lage en separat tekstfil og kalle den index_CSS.css, og linke den inne i HTML-dokumentet i <head>-området. Denne tekstfilen skulle vi deretter kode med enkel CSS slik at skriften skiftet og fargen på skriften skiftet. Her er litt utprøving med CSS font og farger. CSS er helt nytt for meg, og veldig gøy å se hvor lett det skifter – magisk!
CSS-kode for rød overskrift <h1< i Verdana:
Slik så det ut i nettleseren:
Skiftet til grønn Times New Roman overskrift, kode og nettleser:
Jeg gjorde om innledningen en ingress ved å gjøre den bold, ved å bruke <b> og </b> i HMTL-dokumentet.
Så ville jeg prøve i forandre selve teksten i dokumentet til samme farge i CSS, det vil si all tekst som var innenfor paragraf-klammer <p> og </p>. Jeg fikk til de fleste tekstbolkene, men den delen av teksten som var med kulepunkter, ville den ikke farge grønn! Selv om jeg sørget for <p> og </p> foran og bak de tre setningene med kulepunkter. Jeg synes dette er litt merkelig, er det noen som vet hvorfor? Hva kunne jeg har gjort annerledes?
Se kode i HTML og CSS, samt skjermbilder. (Ps. Det første dokumentet index.html som opprinnelig ble laget i Notepad måtte åpnes i ett nytt program for å bli redigerbart, og jeg valgte Dreamweaver. Det er første gang jeg har brukt Dreamweaver, så det er temmelig spennende! 
CSS:
Nettleser:
HTML i to deler:
Tar gjerne tips om hvorfor CSS ikke forstår <p>taggene når der er <li> tagger også…?
Ny versjon
Laget en ny versjon av HTML og CSS’en. Først fjernet jeg p-taggene foran og bak li-taggene, de var visst overflødige. P betyr “paragraph” og li betyr “list”, så jeg trengte ikke begge. Når det var gjort skjedde det ikke noe før jeg hadde definert at “li” skulle ha fargen grønn i CSS’en. Som det var kodet før, stod det kun at “p” skulle være grønn. Slik ble HMTL og CSS riktig:
Da ble all tekst grønn i browseren som jeg hadde tenkt:
Kommentarene