Slik justerer du elementer med flyter i Dreamweaver

Designere justerer ofte et bilde, en

tag eller et annet element til venstre eller høyre for en nettside i Dreamweaver, og vikle deretter eventuell tekst eller annet innhold rundt det elementet. Bildet er justert til høyre for kolonnen slik at teksten brytes ved siden av det til venstre. I trinnene som følger finner du ut hvordan du lager stiler som denne.

Kreditt: Bilde fra istockphoto.com

CSS gir mange fordeler når det kommer til å justere elementer som dette, men måten du setter opp disse stilene på er ikke så åpenbar som du kanskje forventer med det første fordi du bruker float-alternativet.

Etter at du forstår at du kan flyte elementer, for eksempel bilder, til venstre eller høyre side av en side, er det ganske enkelt å lage stiler som oppnår dette målet. I denne øvelsen lærer du å lage to stiler som er ideelle for å justere bilder til venstre og høyre på en side, komplett med en liten marg akkurat der du trenger det.

CSS-oppsettene som er inkludert i Dreamweaver CC har allerede flytestiler som du kan bruke til å justere elementer til høyre og venstre. Disse klassestilene heter .fltlft (for, du gjettet riktig, flyt til venstre) og .fltrt (for flytende høyre).

Følg disse trinnene for å lage to klassestiler som du kan bruke til å justere bilder og andre elementer til venstre og høyre på en side:

Klikk på plusstegnet i CSS Designer Selectors-panelet.

Avhengig av hva som er på siden, legges et nytt stilnavn eller et tomt felt der du kan skrive inn et stilnavn til i Selectors-panelet.

Dobbeltklikk for å velge navnet som Dreamweaver la til panelet og endre det til navnet du ønsker for den nye stilen, eller klikk for å velge det tomme feltet og angi et navn.

Hvis det ikke er lagt til noe navn, skriv inn navnet du ønsker i det tomme feltet. Du kan navngi stilen hva du vil, men sørg for å skrive inn et punktum før navnet hvis du oppretter en klassestil eller et #-tegn for en ID-stil.

Dobbeltklikk på det nye navnet og rediger det etter ønske.

Selv om du kan navngi disse stilene uansett hva du foretrekker, kalles justeringsstiler vanligvis med de forkortede fltrt og fltlft, som står for henholdsvis float right og float left.

Hvis du for eksempel oppretter en stil for å justere elementer til venstre, vil du gi den navnet .fltlft.

I Egenskaper-panelet klikker du på ikonet som setter Float til Venstre.

Bruk Margin-innstillingene i Egenskaper-panelet for å lage en marg rundt det flytende elementet.

Det er god praksis å legge til margplass på motsatt side fra flyteinnstillingen. Hvis du lager en stil for å flyte et bilde til venstre, legger du til 5 eller 10 piksler med plass til høyre margfeltet. Når du justerer et bilde til venstre på siden, vil det bli opprettet en marg mellom bildet og ethvert annet element som brytes ved siden av bildet.

Velg bildet eller annet element du vil justere på siden.

Velg navnet på stilen du opprettet fra rullegardinmenyen Klasse i egenskapsinspektøren.

Stilreglene du definerte da du opprettet stilen, brukes automatisk. Hvis du hadde valgt et bilde på en tekstside, ville bildet flyttet seg til venstre side av siden, og teksten ville gå rundt det med en marg mellom bildet og teksten.

Gjenta trinn 1–7, én gang med flottøren satt til Høyre og 5 til 10 piksler margrom i venstre margfelt i bokskategorien, og igjen med flyten satt til venstre og 5 til 10 piksler margrom i høyre. marginfelt i bokskategorien.