Witam,

Chciałbymwyrównać w pionie tekst wewnątrz bloku. Czy tylko display:
table-cell do tego celu sie nadaje? Oto konstrukcja:

<ul class="kolumnaButtonów">
<li>tekst wielowierszowy<br>kolejna linia</li>
<li>tekst wielowierszowy<br>kolejna linia</li>
<li>tekst wielowierszowy<br>kolejna linia</li>
</ul>

Lista pełni rolę kolumny o pewnej szerokości (np. 150px) a elementy <li>
będą działać jak przyciski o wysokości 50ox. Chciałbym aby teksty (1 - 3
linie) centrowały się w tych blokach. Wolałbym uniknąć wstawiania do środka
<li> dodatkowych tagów - jeśli się da. Problem w tym, że jeśli każdy <li>
ma być w innej linii, to powinien być on typu display: table-row. Z kolei
aby moż nbyło tekst wycentrować to pewnie będzie trzeba umieścić go w <div
style="display: table-cell; vertical-allign: middle">tu tekst</div>

Czy da się to prościej osiągnąć?

Przy okazji: czy display: table-cell musi być koniecznie w innym elemencie
typu display:table? Czy może w prawidłowy sposób funkcjonować samodzielnie?

Czy element table-row może mieć tekst zamiast innego elementu/ów typu
table-cell?

do góry

On 21 Gru, 16:10, Marek <p...@s...com> wrote:
> Chciałbymwyrównać w pionie tekst wewnątrz bloku. Czy tylko display:
> table-cell do tego celu sie nadaje? Oto konstrukcja:
> <ul class="kolumnaButtonów">
> <li>tekst wielowierszowy<br>kolejna linia</li>
> <li>tekst wielowierszowy<br>kolejna linia</li>
> <li>tekst wielowierszowy<br>kolejna linia</li>
> </ul>
> Lista pełni rolę kolumny o pewnej szerokości (np. 150px) a elementy <li>
> będą działać jak przyciski o wysokości 50ox.

Prostokąty o ustalonej wysokości zawierające tekst, to nie jest dobry
pomysł. Jak sobie powiększę tekst, żeby cokolwiek przeczytać, to
zawartość z nich wyłazi i zakrywa mi tekst poniżej albo jest ucinana.

> Chciałbym aby teksty (1 - 3
> linie) centrowały się w tych blokach. Wolałbym uniknąć wstawiania do środka
> <li> dodatkowych tagów - jeśli się da.

Co będziesz wtedy centrował, jak nie będzie elementu do centrowania?

> Problem w tym, że jeśli każdy <li>
> ma być w innej linii, to powinien być on typu display: table-row. Z kolei
> aby moż nbyło tekst wycentrować to pewnie będzie trzeba umieścić go w <div
> style="display: table-cell; vertical-allign: middle">tu tekst</div>
> Czy da się to prościej osiągnąć?

Centrujesz A względem B. Dwa elementy są do tego w sam raz.

> Przy okazji: czy display: table-cell musi być koniecznie w innym elemencie
> typu display:table? Czy może w prawidłowy sposób funkcjonować samodzielnie?

Brakujące elementy tabel (table, table-row) przeglądarka ma obowiązek
"w rozumie" dodać i działać tak, jakby były obecne.

HARY

do góry

Dnia Wed, 21 Dec 2011 23:28:42 -0800 (PST), HARY napisał(a):

> Prostokąty o ustalonej wysokości zawierające tekst, to nie jest dobry
> pomysł. Jak sobie powiększę tekst, żeby cokolwiek przeczytać, to
> zawartość z nich wyłazi i zakrywa mi tekst poniżej albo jest ucinana.

Jeśli masz na myśli powiększanie teksty jako powiększenie strony WWW w
przeglądarce, to nie ma problemu. Prostokąt wtedy też się powiększy. Jeśli
chcesz powiększyć sobie sam tekst a resztę strony zostawić niezmienną - to
musisz liczyć się z tym, że zacznie to fatalnie wyglądać. Nie widzę więc
problemu.

>
>> Chciałbym aby teksty (1 - 3
>> linie) centrowały się w tych blokach. Wolałbym uniknąć wstawiania do środka
>> <li> dodatkowych tagów - jeśli się da.
>
> Co będziesz wtedy centrował, jak nie będzie elementu do centrowania?

Co masz na myśli? Zawartość LI ma się centrować w pionie. Analogicznie jak
to można w komórce tabeli zrobić poprzez vertical-allign:middle.

