Dnia Tue, 27 Dec 2011 08:46:43 -0800 (PST), HARY napisał(a):

> Co to jest "odległość od górnej krawędzi komórki do tekstu"? Do
> którego miejsca tekstu? Linii bazowej? Górnej krawędzi /selection/?
> Linii wyznaczonej przez górne "pałki" wielkich liter? Czy może
> kreseczki nad Ź, Ć? Jeszcze czegoś innego?

To pytanie powinno być skierowane do twórców przeglądarek. Nie zastanawiam
się nad takimi drobiazgami lecz korzystam z wyrównania w pionie. Czemu
zadajesz mi to pytanie? Moją intecją nie jest napisanie nowej przeglądarki.

> Określ *konkretnie* gdzie jest górna i dolna krawędź wiersza tekstu,
> to będziemy mogli mówić o jego środku, a następnie centrowaniu.

A czy nie prościej byłoby gdybyś otworzył sobie mój przykład w
przeglądarce:

<div style="display: table-cell; height:400px; vertical-align:middle;
background-color:#009900">to jest tekkst<br>
druga linia tekstu</div>

i sobie pomierzył jak to się renderuje? Pewnie okaże się, że IE robi to
inaczej niż Mozilla itp. Jednakże wydaje mi się to dyskusją odbiegającą od
tematu. Centrowanie w pionie elementów nie-blokowych jest faktem więc nie
masz po co udowadniać, że nie ma ono podstaw bytu przecież :-)

Ja chciałbym tylko dowiedzieć się czy da się je przeprowadzić wyłącznie w
obrębie table-cell bo takie ograniczenie wydaje mi się nieuzasadnione.

do góry

On 27 Gru, 19:32, Marek <p...@s...com> wrote:
> Dnia Tue, 27 Dec 2011 08:46:43 -0800 (PST), HARY napisał(a):
> > Co to jest "odległość od górnej krawędzi komórki do tekstu"? Do
> > którego miejsca tekstu? Linii bazowej? Górnej krawędzi /selection/?
> > Linii wyznaczonej przez górne "pałki" wielkich liter? Czy może
> > kreseczki nad Ź, Ć? Jeszcze czegoś innego?
> To pytanie powinno być skierowane do twórców przeglądarek. Nie zastanawiam
> się nad takimi drobiazgami lecz korzystam z wyrównania w pionie. Czemu
> zadajesz mi to pytanie?

1. Pytasz o wyśrodkowanie anonimowej zawartości.

2. Zapytany, co przez to rozumiesz, odpowiadasz, że to pytanie do
kogoś innego.

Podstawowa zasada: "żeby o czymś mówić, trzeba to zdefiniować".

> A czy nie prościej byłoby gdybyś otworzył sobie mój przykład w
> przeglądarce:

Po co? To nie ja chcę zrobić coś, czego nie potrafię określić.

> i sobie pomierzył jak to się renderuje? Pewnie okaże się, że IE robi to
> inaczej niż Mozilla itp. Jednakże wydaje mi się to dyskusją odbiegającą od
> tematu. Centrowanie w pionie elementów nie-blokowych jest faktem więc nie
> masz po co udowadniać, że nie ma ono podstaw bytu przecież :-)

Elementy "nie-blokowe" można centrować. Ty usiłujesz wycentrować coś,
co nie jest elementem w ogóle.

HARY

do góry

Dnia Wed, 28 Dec 2011 10:20:20 -0800 (PST), HARY napisał(a):

> 1. Pytasz o wyśrodkowanie anonimowej zawartości.
>
> 2. Zapytany, co przez to rozumiesz, odpowiadasz, że to pytanie do
> kogoś innego.
>
> Podstawowa zasada: "żeby o czymś mówić, trzeba to zdefiniować".

To nie tak. Odpowiedziałem Ci na to pytanie podając za wzrór zachowanie się
kodu HTML, który powinien doskonale wyjaśnić kwestię. Prawda? Dociekanie z
kolei w jaki sposób implementują to przeglądarki jest pozbawione celu.
Napisałem, że chcę uzyskać efekt zbliżony do tego co dzieje się w
centrowanej komórce tabeli ale w elemencie, który nie jest komórką tabeli.A
konkretnie spytałem czy to możliwe.

>
>> A czy nie prościej byłoby gdybyś otworzył sobie mój przykład w
>> przeglądarce:
>
> Po co? To nie ja chcę zrobić coś, czego nie potrafię określić.

