O2e

Hvordan lage faux kolonner på et nettsted

Ditt nettsted er mye enklere å bla når innholdsdetaljer er innrammet av søyler. Kolonner, på en måte, veilede lesernes øyne. Imidlertid kan noen kolonner ser ut til å være lengre eller kortere enn resten. Hvorfor? Du må kanskje tilpasse eller justere til innholdet detaljer.

Den Faux Columns Technique er nødvendig for å skape en kolonne som enten er kortere eller lengre enn resten i serien. Her er de enkle å følge trinn:

En. Du trenger en "wrapper" for å starte

Hvordan lage faux kolonner på et nettsted. Du trenger en "wrapper" for å begynne.
Hvordan lage faux kolonner på et nettsted. Du trenger en "wrapper" for å begynne.

1. Du trenger en "wrapper" for å begynne. Åpne din stilark. Se etter en container klasse. Det er bedre kjent som "wrapper". Det fungerer som beholder for kolonnen din. For eksempel ved hjelp av en "wrapper", hvis nettstedet har en fast bredde på 800 piksler, kan du dele det inn i tre kolonner. Du kan velge å endre størrelsen på kolonner i 200, 400, og 200 piksler, henholdsvis.

2. Opprett en bred, kort bilde. Du kan gjøre det ved å gå din bilderedigeringsprogram. Sørg for at bildet så bredt som din beholder div. Deretter fortsetter å dele slik bildet i seksjoner. Divisjonen skal matche den faktiske bredder på kolonnene. Legg merke til at hver av inndelingen til slutt ville tjene som en bakgrunn for hver av kolonne ditt. Streber etter å være mer presis med målingen.

3. Tegn ditt bakgrunnsbilde. For effektivt å kunne gjøre det, studere de spesifikke behovene til ditt nettsted. Du kan øve skape et vertikalt mønster. Gjenta slikt mønster i hver del av bakgrunnsbildet. Andre mønstre kan være så grunnleggende som solide farger som du liker. Hvis du ønsker en mer dynamisk utseende, bør du vurdere å sette noen graderinger eller teksturer til bakgrunnsbildet.

En. Du trenger en "wrapper" for å starte. Opprett en bred, kort bilde.
En. Du trenger en "wrapper" for å starte. Opprett en bred, kort bilde.

4. Sjekk riktig høyde for bildet. Som standard, hold deg til riktig høyde. Gjør en innsats for å holde det så tynn som du kunne. Du trenger en tynnere bildet for å garantere en mindre filstørrelse. Selvfølgelig ville mindre filstørrelser gjøre nettsidene til å laste mye raskere.

5. Lagre bilde. Sett på et sted som er lett tilgjengelig med ditt nettsted. Sterkt foretrukket er det PNG. Bortsett fra dens evne til å bevare kvaliteten, kan det ha en relativt høy komprimering.

6. Forbedre stilark. Input følgende egenskaper, spesielt til beholderen klassen:

  • For "background-image", bruk: url ("/ path_to_image / file_name.png");
  • For "background-repeat", gå på: "repeat-y".

7. Vurdere side. Når du har angitt riktig riktig fil retning, vil bildet ditt lett vises. Bildet ville tjene som bakgrunn for kolonne ditt. Mer enn det, kan det utvide, eller utvide vertikalt. Det kunne nå mulig høyeste høyde for kolonne ditt.

Her er noen feilsøking tiltak

Her er noen feilsøking tiltak. I tilfelle du har plassert bakgrunnsbildet ditt rett container og plutselig, betyr det ikke dukker opp, kan du se i filen banen. Dobbeltsjekke det. Se til at filtypen er nøyaktig. I mellomtiden, hvis du ønsker å forlenge bakgrunnsbildet opp til bunnen av websiden din, juster. Å stivne, legge de riktige bakgrunnsfarger for områdene eller flekker at bildet ikke innhylle. Krydret nettsted utviklere observere at denne teknikken vil fungere godt for variabel bredde nettsider.