Button poprzedni - następny

**tina45** · Piątek o 20:29

Dobry wieczór. Męczę się z wykonianiem ładnych przycisków poprzedni / następny pod rekordem.Za nic mi nie wychodzi. CKE edytor spłaszcza kod , próbowałam kombinować z polami - też nic z tego. Chcę ,żeby było estetycznie i nie chcę wrzucać gołego linku pod artykułem, ale ma to wyglądać. Macie jakieś pomysły?

DawPi · Piątek o 21:49

Daj to co już masz, pokaż to online. Popatrzy się.

ferstel · Piątek o 21:52

Nie widzę obecnie żadnych przycisków, na podstawie których możemy coś zdziałać. Dodaje je, lub daj demo, co da nam więcej możliwości

**tina45** · Sobota o 05:24

Zrobiłam przycisk w edytorze - usunełam już go . Po wstawieniu linku i tytułu, po zatwierdzeniu "wstaw " zamiast planowanego ładnego buttonu zrobiło się takie coś. Jak wstawiałam link do "Następny...." i tytuł - wyskakiwał goły link.

Edytowane Sobota o 05:26 przez tina45

DawPi · Sobota o 07:59

Dasz te kody albo link do tego? :co_: :clapping:

**tina45** · Sobota o 10:11

Kod do przycisku

<div style="margin:36px 0 14px 0; display:flex; gap:18px; flex-wrap:wrap;">

  <a href="TU_LINK_POPRZEDNI" style="flex:1 1 320px; display:block; text-decoration:none;">
    <div style="
      background:#fcfcfd;
      border:1px solid #d9dde3;
      padding:20px 22px;
      box-sizing:border-box;
      min-height:120px;
      box-shadow:0 6px 18px rgba(0,0,0,0.04);
    ">
      <div style="
        font-family:Arial, sans-serif;
        font-size:11px;
        text-transform:uppercase;
        letter-spacing:1.2px;
        color:#7e8792;
        margin-bottom:10px;
      ">
        ← Poprzedni artykuł
      </div>

      <div style="
        font-family:Merriweather, Georgia, serif;
        font-size:21px;
        line-height:1.45;
        font-weight:700;
        color:#1d2d44;
        text-decoration:none;
      ">
        TU_TYTUL_POPRZEDNI
      </div>
    </div>
  </a>

  <a href="TU_LINK_NASTEPNY" style="flex:1 1 320px; display:block; text-decoration:none;">
    <div style="
      background:#fcfcfd;
      border:1px solid #d9dde3;
      padding:20px 22px;
      box-sizing:border-box;
      min-height:120px;
      box-shadow:0 6px 18px rgba(0,0,0,0.04);
    ">
      <div style="
        font-family:Arial, sans-serif;
        font-size:11px;
        text-transform:uppercase;
        letter-spacing:1.2px;
        color:#7e8792;
        margin-bottom:10px;
        text-align:right;
      ">
        Następny artykuł →
      </div>

      <div style="
        font-family:Merriweather, Georgia, serif;
        font-size:21px;
        line-height:1.45;
        font-weight:700;
        color:#1d2d44;
        text-align:right;
        text-decoration:none;
      ">
        TU_TYTUL_NASTEPNY
      </div>
    </div>
  </a>

</div>

https://polacynasaksach.pl/niemcy-vs-szwajcaria-czyli-magiel-kontra-salon/6_ogólny-zarys/19_rekrutacja-umowy-kruczki-pułapki/rekrutacja-do-pracy-za-granicą-jak-rozpoznać-oszustwo-zanim-oddasz-dane-i-nerwy-r16/

Edytowane Sobota o 10:13 przez tina45

ferstel · Sobota o 19:27

Sprawdź to

