Problem nastaje jer su stariji sajtovi često koristili fiksne širine (u pikselima) za sadržaj ili nisu imali adekvatna pravila za prilagođavanje različitim rezolucijama. Kada se takva stranica otvori na širokom (16:9) monitoru, pretraživač pokušava da popuni raspoloživi prostor, što rezultira rastezanjem slika ili sadržaja. Dodavanjem crnih linija sa strane zapravo smanjujemo efektivnu širinu prikaza sadržaja, vraćajući proporcije bliske originalu.
Rešenje: Centriranje sadržaja i dodavanje margina
Najjednostavniji način da postignete ono što želite je da
centrirate glavni sadržaj stranice i postavite mu fiksnu maksimalnu širinu. Preostali prostor sa leve i desne strane automatski će biti popunjen pozadinom, koja u vašem slučaju može biti crna.
Ovo možete postići dodavanjem ili izmenom CSS pravila za glavni element koji sadrži vaš fotoalbum. U većini slučajeva, to će biti <body> tag ili neki <div> tag koji obuhvata sav sadržaj.
Evo kako to možete uraditi korak po korak:
- Pronađite HTML fajl: Otvorite HTML fajl vašeg fotoalbuma (npr. index.html ili mainpage.html) u nekom tekstualnom editoru (Notepad, Notepad++, Visual Studio Code).
- Pronađite glavni kontejner: Identifikujte HTML tag koji sadrži sav sadržaj vašeg albuma. To je verovatno <body> tag, ili neki <div> tag sa ID-jem (npr. <div id="glavni_sadrzaj">).
- Dodajte ili izmenite CSS:Postoje dva načina da dodate CSS:
- Unutar <head> taga (preporučeno ako nemate eksterni CSS fajl): U <head> sekciji vaše HTML stranice, dodajte sledeći kod:
HTML
- max-width: 960px;: Ova linija postavlja maksimalnu širinu vašeg sadržaja na 960 piksela. Ovo je neka standardna širina koja je bliska proporcijama 4:3 na modernim ekranima. Možete eksperimentisati sa ovom vrednošću – ako su vaše slike bile široke npr. 800 piksela, probajte tu vrednost ili nešto malo veće. Cilj je da nađete širinu koja čini da slike izgledaju prirodno.
- margin: 0 auto;: Ovo je "čarobna" linija koja centrira element na ekranu. 0 postavlja gornju i donju marginu na 0, a auto automatski raspoređuje levi i desni prostor podjednako, gurajući element u sredinu.
- background-color: black;: Ovo postavlja boju pozadine cele stranice na crno. Kada se sadržaj centrira i smanji mu se širina, preostali prostor sa leve i desne strane biće popunjen crnom bojom.
- Ako imate eksterni CSS fajl: Ako vaš FrontPage sajt ima eksterni .css fajl (npr. style.css), otvorite taj fajl i dodajte ista pravila za body ili odgovarajući div element.
- Sačuvajte promene i testirajte: Sačuvajte izmenjeni HTML fajl i otvorite ga u web pretraživaču. Trebalo bi da vidite vaš fotoalbum centriran na ekranu sa crnim "stubovima" sa leve i desne strane, i slike bi trebalo da izgledaju u originalnim proporcijama.
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
- Podešavanje max-width: Možda ćete morati da probate nekoliko različitih vrednosti za max-width (npr. 800px, 960px, 1024px) dok ne pronađete onu koja najbolje odgovara izgledu vaših originalnih slika.
- Prilagođavanje samo za velike ekrane: Ako želite da se ovo dešava samo na većim ekranima, a da se na manjim (npr. tabletima ili mobilnim telefonima) stranica ponaša responsivnije (rasteže se do pune širine), možete koristiti CSS Media Queries. Međutim, s obzirom da je reč o starom albumu i vašoj želji za jednostavnim rešenjem, prethodni pristup je dovoljan.
- Zadržavanje bele pozadine albuma: Ako želite da se unutar samog albuma zadrži bela pozadina (a ne da cela stranica bude crna), onda background-color: black; postavite na <body> tag, a ako koristite div za sadržaj, tom divu postavite background-color: white; (ili koja god je originalna boja pozadine vašeg albuma). Na primer:
css
Ovo rešenje je relativno jednostavno, ne zahteva previše menjanja originalnog koda i trebalo bi da reši problem rastegnutih slika. Srećno sa vašim nostalgičnim projektom!
