HR i CSS3 - Grupy dyskusyjne w eGospodarka.pl

eGospodarka.pl › Grupy › pl.comp.www › HR i CSS3

« poprzedni wątek

następny wątek »

Ilość wypowiedzi w tym wątku: 19

11. Data: 2012-02-07 23:31:30
Temat: Re: HR i CSS3
Od: Marek <p...@s...com>

Dnia Tue, 07 Feb 2012 23:44:03 +0100, Artur Muszyński napisał(a):

> W dniu 2012-02-07 19:37, Marek pisze:
>> <head>
>> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
>> <style type="text/css">
>> body {
>> margin: 0;
>> padding: 0;
>> }
>> hr {
>> margin-top: 50px;
>> }
>> </style>
>> </head>
>>
>> <body>
>> <div style="background-color:#F00">ten DIV jest odsunięty od następnego
>> gdyż 'bąbelkował' górny margines HR</div>
>
> Też masz się czym stresować.
>
>> <div style="background-color:#009900">
>
> <div style="background-color:#009900;overflow:auto">
>
> U mnie (Fx) działa :-)
>
> artur
>
>> <hr>
>> bla bla bla
>> </div>
>> </body>
>> </html>

Taaa.. sęk w tym, ze zastosowanie jest mocno ograniczone - powstają kolejne
problemy. Oto przykład.

<div style="background-color:#009900; overflow:auto; position:relative">
<hr>
bla bla bla
<div style="background-color:#009999; position: absolute; bottom:-100px;
left:0; width: 100px; height:30px">aaa</div>
</div>

