Sidebygger: hvordan fungerer høyde

Forklaring av eksempel og oppsettet

I denne artikkelen skal vi bruke samme eksempel hele tiden, så la oss starte med å forklare hvordan eksemplet er bygd opp.

Eksemplet ser slik ut:

Dette er en beholder (markert med rød farge) som inneholder fire bokser (markert med gul farge). Boksene har en svart ramme og beholderen har litt luft for å gjøre det mer tydelig i eksemplet.

Hvis jeg trykker på den første boksen i beholderen ser man i navigasjonstien nede til venstre at "Boks" ligger innenfor en "Beholder".

En viktig presisering rundt begrepet høyde

I sidebyggeren når vi snakker om "høyde" betyr det egentlig minimumshøyde. Det vil si at vis en boks er satt opp til å ha f.eks 100 i høyde vil det egentlig bety at den skal minst ha 100 i høyde. Når man plasserer innhold i boksen kan boksen automatisk bli høyere enn den oppgitte høyden. Du får et eksempel på dette når jeg forklarer om "Tilpass sidestilte bokser og beholder"

Standard

Som standard vil alle boksene følge høyden til beholderen. Hvis jeg markerer beholderen og drar i høydejusteringspunktet vil høyden til alle boksene automatisk følge etter. Grunnen til at dette skjer er at beholderen er satt opp til å fylle høyden vertikalt.  

Jeg kan se denne innstillingen ved å trykke på beholderen og i menyen til høyre velge "Plassering av innhold". I feltet "Innhold vertikal" er den satt opp som "Fyll".

Hvis jeg endrer den til "Toppen" vil boksene bruke sin egen høyde. Dette gjelder for innstillingene "Toppen", "Midten" eller "Bunnen". Disse valgene forteller hvor i beholderen boksene skal plasseres vertikalt.

Nå kan jeg justere høyden manuelt på alle boksene slik at det ser ut som dette.

Manuell høyde

I tilfeller man ønsker å være veldig nøyaktig kan man justere høyden ved bruk av tall.
Hvis jeg markerer boks nummer to og velger "Høyde" i menyen til høyre vil jeg kunne se høyden i pixler. Der kan jeg da skrive inn den høyden jeg vil ha.

Hjelpefunksjoner for høyde

I menyen til høyre under "Høyde" er det tre knapper som hjelper deg med å justere høyden. For å demonstrere disse jeg har lagt til en bilde i boks nummer fire.

Fyll beholder

Hvis jeg trykker på "Tilpass" vil høyden på boks fire bli satt til tilgjengelig høyde i beholderen den ligger i. Det vil da se sånn ut:

Tilpass til innhold

Denne knappen vil justere høyden på boksen til innholdet inne i boksen. I dette tilfelle er det bare et bilde på innsiden, så da vil høyden på boksen bli samme høyde som bildet.

Tilpass sidestilte bokser og beholder

"Sidestilte bokser" også kjent som "søsken" refererer til alle bokser på samme nivå som det valgte elementet. Hvis vi velger boks 2 i vårt eksempel så vil boks 1,3 og 4 være en sidestilt boks. 

Hvis jeg velger boks 2 og trykker på tilpass vil høyden på boks 1, 3 og 4 settes til samme høyde som boks 2. I tillegg vil høyden på beholderen bli satt til satt til samme høyde som boks 2.

Som du ser på bildet over er det oppstått et lite problem (som er nøye planlagt). Grunnen til at høyden til boks 4 ikke er samme høyde som boks 1,2 og 3 er at innholdet i boks 4 tar mer plass og fører til at boksen må være høyere.

For å løse dette problemet kan jeg trykke på bildet, og velge "boks" i navigasjonstien. Da vil velge boksen. Vi må gjøre det på denne måten siden bildet og boksen har samme høyde og det da er vanskelig å bare velge boksen. 

Deretter går jeg inn på "Høyde" og trykker "Tilpass" for "Tilpass sidestilte bokser og beholder".
Resultatet vil da se slik ut:

 

Bokser med flere nivåer av innhold og ulik høyde

Nå har jeg modifisert eksemplet med å fylle boksene med en artikkel og gjort diverse endringer slik at det ser veldig rotete ut. Når man lager sider er det viktig med symmetri. Vi skal nå få dette til å se fint ut igjen.

Problem 1: Teksten har ulik høyde

Hver artikkel har ulik mengde med tekst som fører til at boksen rundt teksten krever ulik høyde. Løsningen på dette er å justere høyden på hver tekstboks til samme høyde. Vi gjør dette med å velge den teksten som har største høyde. Dette kan vi se her:

Boks 2 inneholder mest tekst. Hvis vi da trykker på teksten i boks 2 og ser på hva høyden er, så kan vi sette manuell høyde til samme verdi på de andre tekstboksene. Da trykker man på de andre boksene og skriver inn samme verdi i feltet for høyde.

 

Resultatet ser sånn ut:

 

Problem 2: Boksene har ulik høyde

Det neste problemet er at boksene nå har ulik høyde. Dette problemet kan også løses på samme måte som forrige problem. Eneste forskjellen er at man må justere høyden på boksene og ikke teksten.

Vi velger å løse det på en annen måte ved å bruke "Tilpass til innhold". Vi ser at boks 1 har høyden vi ønsker å oppnå, så vi trenger ikke gjøre noe med den. Først trykker man på artikkelen i boks 2 og åpner "Høyde" i menyen til høyre. Siden artikkelen innenfor boks 2 har samme høyde som boks 2 så er det artikkelen som blir valgt. I menyen trykker du på "tilpass" for "Tilpass til innhold". Jeg gjentar samme prosess for boks 2, 3 og 4.