W dniu 2012-01-06 17:57, Marek pisze:
>> Żądamy gwarantowanego odstępu od góry i od dołu niezależnie od tego, z
>> jakimi elementami P sąsiaduje. Lepiej widać to na przykładzie Hx. Z
>> reguły definiujesz bardzo duży odstęp od góry i sporo mniejszy od dołu.
>
> Zgadza się. I to też powstaje mega-problem gdyż wskutek collapsing margins
> odstęp nad znacznikiem P przechodzi nad znacznik H i opuszcza go w dół.
> Zmienia on więc swoją pozycję w zależności od treści strony pod nim.

W HTML najlepiej się w nim pisze dokumentację techniczną programów, bo
do tego powstał. Mimo wysiłków podejmowanych w kierunku zwiększenia
palety zastosowań, do ideału mu bardzo daleko i nawet nie wiem, czy to
powinno być celem.
Chciałbyś mieć kontrolę nad położeniem elementów, jak dajmy na to w SVG,
ale HTML nie jest do obrazków, tylko dokumentów, więc CSS skupia się
głównie na typografii.

artur

do góry

Dnia Fri, 06 Jan 2012 22:10:32 -0000, porneL napisał(a):

>> Dlaczego podwójne? Pod P i pod LI? To masz na myśli? Bo nad elementami
>> zerujemy je.Jeśli są one niepożądane (czyli mają wygladać inaczej) to da
>> się to ostylować odpowiednio. Do tego właśnie stylowanie służy :-)
>> Nieprawdaż ? :)
>
> Nie wydaje mi się, żeby celem CSS było wymaganie nadawania stylów każdej
> kombinacji elementów.

Chyba nie rozumiemy się:

p, ul, ol, dl, h1, h2 {
margin-top: 0px;
margin-bottom: 15px;
}

Nie ma tu żadnej kombinacji elementów.

Jeśli z jakiegoś powodu chcemy aby któryć z elementów wyglądał inaczej
wewnątrz innego to dopiero wtedy tworzymy taką kombinację. Nie zależy to
już od tego czy godzimy się na collapsing czy nie. Jeżeli chcesz aby pod P
było 100px jeśli jest on umieszczony w LI to telepatycznie przeglądarka o
tym się nie dowie. Trzeba to napisać przecież w CSS :-)

>> Dzięki wyłączaniu efektu collapsingu takie zmiany dokonuję bez
>> zastanawiania się bo wiem, że nic się nie rozpadnie.
>
> Wygląda mi na to, że jak chcesz konkretny odstęp w wewnątrz konkretnego
> elementu, to powinieneś użyć padding od początku. Możesz też dać #kontener
>>:first-child {margin-top:0 !important;} jak nie chcesz
> marginesów-niespodzianek.

Oczywiście masz rację, ale po co sobie komplikować skoro 3 linijki stylu
takiego jak wyżej to załatwią?

>
>> Ale wtedy masz linię przez podzieloną grafikę.
>
> Jaką podzieloną grafikę? Netscape 4 już nikt nie używa.

<div style="background-image: url(pol_obrazka.jpg)">
<div style="background-image: url(drugie_pol_obrazka.jpg); border-top: 1px
solid #FFF">

Jeśli ten border jest po to aby przerwać collapsing, to obrazek zostanie
podzielony na dwie części z białą linią pomiędzy nimi.


> Poza tym jak ci pasuje dawanie margin-top:-15px do kompensowania braku
> zapadania się marginesów, to nie powinno cię ruszać margin-top:-1px dla
> ukrycia padding-top:1px.

Nie do końca bo i background z powyższego przykładu musiałbym przesuwać o
1px aby nie powstały zniekształcenia. Jedna sekcja stylu zwalnia mnie z
konieczności takich kombinacji. Różnica podejścia miedzy naszym podejściem
do stylowania polega na tym, że wolisz stosować:

p {
margin-top: 10px;
margin-bottom: 20px;
}

a ja:

p {
margin-top: 0px;
margin-bottom: 30px;
}

