Strona używa cookies (ciasteczek). Dowiedz się więcej o celu ich używania i zmianach ustawień. Korzystając ze strony wyrażasz zgodę na używanie cookies, zgodnie z aktualnymi ustawieniami przeglądarki.    X

Nie ma rzeczy idealnych - CSS*

*Wpis pisany pod wpływem chwili, a właściwie długich chwil przy pozycjonowaniu elementów strony, stąd jego jakość może być wątpliwa :P

Zanim przejdę do wylewania moich żalu, uprzedzę, że wpis może zawierać błędy merytoryczne. Nie czytałem (wiem, ze powinienem) dokumentacji CSS, więc możliwe, że istnieje logiczne wytłumaczenie każdej z "bolączek". Jeśli tak jest, chętnie przeczytam o tym w komentarzach, bo póki co CSS mnie mocno denerwuje ;) Wpis opieram na CSS 2, ponieważ nie oszukujmy się - zanim będzie można o nim zapomnieć minie jeszcze sporo czasu.

Szlag mnie trafia, jak tylko muszę coś wyśrodkować w pionie.

Czy stosuje się to tak rzadko, żeby pominąć to w języku który ma za zadanie definiować formę strony? Ja się pytam: czemu nie ma czegoś jak vertical-align, ale dla divów? Albo czemu samo vertical-align nie działa dla nich? Wiem, że można kombinować z tabelami w celu wyśrodkowania, ale wg mnie musimy strzelać z armaty do muchy, przez niedopatrzenie twórców css. Skoro można było stworzyć komendę do wyśrodkowania diva w poziomie, to czemu nie można było w pionie?

Ale chwila... wyśrodkowanie w poziomie?

No właśnie... Każdy na ślepo odpowie, że margin: 0 auto; środkuje w poziomie - tylko czy ta komenda powinna do tego służyć? Skoro dla tekstu można ustawić text-align: center, to czemu dla diva nie można align: center? A co, gdy potrzebuję mieć div umieszczony 50px od środka ekranu? Znowu jestem zmuszony wytaczać armaty

Padding

Czy jest na sali ktoś, kto wytłumaczy mi, czemu padding zmienia wymiary diva? Mając box 100x100 i ustawiając mu padding 20, muszę wymiary zmienić na 60x60. Jaki to ma sens? Nie sadzę, żeby to był przypadek, ale nie umiem odnaleźć tu logiki - ktoś jest w stanie mi pomóc?

% - px = error

Problem: Potrzebuję mieć diva, który będzie na pół wysokości ekranu minus 100px. I znów nie mogę zrobić tego prostymi sposobami. Czy nie wygodniej byłoby umożliwić proste działania matematyczne (odejmowanie, dodawanie) w arkuszach? Czy byłoby to trudne w implementacji? Nie wydaje mi się, a ułatwiłoby życie.

Sś to rzeczy proste, wręcz oczywiste, a twórcy css nie wzięli ich pod uwagę... dlaczego? Czy ktokolwiek mógłby mnie oświecić? 

internet inne

Komentarze

0 nowych
GBM MODERATOR BLOGA  20 #1 19.05.2012 17:37

To prawda, CSS potrafi niekiedy mocno wkurzyć :)

pzdr

  #2 19.05.2012 18:25

Wydaje mi się, że wystarczyłoby zrozumieć, do czego są odpowiednie rzeczy.

text-align - sama nazwa mówi o co chodzi, i działa to również w wypadku divów (jest przeznaczony dla elementów blokowych). Centruje zawartość danego elementu, a nie sam element, z tym, że zawartość nie w pełni blokową (zrób 2 divy jeden w drugim, pierwszemu daj text-align:center, drugiemu np. display: inline-block).

vertical-align - ja w wymienionym przypadku stosuję pozycjonowanie absolutne (+ relatywne na div-rodzic), oczywiście o ile nie przeszkadza w czym innym.

padding (i margin też) - to jest logiczne. Podając wymiary, podajesz faktyczny wymiar elementu, ale do tego dochodzą marginesy zewnętrzne (margin) oraz wewnętrzne (padding). Domyślnie ich nie ma, ale skoro używasz, to powinieneś brać pod uwagę licząc wymiary, bo wszystko rozchodzi się o ten obiekt. Te marginesy to nie jest jakaś tajemna przestrzeń wokół nich nienależąca do nikogo :)