> Centrujesz A względem B. Dwa elementy są do tego w sam raz.

No dobrze. Zwróć jednak uwagę, że w komórce tabeli B nie musi istnieć aby
zawartość uległa centrowaniu. Jeśli nie da się tego osiągnąć poza komórką
tabeli to dorobę ten element B.

>
> Brakujące elementy tabel (table, table-row) przeglądarka ma obowiązek
> "w rozumie" dodać i działać tak, jakby były obecne.

Czyli gdy ustawię sobie parę elementów typu table-cell to będą one do
siebie przylegać ciasno bez tendencji do spadania jeden pod drugi nawet
jeśli szerokość otaczającego elementu będzie mniejsza?

Czy gdzieś to jest formalnie ustandaryzowane? Na W3C nie potrafiłem tego
się doszukać.

do góry

On 22 Gru, 22:59, Marek <p...@s...com> wrote:
> Dnia Wed, 21 Dec 2011 23:28:42 -0800 (PST), HARY napisał(a):
> > Prostokąty o ustalonej wysokości zawierające tekst, to nie jest dobry
> > pomysł. Jak sobie powiększę tekst, żeby cokolwiek przeczytać, to
> > zawartość z nich wyłazi i zakrywa mi tekst poniżej albo jest ucinana.
> Jeśli masz na myśli powiększanie teksty jako powiększenie strony WWW w
> przeglądarce, to nie ma problemu. Prostokąt wtedy też się powiększy. Jeśli
> chcesz powiększyć sobie sam tekst a resztę strony zostawić niezmienną - to
> musisz liczyć się z tym, że zacznie to fatalnie wyglądać. Nie widzę więc
> problemu.

Nie widzisz, bo odpowiadasz na coś, czego nie napisałem. Kiedy piszę
"powiększenie tekstu" mam na myśli powiększenie tekstu. Nie strony. To
ostatnie uważam za zły pomysł.

> >> Chciałbym aby teksty (1 - 3
> >> linie) centrowały się w tych blokach. Wolałbym uniknąć wstawiania do środka
> >> <li> dodatkowych tagów - jeśli się da.
> > Co będziesz wtedy centrował, jak nie będzie elementu do centrowania?
> Co masz na myśli? Zawartość LI ma się centrować w pionie. Analogicznie jak
> to można w komórce tabeli zrobić poprzez vertical-allign:middle.

Za W3C:
"middle
The center of the cell is aligned with the center of the rows it
spans."

Wiem, gdzie jest "center of the cell". Pokaż mi teraz, gdzie W3C
definiuje, gdzie jest "center of the rows".

> > Centrujesz A względem B. Dwa elementy są do tego w sam raz.
> No dobrze. Zwróć jednak uwagę, że w komórce tabeli B nie musi istnieć aby
> zawartość uległa centrowaniu. Jeśli nie da się tego osiągnąć poza komórką
> tabeli to dorobę ten element B.

Dla mnie centrowanie jest wtedy, kiedy środek B pokrywa się ze
środkiem A. A jeśli nie ma B?

Zdefiniuj centrowanie dla przypadku, kiedy nie ma B.

> > Brakujące elementy tabel (table, table-row) przeglądarka ma obowiązek
> > "w rozumie" dodać i działać tak, jakby były obecne.
> Czyli gdy ustawię sobie parę elementów typu table-cell to będą one do
> siebie przylegać ciasno bez tendencji do spadania jeden pod drugi nawet
> jeśli szerokość otaczającego elementu będzie mniejsza?

Szerokość przy display:table-cell i width:auto określana jest na
zasadzie "shrink-to-fit", tak jak elementów float z width:auto. (Jeśli
się mylę, niechaj ktoś poprawi). Od tego miejsca możesz już sam
udzielić sobie odpowiedzi na pytanie.

> Czy gdzieś to jest formalnie ustandaryzowane? Na W3C nie potrafiłem tego
> się doszukać.

Właściwości tabel opisane są w rozdziale... o tabelach:

http://www.w3.org/TR/CSS21/tables.html
17.2.1 Anonymous table objects

"Any table element will automatically generate necessary anonymous
table objects around itself, consisting of at least three nested
objects corresponding to a 'table'/'inline-table' element, a 'table-
row' element, and a 'table-cell' element."

i dalej, konkretniej:

"For each 'table-cell' box C in a sequence of consecutive internal
table and 'table-caption' siblings, if C's parent is not a 'table-row'
then generate an anonymous 'table-row' box around C and all
consecutive siblings of C that are 'table-cell' boxes."

