Tilbake til startsida IKT i praksis. Stilark


Å plassere element på sida

I 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

position :
relative     Flytt i høve til normalplasseringa
absolute     I høve til skjermflata (<body>-blokka)
fixed     Fast på sida
static     Som vanleg i html

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: relative

Overskrifta 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 posisjon

Har 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

div.pos_fixed {
  position:fixed;
  top:30px;
  right:12px;
  background-image : url(css.png)
  background-repeat : no-repeat;
  border : thin solid;
  width : 70px;
  height : 19px;
}

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 posisjon

Plasserer 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

div.pos_absolute_eksempel {
  position: absolute; top:30px;
  left:20px;
  background : url(lys.png) no-repeat;
  border : thin solid;
  width : 70px;
  height : 45px;
}

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 posisjon

Ein 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:

Verdi Beskriving
none  Ingen flyt. Elementet blir plassert der det normalt høyrer heime
left  Elementet flyt til venstre
right  Elementet flyt til høgre
inherit  Flytinga blir styrt av foreldreboksen (Ikkje i IE)

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
til venstre Denne raude teksten flyt
til høgre Også denne grøne teksten
flyt til høgre Som du ser, kan utsjånaden bli nokså rotete sidan teksten blir sett inn der det måtte vere plass til overs mellom dei flytane tekstboksane.

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.

 

 

Send melding
© Innhald og design:  Kolbjørn StuestølStuestøl heimesideSist endra 11. april 2013