Witam! W tej notce omówię kwestie rozplanowania przestrzeni bloga. Rozpocznę od tego, co trzeba zrobić zanim zaczniemy przestawiać elementy na swojej stronce.
Blogger oferuje niewiele możliwości rozstawiania gadżetów: możemy lawirować nimi jedynie w ramach ustalonych kolumn. Dzięki CSS'owi możemy dać ponieść się fantazji, ustawiając tytuł posta z jego boku lub umieszczając statystykę „przyklejoną” do góry bloga. Co tylko dusza zapragnie! Zanim jednak rozpoczniemy szaleństwa, musimy sprawić, by szablon nie rozjechał się na ekranie u innych. Do tego celu posłuży nam selektor bloga (bez nagłówka i paska nawigacyjnego):
.main-inner {position: absolute}
Dzięki wpisani tej formułki na każdym ekranie blog będzie wyświetlał się w układzie, jaki chcemy. Wyjaśnienie: position jest atrybutem, który odpowiada za umiejscowienie elementu, absolute to informacja, jakiego typu lokalizację chcemy.
Atrybut position odpowiada za ustawienie danego elementu. Przy układaniu elementów używam głównie dwóch określeń; trzecie stosuję jedynie do ustawienia całości stronki, o czym pisałam wcześniej:
fixed – gdy chcę, by element był stale umocowany w danym miejscu na ekranie (nie przesuwał się wraz z blogiem)
relative – gdy element ma być zakotwiczony do miejsca na blogu (przesuwa się wraz z treścią).
absolute – pozycja absolutna.
Ale samo ustalenie rodzaju umiejscowienia elementu wcale nam nie pomoże, prawda? Przydałoby się jeszcze faktycznie gdzieś go ulokować. Do tego posłużą nam atrybuty lokalizacji: top, left, right, bottom. Standardowo używam tylko dwóch pierwszych, gdyż są wystarczające.
Określenia dla atrybutów wyrażamy w pikselach, przy czym mogą to być zarówno wartości dodatnie jak i ujemne.
Przykład: #LinkList1 {position: fixed, top:0px; left:400px}
Wpisując ten kod uzyskamy nieruchomą względem ekranu listę linków, umiejscowioną u góry, w odległości 400px od krawędzi lewej.
Analogicznie do przykładu można dopisać do selektora li, a wtedy przesuwać będą się jedynie same linki, natomiast ramka pozostanie tam, gdzie była.
A co z kształtem naszych elementów? Nie musimy godzić się na aktualne wymiary, jakie ma dany element, a możemy zastosować własne. Jeśli chcemy, by lista stron była węższa/szersza od pozostałych gadżetów itp, musimy napisać to w kodzie. W takim przypadku w wąsach wpisujemy: width – szerokość lub/i height – wysokość. Wyrażamy je w pikselach.
Przykład: #LinkList1 {position: fixed, top:0px; left:400px; height: 30px; width: 200px}
Dodatkowo możemy każdy element odwrócić, używając do tego atrybutu: „transform:rotate”. Bez odstępu, w nawiasie okrągłym za nim wpisujemy odwrócenie w stopniach. Można wpisywać zarówno wartości dodatnie jak i ujemne, co pozwala na odwracanie zgodnie lub niezgodnie z ruchem wskazówek zegara.
Przykład: #LinkList1 {transform:rotate(60deg)}
Przy rozmieszczeniu elementów przydać się również może ustalanie, co na czym ma się znajdować (zachodzące na siebie elementy), choć przydaje się to rzadko – elementy umiejscowione pod spodem zwykle nie działają jak powinny lub wcale. Jeśli jednak zachodzi taka potrzeba, należy użyć atrybutu „z-index” a po dwukropku wpisać cyfrę (dodatnią lub ujemną), która sprosta naszym oczekiwaniom.
Przykład: #LinkList1 {z-index:-1}
Im wyższa wartość liczbowa, tym wyżej nałożony zostanie element. Takie pozycjonowanie wykorzystuję głównie przy nakładaniu na obrazki tekstu/innych obrazków.
Teraz podam przykład, w którym umiejscowię listę stron o szerokości dwustu pikseli na górze bloga, z lewej strony, nieruchomo, by zawsze była widoczna i to pod nią wsuwały się inne elementy, a dodatkowo jeszcze była zorientowana pionowo, nie poziomo.
Przykład: #PageList1 {position: fixed; top: 0px; left: 0px; width: 200px; transform:rotate(90deg); z-index: 10}
Teraz możecie już umiejscowić co, gdzie i jak chcecie!
Apel do czytelników
Staram się opisywać wszystko jak najprościej, jednak wiem, że mogę nie umieć tego przekazać. Piszcie śmiało, jeśli coś jest niejasne, możecie również zadawać pytania, sugerować, jaki instruktaż chcielibyście, itd. Mamy na blogu zakładkę Kontakt, w której każdy może zadać dowolne pytanie, wyrazić opinię, czy cokolwiek. Dodatkowo, jeśli nie chcecie pisać na forum publicznym, możecie pisać na mojego maila (stoneczka.fryteczka@gmail.com). Odpisuję na każdego maila, gdyż chętnie pomagam: czy to w kwestiach CSS'u, czy pisania. I przysięgam: nie gryzę! ;)
Brak komentarzy:
Prześlij komentarz