<div style="margin:36px 0 14px 0;display:flex;gap:18px;flex-wrap:wrap;">

  <a href="TU_LINK_POPRZEDNI" style="flex:1 1 320px;display:block;text-decoration:none;">
    <div style="background:#fcfcfd;border:1px solid #d9dde3;padding:20px 22px;box-sizing:border-box;min-height:120px;box-shadow:0 6px 18px rgba(0,0,0,0.04);">
      <div style="font-family:Arial,sans-serif;font-size:11px;text-transform:uppercase;letter-spacing:1.2px;color:#7e8792;margin-bottom:10px;">
        ← Poprzedni artykuł
      </div>
      <div style="font-family:Merriweather,Georgia,serif;font-size:21px;line-height:1.45;font-weight:700;color:#1d2d44;">
        TU_TYTUL_POPRZEDNI
      </div>
    </div>
  </a>

  <a href="TU_LINK_NASTEPNY" style="flex:1 1 320px;display:block;text-decoration:none;">
    <div style="background:#fcfcfd;border:1px solid #d9dde3;padding:20px 22px;box-sizing:border-box;min-height:120px;box-shadow:0 6px 18px rgba(0,0,0,0.04);">
      <div style="font-family:Arial,sans-serif;font-size:11px;text-transform:uppercase;letter-spacing:1.2px;color:#7e8792;margin-bottom:10px;text-align:right;">
        Następny artykuł →
      </div>
      <div style="font-family:Merriweather,Georgia,serif;font-size:21px;line-height:1.45;font-weight:700;color:#1d2d44;text-align:right;">
        TU_TYTUL_NASTEPNY
      </div>
    </div>
  </a>

</div>

**tina45** · Sobota o 20:05

Działa, dzięki

ferstel · Poniedziałek o 22:03

@tina45 Jedną rzecz co bym poprawił to wyświetlanie przycisków, bo popatrz przy obecnym kodzie jak to wygląda:

<p>
	&nbsp; &nbsp; &nbsp;<a class="pnsContentButton" href="https://polacynasaksach.pl/niemcy-vs-szwajcaria-czyli-magiel-kontra-salon/20_spo%C5%82ecznie-pod-lup%C4%85/27_stereotyp-z-piecz%C4%85tk%C4%85/polak-ju%C5%BC-nie-tani-ale-stereotyp-jeszcze-po-starej-cenie-r34/" rel="">&lt; Polak już nie tani&nbsp; &nbsp;</a> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<a class="pnsContentButton" href="https://polacynasaksach.pl/niemcy-vs-szwajcaria-czyli-magiel-kontra-salon/20_spo%C5%82ecznie-pod-lup%C4%85/22_pod-powierzchni%C4%85/kronikarze-cudzych-westchnie%C5%84-r31/" rel="">Kronikarze cudzych westchnień &gt;</a>
</p>

Spoiler

A może wyglądać lepiej przy tym kodzie:

<p style="display: flex; justify-content: space-between; align-items: center;">
    <a class="pnsContentButton" href="https://polacynasaksach.pl/niemcy-vs-szwajcaria-czyli-magiel-kontra-salon/20_spo%C5%82ecznie-pod-lup%C4%85/27_stereotyp-z-piecz%C4%85tk%C4%85/polak-ju%C5%BC-nie-tani-ale-stereotyp-jeszcze-po-starej-cenie-r34/" rel="">&lt; Polak już nie tani</a>
    <a class="pnsContentButton" href="https://polacynasaksach.pl/niemcy-vs-szwajcaria-czyli-magiel-kontra-salon/20_spo%C5%82ecznie-pod-lup%C4%85/22_pod-powierzchni%C4%85/kronikarze-cudzych-westchnie%C5%84-r31/" rel="">Kronikarze cudzych westchnień &gt;</a>
</p>

Spoiler

Niepotrzebne te  , co możesz poprawić właśnie tym:

<p style="display: flex; justify-content: space-between; align-items: center;">

**tina45** · Wtorek o 17:03

19 godzin temu, ferstel napisał(a):