co daje ten sam skutek a potem nie wożę się z rozpadającą się grafiką gdy
margines górny powędruje gdzieś do nadrzędnego elementu. Gdyby jeszcze
przepadał, to pół biedy ale wyskoczy Ci on w przypadkowym miejscu jeśli
wcześniej nie napotka na blokadę w postaci borderu, paddingu itp. sztuczek,
które - jak wspomniałem - rozwalać mogą grafikę tła.

do góry

Dnia Sat, 07 Jan 2012 10:18:10 +0100, Artur Muszyński napisał(a):

> W HTML najlepiej się w nim pisze dokumentację techniczną programów, bo
> do tego powstał.

Oj, to już odległa przeszłość :-) Dawno HTML opuścił mury CERN :-) Od tego
czasu bardzo ewaluował. Przypuszczam, że collapsing margins to jakaś
zaszłość.

> Mimo wysiłków podejmowanych w kierunku zwiększenia
> palety zastosowań, do ideału mu bardzo daleko i nawet nie wiem, czy to
> powinno być celem.
> Chciałbyś mieć kontrolę nad położeniem elementów, jak dajmy na to w SVG,
> ale HTML nie jest do obrazków, tylko dokumentów, więc CSS skupia się
> głównie na typografii.

CSS3 i HTML5 bardzo multimedialne i bardzo strukturalne stają się. Nawet
wzięto pod uwagę istnienie potrzeby tworzenia aplikacji webowych. Wydaje mi
się to właściwy kierunek rozwoju. Pojęcie dokumentu w dzisiejszych czasach
to nie tylko czarny tekst w Timesie na białym tle. Praktycznie zawsze już
towarzyszy temu szata graficzna i choćby drobne elementy interakcji. Nawet
strona W3C to wykorzystuje. SVG jest tylko obrazkiem. Google nie zobaczą go
jako tekst i nie zindeksują. Nigdy wiec nie będzie nadawał się do tworzenia
stron (dokumentów) WWW lecz do ich ozdabiania i wprowadzania użytecznych
elementów, trudnych do osiągnięcia lub niemożliwych w HTMLu. To HTML zawsze
będzie go osadzał a nie odwrotnie. Tak więc to HTML musi dawać możliwości
tworzenia layoutów aplikacyjnych.

A tak na marginesie: czy przy drukowaniu SVG zachowuje się to jak wektor?

do góry

On Sat, 07 Jan 2012 10:41:31 -0000, Marek <p...@s...com> wrote:

> A tak na marginesie: czy przy drukowaniu SVG zachowuje się to jak wektor?

Tak.

--
regards, porneL

do góry

On Sat, 07 Jan 2012 09:18:26 -0000, Marek <p...@s...com> wrote:

>> Nie wydaje mi się, żeby celem CSS było wymaganie nadawania stylów każdej
>> kombinacji elementów.
>
> Chyba nie rozumiemy się:
>
> p, ul, ol, dl, h1, h2 {
> margin-top: 0px;
> margin-bottom: 15px;
> }
>
> Nie ma tu żadnej kombinacji elementów.

Jest:

<ul>
<li><p>
</ul>

Daje 30px margin bottom bez zapadania, 15px z zapadaniem.

Jeżeli odstęp 2×15px jest pożądany, to powinieneś używać padding-bottom
zamiast margin.

>> Jaką podzieloną grafikę? Netscape 4 już nikt nie używa.
>
> <div style="background-image: url(pol_obrazka.jpg)">
> <div style="background-image: url(drugie_pol_obrazka.jpg); border-top:
> 1px solid #FFF">
>
> Jeśli ten border jest po to aby przerwać collapsing, to obrazek zostanie
> podzielony na dwie części z białą linią pomiędzy nimi.

No to nie dziel obrazka. Przez to tylko spowalniasz jego ładowanie (na
łączach szerokopasmowych wręcz podwajasz czas ładowania).

Poza tym border-top:1px solid transparent; albo padding-top:1px; +
margin-top:-1px usuwa efekt.

--
regards, porneL

do góry

