Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [HTML][CSS] Zła interpretacja listy ze znacznikami HTML
Kshyhoo
post 3.02.2014, 19:30:39
Post #1





Grupa: Opiekunowie
Postów: 3 855
Pomógł: 317
Dołączył: 4.01.2005
Skąd: że
Może ktoś mądrzejszy wytłumaczyć mi, dlaczego wykrzacza się numeracja listy?
http://jsfiddle.net/P5dnr/
Jak widać, numerowanie z licznikiem dodaje nową linię.


--------------------
Jak poprawnie zadać pytanie | Jak poprawnie zatytułować wątek
Najczęstsze błędy | Błędy E_NOTICE | PHP FAQ | FAQ PHPedia | SQL-Injection | Logowanie i sesje | Hashowanie haseł | Server - od czego zacząć ? | Manual PHP
Alternatywne Forum dla Ekspertów
Nie pomagam na PW, nie mam GG
Go to the top of the page
+Quote Post
RiE
post 3.02.2014, 21:05:03
Post #2





Grupa: Zarejestrowani
Postów: 97
Pomógł: 45
Dołączył: 5.05.2010

Ostrzeżenie: (0%)
-----

Za mądrzejszego się nie uważam, ale postaram się wytłumaczyć smile.gif

To nie licznik dodaje nową linię, tylko znacznik p.
Jeżeli usuniesz licznik, ale nie usuniesz :before to dalej tekst przeskoczy do nowej lini.
Przykład: http://jsfiddle.net/P5dnr/10/


:before tworzy pseudo element, który jest pierwszym dzieckiem.
Zatem Twój kod jest równoważny z tym:
[HTML] pobierz, plaintext 
  1. <li><span>Pierwsze dziecko elementu li</span><p>w znacznikach &lt;p&gt;</p></li> // dwie linie
  2. <li><span>Pierwsze dziecko elementu li</span>bez znaczników &lt;p&gt;</li> // jedna linia
[HTML] pobierz, plaintext


Znacznik p domyślnie wyświetla się jako blok(display:block), dlatego przeskakuje do nowej lini.
Rozwiązaniem byłoby nadanie display:inline, albo zmiana znacznika p na jakiś 'inline'.
Go to the top of the page
+Quote Post
Kshyhoo
post 3.02.2014, 21:14:10
Post #3





Grupa: Opiekunowie
Postów: 3 855
Pomógł: 317
Dołączył: 4.01.2005
Skąd: że
No to się już dowiedziałem i kombinowałem a display: inline, ale do tej pory bez rezultatu. Muszę przerobić na coś w stylu klasa.ol klasa li
Znalazłem dwa przykłady, które działają zgodnie z moim zamysłem, czyli po DIV class="tutek" następuje automatyczne numerowanie list bez nadawania odrębnych klas
http://fiddle.jshell.net/Gbf6u/
http://jsfiddle.net/audetwebdesign/wsmnJ/


--------------------
Jak poprawnie zadać pytanie | Jak poprawnie zatytułować wątek
Najczęstsze błędy | Błędy E_NOTICE | PHP FAQ | FAQ PHPedia | SQL-Injection | Logowanie i sesje | Hashowanie haseł | Server - od czego zacząć ? | Manual PHP
Alternatywne Forum dla Ekspertów
Nie pomagam na PW, nie mam GG
Go to the top of the page
+Quote Post
vonski
post 3.02.2014, 21:17:11
Post #4





Grupa: Zarejestrowani
Postów: 292
Pomógł: 89
Dołączył: 27.12.2006
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

A jak zrobisz tak:

[HTML] pobierz, plaintext 
  1. .tutek2 > ol > li:first-child p {
  2.     display:inline-block;
  3. }
[HTML] pobierz, plaintext


to też nie pomaga?


--------------------
Zend Certified Engineer | Microsoft Certified Professional: Programming in HTML5 with JavaScript & CSS3 | Blog
Go to the top of the page
+Quote Post
Kshyhoo
post 3.02.2014, 21:19:06
Post #5





Grupa: Opiekunowie
Postów: 3 855
Pomógł: 317
Dołączył: 4.01.2005
Skąd: że
No właśnie znacznik P jest elementem blokowym.