W Divie z overflow:auto powstaną paski przewijania. Szkoda, że nie działa
overflow:visible. To rozwiązałoby problem. Często, a nawet zazwyczaj
stosuję pozycjonowanie absolutne wewnątrz. :-(

[ pokaż wiadomość z nagłówkami ]

do góry
12. Data: 2012-02-08 21:00:31
Temat: Re: HR i CSS3
Od: Artur Muszyński <a...@u...wytnijto.com.pl>

W dniu 2012-02-08 00:31, Marek pisze:
>
> <div style="background-color:#009900; overflow:auto; position:relative">
> <hr>
> bla bla bla
> <div style="background-color:#009999; position: absolute; bottom:-100px;
> left:0; width: 100px; height:30px">aaa</div>
> </div>
>
> W Divie z overflow:auto powstaną paski przewijania. Szkoda, że nie działa
> overflow:visible. To rozwiązałoby problem. Często, a nawet zazwyczaj
> stosuję pozycjonowanie absolutne wewnątrz. :-(

Nie wymyślaj problemów. Pisałeś, że wewnątrz diva jest kontent
użytkownika, a teraz wyjeżdżasz z absolute.

artur

[ pokaż wiadomość z nagłówkami ]

do góry
13. Data: 2012-02-08 21:21:03
Temat: Re: HR i CSS3
Od: Marek <p...@s...com>

Dnia Wed, 08 Feb 2012 22:00:31 +0100, Artur Muszyński napisał(a):

> Nie wymyślaj problemów. Pisałeś, że wewnątrz diva jest kontent
> użytkownika, a teraz wyjeżdżasz z absolute.

1. Chyba nie wczytałeś się w moją konwersację z NotBear. Napisałem w niej,
że podawanie jakiegokolwiek przykładu mija się z celem gdyż kombinacji
wystąpienia HR w kodzie może być nieskończenie wiele a ja szukam
rozwiązania uniwersalnego, które moim zdaniem mogło by istnieć gdyby nie
collapsing margins. NotBear uparł się abym wymyślił mimo wszystko
jakikolwiek przykład przykład więc wymyśliłem.

2. Co do mojego "wyjechania" teraz to po pierwsze uważam, że przytaczanie
ogromnej ilości kodu HTML i CSS rzeczywistej strony zniechęciłoby do
analizowania. Więc okroiłem zagadnienie do minimum. Po drugie absoluty
stosuję nagminnie więc jest to autentyczny przypadek. Po trzecie
zaproponowałeś overflow a ja skomentowałem, że to zły pomysł uzasadniając
tym, że nie powinno ograniczać się funkcjonalności elementu overflow'em
tylko po to aby HR w nim "działał" gdyż odcina się w ten sposób drogę do
rozwoju projektu.

[ pokaż wiadomość z nagłówkami ]

do góry
14. Data: 2012-02-10 00:03:13
Temat: Re: HR i CSS3
Od: NotBear <p...@i...pl>

W dniu 2012-02-07 19:37, Marek pisze:
>> HR nature ma blokowa, wiec dlaczego go nie wlaczyc do grona "itepow"?
> Dlatego ponieważ HR służy do rozdzielania graficznego elementów treści.

Pytalem o nature elementu, nie jego zastosowanie.

Swoją drogą, piszesz "rozdzielanie", a w przykladzie nizej stawiasz HR
na poczatku bloku. Jaki to ma sens?

> Co mi z elementu, w którym nie da się ustawić obu odległości (od góry i od
> dołu)?

Ależ da się. Margin top/bottom działa.

> Collapsing przenika przez elementy po to aby wypłynąć w "przypadkowym"
> miejscu layoutu. Nagle ni z gruszki ni z pietruszki dostajesz odstęp miedzy
> elementami, które nigdy go wcześniej nie miały zanim ktoś gdzieś dalej w
> kodzie zastosował HR. Powtórzę ten przypadek poniżej.

Nieprzypadkowym. Sa zasady, ktore to okreslaja.

Ale wrocmy do pierwotnego problemu. Moim zdaniem zamiast tworzyc wyjatki
dla roznistych elementow, wystarczy "zatamowac" raz a dobrze collapsing
tam gdzie jest zbedny.

> Ok, oto obiecany wcześniej przypadek (w uproszczeniu). W praktyce ten HR
> może wystąpić w różnych miejscach layoutu. Sam layout zawiera więcej
> podobnych sekcji. Mało tego - mogą powstać nowe i w założeniu HR w nich nie
> ma dokonywać destrukcji. Jak tego dokonać inaczej niż Cezary radził? Nie
> wiem.

Zaleznie od mozliwosci i zamierzen (dlatego prosilem o pokazanie tej
problematycznej strony, bo kazda metoda ma jakies uwarunkowania) mozna
zastosowac na rodzicu:
- border
- padding
- wspominane juz kombinacje border lub padding z ujemnym marginesem
- display:inline-block
- float:left/right
- overflow:hidden/auto

- #rodzic:before{content: "."; display:block; visibility:hidden;
height:0;} (inspirowane clearfixem)

> Pewnie zaproponujesz rozwiązanie aby w drugim DIVie ustawić
> padding górny na 1 px i przesunąc DIVa o 1px po to aby zniwelować ten
> niepotrzebny padding. Zapomnijmy o takim rozwiązaniu - jest chore. Powstaną
> tylko kolejne problemy.

Konkretnie jakie?

--
NotBear

[ pokaż wiadomość z nagłówkami ]

do góry
15. Data: 2012-02-10 00:06:39
Temat: Re: HR i CSS3
Od: NotBear <p...@i...pl>

W dniu 2012-02-08 00:31, Marek pisze:
> <div style="background-color:#009900; overflow:auto; position:relative">
[...]
> W Divie z overflow:auto powstaną paski przewijania.

Nie powstana, bo nie ma okreslonego rozmiaru. I w tym wypadku takie
rozwiazanie spelni Twoje wymagania.

--
NotBear

[ pokaż wiadomość z nagłówkami ]

do góry
16. Data: 2012-02-10 09:26:58
Temat: Re: HR i CSS3
Od: Marek <p...@s...com>

Dnia Fri, 10 Feb 2012 01:06:39 +0100, NotBear napisał(a):

> W dniu 2012-02-08 00:31, Marek pisze:
>> <div style="background-color:#009900; overflow:auto; position:relative">
> [...]
>> W Divie z overflow:auto powstaną paski przewijania.
>
> Nie powstana, bo nie ma okreslonego rozmiaru. I w tym wypadku takie
> rozwiazanie spelni Twoje wymagania.

Kurcze, masz rację! Coś mi się chyba ubzdurało, że IE dorysowywał pusty
pionowy pasek przewijania bez elementów kontrolnych mimo iż tekst mieścił
się w całości. To rozwiązuje mój problem. Dzięki :-)

[ pokaż wiadomość z nagłówkami ]

do góry
17. Data: 2012-02-10 09:56:50
Temat: Re: HR i CSS3
Od: Marek <p...@s...com>

Dnia Fri, 10 Feb 2012 01:03:13 +0100, NotBear napisał(a):

> Pytalem o nature elementu, nie jego zastosowanie.
>
> Swoją drogą, piszesz "rozdzielanie", a w przykladzie nizej stawiasz HR
> na poczatku bloku. Jaki to ma sens?

Ma to zastosowanie gdy np. ten blok zawiera serię przylegających do siebie
przycisków. Chciałbym aby nad nimi był HR i wyglądał tak samo jak w każdej
innej sekcji.

Blok powyżej tego bloku z przyciskami zawiera inną treść. No i powstawał
niepożądany odstęp pomiedzy blokami wskutek collapsingu a raczej nazwałbym
to zjawisko "bąbelkowaniem" a nie "zapadaniem" się marginesów gdyż margines
nie znika lecz przenosi się w górę kodu do innych elementów.

>
>> Co mi z elementu, w którym nie da się ustawić obu odległości (od góry i od
>> dołu)?
>
> Ależ da się. Margin top/bottom działa.

Tyle tylko, że margin top znika przy HR a pojawia się ponad DIVem. Wiec w
tym konkretnym przypadku nie działa a nawet więcej: psuje layout w innym
miejscu strony WWW. Dlatego napisałem, że nie działa.