gowain   19 #3 19.05.2012 19:11

Oj tam takie "niedoróbki" to mały pryszcz... ciesz się, że już nie musisz robić stron na i :) To były czasy :P A tak serio to jest kilka denerwujących rzeczy w cssie, ale co zrobić - zostają tylko triki i hacki :)

kubut   18 #4 20.05.2012 00:19

@lukasamd - a co gdy potrzebuję diva jako display: block? Nie chodziło mi tutaj o to, żeby text-align centrowało element blokowy, ale czemu nie ma jakiegoś odpowiednika, który centrowałby taki element?
"vertical-align - ja w wymienionym przypadku stosuję pozycjonowanie absolutne (+ relatywne na div-rodzic), oczywiście o ile nie przeszkadza w czym innym."
No właśnie o taka przysłowiową armatę mi chodziło w tekście. Czy tak trudno byłoby ułatwić życie webmasterą i stworzyć w css właściwość centrującą w pionie? Tak po prostu - wpisujesz 1 linijkę i działa.

Co do paddingów i marginów także się nie zgodzę. Załóżmy, że mamy grafikę boxu 100x100 i nadajemy ją divowi o tych wymiarach przez background-image. Teraz nadajemy mu margin i dalej wygląda dobrze. Teraz dodajemy padding i ups - tło zaczyna się dublować. Po co? Moim zdaniem przez padding powinniśmy jedynie zawężać "obszar roboczy" naszego kontenera, a to z kolei nie powinno wpływać na jego wielkość. Nawet zakładając, że ta zmiana rozmiaru jest logiczna (choć moim zdaniem nie jest), to dalej jest niewygodna.

  #5 20.05.2012 10:46

@kubut:
AD1. Możesz dać display: inline-block.

AD2. Wydaje mi się, że to nie takie proste. W przypadku elementów z display:table-cell mamy zachowanie jak w tabelkach, zaś w inline/inline-block jak w wypadku img. Nie zawsze jest jasne, co to jest np. "50%".

AD3. Dla mnie to jest sensowne. Gdyby tło Ci się nie dublowało, to jaka byłaby faktyczna różnica między margin a padding? Tylko to, po której stronie border "by stały"? Wielkość elementu to width + marginesy wewnętrzne + marginesy zewnętrze i jest to sensownie pomyślane, aby nic "nie ginęło".

underface   14 #6 20.05.2012 11:23

co do paddingu to się zgodzę, gdy zaczynałem naukę nie mogłem pojąć jakim cudem margines wewnętrzny 5px potrafi zmienić szerokość 100px o 10, totalnie nie logiczne;p bo powinno odnosić się do szerokości, tak aby mając 100px szerokości i ustawiając padding 5px, szerokość robocza powinna mieć 90 nie zmieniając głównej szerokości

ale namieszałem ;D

kubut   18 #7 20.05.2012 13:54

@lukasamd:
AD1. Możliwe że masz rację, więc nie będę brnął na ślepo, przy najbliższej okazji sprawdzę czy zda to egzamin ;)

AD2. Ale czemu nie zawsze jest jasne? Dla mnie 50% to zawsze środek kontenera-rodzica. O jakich przypadkach mówisz, kiedy jest inaczej?

AD3. Tutaj underface przedstawił mój pogląd, więc bez sensu dublować ;)
"Tylko to, po której stronie border "by stały"?" - dokładnie tak, taka powinna być różnica. Twoim zdaniem nie byłoby to o wiele wygodniejsze? Przydał Ci się kiedyś fakt tego, że padding zmienia rozmiar?

underface   14 #8 20.05.2012 14:08

@kubut
jakiegoś dużego doświadczenia nie mam z robieniem stron, ale zawsze podczas tworzenia czegoś powodowało to straszna frustrację. początkowo z braku doświadczenia nie wiedziałem gdzie leżał błąd. a co do pytania czy mi się przydało to, to nigdy :D chyba, że ktoś lubi problemy i nielogiczne zagadki

  #9 20.05.2012 14:28

@kubut:
"Przydał Ci się kiedyś fakt tego, że padding zmienia rozmiar?"

