>>




>>

februar 2016


Blir bildene dine "dratt" i høyden eller bredden?


Bilder som vises slik som bildet til høyre er veldig lett å unngå...

 

Kort forklart

Bilder skaleres automatisk i bredden for å unngå at store bilder kuttes når de ligger i en boks eller vises på en skjerm som er smalere enn selve bildet. Høyden på bildet vil derimot alltid være den høyden som er satt, dersom det er satt en høyde på bildet.
Ikke sett høyde på bilder så vil nettleseren til leseren justere denne helt selv - og bildene dine vil alltid se riktige ut.
 


Grundigere forklart - og hvordan du fikser det

Html for et bilde kan f.eks. se slik ut:
<img src="mittbilde.jpg" width="1000" height="500" />

Denne koden sier at bildet skal være 1000 pixler bredt og 500 pixler høyt. Det fungerer fint i en blogg som er 1000 pixler, eller mer, bred, men bredden avgjøres egentlig av oppløsningen på skjermen man leser på. Mobile enheter kan for eksempel ha en oppløsning på alt fra pinglete 312 pixler på vertikal mobilskjerm til utrolige 3840 pixler på horisontal visning på enkelte nyere nettbrett. Derfor skaleres bildebredden slik at den passer til skjermen de vises på.

På mobil, og også i mange bloggdesign, skaleres normalt bilder ned (aldri opp - det gjør dem uklare) til 100% av tilgjengelig bredde i innlegget - for å unngå "avkuttede bilder" når bildet er bredere enn boksen det ligger i. Problemet er at høyden ikke kan bestemmes på samme måte. Så, når bildet ditt fra eksempelet over skaleres fra 1000px bredde til f.eks. 720 pixler skjermbredde vil høyden fremdeles være 500 pixler og bildet vil derfor se dratt ut.
 


 

Løsningen er altså å ikke fortelle hvor høyt et bilde skal være. Da fikser nettleseren bredde-/høydeforholdet helt selv og bildet vil alltid se riktig ut, enten du ser det på PC, en liten mobiltelefon eller et nettbrett.
 

Når du laster opp et bilde til et innlegg på blogg.no blir det ikke satt noen høyde på bildet. Kun den bredden du valgte ved opplastingen blir satt. Det samme gjelder dersom du setter inn et bilde fra arkivet eller fra Yay Images, kun bredden du velger blir satt. Men, dersom du drar et bilde større eller mindre med "håndtakene" på bildet (denne funksjonen er ikke en del av blogg.no's editor, men noe som finnes i enkelte nettlesere) vil det alltid bli satt en fast høyde på bildet, og bildet vil oppleves dratt når bredden autoskaleres. Trenger du å endre bredden på bildet bør du derfor bruke innstillingene som er innebygd i editoren. Dobbeltklikk på et bilde i innlegget for å åpne boksen for bildeinnstillinger.
 



 

Dersom feltet for høyde allerede har et tall når du åpner denne boksen kan du fjerne det ved å først åpne hengelåsen og deretter slette tallet. Husk å trykke på "OK" etterpå.

 

LES MER OM:

AVANSERTE BILDEINNSTILLINGER

HVORDAN MIDTSTILLE BILDER?

BLOGG.NO: Avanserte bildeinnstillinger

Den nye teksteditoren vår gir deg også mer avanserte bildeinnstillinger. Dobbeltklikk på et bilde i innlegget ditt så får du opp redigeringsboksen.
 

Bildeegenskaper



 

Jeg har satt et kryss over boksen for høyde, fordi man ikke bør oppgi en fast høyde på bilder. Mobilvisning, og veldig mange design for webvisning, vil autoskalere (automatisk justere) bredden på bilder, men kan ikke gjøre det for høyden. Du risikerer dermed at størrelsesforholdet mellom bredde og høyde blir feil.

For eksempel: dersom du har et bilde som er 1000 pixler bredt og 500 pixler høyt, og bredden automatisk justeres ned til 320 pixler på mobiltelefoner, vil fremdeles høyden være 500 pixler, og bildet vil oppleves som dratt i høyden eller trykket sammen fra sidene. Dersom du ikke har oppgitt noen bestemt høyde på bildet vil høyden justere seg selv og bildet ser riktig ut uansett hvor det vises.

For å fjerne en satt høyde på et bilde klikker du på hengelåsen slik at den åpner seg, og så fjerner du tallet i boksen for høyde. Husk å trykke "OK" etterpå.

Du kan også venstre- eller høyrejustere bilder.
Ønsker du å midtstille/sentrere bilder kan du lese om det her.

 



 

Lenke



 

 

Avansert



 

Hvordan lage en lenke med egen tekst

 

Da vil det se f.eks. slik ut:

Trykk HER for å komme til websiden...

 

Vil du endre på teksten?
Marker den på nytt og skriv inn endringen.

 

 

Hvordan markere tekst

  1. Skriv teksten først.

    Dette er en tekst og jeg vil sette inn en lenke HER midt inni teksten sånn ca...
     
  2. Sett musepekeren på begynnelsen eller starten av det du vil markere.
  3. Trykk ned venstre museknapp.
  4. Dra musepekeren bortover teksten du vil markere.
  5. Slipp musepekeren når du er kommet til slutten av det du vil markere.
    Du kan teste dette ved å markere et ord i teksten du akkurat leste.
     



 

 

 

 

Hvordan sentrere bilder




 

 

...eller...

 





 

 

"Vis blokker"-funksjonen i teksteditoren

Denne artikkelen er laget for å vise hvordan du kan bruke "Vis blokker"-funksjonen i editoren for å formatere innlegget ditt slik du vil ha det. Først vil du se et screenshot av hvordan det ser ut under redigeringen av innlegget, deretter vil du se det faktiske innlegget helt nederst i artikkelen. Jeg har bare skrevet artikkelen først, tatt screenshot, og så lagt bildet inn over selve teksten...

Jeg vil forklare bilderedigering i en annen artikkel.
 



 

"Vis blokker"-funksjonen i teksteditoren er genial!
 



 

Den forteller deg hvordan innlegget ditt formateres, mens du skriver. Her ser du for eksempel at hvert avsnitt ligger inni en blokk (eller boks) som heter "P" (for "paragraph"). Man lager et nytt avsnitt ved å trykke på "Enter" (linjeskift).

For å starte en ny linje i samme avsnitt (blokk) trykker man på "Shift" + "Enter"...
Da hopper man én linje ned, uten å starte et nytt avsnitt.

Bilder og videoer bør ligge i helt egne blokker dersom de skal stå for seg selv.
 

Tekst i samme blokk som bildet vil havne rett under bildet, eller på siden av bildet. Er dette effekten du vil ha må du altså passe på at teksten som skal ligge sammen med bildet er i den samme blokken/boksen som bildet.
Du kan dobbeltklikke på et bilde for å legge inn en margin på begge sidene av et bilde, eller over og under et bilde, eller begge deler.
På dette bildet har jeg valgt avansert redigering og satt padding-right til 30px.

 



 

 

#bloggno #design #redigering #innlegg #tutorial #teksteditor


hits