:-)))))
Ok, wygrałeś. Wkleiłem więc ten kod do strony WWW i zrobiłem screenshota
dokładnie obrazującego czego się spodziewam.

http://img233.imageshack.us/img233/369/przechwytywan
iewhk.jpg

Czy teraz jest ok? :-D

> Elementy "nie-blokowe" można centrować. Ty usiłujesz wycentrować coś,
> co nie jest elementem w ogóle.

No chwila - a jakim elementem jest tekst wewnątrz komórki tabeli? Czy mylę
się nazywając go "żadnym"? Mimo to pozwala się centrować.

W moim przykładzie mamy konkretnie:

<li>tekst wielowierszowy<br>kolejna linia</li>

to nie daje się centrować, a to:

<td>tekst wielowierszowy<br>kolejna linia</td>

jak najbardziej się daje. Czy jest jakakolwiek różnica w zawartości
otaczającego tagu? W którym przypadku fragment "tekst
wielowierszowy<br>kolejna linia" nazywamy elementem nie-blokowym?

Powiadasz też, że element nie-blokowy daje się centrować (w doomyśle: w
obrębie nie-komórki tabeli, bo o tym jest wątek). Jeśli to konieczne mogę
zastosować dodatkowy element <span>. Jak tego dokonać? Tu mamy przykład:

<div style="display: block; height:400px; vertical-align:middle;
background-color:#009900"><span>taki efekt<br>
chcę uzyskać</span></div>

Jak w pionie wycentrować tego spana w czymś co nie jest komórką tabeli?
Pamiętaj, że długość tekstu może stanowić 1 linie, może 2, a może i 3
nawet.

do góry

On 28 Gru, 21:16, Marek <p...@s...com> wrote:
> Dnia Wed, 28 Dec 2011 10:20:20 -0800 (PST), HARY napisał(a):
> > Podstawowa zasada: "żeby o czymś mówić, trzeba to zdefiniować".
> To nie tak. Odpowiedziałem Ci na to pytanie podając za wzrór zachowanie się
> kodu HTML, który powinien doskonale wyjaśnić kwestię. Prawda? Dociekanie z
> kolei w jaki sposób implementują to przeglądarki jest pozbawione celu.

Dlatego cały czas usiłuję powiedzieć: nie należy bronić się przed
dodatkowym elementem w <li>.

Zasada "minimalny HTML" jest chwalebna, sam tak podchodzę, ale nieraz
wpadłem w taką pułapkę, że był "zanadto minimalny", że tak powiem.
Czasem warto dodać jeden element więcej. Wszystko się wtedy upraszcza.

> > Elementy "nie-blokowe" można centrować. Ty usiłujesz wycentrować coś,
> > co nie jest elementem w ogóle.
> No chwila - a jakim elementem jest tekst wewnątrz komórki tabeli? Czy mylę
> się nazywając go "żadnym"? Mimo to pozwala się centrować.

Nie mylisz się. Pozwala się centrować, dopóki nie zapytamy o dokładną
definicję owego centrowania.

> Powiadasz też, że element nie-blokowy daje się centrować (w doomyśle: w
> obrębie nie-komórki tabeli, bo o tym jest wątek). Jeśli to konieczne mogę
> zastosować dodatkowy element <span>. Jak tego dokonać? Tu mamy przykład:

Nie zrozumieliśmy się. Zapewne powinienem napisać precyzyjniej.
Chciałem tylko powiedzieć, że kiedy mamy element, można dokładnie
powiedzieć, co rozumiemy przez centrowanie. A jak go nie ma, to...
"jest to pytanie do twórców przeglądarek", "w przybliżeniu tak,
jak..." itd.

Nie chcę dywagować nad przybliżeniami, bo to jest kryterium uznaniowe.
Jeśli uważasz, że centrowanie "gołego" tekstu w elemencie z
display:table-cell jest wystarczającym przybliżeniem tego, co chcesz
osiągnąć - w porządku.

HARY

do góry

Dnia Thu, 29 Dec 2011 09:33:24 -0800 (PST), HARY napisał(a):

> Dlatego cały czas usiłuję powiedzieć: nie należy bronić się przed
> dodatkowym elementem w <li>.

Jeśli się nie da, to trudno. Chodziło mi o to, że wyrównanie w poziomie
jest faworyzowane z niejasnych przyczyn nad wyrównaniem w pionie. W pozimie
możemy sobie równać 2 bloki a także tekst bez blokowy. W pionie już nie -
jeśli nie stosujemy <td>.