>> Collapsing przenika przez elementy po to aby wypłynąć w "przypadkowym"
>> miejscu layoutu. Nagle ni z gruszki ni z pietruszki dostajesz odstęp miedzy
>> elementami, które nigdy go wcześniej nie miały zanim ktoś gdzieś dalej w
>> kodzie zastosował HR. Powtórzę ten przypadek poniżej.
>
> Nieprzypadkowym. Sa zasady, ktore to okreslaja.

I o nich mówię, krytycznie zresztą. Ale to tylko dygresja.

> Ale wrocmy do pierwotnego problemu. Moim zdaniem zamiast tworzyc wyjatki
> dla roznistych elementow, wystarczy "zatamowac" raz a dobrze collapsing
> tam gdzie jest zbedny.

Tak, ideologicznie masz rację. Jednakże ja nie potrafię tego dokonać.
Rozważmy konkretny przypadek jaki zaprezentowałem. Bez overflow:hidden
layout strony będzie się rozpadał. Jak w takich warunkach można zapanować
nad collapsingiem?

Problem dla mnie jest istotny gdyż nierzadko stosuję HR zaraz po DIV z
powyższego powodu. Po drugie nie mogę wykluczyć sytuacji, w której w CMS
redaktor treści strony nie uczyni tego samego. Dlatego muszę "zabezpieczyć"
się jakoś przed destrukcją layoutu wskutek użycia HR.

> Zaleznie od mozliwosci i zamierzen (dlatego prosilem o pokazanie tej
> problematycznej strony, bo kazda metoda ma jakies uwarunkowania) mozna
> zastosowac na rodzicu:
> - border

Ale wtedy powstaje linia przerwy w layoucie i aby się jej pozbyć to na
poziomie potomka należy podsuwać o 1 px do góry. Pisałem o tym wcześniej.
Owszem, można tego dokonać jednakże trzeba te "łatki" stosować na parach
elementów rodzic/potomek w wielu miejscach kodu gdzie HR może potencjalnie
wystąpić a to czasem jest trudne do przewidzenia. Dlatego rozwiązanie z
overflow: auto wydaje mi się bezpieczniejszym (mniejsze ryzyko
niedopatrzenia).

> - padding
> - wspominane juz kombinacje border lub padding z ujemnym marginesem

Temat j/w. Ingerencja potrzebna jest wtedy w identyczny sposób.

> - display:inline-block

A to może faktycznie być użyteczne czasem.

>
> - #rodzic:before{content: "."; display:block; visibility:hidden;
> height:0;} (inspirowane clearfixem)

A to jest super. Rozumiem, że content nie musi kropki zawierać?

>> Pewnie zaproponujesz rozwiązanie aby w drugim DIVie ustawić
>> padding górny na 1 px i przesunąc DIVa o 1px po to aby zniwelować ten
>> niepotrzebny padding. Zapomnijmy o takim rozwiązaniu - jest chore. Powstaną
>> tylko kolejne problemy.
>
> Konkretnie jakie?

Opisałem powyżej w komentarzu do "border". Idealnym rozwiązaniem byłoby
ostylowanie HR, ale jeśli się nie da, to mogę to zrobić na poziomie
rodzica.

[ pokaż wiadomość z nagłówkami ]

do góry
18. Data: 2012-02-10 20:18:54
Temat: Re: HR i CSS3
Od: Paweł Piskorz <n...@p...nie?>

W dniu 2012-02-10 10:56, Marek pisze:
> Dnia Fri, 10 Feb 2012 01:03:13 +0100, NotBear napisał(a):
>
>> - #rodzic:before{content: "."; display:block; visibility:hidden;
>> height:0;} (inspirowane clearfixem)
>
> A to jest super. Rozumiem, że content nie musi kropki zawierać?

Nie musi, wystarczy samo content:"";

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

[ pokaż wiadomość z nagłówkami ]

do góry
19. Data: 2012-02-10 20:44:56
Temat: Re: HR i CSS3
Od: Cezary Tomczyk <c...@g...pl>

W dniu 2012-02-10 21:18, Paweł Piskorz pisze:
> W dniu 2012-02-10 10:56, Marek pisze:
>> Dnia Fri, 10 Feb 2012 01:03:13 +0100, NotBear napisał(a):
>>
>>> - #rodzic:before{content: "."; display:block; visibility:hidden;
>>> height:0;} (inspirowane clearfixem)
>>
>> A to jest super. Rozumiem, że content nie musi kropki zawierać?
>
> Nie musi, wystarczy samo content:"";

Ja tam daję spację lub kropkę. Więcej tutaj:

http://perishablepress.com/press/2008/02/05/lessons-
learned-concerning-the-clearfix-css-hack/

--
Cezary Tomczyk
http://www.ctomczyk.pl/

[ pokaż wiadomość z nagłówkami ]

do góry