Dnia Sat, 07 Jan 2012 14:04:18 -0000, porneL napisał(a):

> On Sat, 07 Jan 2012 10:41:31 -0000, Marek <p...@s...com> wrote:
>
>> A tak na marginesie: czy przy drukowaniu SVG zachowuje się to jak wektor?
>
> Tak.

Dzięki, szkoda, że nadal popularny IE8 tego nie obsługoje. Koncepcja SVG
jest bardzo interesująca. W wielu przypadkach mogłaby wyprzeć SWFy. Akurat
z kimś poruszałem temat SVG w kontekscie braku supportu SWFów przez wiele
urządzeń mobilnych. Ponoć Apple wypiął się i będzie się wypinał na SWFy.
Czy masz jakieś informacje na temat zamiarów producentów urządzeń mobilnych
co do obsługi SVG? Czy to jest/będzie kompatybilny format dla tych
urządzeń?

do góry

Dnia Sat, 07 Jan 2012 14:10:48 -0000, porneL napisał(a):

> On Sat, 07 Jan 2012 09:18:26 -0000, Marek <p...@s...com> wrote:
>
>>> Nie wydaje mi się, żeby celem CSS było wymaganie nadawania stylów każdej
>>> kombinacji elementów.
>>
>> Chyba nie rozumiemy się:
>>
>> p, ul, ol, dl, h1, h2 {
>> margin-top: 0px;
>> margin-bottom: 15px;
>> }
>>
>> Nie ma tu żadnej kombinacji elementów.
>
> Jest:
>
> <ul>
> <li><p>
> </ul>
>
> Daje 30px margin bottom bez zapadania, 15px z zapadaniem.

Ok, ale z zapadaniem ten margines gdzieś sobie powędruje i wyświetli się w
innym miejscu, prawda? Przypomnę kod jaki prezentowałem już:

<h1>....
<p>...

Margines wypłynie nad h1. Więc co wtedy?
1. musisz dostawiać style blokujące wędrówkę marginesu w górę kodu.
2. Analizować kod pod tym względem przy najdrobnieszych poprawkach = kupa
straconego czasu. O tym niżej.

Wtedy rozwali nam inny fragment strony a tak przynajmniej mam to zjawisko
lokalnym. Zdarzało mi się luż szukać przyczyny "dziwnego" odstępu mimo iż
nie było go zdefiniowanego w CSS/HTML. Parę znaczników dalej znalazł się
winowajca bo akurat redaktor CMS wprowadził <p> do treści. No i godzina z
dnia pracy uciekła zanim się połapałem w czym rzecz.

>> <div style="background-image: url(pol_obrazka.jpg)">
>> <div style="background-image: url(drugie_pol_obrazka.jpg); border-top:
>> 1px solid #FFF">
>>
>> Jeśli ten border jest po to aby przerwać collapsing, to obrazek zostanie
>> podzielony na dwie części z białą linią pomiędzy nimi.
>
> No to nie dziel obrazka. Przez to tylko spowalniasz jego ładowanie (na
> łączach szerokopasmowych wręcz podwajasz czas ładowania).

Owszem, ale nie da się w wielu przypadkach nie dzielić obrazka. To był
tylko trywialny przykład obrazujący kwestię.
Mało tego: zdarzało mi się, że trzecia część trego obrazka stanowiła treść
SWFa. Takie są realia: dostajesz projekt i go robisz. Gdy projekt jest
portalem - wtedy minimalizujesz transfery. W przeciwnym razie nie ma o co
kopii kruszyć.

> Poza tym border-top:1px solid transparent; albo padding-top:1px; +
> margin-top:-1px usuwa efekt.

