Button poprzedni - następny

**tina45** · May 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 · May 29

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

ferstel · May 29

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** · May 30

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.

Edited May 30 by tina45

DawPi · May 30

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

**tina45** · May 30

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/

Edited May 30 by tina45

ferstel · May 30

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** · May 30

Działa, dzięki

ferstel · June 1

@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** · June 2

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.

Edited June 2 by tina45
Pomyłka przy wstawianiu treści

**tina45** · June 2

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.

Edited June 2 by tina45

ferstel · June 2

To w CSS, możesz dać sobie

p a {
  text-decoration: none;
}

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

**tina45** · June 3

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

Edited June 3 by tina45

Sign In

Button poprzedni - następny

Recommended Posts

tina45

DawPi

ferstel

tina45

DawPi

tina45

ferstel

tina45

ferstel

tina45

tina45

ferstel

tina45

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members

Marketplace

Activity

Browse

Important Information