--------------------
Jak poprawnie zadać pytanie | Jak poprawnie zatytułować wątek
Najczęstsze błędy | Błędy E_NOTICE | PHP FAQ | FAQ PHPedia | SQL-Injection | Logowanie i sesje | Hashowanie haseł | Server - od czego zacząć ? | Manual PHP
Alternatywne Forum dla Ekspertów
Nie pomagam na PW, nie mam GG
Go to the top of the page
+Quote Post
vonski
post 3.02.2014, 21:20:32
Post #6





Grupa: Zarejestrowani
Postów: 292
Pomógł: 89
Dołączył: 27.12.2006
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

No tak, a display:inline-block robi z elementu blokowego, element "blokowo-liniowy" smile.gif Czyli można mu nadać szerokośc i wysokość, marginesy tak jak blokowemu, ale w przeciwieństwie do blokowego nie "przeskakuje" do nowej linii.


--------------------
Zend Certified Engineer | Microsoft Certified Professional: Programming in HTML5 with JavaScript & CSS3 | Blog
Go to the top of the page
+Quote Post
Kshyhoo
post 3.02.2014, 21:30:52
Post #7





Grupa: Opiekunowie
Postów: 3 855
Pomógł: 317
Dołączył: 4.01.2005
Skąd: że
Kurde, działa wink.gif
http://jsfiddle.net/P5dnr/12/

