Dizajn stránkovania
Dizajn, ako vo väčšine prípadov, je kľudne na vás. Môžete použiť aj nástroje vývojára v prehliadači pri skúšaní dizajnu a potom to iba nahádzať do súboru global.css. My však použijeme konkrétny dizajn, ktorý sa dosť často využíva a budeme musieť naň použiť jednu novú hodnotu vlastnosti display, ktorá sa dá veľmi prakticky a výhodne použiť takmer všade a práve teraz uvidíte jej význam. Náš zoznam bude v riadku, každá položka bude mať orámovanie pre jednotlivé stránky, na stav hover nastavíme inú farbu a rovnako nastavíme iný dizajn pre práve aktuálnu stránku (spravíme to podobne ako v práve navštívenej stránke v menu). Toto by ste zvládli aj sami, mohlo by to vyzerať nejako takto:
fotogaleria.php (len zmeny):
while($photosCount > 0){
echo '<li><a ';
if($pageLink == $page){
echo ' class="active" ';
}
echo 'href="fotogaleria.php?page='.$pageLink.'">'.$pageLink.'</a>';
echo '</li>';
...
global.css (len zmeny):
/**********PAGINATION***********/
ul.pagination {
padding: 0;
}
ul.pagination li {
display: inline;
}
ul.pagination li a {
color: black;
padding: 8px 16px;
text-decoration: none;
border: 1px solid #ddd;
}
ul.pagination li a.active {
background-color: #4CAF50;
color: white;
}
ul.pagination li a:hover{
background-color: #ddd;
}
Ako vidíte, stránkovanie už vyzerá lepšie, je zvýraznený aktívny prvok a takisto je zvýraznenie stavu hover. Náš zoznam (ul) stránkovania chceme ešte umiestniť do stredu pod fotogalériu a pridať mu nejaký okraj hore a dole. Poďme sa ale zamyslieť nad pozíciou jednotlivých prvkov. Najvnorejenšjí prvok je odkaz (a), ktorý je defaultne inline a rovnakú hodnotu vlastnosti display sme určili aj prvku zoznamu (li). Ako vieme, tieto vnútroriadkové elementy sa vyznačujú tým, že zaberajú v riadku len toľko miesta, koľko potrebujú. Zoznam je však defaultne blokový element. My chceme stránkovanie umiestniť do stredu, použijeme na to pravidlo text-align: center pre nadradený element (div v ktorom je ul), určíme mu nejakú triedu alebo id...
Po pridaní tohto pravidla sa zoznam naozaj zobrazí v strede. Okrem toho je aj text v nadpise prvej úrovne zarovnaný na stred, takže pridáme pravidlo pre nadpis prvej úrovne zarovnania textu naľavo. Keďže je to ale blokový element, zaberá celú dostupnú šírku, čo je v tomto prípade zbytočné. Možno bude v tom istom riadku pri ňom niečo naľavo alebo napravo, takže nechceme, aby zaberal celú šírku ale iba toľko, koľko potrebuje. Toto vám napovedá, že by sme mohli použiť hodnotu inline. To by sme ale potom nemohli hýbať s rozmermi tohto elementu a pridávať mu napríklad okraje (margin).
Práve pre tento prípad sa nám hodí hodnota vlastnosti display s názvom inline-block (vnútroriadkový blok). Ako je zrejmé z názvu, jedná sa o kombináciu hodnoty inline a blok. Pre nás je teraz dôležité, že jednak sa element správa ako inline, je v riadku a nezaberá celú šírku, ale na druhej strane sa správa ako blok, má zachovaný svoj rozmer a zaberá svoje miesto, takže sa mu dajú nastavovať okraje aj horizontálne aj vertikálne. Skúste sa zobraziť nad zoznamyv nástrojoch vývojára a všimnite si, že aj jeden aj druhý zaberajú čudnú plochy a sú zvláštne umiestnené. Pridajte túto vlastnosť pre zoznam galérie (ul #gallery). Ako vidíte, galéria sa nám zúžila na jeden stĺpec. Je to preto, pretože zoznamu stačí aj takáto šírka, aby všetko zobrazil. My chceme, aby zaberal celú šírku, takže mu nastavíme sto percentntú šírku. Pridajte pravidlo inlin-block aj pre druhý zoznam.
Zobrazte sa teraz nad jednotlivé elementy v nástrojoch vývojára a uvidíte, koľko miesta zaberajú a aké sú ich okraje. Teraz by už mali obidva zoznamy zaberať takú plochu, akú chceme. Okrem toho je možné nastaviť stránkovanie okraje zhora aj zdola, aby nebolo nalepené na galériu a na spodný okraj obsahu stránky. Kód by mal vyzerať teda takto:
fotogaleria.php (len zmeny):
<div id="gallery-content" class="main-content right">
global.css (len zmeny):
#gallery{
display: inline-block;
width: 100%;
list-style-type: none;
margin: 0;
padding: 0;
}
…
/**********PAGINATION***********/
#gallery-content{
text-align: center;
}
ul.pagination {
display: inline-block;
padding: 0;
margin: 10px 0px 20px 0px;
}
Ako je vidieť, všetko už vyzerá tak ako má. Táto hodnota má viacero výhod, dostaneme sa k nim však neskôr, odteraz ju ale v takýchto prípadoch budeme používať. Poďme si ešte na záver tejto kapitoly spraviť jednu vec. Pri miniatúrach vo fotogalérii sa zvykne na stav hover nejaky zvýrazniť, že je možné na miniatúru kliknúť a zobraziť tak jej detail (zväčšeninu). Môžeme to spraviť pomocou vlastnosti border alebo by sme mohli zväčšiť priestor okolo obrázka a nastaviť pozadie. My si teda určíme jednoduchý border, ktorý spolu s kurzorom prsta mal tvoriť jasný znak toho, že sa dá na obrázok kliknúť.
Musíme zvážiť ale jednu vec. Ak si spomeniete, zobrazovanie troch miniatúr v jednom riadku v galérii máme presne vyrátané na jeden pixel. Ak by sme pridali border odkazu (a:hover), zväčšilo by to jeho rozmer a tak by nám ostatné fotky odskočili do nového riadku, pretože by na ne neostalo miesto. Práve preto použijeme namiesto vlastnosti border vlastnosť outline (vonkajšia čiara, vonkajšie orámovanie), ktorá je podobná ako border. Jej hlavná výhoda je ale v tom, že spraví síce rám okolo elementu, ale nemá vplyv na jeho konečnú veľkosť. Táto vlastnosť dáva hranicu ešte za border, čiže ak by sme mali aj border aj outline, od vnútra elementu by bola najrpv border, ktorá sa ráta do rozmerov a následne outline, ktorá sa neráta. A presne to v tomto momente potrebujeme, po prejední myšou ponad fotku sa nám okolo miniatúry spraví rám a náš dizajn to nerozhodí:
global.css (len zmeny):
#gallery A:HOVER{
outline: 2px solid #7d8079;
}