mynewspapers.net

Visa HTML-text under en miniatyrbild i en CSS galleri

Visa HTML-text under en miniatyrbild i en CSS galleri


Med hjälp av övergripande formatmallar är (CSS) nu ett accepterat sätt att designa och utforma en webbplats. Om du vill skapa ett bildgalleri, Hypertext Markup Language (HTML) används för att placera bilder på sidan och CSS ger dem en viss storlek och läge. Som bilder placeras en ledtext för en text med HTML och stylad med CSS. Allt kan detta från samma plats inom HTML-dokument.

Instruktioner

• Leta upp avsnittet rätt i din HTML-kod. Om din thumbnail gallery innehåller fotografier, koden för varje bild sannolikt börjar med "img src" och slutar med en fil i formatet ".jpg". Det bör finnas flera rader med liknande kod, en för varje bild i galleriet.

• Hitta slutet av koden för imagefilen. Detta bör efter där det står ".jpg." Sätt markören där och slå till återvända, så att du har en tom rad att arbeta med, direkt under koden för bilden. Ange den text du vill ska visas under bilden i denna plats här.

• Placera texten inom två div-taggar och ge div en beskrivning. Detta är vad gör att du kan gå in i CSS delen av dokumentet i en framtida steg och ändra designen. Din text bör se ut så här: < div class = "desc" > texten under bilden < / div >. Denna div kommer att placeras inne i större div, för hela bilden. På så sätt har du möjlighet att bestämma där förändringar behövs.

• Lokalisera den CSS del av dokumentet. Detta kommer att vara under etiketten som säger < style type = "text/css" >. Placera markören i slutet av etiketten och slå tillbaka, så att du har en tom rad att infoga din egen text.

• Ange etiketten som gör det möjligt att hitta den del av HTML-dokument som du vill ändra stil CSS. Denna del av koden kallas din väljare. Det kommer att se ut så här: div.desc detta innebär att du vill göra ändringar i div att du heter "desc" som förkortning för beskrivning.

• Skapa stil ändringar bildtexten, om du önskar. Till exempel kan med hjälp av CSS, du justera texten så det är centrerad med bilden, och du kan bestämma hur stort utrymmet är att bildtexten visar på. Du skulle behöva lägga till dessa taggar under din selektor: div.desc {text-align: Center; bredd: 120px}