Zobrazuję kodem. Dla tekstu nie będącego blokiem pięknie działa centrowanie
w poziomie:

<p style="text-align:center; width:100px;">pieknie centrowany w poziomie
tekst</p>

A w pionie już nie:

<p style="vertical-align:middle; width:100px; height: 200px">to nie
zadziała</p>

Dla tekstu wsadzonego w blok zadziała w poziomie centraowanie bloku:

<div>
<p style="width:100px; margin-left:auto; margin-right:auto">pięknie
centrowany w poziomie blok</p>
</div>

A to samo lecz w pionie nie zadziała:

<div style="height: 200px">
<p style="margin-top:auto; margin-bottom:auto">pięknie zignorowane
centrowanie w pionie</p>
</div>


> Zasada "minimalny HTML" jest chwalebna, sam tak podchodzę, ale nieraz
> wpadłem w taką pułapkę, że był "zanadto minimalny", że tak powiem.
> Czasem warto dodać jeden element więcej. Wszystko się wtedy upraszcza.

Tak, oczywiście masz rację. Chciałem się tylko upewnić, że nie da się tego
uprościć. A wątpliwoiści moje wzbudza to o czym powyżej napisałem: ta
faworyzacja CSS dla poziomu. Z niewiadomego powodu pion jest gorszy.

>> No chwila - a jakim elementem jest tekst wewnątrz komórki tabeli? Czy mylę
>> się nazywając go "żadnym"? Mimo to pozwala się centrować.
>
> Nie mylisz się. Pozwala się centrować, dopóki nie zapytamy o dokładną
> definicję owego centrowania.

Chyba musisz rozwinąć myśl. Czy nie możemy zastosować definicji centrowania
z CSS dla text-align:center lecz przeniesionej na pion?

>> Powiadasz też, że element nie-blokowy daje się centrować (w doomyśle: w
>> obrębie nie-komórki tabeli, bo o tym jest wątek). Jeśli to konieczne mogę
>> zastosować dodatkowy element <span>. Jak tego dokonać? Tu mamy przykład:
>
> Nie zrozumieliśmy się. Zapewne powinienem napisać precyzyjniej.
> Chciałem tylko powiedzieć, że kiedy mamy element, można dokładnie
> powiedzieć, co rozumiemy przez centrowanie. A jak go nie ma, to...
> "jest to pytanie do twórców przeglądarek", "w przybliżeniu tak,
> jak..." itd.

I o to mi chodziło właśnie.Skoro już ciągniemy tą kwestię to wygląda to
tak, że jeśli tekst nie jest oblany blokiem to tworzy się wokół niego blok
anonimowy, który następnie podlega centrowaniy pionowemu względem
nadrzędnego table-cell. Tzn środki obu elementów pokrywają się.

>
> Nie chcę dywagować nad przybliżeniami, bo to jest kryterium uznaniowe.
> Jeśli uważasz, że centrowanie "gołego" tekstu w elemencie z
> display:table-cell jest wystarczającym przybliżeniem tego, co chcesz
> osiągnąć - w porządku.

Tak, dokładnie mi to wystarczyłoby ... gdyby było wykonalne dla innych
elementów niż table-cell. Element typu table-cell wnosi dodatkową
funkcjonalność, która mi przeszkadza w pewnej realizacji: mianowicie każdy
z tych elementów łączy się w wiersz. Dlatego szukam/szukałem elementy,
który łączyłby się w kolumnę (czyli zwykły blok) i podobnie jak table-cell,
pozwalał na pionowe centrowanie.

do góry

On 29 Gru, 19:44, Marek <p...@s...com> wrote:
> Dnia Thu, 29 Dec 2011 09:33:24 -0800 (PST), HARY napisał(a):
> Jeśli się nie da, to trudno. Chodziło mi o to, że wyrównanie w poziomie
> jest faworyzowane z niejasnych przyczyn nad wyrównaniem w pionie.

Z jak najbardziej jasnych. Historycznych. HTML nie został wymyślony na
potrzeby sklepów ani zajefajnistych prezentacji, tylko dla wygodnego
tworzenia dokumentów z aktywnymi odsyłaczami do innych publikacji.
Dokumenty takie składają się w większości z akapitów, podpunktów i
podobnych elementów ułożonych w porządku "z góry na dół".

Można się najwyżej zastanawiać, dlaczego później, kiedy CSS zaczął być
wreszcie sensownie wspierany, nie poszerzono specyfikacji.