Border transparent da Ci przejrzystą linię więc nie załatwi sprawy. Wiem,
że dorzucając padding a potem podsuwając marginesem można to "naprawić" ale
po co się tak szamotać? Im więcej kodu tym mniej czytelny staje się kod i
tym łatwiej o pomyłki. Zawsze będą jakieś poprawki i na prawdę dużo
bezpieczniej jest tworzyć tak kod, że jeśli zamierzasz coś zmienić w
konkretnym miejscu strony to koncentrujesz się tylko nad tym miejscem. W
collapsing margins muszisz zastanawiać się czy nie przytrafi się gdzieś
dalej w kodzie jakaś sytuacja, która rozwali resztę strony poprzez
bąbelkowanie marginesu. Musisz weryfikować czy zostały gdzieś dalej w
kodzie pułapki utworzone na to. Analizujesz kupę kodu zamiast skupić się na
jednym fragmencie.

do góry

sobota, 7 stycznia 2012 10:18 wielka mądrość na czytelników pl.comp.www
spłynęła, gdy tako rzekł(a) Artur Muszyński:

> więc CSS skupia się głównie na typografii.

Nawiasem mówiąc, chętnie bym zobaczył edytor tekstu w którym za typografię
odpowiadałby wyłącznie CSS (pewnie rozszerzony o kilka właściwości).
Szczególnie interesujące by były możliwości wykorzystania selektorów
oferowanych przez CSS3. Banalny przykład: usunięcie wcięcia pierwszego
wierszu w akapicie po nagłówku:

p { text-indent: 1.5em; }
h1 + p, h2 + p, h3 + p { text-indent: 0; }

W takim Wordzie czy Writerze trzeba robić osobny styl dla pierwszego akapitu
i dbać o to, aby występował on zawsze tylko i wyłącznie po nagłówku.
--
Niżej podpisany, zamieszkały w http://minio.xt.pl ,
Mirosław Zalewski

do góry

Dnia Sat, 7 Jan 2012 19:05:53 +0100, Marek napisał(a):

> <h1>....
> <p>...
>
> Margines wypłynie nad h1. Więc co wtedy?

overflow: hidden dla kontenera który zawiera to h1

--
Tomek

do góry

On Sat, 07 Jan 2012 18:05:53 -0000, Marek <p...@s...com> wrote:

> Ok, ale z zapadaniem ten margines gdzieś sobie powędruje i wyświetli się
> w
> innym miejscu, prawda? Przypomnę kod jaki prezentowałem już:
>
> <h1>....
> <p>...
>
> Margines wypłynie nad h1.

Nie. Zapadnie się dolny margines h1 z górnym p, czyli odstęp między
obiektami będzie max(p margin-top, h1 margin-bottom).

Zapewne chodzi ci o kontenery:

<div><div><div><h1>

Jak divy nie mają border/padding/overflow, to będą otaczały treść <h1>, a
nie jego margines.

> Wtedy rozwali nam inny fragment strony a tak przynajmniej mam to zjawisko
> lokalnym. Zdarzało mi się luż szukać przyczyny "dziwnego" odstępu mimo iż
> nie było go zdefiniowanego w CSS/HTML. Parę znaczników dalej znalazł się
> winowajca bo akurat redaktor CMS wprowadził <p> do treści. No i godzina z
> dnia pracy uciekła zanim się połapałem w czym rzecz.

Zapada się max 1 odstęp, więc nie musisz daleko szukać - do najbliższego
elementu z widoczną treścią/obramowaniem.

> Border transparent da Ci przejrzystą linię więc nie załatwi sprawy. Wiem,
> że dorzucając padding a potem podsuwając marginesem można to "naprawić"
> ale po co się tak szamotać?

Żeby się szamotać od czasu do czasu, a nie z każdym odstępem i każdym
zagnieżdżonym elementem, który powoduje zwielokrotnienie odstępu.

> Im więcej kodu tym mniej czytelny staje się kod i
> tym łatwiej o pomyłki.

I dlatego CSS załatwia za ciebie odstępy w tak dużej liczbie przypadków,
że nawet nie zdajesz sobie z tego sprawy.

Zrób sobie box model wordowy:

* {margin-top:0 !important; margin-bottom:0 !important;}

i używaj tylko i wyłącznie padding i border-top: transparent do robienia
odstępów. Nic się nie zapadnie i zobaczysz, jak ci tego brakuje.

--
regards, porneL

do góry