tutorial
HTML/CSS/JQuery technikák
Összegyűjtöttem néhány jól használható design technikát, amelyekhez HTML/CSS/JQuery technikákat lehet használni. Tanulás és a lehetőséges megismerése szempontjából is hasznos átnézni őket.
- A hozzászóláshoz regisztráció és belépés szükséges
Hasznos CSS HTML trükk tartalom középre igazítására
Ez igazából nem haladó HTML, de nem is kezdő, szóval gondoltam, ide rakom. Egy egyszerű kis trükkről van szó, amely segítségével egy oldalt a képernyő közepére lehet igazítani, méghozzá nemcsak vízszintesen (azt tudjuk, hogy az align="center"-rel kell), hanem függőlegesen is. Lehet, hogy volt már olyan designod, ami mondjuk iframes, szóval a magassága nem változik, és azt szeretted volna, hogy teljesen középen jelenjen meg. Ilyenkor valószínűleg pár üres bekezdést raktál a design fölé, de ez abszolut nem praktikus, mert egyrészt minden böngésző mást mutat, és különböző felbontással is máshogy jelenik meg... így lehet, hogy az egyik látogatónak lecsúszik a látható részről a design, és görgetnie kell, a másiknak meg túl felül jelenik meg, és nem teljesen középen. Egy egész egyszerű módszerrel ki lehet küszöbölni ezt a problémát.
A folyamat
Azt ugye tudjuk, hogyan kell vízszintesen középre állítani mondjuk egy táblázatot. Viszont emlékezz vissza, a HTML tutorialoknál elmagyaráztam, hogy egy táblázat celláján belül a függőleges igazítást is be lehet állítani. Csupán annyit kell csinálnod, hogy kreálsz egy egycellás táblázatot, aminek nincs kerete, se háttere (szóval teljesen láthatatlan), és a vertical-align-t middle-re állítod. Ezen a cellán belül lesz majd a tartalom (szóval a design, vagy kép, vagy bármi), és teljesen középre lesz igazítva minden irányból. Hogy biztos megjelenjen mindenhol, ezt CSS-ben állítjuk be. Figyeld ezt a kódot:
**TARTALOM HELYE**
Na de ezzel egy baj van: a táblázatok height attribútumát néhány esetben nem fogadják el a böngészők, még akkor sem, ha CSS-ben van megadva, mint a fenti példában. Egy rövid kódot be kell még illeszteni a CSS-ben, hogy működjön ez a trükk:
html,body{
margin:0;
height:100%;
border:none;
}
Ennyi, a tartalmat pedig a kódban jelölt helyre illeszd be. Remélem, félig-meddig érthető ez a módszer... Számomra nagyon hasznos, hisz kisebb oldalaknál (pl. egy fanlistingnél) sokszor megéri az iframe-s design, vagy akár egy belépő képet is szépen középre lehet igazítani így. Sok sikert, remélem hasznát veszitek ennek is!
- A hozzászóláshoz regisztráció és belépés szükséges