> A to samo lecz w pionie nie zadziała:
> <div style="height: 200px">
> <p style="margin-top:auto; margin-bottom:auto">pięknie zignorowane
> centrowanie w pionie</p>
> </div>

Zajrzyj do specyfikacji np. pod margin (punkt 8.3) i zobacz opis dla
wartości procentowych. Też się można zastanawiać, dlaczego tak
ustalono. Czasem aż się prosi o komentarz z uzasadnieniem...

> >> No chwila - a jakim elementem jest tekst wewnątrz komórki tabeli? Czy mylę
> >> się nazywając go "żadnym"? Mimo to pozwala się centrować.
> > Nie mylisz się. Pozwala się centrować, dopóki nie zapytamy o dokładną
> > definicję owego centrowania.
> Chyba musisz rozwinąć myśl.

To raczej Ty powinieneś cofnąć się w górę wątku. Tylko co pytałem,
gdzie są granice anonimowej zawartości. Nie umiałeś odpowiedzieć, a
bez ich określenia nie można mówić o dokładnym centrowaniu.

> Czy nie możemy zastosować definicji centrowania
> z CSS dla text-align:center lecz przeniesionej na pion?

Nie możemy. Ale jeśli uważasz inaczej, to proszę bardzo, podaj
dokładną definicję.

> I o to mi chodziło właśnie.Skoro już ciągniemy tą kwestię to wygląda to
> tak, że jeśli tekst nie jest oblany blokiem to tworzy się wokół niego blok
> anonimowy, który następnie podlega centrowaniy pionowemu względem
> nadrzędnego table-cell. Tzn środki obu elementów pokrywają się.

Jak wyżej: podaj dokładnie, gdzie są granice owego anonimowego bloku.
Wtedy będzie wiadomo, gdzie jest jego środek.

> Tak, dokładnie mi to wystarczyłoby ... gdyby było wykonalne dla innych
> elementów niż table-cell. Element typu table-cell wnosi dodatkową
> funkcjonalność, która mi przeszkadza w pewnej realizacji: mianowicie każdy
> z tych elementów łączy się w wiersz. Dlatego szukam/szukałem elementy,
> który łączyłby się w kolumnę (czyli zwykły blok) i podobnie jak table-cell,
> pozwalał na pionowe centrowanie.

Nie wiem, czy to "height:100%" jest potrzebne, wymyślam na bieżąco:

<ul style="display:table;width:10em;">
<li style="display:table-row; height:4em;"><div style="display:table-
cell; height:100%">
<li ...

HARY

do góry

Dnia Thu, 29 Dec 2011 12:27:43 -0800 (PST), HARY napisał(a):

> Można się najwyżej zastanawiać, dlaczego później, kiedy CSS zaczął być
> wreszcie sensownie wspierany, nie poszerzono specyfikacji.

No więc właśnie. CSS3 zdecydowanie żegna się z pierwotnym postrzeganiem
celu dla jakiego powstał HTML. CSS2 też ma już sporo atrybutów służących
budowaniu interaktywnych "aplikacji" zamiast zaledwie strukturalnych
dokumentów. Tak więc powoływanie się na zaszłości historyczne jest już
przereklamowane.

>
> Zajrzyj do specyfikacji np. pod margin (punkt 8.3) i zobacz opis dla
> wartości procentowych. Też się można zastanawiać, dlaczego tak
> ustalono. Czasem aż się prosi o komentarz z uzasadnieniem...

Czy ja dobrze wnioskuję, że procentowe marginesy górne i dolne zależą od
szerokości????

>> Czy nie możemy zastosować definicji centrowania
>> z CSS dla text-align:center lecz przeniesionej na pion?
>
> Nie możemy. Ale jeśli uważasz inaczej, to proszę bardzo, podaj
> dokładną definicję.

No to właśnie poniżej cytujesz moją dokładną definicję :-)

>> I o to mi chodziło właśnie.Skoro już ciągniemy tą kwestię to wygląda to
>> tak, że jeśli tekst nie jest oblany blokiem to tworzy się wokół niego blok
>> anonimowy, który następnie podlega centrowaniy pionowemu względem
>> nadrzędnego table-cell. Tzn środki obu elementów pokrywają się.
>
> Jak wyżej: podaj dokładnie, gdzie są granice owego anonimowego bloku.
> Wtedy będzie wiadomo, gdzie jest jego środek.

