Wyrównanie tekstu względem tła

Odpowiedz Nowy wątek
2019-04-15 13:31
0

ustawiłem image jako "kropka" w li, ale tekst równa do dołu. Podpowiecie jak to wyrównać do góry albo do środka bez dodawania dodatkowego wrapa dla samego tekstu? link do jsfidle:https://jsfiddle.net/os7L63xh/4/. Przeczytałem na necie że można to zrobić tak Before i dodaj w kontent tego ticka. Potem sobie to ladnie flexem wypozycjonujesz. No właśnie nie wiem jak to do końca zrobić ?

Pozostało 580 znaków

2019-04-15 14:07
1

Taka uwaga - jak wklejasz jakiś przykład, to wklej go tak, aby działał.

W swoim CSS odwołujesz się do .edit-page, ale w HTML nigdzie tego nie widać. Czy nie zauważyłeś, że na jsfiddle tekst nie formatuje się tak, jak byś chciał (np. nie ma ramek dookoła elementów listy)?

Poprawiona wersja (aczkolwiek bez wyrównania gwiazdek w pionie) wygląda tak:

    li {
        font-size: 1.6rem;
        color: blue;
        outline: 1px solid red;
        margin-bottom: 20px;
    }

That game of life is hard to play
I'm gonna lose it anyway
The losing card I'll someday lay
So this is all I have to say
No właśnie widze że jsfidle nie formatuje kodu. Ten .edit-page tam nie jest przypadkowo ale nie wkleiłem kodu html z klasą edit-page bo chciałem się skupić na głównym problemie - piotrek1998 2019-04-15 14:16
Podejrzewam, że nie był przypadkowo. Ale jak wycinasz jakiś kawałek całości, to zrób to z głową. Bo to, co zrobiłeś powoduje, że formatowanie totalnie nie działało - CSS starał się znaleźć <ul> oraz <li> wewnątrz edit-page, ale że takich nie znajdował, to w efekcie nie stosował formatowania. - cerrato 2019-04-15 14:22

Pozostało 580 znaków

2019-04-15 14:18

Tutaj masz wersję działającą - https://jsfiddle.net/71phorq5/

Zobacz, czy o takie coś Ci chodziło, a jeśli nie, to napisz jaśniej, czego potrzebujesz do szczęścia ;)


That game of life is hard to play
I'm gonna lose it anyway
The losing card I'll someday lay
So this is all I have to say
edytowany 1x, ostatnio: cerrato, 2019-04-15 14:19
Jest ok. Tylko gdzieś czytałem że można zrobić to z elementem ::before i flexem wypozycjonować. Da rade coś takiego zrobić ? - piotrek1998 2019-04-15 14:27

Pozostało 580 znaków

2019-04-15 14:26
2

Sugeruję wyłączyć standardowe wypunktowania, które są w ogólności mało konfigurowalne:

UL {list-style:none;}

I przypisać background do LI

LI {
  background-image: url('http://mgame3s.wap.sh/icon/icon.png');
  background-repeat:no-repeat;
  background-position:left center;
  padding-left:20px;
}

Pseudoelementem też można zrobić, ale to bardziej upierdliwe.


Spoko. Też nie jest źle. Tylko gdybym chciał to zrobić z pseudoelementem ::before i wypozycjonować to flexem to gdzie mógłbym wstawić ten pseudoelement::before ? - piotrek1998 2019-04-15 14:29
Patrz np: https://www.w3.org/Style/Examples/007/color-bullets.en.html ale z wycentrowaniem tego w pionie trzeba jeszcze pokombinować, a ja idę na obiad :)p - Freja Draco 2019-04-15 14:57

Pozostało 580 znaków

2019-04-15 15:06
0

No i spoko. Jak zwykle dziękuje wszystkim za czynny udział w debacie. Wasza pomoc znowu okazała się dla mnie bardzo owocna. Dzięki wielkie

Pokaż pozostałe 2 komentarze
@Silv: no to może czas przestać. Albo wprowadzimy jakąś odpłatność. Chociażby głupie 2PLN ;) - cerrato 2019-04-15 17:13
@cerrato: Osobiście nie lubię uczyć się na własnych błędach, a jeszcze bardziej nie lubię na cudzych. A pomagać lubię. Chyba mam zbyt wiele przeciwieństw w sobie. :P - Silv 2019-04-15 17:17
Ja najbardziej lubię się na swoich błędach uczyć. Tyle ich już w życiu popełniłem ;) - cerrato 2019-04-15 18:49
@cerrato: no tak, to teraz jedynie siedzieć i korzystać. ;) - Silv 2019-04-15 18:51
No przecież korzystam. W końcu moja imponująca i wszechstronna wiedza, która tak chętnie się dziele na forum, z czegoś wynika - cerrato 2019-04-15 19:09

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0