@tina45 Jedną rzecz co bym poprawił to wyświetlanie przycisków, bo popatrz przy obecnym kodzie jak to wygląda:

<p>
	&nbsp; &nbsp; &nbsp;<a class="pnsContentButton" href="https://polacynasaksach.pl/niemcy-vs-szwajcaria-czyli-magiel-kontra-salon/20_spo%C5%82ecznie-pod-lup%C4%85/27_stereotyp-z-piecz%C4%85tk%C4%85/polak-ju%C5%BC-nie-tani-ale-stereotyp-jeszcze-po-starej-cenie-r34/" rel="">&lt; Polak już nie tani&nbsp; &nbsp;</a> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<a class="pnsContentButton" href="https://polacynasaksach.pl/niemcy-vs-szwajcaria-czyli-magiel-kontra-salon/20_spo%C5%82ecznie-pod-lup%C4%85/22_pod-powierzchni%C4%85/kronikarze-cudzych-westchnie%C5%84-r31/" rel="">Kronikarze cudzych westchnień &gt;</a>
</p>

Pokaż ukrytą zawartość

A może wyglądać lepiej przy tym kodzie:

<p style="display: flex; justify-content: space-between; align-items: center;">
    <a class="pnsContentButton" href="https://polacynasaksach.pl/niemcy-vs-szwajcaria-czyli-magiel-kontra-salon/20_spo%C5%82ecznie-pod-lup%C4%85/27_stereotyp-z-piecz%C4%85tk%C4%85/polak-ju%C5%BC-nie-tani-ale-stereotyp-jeszcze-po-starej-cenie-r34/" rel="">&lt; Polak już nie tani</a>
    <a class="pnsContentButton" href="https://polacynasaksach.pl/niemcy-vs-szwajcaria-czyli-magiel-kontra-salon/20_spo%C5%82ecznie-pod-lup%C4%85/22_pod-powierzchni%C4%85/kronikarze-cudzych-westchnie%C5%84-r31/" rel="">Kronikarze cudzych westchnień &gt;</a>
</p>

Pokaż ukrytą zawartość

Niepotrzebne te  , co możesz poprawić właśnie tym:

<p style="display: flex; justify-content: space-between; align-items: center;">

Te wrzucałam tymczasowo, wczesniej zrobiłam te buttony, ale ten od Ciebie z poprawionym kodem lepiej mi odpowiada. Tyle, że link podkreśla. Ale działa idealnie, nic się nie wypłaszcza po zatwierdzeniu artykułu.

Edytowane Wtorek o 17:06 przez tina45
Pomyłka przy wstawianiu treści

**tina45** · Wtorek o 17:05

Te wrzucałam tymczasowo, wczesniej zrobiłam te buttony, ale ten od Ciebie z poprawionym kodem lepiej mi odpowiada, bardzo ładnie wyglądają. Tyle, że link podkreśla. Ale działa idealnie, nic się nie wypłaszcza po zatwierdzeniu artykułu.

Edytowane Wtorek o 17:18 przez tina45

ferstel · Wtorek o 19:35

To w CSS, możesz dać sobie

p a {
  text-decoration: none;
}

Co spowoduje Ci usunięcie podkreślenia z linków

**tina45** · 12 godzin temu

22 godziny temu, ferstel napisał(a):
To w CSS, możesz dać sobie
p a {
  text-decoration: none;
}
Co spowoduje Ci usunięcie podkreślenia z linków

Dzięki

Edytowane 12 godzin temu przez tina45

Zaloguj się

Button poprzedni - następny

Rekomendowane odpowiedzi

tina45

DawPi

ferstel

tina45

DawPi

tina45

ferstel

tina45

ferstel

tina45

tina45

ferstel

tina45

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto

Zarejestruj nowe konto

Zaloguj się

Ostatnio przeglądający 0 użytkowników

Pliki

Cała aktywność

Przeglądaj

Powiadomienie o plikach cookie