Granice pionowe są takie jak granice przy poziomym dopasowaniu bloku do
zawartości. Czyli ostatni piksel zawartości wyznacza je najprawdopodobniej.
Nie zastanawiałem się nad tym, nie siedziałem z lupą przy monitorze tylko
używałem. Tak jak benzynę do baku leję - nie myślę o tym jak kto wydobywał
ropę, gdzie ją przetwarzano, jakie numery seryjne miał wagon transportujący
ją, jak mierzy się oktany w niej zawarte i czy to co wlewam ma 95 oktanów a
może 94.99? A jeśli ma 94.99 to czy dojadę na niej do celu tak samo szybko
jak na 95? :-D Po co rozważać takie niuanse? Po co rozmyślać o pikselu
jednym w tą czy w tamtą? Pewnie to ktoś już zdefiniował skoro centrowanie i
w pionie i w poziomie JEST FAKTEM. Chyba nie zaprzeczysz, że w TD da się
wycentrować się zawartość tekstową w pionie? Po co mam się zastanawiać jak
jest ona zrealizowana na poziomie piksela skoro ktoś już to zaimplementował
w przeglądarce a ja chcę jedynie w innym znaczniku niż TD też ją
zastosować. Kompletnie nie rozumiem Twoich nacisków na to abym ja zgadywał
definicję tego co producenci przeglądarek mają w wtytycznych i stosują od
lat.

>
> Nie wiem, czy to "height:100%" jest potrzebne, wymyślam na bieżąco:
>
> <ul style="display:table;width:10em;">
> <li style="display:table-row; height:4em;"><div style="display:table-
> cell; height:100%">
> <li ...
>

Ja to teraz realizuję:

<div class="row">
<div class="cell">tutaj mój tekst</div>
</div>

<div class="row">
<div class="cell">tutaj mój tekst</div>
</div>

<div class="row">
<div class="cell">tutaj mój tekst</div>
</div>

....

Gdzie:

row {
display: table-row;
}

.cell {
display: table-cell;
height: 50px;
vertical-align: middle;
}

Klasa row używana jest jako wymuszenie bloku na elemencie z cell. Logika
nakazuje, że blokiem może być zwykły DIV bez klasy. Jednakże zwykły div o
narzuconej wysokości nie wiadomo dlaczego nie potrafi wycentrować swojej
zawartości a DIV z table-cell - już tak, ale wtedy klei się jeden do
drugiego w poziomie - czego nie chcę uzyskać.

Dużo lepiej wyglądałby kod:

<div>mój tekst</div>

Gdzie:

div {
height:50px;
vertical-align: middle;
}

do góry

Marek <p...@s...com> napisał(a):
>
> Dużo lepiej wyglądałby kod:
>
> <div>mĂłj tekst</div>
>
> Gdzie:
>
> div {
> height:50px;
> vertical-align: middle;
> }
>

A co powiesz na to:

<div style="position:absolute; top:0px; left:0px;
width:300px; height:300px:
text-align:center;
->padding:200 200 200 200;
border:3px solid red;">

div...<br>
div... aaaaaaaaaaaaaaaaaaa<br>
bbbb</div>

Andrzej.


--
Wysłano z serwisu Usenet w portalu Gazeta.pl -> http://www.gazeta.pl/usenet/

do góry

Dnia Fri, 30 Dec 2011 08:12:30 +0000 (UTC), NKAB - napisał(a):

> Marek <p...@s...com> napisał(a):
>>
>> Dużo lepiej wyglądałby kod:
>>
>> <div>mĂłj tekst</div>
>>
>> Gdzie:
>>
>> div {
>> height:50px;
>> vertical-align: middle;
>> }
>>
>
> A co powiesz na to:
>
> <div style="position:absolute; top:0px; left:0px;
> width:300px; height:300px:
> text-align:center;
> ->padding:200 200 200 200;
> border:3px solid red;">
>
> div...<br>
> div... aaaaaaaaaaaaaaaaaaa<br>
> bbbb</div>
>
> Andrzej.

Po poprawieniu baru błędów otrzymałem tekst centrowany w poziomie a w
pionie oddalony od górnej krawędzi o 200 pikseli. Absolutnienie jest
centrowany w pionie jeśli o to Ci chodzi. Prosty test: dopisz parę linijek
tekstu i zauważ, że górny wiersz cały czas jest w tym samym miejscu.

do góry

Dnia Fri, 30 Dec 2011 10:15:21 +0100, Marek napisał(a):

*miało być "absolutnie nie jest"

do góry