Mateusz Papiernik Blog - Maticomp - JoggerPL

Michał Moroz | dnia 13 września 2007, o godzinie 20:36:00

Przyda się kiedyś. ;)

line-height i height ma być wysokością obrazka, czy pseudo-kontenera, w którym ten obrazek się będzie znajdować?

Mateusz Papiernik | dnia 13 września 2007, o godzinie 20:37:56

Kontenera, rzecz jasna - obrazek może być dowolny. Często podawany jest patent z line-height i vertical-align wraz ze wzmianką, że obrazki się nie centrują w IE6 - stąd mój post z małym workaroundem na ten temat.

D4rky | dnia 13 września 2007, o godzinie 20:59:51

a od kiedy to IE6 obsluguje inline-block ?
a wrzucanie obrazka zeby centrowac to przezytek z czasow tablekowych.

a, no i "Riddle did it" (vide: Simpon did it) :P

Mateusz Papiernik | dnia 13 września 2007, o godzinie 21:03:49

Nie obsługuje w pełni, ale "In IE/Win the inline-block value of the CSS display property is one of the triggers of hasLayout." - równie dobrze można użyć { zoom: 1; }

Dlaczego centrowanie obrazka jest przeżytkiem z czasów tabelkowych? Masz układ, np. galerię zdjęć, ramki o stałym rozmiarze (np. 200x200) i zadanym tle a w środku obrazki (o nieznanym rozmiarze). Grafik zakłada, że obrazki zawsze mają być na środku. Jaki to ma związek z tabelkami?

a co do Riddla, czytałem jego artykuł o centrowaniu, ale tej konkretnej koncepcji tam nie przyuważyłem :P

D4rky | dnia 13 września 2007, o godzinie 21:07:43

Myslalem ze za pomoca przezroczystego obrazka chcesz centrowac tekst ;)
Ale i tak uzywanie pustych tagow to BARDZO brzydki hack. Tak nie wolno!

Mateusz Papiernik | dnia 13 września 2007, o godzinie 21:10:30

Nie, nie, no bez jaj :D Centrować obrazek w kontenerze. Pusty tag to może i brzydki tag, ale stosunkowo szybki i skuteczny. W wielu przypadkach wolę przymknąć oko na pusty tag, niż robić divitis z dodatkowym kontenerem i centrowaniem w procentach dla IE. Oczywiście - zastosowanie zależy od kontekstu, ale obie metody mają swoje "uroki". ;)

D4rky | dnia 13 września 2007, o godzinie 21:12:39

Mateuszu - a probowales
img { position: relative; top: 50%; margin-top: -100px; } ?

radmen | dnia 13 września 2007, o godzinie 21:20:47

hmm nie jestem pewien, ale vertical-align odnosi się jedynie do elementów, które mają ustawiony display na table-cell..

D4rky | dnia 13 września 2007, o godzinie 21:21:26

radmen - img jest wyjatkiem ;)

radmen | dnia 13 września 2007, o godzinie 21:21:47

ano, może :)

Mateusz Papiernik | dnia 13 września 2007, o godzinie 21:21:49

D4rky: margin-top: -50px; - ale faktycznie, też działa. Metoda riddla, tyle, że dla pojedynczego obrazka można się obyć bez divitis :) Dzięki, faktycznie mi umknęło!

D4rky | dnia 13 września 2007, o godzinie 21:24:23

Mateuszu, ja tak pozycjonuje 90% elementow, ktore maja okreslone wymiary :P W ten sam sposob mozesz centrowac strone jesli chcesz jej dac okreslona ilosc pikseli (zobacz sobie w CSS mojego jogga)

Mateusz Papiernik | dnia 13 września 2007, o godzinie 21:25:35

Wiem, widzę - i właśnie piszę, że nie ma tak różowo, bo Twoja metoda jest zależna od wysokości obrazka. Wartością ujemną dla margin-top musi być połowa wysokości obrazka wszak, a mowa cały czas o dowolnym obrazku w kontenerze o zadanej wielkości.

D4rky | dnia 13 września 2007, o godzinie 21:28:56

Mateuszu - no tutaj juz wiekszy problem, ale i jego mozna ominac bez brzydkich hackow jak twoj. Np za pomoca table-cell i expressions ;)

Mateusz Papiernik | dnia 13 września 2007, o godzinie 21:31:53

Michale - faktycznie, tutaj większy problem. Table-cell to nie IE, a workaround z expressions (jeśli myślimy o tym samym) wymaga użycia JS przezeń włączanego. I znowu - zależnie od kontekstu i zastosowań, _czasem_ ten brudny hack z pustym tagiem może się jednak przydać ;)

Riddle | dnia 13 września 2007, o godzinie 21:52:15

Dobre. Ja bym jednak tego spana nie wsadził w HTML tylko w CSS:

div {
-xp: expression(this.p ? 0 : (this.insertBefore(document.createElement('span'), this.firstChild), this.p = 1))
}

Zastanawiam się czemu tak się dzieje i czy można obejść to bez expressions.

Mateusz Papiernik | dnia 13 września 2007, o godzinie 21:55:23

O, no widzisz - kolejny fajny pomysł. Tylko znowu uzależniony od JS. Ciekawe czy da się to zrobić jeszcze inaczej? Nie do końca jeszcze rozumiem, co dokładnie dla renderingu IE robi dodanie tego span, ważne, że działa. Szkoda tylko, żeby zaśmiecało kod dokumentu, skoro de facto jest to prezentacyjne.

Prędzej się chyba doczekamy niszowości IE6, a IE7 nie ma aż takich problemów ;)

Riddle | dnia 13 września 2007, o godzinie 22:36:09

Tylko, że ta metoda ma jeden drawback, i to dość poważny - jak chcesz mieć więce jak jedną linijkę tekstu to już musisz użyć display: table-cell / vertical-align: middle + expressions. W sumie napisałem kiedyś do tego workaround i działało ślicznie… może znajdę na dysku.

Mateusz Papiernik | dnia 13 września 2007, o godzinie 22:40:30

Jasne - to akurat obejmuje centrowanie pojedynczego obrazka, i tylko tego. Ostatnio czegoś takiego potrzebowałem akurat. Na większe potrzeby korzystam z tego, co napisałeś u siebie na PorV w artykule o centrowaniu.

Witekk | dnia 07 grudnia 2007, o godzinie 01:01:59

dzięki, grzebałem właśnie w poszukiwaniu czegoś i znajdywałem same, jak to opisujesz, "armaty na muchy", a twój kod dla moich potrzeb był akurat :)

reareggegirl//Zle-pisana....=) | dnia 09 lipca 2008, o godzinie 16:58:32

Sliczny Mateusz... OhH....

sasquach | dnia 12 sierpnia 2008, o godzinie 11:18:27

Nadmiarowego spana można też obejść przez komentarz warunkowy.