# 92: Bygga de enskilda gallerisidorna - CSS-tricks

Anonim

Vi har lite av en Photoshop-mockup att arbeta härifrån när vi fortsätter att bygga mallen för den enskilda gallerisidan.

Först och främst stylade vi länkarna Nästa och Föregående. De är i en absolut placerad ruta i gallerifältet, så att vi kan centrera dem på sidan trots de andra knapparna och saker som redan finns i fältet. De tar på sig samma klass som Submit One-knappen så det finns konstant där.

Därefter har vi den här mycket tunna vänstra kolumnen för att få text. Vi börjar med ett 1/8 7/8 rutnät, men 1/8 är bara lite för smalt. Vi ändrar det till 1/4 3/4 men det är för mycket. Så som den legendariska björnen var 1/6 5/6 precis rätt.

Vi gör lite typografi i den smala kolumnen och lägger till i titeln (i en

naturligtvis eftersom det är den viktigaste titeln på sidan), beskrivningen och andra avsnitt. Det mesta av typografin faller bara på plats baserat på vår enkla och robusta typografiinstallation.

5/6 rutnätet är allt för bilden. Trevligt och stort, vilket är jättebra. Den har en ljusgrå bakgrund, precis som bilder har i blogginlägg (t.ex.

).

Vi funderar på att bli lite snygga med hur vi utformar taggarna. Vi tittar runt på CodePen (här är en länk till "taggar" -taggen, META ALERT). Det slutar med att vi tänker att det är för stort och lämnar dem som normala länkar.

Vi får “fullstorlek” -knappen att fungera på ett av de enklaste sätten vi kan, öppna ett nytt fönster som är måtten på bilden i full storlek och visar bilden i den. Det är som en modalbox från början av 2000-talet! Men jag gillar det. Det är enkelt, det behöver inte en massa kod (som en ljuslåda skulle göra), och det är uppenbart att interagera med. Det är ännu bättre om du frågar mig.