IKT i praksis. Stilark |
|
Å plassere element på sidaI avsnittet om bakgrunnar såg vi at det er råd å plassere bakgrunnen, t.d. eit bilde, kvar som helst på sida på ulike måtar. Nå skal vi sjå meir generelt om plassering av andre element. PosisjoneringÅ bruke margar for å plassere eit element er ikkje alltid den beste måten å gjere det på. Difor har stilarket også ein eigenskap for å plassere eit element anten fast på ei side eller relativt i høve til andre element. Dei ulike verdiane for postion er relativ posisjon
Denne eigenskapen plasserer elementet relativt til den plassen det normalt skulle vore. Dersom f. eks. ei overskrift kjem litt for høgt opp og litt for langt til høgre til at layouten er perfekt, kan du flytte denne noen pikslar ned og til venstre i høve til normalplasseringa med kommandoen
h5 {
position: relative; left: -22px; } position: relativeOverskrifta ovanfor er sett med <h5> og definisjonane nemnde for denne taggen. Normalt skulle overskrifta flukta med den venstre margen i dokumentet, men blir altså flytt 22 pikslar mot venstre. Dette viser også at verdien kan vere negativ. Fast posisjonHar du lagt merke til CSS som ligg fast oppe i høgre hjørne på denne sida? (Ikkje i Internet Explorer < 7). Det er sett inn med stilarket
At elementet har ein «fixed» posisjon betyr altså at plasseringa er fast i høve til skjermen. I dette tilfellet 30 pikslar frå den øvre kanten og 12 pikslar inn frå høgrekanten. Normalt er det enklast for oversynet å definere slike element i byrjinga på dokumentet. (Det er ikkje gjort her). «Fixed» element er utanom den vanlege datastraumen. Det betyr at data kan legge seg over eller under dei faste elementa som om elementa ikkje fanst. Du er vel heller ikkje overraska over at menyen i venstremargen er laga med «fixed» posisjon. Difor ligg denne menyen fast i dei fleste nettlesarane, men ikkje i Internet Explorer < 7. Der følgjer han med teksten oppover. Ikkje i IE før versjon 7/8«fixed» verkar altså ikkje i Internet Explorer eldre enn versjon 7/8. Det finst måtar å omgå dette problemet på ved hjelp av Javascript, men eg tar ikkje det opp her. Leit på nettet. I det neste eksemplet er det brukt eit png-bilde med gjennomsikt. Dette klarer ikkje IE å visa ordentleg. Sorry. Skift til nyare versjon. Absolutt posisjonPlasserer eit element absolutt i høve til skjermflata nettsida bruker.
Absolutt posisjon
Oppe til venstre på dette dokumentet finn du ei lyspære og ein tekst «Absolutt posisjon». Dette er sett med stilarket
Skjermflata kan godt vere større enn den fysiske skjermen sida blir vist på. Det er det som skjer når rullesleidene (scroll bars) dukkar opp på høgresida og eventuelt nedsida av skjermen. Den vanlege html-flyten blir ikkje påverka av denne boksen. Tekst eller andre skjermelement vil bli lagt på sida som om boksen ikkje fanst. Posisjonane for boksen blir sett i høve til den blokka boksen er sett inn i. Sidan dette i nesten alltid er skjermsida definert med blokka <body> - </body>, vil altså koordinata bli rekna ut frå skjermsida. Dei ulike lærebækene forklarer bruken av denne kommandoen nokså ulikt. Litt av grunnen kan vere at eldre nettlesarar ikkje har full støtte for denne eller oppfører seg feil i høve til normen.
Flytande posisjonEin boks kan også plasserast flytande i systemet. Dette betyr at boksen «flyt» til venstre eller høgre kant av foreldreboksen alt etter kva som er definert. Eigenskapen er float:
Denne eigenskapen kan kanskje sjå nokså tilforlateleg ut, men er faktisk ganske morosam og blir brukt i mange ulike og ofte også uventa samanhengar. La du for eksempel merke til den første bokstaven i dette avsnittet. Han er formatert med float: left og noen andre definisjonar i stilarket.
span.avsnitt {
float:left; width:0.8em; font-size:2.8em; line-height:0.8em } HTML-koden ser slik ut:
<p><span class="avsnitt">D</span>enne
eigenskapen (osv)
Du kan gjerne eksperimentera litt med ulike verdiar i stilarket for å få fram ulike verknader. Dette er ein boks med litt tekst. Denne
blå teksten flyt Boksen ovanfor er nokså rotete og på ingen måte noe godt eksempel på fornuftig bruk av flytande plassering. Den blå og den raude boksen har flote heilt ut til venstre og høgre som dei skal. Den grøne boksen flyt også til høgre, men bare til han støyter mot den raude boksen. Du kan altså setje opp fleire boksar og la dei flyte kant i kant mot venstre eller høgre. Denne teknikken er ofte brukt for å lage menyar.
|
|
© Innhald og design: Kolbjørn Stuestøl | Stuestøl heimeside | Sist endra 11. april 2013 |