Share
Væskeoppsett er den perfekte måten å huse innholdet på, på hvilken som helst visningsportstørrelse. Tekst kan flyte som containere vokse og krympe, bilder og til og med video og iframes kan bøye og klemme også. Men hva om vi har innhold som bør ikke endre dimensjoner? Hva med annonseblokker, for eksempel, som ofte er utformet med svært spesifikke størrelser i tankene? Merkelig nok, dette er hvor bordoppsett kommer til redning ...
Jeg ble påminnet om dette nylig når jeg leser Tim Kadlecs Implementerende Responsive Design. Det kom akkurat til rett tid også; Jeg var midt i et klientprosjekt som bare trengte denne tilnærmingen (og jeg var opptatt av å slakte det).
Mange nettsteder er avhengig av annonseringsinntekter. Men mye du kanskje ikke liker å være barraged med webmarkedsføring bilder, uten det du ikke ville ha tilgang til mye av det frie innholdet du har blitt vant til. Tuts + er for eksempel avhengig av reklameinntekter for å opprettholde sitt stadig voksende team av forfattere og ansatte.
Interactive Advertising Bureau (iab) er ansvarlig for en stor mengde digital reklame og jobber hardt for å definere standarder og retningslinjer for hele bransjen. Ta en titt på retningslinjene for visningsannonsering for en referanse til de universelle annonseblokkstørrelsene de anbefaler:
Fire faste dimensjonsbilder. Og det er viktig at de forblir i disse dimensjonene også; logoer, stropper og ansvarsfraskrivelser kan alle bli uigenkjenelige eller ulastelige dersom de smelter ned i en fluid layout. Også selskaper som betaler for disse annonsene gjør det basert på blokkens størrelse og posisjon. En annonse på 300x250px er kanskje ikke så fremtredende eller effektiv når den vises i en mindre størrelse, og forkorter det aktuelle selskapet.
Annonsene er utformet for visning med en fast størrelse, så til vi har en bedre løsning for responsiv reklame, er det best å respektere det.
La oss raskt bygge oss et generisk fluid layout for å demonstrere vårt problem. EN , inneholder en og en . Alt vi trenger:
Da kan vi stile det slik:
seksjon bredde: 90%; margin: 0 auto; til side bredde: 30%; flyte: venstre; artikkel bredde: 65%; flyte: høyre; img maksimal bredde: 100%;
Med litt ekstra farge er dette effekten du vil oppnå:
Med vår img maksimal bredde: 100% regelen vi har sørget for at bildene våre er flytende og aldri bryter ut fra foreldrebeholderen. Dessverre, vår væske side er smalere her enn bildet er 300px bredde, akkurat det vi ikke ønsker å skje.
La oss fikse bredden på bortsett, og la artikkelen gjøre bøyningen. Som en kombinasjon av faste og flytende, refererer vi til denne oppsett typen som hybrid.
seksjon bredde: 90%; margin: 0 auto; til side bredde: 300px; flyte: venstre; artikkel bredde: 65%; flyte: høyre; img maksimal bredde: 100%;
Dette fungerer på bredere skjermer, men så snart beholderen blir for liten, det vil si: når 300px er mer enn 35% av beholderens bredde, skyves artikkelen under:
Vi kan løse dette i vårt tilfelle ved å bytte markeringen rundt; legge til side i artikkelen:
Deretter fjerner du bredden og flyten fra artikkelen, og gir til slutt en margin-rett til å fungere som randen:
seksjon bredde: 90%; margin: 0 auto; til side bredde: 300px; flyte: venstre; margin-høyre: 5%; artikkel img maksimal bredde: 100%;
Dette er hva vi får:
Som er perfekt! Artikkelinnholdet er flytende, mens annonseblokken og dets foreldre til side er fast bredde! Du kan til og med skifte side om til høyre ved å bytte float til flyte: høyre og plasserer randen (marginen) på den andre siden også.
Det oppstår imidlertid problemer når artikkelinnholdet begynner å ta opp mer vertikal plass enn bortsett fra. Dette er resultatet:
Det er hacks å unngå dette; vi kunne gi til side en massiv bunnpolstring, så en like stor negativ bunnmargin. Deretter med en overløp: skjult vi kunstig lengre bortsett, gjemmer det som stikker ut.
Eller vi kunne bruke posisjonering og fikse til side øverst til høyre i artikkelen, noe som gir artikkelen noe polstring for å gjøre plass til det.
Ingen av disse er ideelle, hver presenterer sine egne unike problemer.
Hva?! Jeg hører deg si ...
Det er riktig. Bordoppsett (Gud hviler deres sjeler) var faktisk ganske bra på å arrangere hybridoppsett, så la oss ta et blad ut av boken deres. Ved hjelp av CSS kan vi vise elementene våre som om de er komponenter i et bord. Dette er helt fint også; vi bruker ikke faktiske tabeller i vårt oppslag (det ville være dårlig da vi ikke jobber med tabelldata). Vi kommer rett og slett å lene seg på bordene for visning, uten å endre den semantiske betydningen av dokumentet vårt.
Når vi går tilbake til vårt opprinnelige layout (hvor bortsett og artikkelen var side ved side), kan vi endre CSS for å foreslå tabelllignende byggeblokker. Vår inneholdende del blir bordet, artikkelen og til side blir tabellcellene i den:
avsnitt display: table; bredde: 90%; margin: 0 auto; til side display: tabell-celle; bredde: 300px; artikkel display: tabell-celle; img maksimal bredde: 100%;
Som gir oss:
Hmm, ikke helt riktig. Vi må endre vertikaljusteringen av cellene våre, fordi bildet og teksten her begge sidder på samme basislinje.
til side display: tabell-celle; vertikaljustering: topp; bredde: 300px; artikkel display: tabell-celle; vertikaljustering: topp;
Nå, når enten artikkelen eller bortsett vokser vertikalt, vokser den andre med den. Arrangementet er avhengig av DOM skjønt; Avhengig av hvilket tabellcellelement som vises først i dokumentet, vises også først (til venstre) i tabelloppsettet.
Og selvfølgelig kan vi pakke det hele opp i en medieforespørsel, slik at denne oppsettet bare skyter inn på større skjermer. På mindre skjermer sitter sidene pent på toppen av artikkelen. Ta en titt på demoen for å se hvordan dette oppfører seg.
Bruke CSS-tabellvisning støttes i alle moderne nettlesere, men ble bare vedtatt av Internet Explorer med utgivelsen av IE8.
For tidligere nettlesere, vil du derfor være klokt å betingelsesmessig inkludere et tilbakestillingsskjema, som gir deg en alternativ oppsettløsning:
(eller du kan bare ignorere IE7 og under ...)
Som Tim også nevner i sin bok, vil Windows 7-telefoner også laste inn ie.css stilene vi nettopp har satt. For å unngå at det skjer, må du endre vilkårene:
Så der har vi det - hvem ville trodde at tabelloppsett kunne hjelpe deg i denne tidens responsive webdesign ?! Ganske vist er dette ikke den perfekte løsningen du kanskje har ønsket, men før CSS Grid Layout og Flexbox får litt mer trekkraft, er dette et flott alternativ.
Accentsconagua