Owszem, często się przydaje, np. w wypadku linków z obrazkiem będących nie tyle ich częścią, co ozdobą (a które nie są jako img, bo to bez sensu je tak ładować).

kubut   18 #10 20.05.2012 14:45

@lukasamd - więc zwracam honor, mi (i jak widać underface podziela ten pogląd) nie przydało się nigdy, stąd moja frustracja ;)

@underface - rzeczywiście, na początku to był koszmar z tymi paddingami. Teraz jest to dla mnie po prostu denerwujące ;)

hiropter   10 #11 21.05.2012 14:35

Wtrącę się i dodam, że padding, faktycznie robiony jest dziwnie. Mimo iż wszędzie napisane jest iż kolejność jest wg. wzoru: margin > width > padding, to i tak wygląda jak by szerokość była ostatnim elementem... Moim zdaniem (tak jak już autor wpisu napisał) padding powinno zawężać teks do środka, nie zmieniając przy tym rzeczywistej szerokości/wysokości obiektu.

Kintoki   6 #12 21.05.2012 15:13

Co do właściwości padding to jest coś takiego jak "box-sizing: border-box;" dzięki któremu obiekt będzie się zachowywał w sposób "logiczny" :) ale to już jest css3

  #13 21.05.2012 15:22

poczytaj o box-sizing ;)

kadet90   5 #14 21.05.2012 15:27

No no no, uderzyłeś w sedno .. CSS w ogóle jak chodzi o operacje w pionie ssie, nic się nie da zrobić praktycznie bez stosowania jakiś krzywych tricków. Padding: irytujące ale przeżyje, gorzej jak przychodzi pracować z wielkościami procentowymi. Brak modułu matematycznego: porażka nad porażkami, no to chyba tyle ode mnie.

Kintoki   6 #15 21.05.2012 15:50

To wszystko to jeszcze pół biedy najgorzej mnie drażni stylizowanie formularzy... każda przeglądarka inaczej się zachowuje...

MaXDemage   18 #16 21.05.2012 15:54

Ahh...
trochę źle mi się na to patrzy, sorry kubut ;D
Paddingi i width to jest bardzo intuicyjna sytuacja, pod warunkiem, że rozumie się rdzeń CSSa, zamiast go po prostu używać. Szerokość bowiem odnosi się do contentu, stąd dodanie paddingu poszerza zakres a nie jest zawarte w samym contencie. Logiczne. (wydaje mi sie przynajmniej) a tak jak już Kinotoki zauwazył: od dawna wszystkie nowe przeglądarki ładnie wspierają: border-box.

Środkowanie w poziomie wydaje mi się też niezwykle intuicyjne, biorąc pod uwagę że div jest blokiem a nie zwykłym tekstem i musi się jak blok zachowywać. Oczywiście jest to tez po częśc efekt długiej drogi jaką przeszło CSS i że trzeba było często dostosowywać się do zmian trendów.

Poza tym wcale nie trzeba wytaczać armat do lekkich przesunięć. 99% rzeczy w cssie da się zrobić łatwo, tylko trzeba naprawdę w nim dużo siedzieć.

Pytanie odnośnie wyskości diva i odejmowania od niego 100px... jest lekko absurdalne, bo nigdy nie powinieneś mieć takiej sytuacji. Po pierwsze bo albo stosujesz relatywne jednostki, albo stosujesz normalne metryczne. Po drugie w zależności od efektu jesteś to w stanie zrobić na 10 rożnych sposób które implementujesz biorąc pod uwagę otaczające elementy i treść.

Tu pojawia się ciekawy element webdesignu - projektowanie z uwzględnieniem treści faktycznej, o którym często ludzie zapominają.

Ale to może tylko ja, gdzie od wielu, wielu lat pracuje z arkuszami uważam to za normę i niezwykle dobre rozwiązania i w rzeczywistości jest to dziwne.

Jim1961   7 #17 21.05.2012 18:01