HARY

do góry

On Wed, 21 Dec 2011 23:28:42 -0800 (PST), HARY wrote:

> On 21 Gru, 16:10, Marek <p...@s...com> wrote:
>> Chciałbymwyrównać w pionie tekst wewnątrz bloku. Czy tylko display:
>> table-cell do tego celu sie nadaje? Oto konstrukcja:
>> <ul class="kolumnaButtonów">
>> <li>tekst wielowierszowy<br>kolejna linia</li>
>> <li>tekst wielowierszowy<br>kolejna linia</li>
>> <li>tekst wielowierszowy<br>kolejna linia</li>
>> </ul>
>> Lista pełni rolę kolumny o pewnej szerokości (np. 150px) a elementy <li>
>> będą działać jak przyciski o wysokości 50ox.
>
> Prostokąty o ustalonej wysokości zawierające tekst, to nie jest dobry
> pomysł. Jak sobie powiększę tekst, żeby cokolwiek przeczytać, to
> zawartość z nich wyłazi i zakrywa mi tekst poniżej albo jest ucinana.

A ktokolwiek tak jeszcze robi? Chyba wszystkie przeglądarki mają już
powiększanie proporcjonalne.

[...]


--
M.G.

do góry

Dnia Thu, 22 Dec 2011 20:35:38 -0800 (PST), HARY napisał(a):

> On 22 Gru, 22:59, Marek <p...@s...com> wrote:
>> Dnia Wed, 21 Dec 2011 23:28:42 -0800 (PST), HARY napisał(a):
>>> Prostokąty o ustalonej wysokości zawierające tekst, to nie jest dobry
>>> pomysł. Jak sobie powiększę tekst, żeby cokolwiek przeczytać, to
>>> zawartość z nich wyłazi i zakrywa mi tekst poniżej albo jest ucinana.
>> Jeśli masz na myśli powiększanie teksty jako powiększenie strony WWW w
>> przeglądarce, to nie ma problemu. Prostokąt wtedy też się powiększy. Jeśli
>> chcesz powiększyć sobie sam tekst a resztę strony zostawić niezmienną - to
>> musisz liczyć się z tym, że zacznie to fatalnie wyglądać. Nie widzę więc
>> problemu.
>
> Nie widzisz, bo odpowiadasz na coś, czego nie napisałem. Kiedy piszę
> "powiększenie tekstu" mam na myśli powiększenie tekstu. Nie strony. To
> ostatnie uważam za zły pomysł.

Chwila - chyba czegoś nie doczytałeś. Drugie zdanie z mojego tekstu opisuje
drugą interpretację Twoich słów "Jeśli chcesz powiększyć sobie sam tekst a
resztę strony zostawić niezmienną (...)"

Więc jeszcze raz napiszę to samo: nie widzę problemu w tym, że jeśli ktoś
powiększa sobie niektóre elementy strony a pozostawia inne nie zmienione,
to musi liczyć się z tym, że strona straci fason. To logiczne. Gdy
powiększysz sobie np. Flasha na stronie (bo czasem tak można) a reszty nie
zmienisz też będzie to źle wyglądało. To są prawa fizyki :-D

> Za W3C:
> "middle
> The center of the cell is aligned with the center of the rows it
> spans."

To jest jasne.

>
> Wiem, gdzie jest "center of the cell". Pokaż mi teraz, gdzie W3C
> definiuje, gdzie jest "center of the rows".

Nie bardzo widzę do czego zmierzasz, ale odpowiem. Wysokość wiersza to
wysokość najwyższej komórki przed wyrównaniem jej do wysokości wiersza.
Jego środek to wysokość/2. Nawet jeśli to nie jest zdefiniowane formalnie,
to wydaje się to być oczywistym.

> Dla mnie centrowanie jest wtedy, kiedy środek B pokrywa się ze
> środkiem A. A jeśli nie ma B?
>
> Zdefiniuj centrowanie dla przypadku, kiedy nie ma B.

Gdy nie ma B - czyli mamy sobie np. zawartość komórki tabeli w postaci
czystego tekstu oraz komórka ma narzuconą wysokość większą od zawartości,
to odległość od górnej krawędzi komórki do tekstu ma być taka sama jak
odległość dolnej krawędzi tekstu od dolnej krawędzi komórki.

Tu masz ppraktyczny przykład centrowania gdy nie ma B:

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