Kurcze, działa na przykładzie ale na stronie bez zmian ;(


--------------------
Jak poprawnie zadać pytanie | Jak poprawnie zatytułować wątek
Najczęstsze błędy | Błędy E_NOTICE | PHP FAQ | FAQ PHPedia | SQL-Injection | Logowanie i sesje | Hashowanie haseł | Server - od czego zacząć ? | Manual PHP
Alternatywne Forum dla Ekspertów
Nie pomagam na PW, nie mam GG
Go to the top of the page
+Quote Post
RiE
post 3.02.2014, 21:48:20
Post #8





Grupa: Zarejestrowani
Postów: 97
Pomógł: 45
Dołączył: 5.05.2010

Ostrzeżenie: (0%)
-----

Cytat
Kurcze, działa na przykładzie ale na stronie bez zmian ;(


[HTML] pobierz, plaintext 
  1.     .tutek2 > ol > li:first-child p {
  2.     display:inline-block;
  3.     }
[HTML] pobierz, plaintext


Powyższa reguła odnosi się tylko do pierwszego elementu li, w przypadku kiedy n-ty znacznik li ma w sobie p, nie zadziała.

[HTML] pobierz, plaintext 
  1.     .tutek2 > ol > li > p {
  2.     display:inline-block;
  3.     }
[HTML] pobierz, plaintext


Dla wszystkich elementów li, których potomek to p
Go to the top of the page
+Quote Post
Kshyhoo
post 3.02.2014, 22:24:36
Post #9





Grupa: Opiekunowie
Postów: 3 855
Pomógł: 317
Dołączył: 4.01.2005
Skąd: że
Ale to wykrzacza resztę:
http://jsfiddle.net/P5dnr/14/


--------------------
Jak poprawnie zadać pytanie | Jak poprawnie zatytułować wątek
Najczęstsze błędy | Błędy E_NOTICE | PHP FAQ | FAQ PHPedia | SQL-Injection | Logowanie i sesje | Hashowanie haseł | Server - od czego zacząć ? | Manual PHP
Alternatywne Forum dla Ekspertów
Nie pomagam na PW, nie mam GG
Go to the top of the page
+Quote Post
vonski
post 3.02.2014, 22:39:29
Post #10





Grupa: Zarejestrowani
Postów: 292
Pomógł: 89
Dołączył: 27.12.2006
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

http://jsfiddle.net/P5dnr/15/

Chodzi Ci o taki efekt?


--------------------
Zend Certified Engineer | Microsoft Certified Professional: Programming in HTML5 with JavaScript & CSS3 | Blog
Go to the top of the page
+Quote Post
mar1aczi
post 3.02.2014, 22:49:24
Post #11





Grupa: Zarejestrowani
Postów: 731
Pomógł: 141
Dołączył: 9.05.2011
Skąd: śląskie

Ostrzeżenie: (0%)
-----

Bądź ustawiając szerokość: http://jsfiddle.net/P5dnr/16/


--------------------
Szanuj innych czas! Kliknij , gdy pomocną wskazówkę otrzymasz.
Go to the top of the page
+Quote Post
Kshyhoo
post 3.02.2014, 23:08:30
Post #12





Grupa: Opiekunowie
Postów: 3 855
Pomógł: 317
Dołączył: 4.01.2005
Skąd: że
Tylko, że to nie działa dobrze, przesuwa numerek z dół.
http://jsfiddle.net/P5dnr/17/

Chyba zmogłem problem:
http://jsfiddle.net/P5dnr/18/


--------------------
Jak poprawnie zadać pytanie | Jak poprawnie zatytułować wątek
Najczęstsze błędy | Błędy E_NOTICE | PHP FAQ | FAQ PHPedia | SQL-Injection | Logowanie i sesje | Hashowanie haseł | Server - od czego zacząć ? | Manual PHP
Alternatywne Forum dla Ekspertów
Nie pomagam na PW, nie mam GG
Go to the top of the page
+Quote Post
vonski
post 3.02.2014, 23:12:00
Post #13





Grupa: Zarejestrowani
Postów: 292
Pomógł: 89
Dołączył: 27.12.2006
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

http://jsfiddle.net/P5dnr/19/

dla .tutek1 > ol > li:before {vertical-align:top;} i dla elementów w środku <li> {margin-top:0} - przez to Ci się trochę zmniejszą odstępy (o 10px chyba?) więc możesz o 10px powiększyć np. margin-bottom tych elementów. Tak bym jakoś kombinowal smile.gif

EDIT:
Ok, widzę że już dałeś rade smile.gif Git

Ten post edytował vonski 3.02.2014, 23:13:31


--------------------
Zend Certified Engineer | Microsoft Certified Professional: Programming in HTML5 with JavaScript & CSS3 | Blog
Go to the top of the page
+Quote Post
Kshyhoo
post 4.02.2014, 14:54:29
Post #14





Grupa: Opiekunowie
Postów: 3 855
Pomógł: 317
Dołączył: 4.01.2005
Skąd: że
No właśnie nie wszystko działa jak należy. Tym sposobem przestało mi numerować listy zagłębione, w tym również w znacznikach PRE.
http://jsfiddle.net/P5dnr/22/
Powód edycji: [Kshyhoo]:


--------------------
Jak poprawnie zadać pytanie | Jak poprawnie zatytułować wątek
Najczęstsze błędy | Błędy E_NOTICE | PHP FAQ | FAQ PHPedia | SQL-Injection | Logowanie i sesje | Hashowanie haseł | Server - od czego zacząć ? | Manual PHP
Alternatywne Forum dla Ekspertów
Nie pomagam na PW, nie mam GG
Go to the top of the page
+Quote Post
mar1aczi
post 4.02.2014, 15:41:03
Post #15





Grupa: Zarejestrowani
Postów: 731
Pomógł: 141
Dołączył: 9.05.2011
Skąd: śląskie

Ostrzeżenie: (0%)
-----

Wstawianie licznika masz zdefiniowane tylko i wyłącznie dla:
[CSS] pobierz, plaintext 
  1. .tutek1 > ol > li:before,
  2. .tutek2 > ol > li:before
[CSS] pobierz, plaintext

w przedstawionym przykładzie.

Ten post edytował mar1aczi 4.02.2014, 15:41:27


--------------------
Szanuj innych czas! Kliknij , gdy pomocną wskazówkę otrzymasz.
Go to the top of the page
+Quote Post
Kshyhoo
post 4.02.2014, 21:22:04
Post #16





Grupa: Opiekunowie
Postów: 3 855
Pomógł: 317
Dołączył: 4.01.2005
Skąd: że
No jasne, w zimowy sen zapadłem. Chyba czas na wakacje smile.gif

Kuleje mi nadal numerowanie listy w znaczniku PRE: http://jsfiddle.net/P5dnr/26/. Numerowanie powinno być wyrównane do prawej a jest do lewej.


--------------------
Jak poprawnie zadać pytanie | Jak poprawnie zatytułować wątek
Najczęstsze błędy | Błędy E_NOTICE | PHP FAQ | FAQ PHPedia | SQL-Injection | Logowanie i sesje | Hashowanie haseł | Server - od czego zacząć ? | Manual PHP
Alternatywne Forum dla Ekspertów
Nie pomagam na PW, nie mam GG
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 13.05.2024 - 20:04
Powered By IP.Board © 2024  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn