Share
Fluidlayouter är det perfekta sättet att hysa vårt innehåll vid vilken visningsportstorlek som helst. Text kan flöda som behållare växa och krympa, bilder och även video och iframes kan flex och squish också. Men vad händer om vi har innehåll som borde inte ändra dimensioner? Vad sägs om annonsblock, som ofta är utformade med mycket specifik storlek i åtanke? Oddly enough, det här är där bordslayouter kommer till räddning ...
Jag påminde om detta nyligen när jag läste Tim Kadlecs genomförande Responsive Design. Det kom precis vid rätt tidpunkt också; Jag var mitt i ett klientprojekt som bara behövde detta tillvägagångssätt (och jag var upptagen med att slakta den).
Många webbplatser beror på annonsintäkter. Men mycket kan du inte tycka om att vara avskräckt med webbmarknadsbilder, utan att du inte skulle få tillgång till mycket av det fria innehåll du har blivit van vid. Tuts + beror till exempel på reklamintäkter för att behålla sitt ständigt växande team av författare och personal.
Interactive Advertising Bureau (iab) ansvarar för en stor mängd digital reklam och arbetar hårt för att definiera standarder och riktlinjer för hela industrin. Ta en titt på deras riktlinjer för annonsreklam för en hänvisning till de universella annonsblokstorlekarna som de rekommenderar:
Fyra bilder med fast dimension. Och det är viktigt att de förblir i dessa dimensioner också; logotyper, linjer och ansvarsfrånvaro kan alla bli oigenkännliga eller oläsliga om de smutsas ner i en vätskeformat. Även företag som betalar för dessa annonser gör det baserat på blockens storlek och position. En annons på 300x250px kanske inte är lika framträdande eller effektiv när den visas i mindre storlek och därigenom förkortar det ifrågavarande företaget.
Annonserna är utformade för visning med en viss storlek, så tills vi har en bättre lösning för responsiv reklam, är det bäst att respektera det.
Låt oss snabbt bygga oss en generisk fluid layout för att visa vårt problem. en , innehållande en och en . Allt vi behöver:
Då kan vi stile det som så:
sektion bredd: 90%; marginal: 0 auto; åt sidan bredd: 30%; flyta till vänster; artikel bredd: 65%; float: right; img maxbredd: 100%;
Med lite tilläggsfärg är detta den effekt du ska uppnå:
Med vår img maxbredd: 100% regeln har vi försäkrat oss om att våra bilder är flytande och aldrig bryter ut från deras föräldrakontainer. Tyvärr är vår flytande sida smalare här än bilden 300px bredd, precis vad vi inte vill hända.
Låt oss fixa bredden på sidan och lämna artikeln för att göra böjningen. Som en kombination av fast och flytande hänvisar vi till denna layouttyp som hybrid.
sektion bredd: 90%; marginal: 0 auto; åt sidan bredd: 300px; flyta till vänster; artikel bredd: 65%; float: right; img maxbredd: 100%;
Detta fungerar på bredare skärmar, men så snart behållaren blir för liten, dvs: när 300px är mer än 35% av behållarens bredd, pressas artikeln under:
Vi kan lösa detta i vårt fall genom att byta markering runt; placera sidan i artikeln:
Sedan tar man bort bredden och flottören från artikeln och ger äntligen en marginalrätt till att fungera som rännan:
sektion bredd: 90%; marginal: 0 auto; åt sidan bredd: 300px; flyta till vänster; marginal-höger: 5%; artikel img maxbredd: 100%;
Det här är vad vi får:
Vilket är perfekt! Artikelinnehållet är flytande, medan annonsblocket och dess förälder åt sidan är fast bredd! Du kan även flytta sidan åt höger genom att byta float till float: höger och placera rännan (dess marginal) på andra sidan också.
Problem uppstår emellertid när artikelinnehållet börjar ta mer vertikalt utrymme än sidan. Detta är resultatet:
Det finns hackar för att undvika detta; vi kunde ge åt sidan en massiv bottenplatta, då en lika massiv negativ bottenmarginal. Då med en överflöd: dold vi längtar artificiellt bort, gömmer vad som helst sticker ut.
Eller vi kan använda positionering och fixa sidan i högst upp till höger om artikeln, vilket ger artikeln en del vadderingar för att göra plats för det.
Ingen av dessa är idealiska, var och en presenterar sina egna unika problem.
Vad?! Jag hör dig säga ...
Det är rätt. Tabelllayouter (Gud vilar sina själar) var faktiskt ganska bra på att ordna hybridlayouter, så låt oss ta ett blad ur sin bok. Med CSS kan vi visa våra element som om de är komponenter i ett bord. Detta är helt bra också; vi använder inte faktiska tabeller i vår markering (det skulle vara dåligt eftersom vi inte arbetar med tabelldata). Vi kommer helt enkelt att luta oss på bord för visning, utan att ändra den semantiska meningen av vårt dokument.
Återgå till vår ursprungliga layout (där sidan och artikeln var sida vid sida) vi kan ändra CSS för att föreslå tabellliknande byggstenar. Vårt innehållande avsnitt blir bordet, artikeln och åt sidan blir bordcellerna inom den:
avsnitt display: table; bredd: 90%; marginal: 0 auto; åt sidan display: tabellcell; bredd: 300px; artikel display: tabellcell; img maxbredd: 100%;
Vilket ger oss:
Hmm, inte riktigt rätt. Vi behöver ändra vertikalinriktningen av våra celler, eftersom bilden och texten här båda sitter på samma baslinje.
åt sidan display: tabell-cell; vertikaljustering: topp; bredd: 300px; artikel display: tabellcell; vertikaljustering: topp;
Nu, när antingen artikeln eller åt sidan växer vertikalt, växer den andra med den. Arrangemanget beror dock på DOM; Vilken tabellcellselement som visas först i dokumentet visas också först (till vänster) i vår tabelllayout.
Och så kan vi naturligtvis också sätta upp det här i en mediefråga, så att den här layouten bara slår in på större skärmar. På mindre skärmar sitter sidorna snyggt på toppen av artikeln. Ta en titt på demo för att se hur detta beter sig.
Användning av CSS-tabelldisplay stöds i alla moderna webbläsare, men användes endast av Internet Explorer med utgåvan av IE8.
För tidigare webbläsare är det därför klokt att villkorsbundet inkludera ett backblock-formatblad, vilket ger dig en alternativ layoutlösning:
(eller du kan bara ignorera IE7 och under ...)
Som Tim nämner också i sin bok, kommer Windows 7-telefoner också att laddas i de ie.css-stilar vi just har satt. För att förhindra att det händer måste du ändra villkoren:
Så där har vi det - vem skulle ha trott bordslayouter någonsin skulle kunna hjälpa dig i den här tidens svåra webbdesign ?! Visserligen är det inte den perfekta lösningen du kanske önskat, men tills CSS Grid Layout och Flexbox får lite mer dragkraft är detta ett bra alternativ.
Accentsconagua