Kolor zielony pokazuje jakiej faktycznej wysokości jest element A. Nawet
jeśli uznasz, że ten element jest elementem B bo jest wewnątrz anonimowego
wiersza, to i tak wypełnia on 100% jego wysokości więc nie ma mowy o
centrowaniu względem wiersza.

>> Czyli gdy ustawię sobie parę elementów typu table-cell to będą one do
>> siebie przylegać ciasno bez tendencji do spadania jeden pod drugi nawet
>> jeśli szerokość otaczającego elementu będzie mniejsza?
>
> Szerokość przy display:table-cell i width:auto określana jest na
> zasadzie "shrink-to-fit", tak jak elementów float z width:auto. (Jeśli
> się mylę, niechaj ktoś poprawi). Od tego miejsca możesz już sam
> udzielić sobie odpowiedzi na pytanie.

Nie chodzi mi o to co dzieje się z zawartością komórki tylko to co dzieje
się z samą komórką. Ale odpowiedź uzyskałem poniżej - gdzie wspomniałeś o
obiektach anonimowych. Wszystko stało się jasne.

> 17.2.1 Anonymous table objects
>
> "Any table element will automatically generate necessary anonymous
> table objects around itself, consisting of at least three nested
> objects corresponding to a 'table'/'inline-table' element, a 'table-
> row' element, and a 'table-cell' element." (...)

ahhhh... teraz rozumiem jak to działa. Nie bardzo rozumiełem ideę
anonimowych obiektów bo i nie wczytywałem się w to uważnie... Mea culpa.

Czy z tego można wywnioskować również coś takiego jak niżej? Jeśli zrobimy
sobie konstrukcję:

<div style="display:table">tekst</div>

To przeglądarka rozwinie to sobie do postaci:

<div style="display:table">
<div style="display:table-row">
<div style="display:table-cell">
tekst
</div>
</div>
</div>

Czy tak ?

do góry

Dnia Fri, 23 Dec 2011 11:05:47 +0100, M.G. napisał(a):


> A ktokolwiek tak jeszcze robi? Chyba wszystkie przeglądarki mają już
> powiększanie proporcjonalne.

Nie ma co tematu drążyć - wydaje mi się sztuczny. Być może HARY ma taką
unikalną potrzebę - ma prawo mieć.

do góry

W dniu 2011-12-23 11:05, M.G. pisze:
> On Wed, 21 Dec 2011 23:28:42 -0800 (PST), HARY wrote:
>
>> Prostokąty o ustalonej wysokości zawierające tekst, to nie jest dobry
>> pomysł. Jak sobie powiększę tekst, żeby cokolwiek przeczytać, to
>> zawartość z nich wyłazi i zakrywa mi tekst poniżej albo jest ucinana.
>
> A ktokolwiek tak jeszcze robi?

Każdy, kto wie jak to robić i nie lubi font-size:10px ;)

> Chyba wszystkie przeglądarki mają już
> powiększanie proporcjonalne.

Które przydaje się tylko przy prezentacjach na dużym ekranie.


--
message[autor="PablO"]::after {
content:"Pozdrawiam";
}

do góry

On Mon, 26 Dec 2011 17:36:46 +0100, Paweł Piskorz wrote:

[...]

>> Chyba wszystkie przeglądarki mają już
>> powiększanie proporcjonalne.
>
> Które przydaje się tylko przy prezentacjach na dużym ekranie.

Ja wolę proporcjonalne :-)


--
M.G.

do góry

On 23 Gru, 11:40, Marek <p...@s...com> wrote:
> Dnia Thu, 22 Dec 2011 20:35:38 -0800 (PST), HARY napisał(a):
> > Dla mnie centrowanie jest wtedy, kiedy środek B pokrywa się ze
> > środkiem A. A jeśli nie ma B?
> > Zdefiniuj centrowanie dla przypadku, kiedy nie ma B.
> Gdy nie ma B - czyli mamy sobie np. zawartość komórki tabeli w postaci
> czystego tekstu oraz komórka ma narzuconą wysokość większą od zawartości,
> to odległość od górnej krawędzi komórki do tekstu ma być taka sama jak
> odległość dolnej krawędzi tekstu od dolnej krawędzi komórki.

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?

Gdyby W3C tak precyzyjnie podawało wymiary, jak to robisz, do dziś
dyskutowalibyśmy, czy width i height liczyć do krawędzi ramki,
padding, czy może marginesu... i czy czasem IE6 nie miał racji ze
swoją interpretacją.

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.

HARY

do góry