eGospodarka.pl
eGospodarka.pl poleca

eGospodarka.plGrupypl.comp.wwwHTML - funkcjonalność znaczników...
Ilość wypowiedzi w tym wątku: 29

  • 11. Data: 2012-01-07 09:18:10
    Temat: Re: HTML - funkcjonalność znaczników...
    Od: Artur Muszyński <a...@u...wytnijto.com.pl>

    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


  • 12. Data: 2012-01-07 09:18:26
    Temat: Re: HTML - funkcjonalność znaczników...
    Od: Marek <p...@s...com>

    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.


  • 13. Data: 2012-01-07 10:41:31
    Temat: Re: HTML - funkcjonalność znaczników...
    Od: Marek <p...@s...com>

    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?


  • 14. Data: 2012-01-07 14:04:18
    Temat: Re: HTML - funkcjonalność znaczników...
    Od: porneL <n...@p...net>

    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


  • 15. Data: 2012-01-07 14:10:48
    Temat: Re: HTML - funkcjonalność znaczników...
    Od: porneL <n...@p...net>

    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


  • 16. Data: 2012-01-07 17:40:44
    Temat: Re: HTML - funkcjonalność znaczników...
    Od: Marek <p...@s...com>

    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ń?


  • 17. Data: 2012-01-07 18:05:53
    Temat: Re: HTML - funkcjonalność znaczników...
    Od: Marek <p...@s...com>

    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.


  • 18. Data: 2012-01-07 18:29:21
    Temat: Re: HTML - funkcjonalność znaczników...
    Od: Mirosław Zalewski <miniopl@CUT_THIS.gmail.com>

    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


  • 19. Data: 2012-01-07 19:52:50
    Temat: Re: HTML - funkcjonalność znaczników...
    Od: Tomasz Sowa <t...@t...NOSMAP.org>

    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


  • 20. Data: 2012-01-08 02:37:57
    Temat: Re: HTML - funkcjonalność znaczników...
    Od: porneL <n...@p...net>

    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

strony : 1 . [ 2 ] . 3


Szukaj w grupach

Szukaj w grupach

Eksperci egospodarka.pl

1 1 1

Wpisz nazwę miasta, dla którego chcesz znaleźć jednostkę ZUS.

Wzory dokumentów

Bezpłatne wzory dokumentów i formularzy.
Wyszukaj i pobierz za darmo: