Konserwatywne numerowanie boksów na nowo
23 maja 2006
W jaki sposób stworzyć na stronie bloki, które będą zawierały automatyczne numerowanie i do tego numerki będą w środku i z prawej strony? Można by użyć generowanej zawartości oraz liczników albo wstawić jakimś skryptem. Co powiecie jednak na rozwiązanie najprostsze - lista numerowana <ol/> oraz trochę CSS:
Działa w Firefoksie 1.5 oraz Internet Explorerze 6. Opera robi mi znowu na złość, podobnie jak wcześniej gdy używałem tylko marginesów. Szkoda. :(
Zaczynamy od podstawowej struktury - lista <ol/>, pozycje <li/> z blokami <div/> w środku. Wszystko pozbawione odstępów, tak na zaś (Explorer…). Po zresetowaniu odstępów i zaaplikowaniu podstawowych stylów określających tekst i kolory - efekt. Numerowanie jest tak duże, ponieważ zwiększyłem font-size dla li i pomniejszyłem dla li div.
Teraz zrobimy coś takiego: pozycje listy przesuniemy w prawo o jakąś wartość (wybrałem 96% żeby zostawić trochę miejsca) a <div/> który jest w niej przesuwamy z powrotem w lewo o tą samą wartość. Ustawiamy pozycję markera listy w środku.
li {position: relative;list-style-position: inside;left: 96%;}li div {position: relative;left: -96%;}
Otrzymujemy już jakiś efekt naszych działań. Bije po oczach pasek przewijania - ponieważ w <li/> jest nadal zarezerwowane miejsce na ten nasz tekst - my go tylko przesunęliśmy. Należy to naprawić przed odpowiedni overflow. Należy też wyrównać zawartość listy z jej markerem (top) oraz zmniejszyć odstępy między pozycjami listy (margines ujemny). Na końcu dodamy odpowiednie dopełnienie z prawej oraz dopełnienie z góry całej listy, żeby nam pierwszej pozycji nie ucięło przez ujemny margines.
ol {overflow: hidden;padding-top: 3em; /* 3 x 100% = 300% font-size dla li = wysokość markera */}li {position: relative;list-style-position: inside;left: 96%;margin: -1em 0 0 0; /* wysokość markera */}li div {position: relative;left: -96%;top: -4em; /* wysokość markera (4 x 25% = 1em) */padding: 1em 4% 1em 0; /* 4% dodane do 96% */}
Dodałem komentarze, żeby było widać, że dobrane wartości nie są z kosmosu - obejrzycie presentation.css aby rozwiać wątpliwości. Pozostaje poprawić całkiem dobrze działającą stronę dla IE. Stosujemy nieśmiertelne komentarze warunkowe, kopiujemy reguły i je zerujemy. Po paru modyfikacjach doszedłem do końcowego efektu.
Nie jest on idealny, ale już mówię czemu - pierwsza linijka tekstu wariowała (i wcale nie przez :first-line), więc ustawiłem pojemnikowi hasLayout (zoom). Przez to marker znajduje się na dole boksu, a nie u góry. Wybór należy do Was. Zaznaczę jeszcze, że prawy padding jest opcjonalny - gdy go nie dodamy tekst znajdzie się nad markerem. W IE overflow nie obcina wystającego markera, więc będzie widać też kropkę. Miłej zabawy z kodem, może uda się Wam poprawić moje rozwiązanie. :)
mcv 7
23 maja 2006, 20:57
Riddle 16
24 maja 2006, 09:59