CSS jest strasznie prosty i logiczny, tylko trzeba go dobrze poznać. Sam robię stronki od bardzo niedawna, i dopiero tydzień temu wyczytałem jak wyśrodkować treść w poziomie ;) Najgorzej jak się dostanie arkusz po kimś i trzeba coś tam tylko przesunąć, no po prostu znaleźć takiego i udusić gołymi rękoma ... choć pewnie po mnie też tak powiedzą :D
MaXDemage poruszył ważną kwestię. Powinno się zakazać Lorem... przy projektowaniu, i zaczynać projektować dopiero jak się dostanie komplet materiałów. A jeszcze lepiej jak graficy-magicy zrobię sektor na szerokość 2,5 słowa (przedzielone kreską - bo tak z automatu PS robi), a treść ma być w pełni dynamiczna. Potem, zrób coś z tym formatowanie, bo nieładnie wygląda -> :[

kubut   18 #18 21.05.2012 20:07

Cóż, opinie są jak widać podzielone i o ile jestem w stanie założyć, że przez swoją niewiedzę nie dostrzegam logiki, to mimo to dałoby się rozwiązać niektóre rzeczy łatwiej ;)

RONINZGR   4 #19 22.05.2012 08:25

Nic Panowie nie poradzimy w tej kwestii. Jedyne co nam pozostaje to doskonalenie wiedzy, nauka tricków i godne uwagi źródło wiedzy ;) Polecam z gorącym sercem serwis http://css-tricks.com/snippets/ Naprawdę wiele ciekawych rzeczy się dowiemy (nie tylko z CSS'a). Pozdro

  #20 23.05.2012 03:37

Rozwiązanie twoich problemów to zastąpienie CSS czymś takim jak SASS ;]

http://sass-lang.com/

Polecam !

aPoCoMiLogin   8 #21 23.05.2012 15:53

[[AD2. Ale czemu nie zawsze jest jasne? Dla mnie 50% to zawsze środek kontenera-rodzica. O jakich przypadkach mówisz, kiedy jest inaczej? ]]

Każda przeglądarka w pewnym sensie nieco inaczej implementuje css, a zwłaszcza wysokość. W IE wysokość niektórych elementów (komórek tabeli) to jest katastrofa.

css jest banalnie prosty. Jak się robi raz na ruski rok arkusz, to może sprawiać problemy. Jak się trzaśnie średnio jeden dziennie (bywało i 3-4) to css się pisze bez zastanowienia i jedyne co cię później będzie denerwować, to próba dostosowania css do danej przeglądarki. Bo jak już wcześniej wspomniałem, każda implementuje go sobie nieco inaczej..

Podstawowa rzecz: reset wszystkich styli dla każdej przeglądarki: http://meyerweb.com/eric/tools/css/reset/

To jest właśnie najgorsze, każda przeglądarka różnie sobie bloki implementuje, jakieś marginesy wewnętrzne, nagłówki, no bez resetu styli, to można dostać białej gorączki, próbując dostosować stronę dla kilku przeglądarek (w tym badzIEwia).

Wyśrodkować w pionie? Najłatwiej można jak ktoś napisał z użyciem vertical-align dodać elementowi blokowemu inline-block. Aczkolwiek nie jest to rozwiązanie pozbawione wad. Rozwiązań tego problemu jest masę, i wszystko zależy od projektu tak na prawdę.

A gdybyś przeczytał dokumentacje raczej nie miał byś problemu z takim stwierdzeniem dlaczego elementu blokowego nie możesz wycentrować pionowo - bo vertical align centruje tylko elementy widoczne jako inline lub table. I tutaj moim zdaniem wszystkie twoje denerwujące pretensje rozbijają się właśnie o tą niewiedzę.

Później zresztą zobaczysz że denerwujące to jest to, że css różnie działa w różnych przeglądarkach..

kubut   18 #22 24.05.2012 13:54

@aPoCoMiLogin - wiem, ze każda przeglądarka interpretuje css inaczej, ale nie to jest tematem tego wpisu, dlatego też nie pisałem o tym.

"A gdybyś przeczytał dokumentacje raczej nie miał byś problemu z takim stwierdzeniem dlaczego elementu blokowego nie możesz wycentrować pionowo - bo vertical align centruje tylko elementy widoczne jako inline lub table. I tutaj moim zdaniem wszystkie twoje denerwujące pretensje rozbijają się właśnie o tą niewiedzę. "
Właśnie chodzi o to. Czemu nie vertical-align nie centruje innych elementów?