# 92: Opbygning af de individuelle gallerisider - CSS-tricks

Anonim

Vi har lidt af en Photoshop-mockup til at arbejde herfra, da vi fortsætter med at opbygge skabelonen til den enkelte galleriside.

Først stylede vi linkene Næste og Forrige. De er i en absolut placeret boks i galleribjælken, så vi kunne centrere dem på siden på trods af de andre knapper og ting, der allerede er i baren. De påtager sig den samme klasse som knappen Submit One, så der er konstant der.

Derefter har vi denne meget slanke venstre kolonne, hvor vi kan få tekst. Vi starter med et 1/8 7/8 gitter, men 1/8 er bare lidt for slankt. Vi ændrer det til 1/4 3/4, men det er for meget. Så ligesom den sagnomsuste babybjørn var 1/6 5/6 lige rigtig.

Vi laver typografi i den smalle kolonne og tilføjer titlen (i en

tag selvfølgelig, da det er den vigtigste titel på siden), beskrivelsen og andre sektioner. Det meste af typografien falder bare på plads baseret på vores enkle og robuste typografiopsætning.

5/6 gitteret er alt for billedet. Dejligt og stort, hvilket er fantastisk. Den har en lysegrå baggrund, ligesom hvordan billederne har i blogindlæg (f.eks

).

Vi overvejer at få lidt lyst til, hvordan vi styler tags. Vi kigger rundt på CodePen (her er et link til "tags" -koden, META ALERT). Vi ender med at tænke, at det er for stort og lade dem være som normale links.

Vi får “fuld størrelse” -knappen til at fungere på en af ​​de enkleste måder, vi muligvis kan åbne et nyt vindue, der er dimensionerne på billedet i fuld størrelse og viser billedet i det. Det er som en modalboks fra begyndelsen af ​​2000'erne! Men jeg kan lide det. Det er simpelt, det har ikke brug for en masse kode (som en lightbox ville), og det er indlysende at interagere med. Det er endnu bedre, hvis du spørger mig.