Forum Pasja Informatyki - Najnowsze z tagiem html-css

Dropdown w formularzu React (Tailwind) – niestabilne działanie na urządzeniach mobilnych

Wed, 18 Mar 2026 13:53:14 +0000

mam problem z dropdownem w formularzu kontaktowym na mobile. Na desktopie wszystko działa poprawnie, natomiast na telefonie po kliknięciu dropdown się nie rozwija albo zachowuje się niestabilnie (czasami trzeba kliknąć kilka razy, czasami w ogóle nie reaguje).

Problem występuje tutaj:
https://digitalstorm.pl

Chodzi konkretnie o formularz kontaktowy (wybór usługi). Wygląda to tak, jakby event kliknięcia nie zawsze się odpalał albo coś blokowało interakcję (może overlay / z-index / focus?).

Stack:

React (Vite)
Tailwind CSS
custom dropdown (nie native select)

Co już sprawdziłem:

brak błędów w konsoli
event onClick jest przypisany poprawnie
na desktopie działa bez problemu
na mobile problem występuje głównie w Chrome

Zastanawiam się czy to może być:

problem z eventami dotykowymi (touch vs click)
konflikt z jakimś elementem nakładającym się na dropdown
albo coś z focus/blur

Miał ktoś podobny problem albo ma pomysł gdzie jeszcze szukać?

Z góry dzięki za pomoc

Dlaczego nie wyświetla się w układzie blokowym i nie ma margina, borderu i paddinga?

Sat, 08 Nov 2025 19:24:57 +0000

Dlaczego nie wyświetla się w układzie blokowym i nie ma margina, borderu i paddinga, a jeden z obrazków się nie wyświetla w tle i się nie powtarza. A drugi się nie wyświetla w side-asid' zie, a pod spodem, a czcionka jest inna.

<!DOCTYPE html5>
<HTML5>
<head>
<lang= "pl=PL">
<meta-charset= "UTF-8">
<meta-name= "description" content="Powody dla których nadchodzi nowe średniowiecze.">
<meta-name= "keywords" content="średniowiecze, nowe średniowiecze;">
<title>Dziwne</title>
<meta-name= "view-port" content="width=device-width, initial-scale=1.0">
<link rel= "style-sheet" href="estetykastrony.css" type="text/css">

</head>
<body>
<div id="main">
Cras eget vestibulum sapien, quis sodales ligula. Fusce sed erat ante. Morbi sem justo, maximus id eros vel, facilisis dapibus nibh. Pellentesque consequat commodo nibh, eu venenatis mi blandit vel. Vestibulum bibendum bibendum sapien, eget ornare leo interdum eu. Donec id tincidunt lectus. Cras mattis ante vitae dolor viverra sagittis. Donec vitae ligula felis.
Nam placerat malesuada enim, interdum mollis risus faucibus a. Sed sed mauris elit. Donec eleifend mattis diam et consequat. Etiam ac faucibus lectus. Mauris sagittis, enim a aliquam vehicula, magna nisi fermentum dui, in gravida metus massa nec sem. Praesent ac metus et ipsum viverra hendrerit. Suspendisse ut congue enim, a pellentesque est. Vestibulum nec tincidunt eros. Donec vulputate non lectus et porta. Nunc faucibus nisi vel nunc sodales, vitae bibendum massa sollicitudin. Mauris ac pellentesque tortor. Donec facilisis lacinia odio, ac bibendum sem aliquam a.
Nulla mattis egestas tellus. Suspendisse fermentum consectetur scelerisque. Morbi purus lectus, dapibus in metus sit amet, blandit sagittis ex. Etiam ullamcorper neque quis nisi luctus, eget pellentesque augue hendrerit. Donec consequat mi vitae orci malesuada, et pharetra erat posuere. In sagittis consequat purus id accumsan. Pellentesque et dui tempus, feugiat diam et, placerat leo. Proin feugiat sed libero eget lobortis.
Suspendisse id tellus in magna fermentum porttitor. Duis id ante nec dolor pretium dapibus. Aenean eget nunc varius, pellentesque dui at, fringilla nisi. Suspendisse potenti. Mauris feugiat est efficitur, tristique odio vitae, viverra nisl. Aliquam erat volutpat. Donec pharetra magna vitae iaculis ultricies. Ut eleifend, ipsum ultricies euismod mattis, turpis urna dictum diam, vel vulputate tortor arcu maximus ex. Fusce fermentum, libero fringilla rhoncus eleifend, magna sem dignissim tellus, ut fermentum neque elit a metus. Sed non ultricies arcu. Etiam aliquam ullamcorper purus, et tincidunt odio convallis sed. Nunc pharetra interdum orci, in fermentum justo tincidunt non. Aliquam mattis enim orci, non feugiat est dapibus id. Nam in mollis nisi. Nam at blandit odio.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec venenatis varius scelerisque. Suspendisse sodales venenatis ex, at placerat sapien porttitor ultrices. Curabitur pretium in urna tempor finibus. Donec sollicitudin velit sed tellus rutrum maximus. Fusce tincidunt nunc eu dolor dapibus ullamcorper. Ut egestas sem leo, et finibus metus maximus vel.
Etiam sollicitudin eleifend nunc, ut accumsan est volutpat ac. Mauris commodo varius urna et molestie. Donec arcu nibh, vehicula in fringilla viverra, hendrerit vitae purus. Maecenas iaculis orci ex, id tempus sem porttitor eu. Duis egestas egestas lacus sed ornare. Aliquam massa lectus, varius a consectetur vitae, convallis sed tortor. Aenean vel lobortis nibh, eu viverra purus. Curabitur vitae est sem. Vestibulum interdum massa et augue venenatis, a pharetra eros blandit. Morbi maximus risus vel dolor molestie pulvinar.
Fusce elit justo, facilisis eu tempor non, laoreet vel velit. Praesent eu imperdiet orci. In elit justo, pulvinar quis mauris in, commodo porttitor velit. Integer elementum, sapien ac blandit ullamcorper, arcu nulla ornare nisi, et mollis neque dolor ac purus. Pellentesque placerat ipsum neque. Ut posuere, turpis eu egestas tincidunt, quam ex tincidunt erat, vel laoreet lacus ipsum nec lacus. Pellentesque at metus orci.
Pellentesque aliquam neque augue, vitae vestibulum enim consequat sit amet. Maecenas id enim eu neque rutrum dapibus. In nec molestie risus. Nam in tincidunt magna, ut tempus nunc. Aenean sagittis et ex ut vulputate. In dignissim nisi ut nisl cursus tincidunt. Quisque fringilla nibh vel augue tempor, in commodo eros facilisis. Curabitur sem lacus, ullamcorper vitae efficitur eget, tincidunt sed mi. Praesent condimentum nec lectus in fermentum. Praesent viverra orci vel erat aliquam fringilla. Suspendisse rhoncus, erat sit amet laoreet dapibus, risus urna aliquam nibh, in sodales purus turpis vitae eros. Integer tristique mi leo, ac rutrum ex elementum nec. Ut pretium a felis sit amet faucibus. Fusce interdum luctus tincidunt. Ut ut volutpat enim.
Quisque id orci nibh. Sed rhoncus ipsum nisl, et ultrices nulla pulvinar vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nunc blandit tincidunt augue, eget consequat justo ornare eget. Nulla consectetur neque sit amet ex blandit dictum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut non velit fermentum, luctus dui aliquam, pretium enim. Nunc eget cursus nibh, id mollis lectus. Proin sit amet sodales nisl. Sed euismod turpis vitae sagittis fringilla. Aliquam non pharetra nisi.
Etiam viverra vehicula elit eget fringilla. Etiam in odio elit. Mauris nec feugiat arcu. Nam sit amet elit vel tortor convallis tincidunt. Phasellus luctus dignissim tortor, non tincidunt nisi luctus sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce finibus est in sapien faucibus, mattis sagittis elit dapibus. Nullam tempor, arcu ut ultricies volutpat, felis ante condimentum nibh, quis molestie felis metus in neque. Proin ut turpis lobortis, pretium risus eget, porttitor nisi. Nulla ut elit at mauris fringilla pellentesque in a mi.
Morbi non sagittis nisi, at commodo neque. Praesent condimentum velit nec orci imperdiet, eu tristique dolor interdum. Quisque sit amet sodales orci. Sed non ipsum at ante euismod lobortis tincidunt vitae mauris. Cras tincidunt iaculis nisi tincidunt aliquam. Aenean ac leo eu sapien placerat varius commodo vel nulla. Suspendisse consectetur augue a neque rutrum aliquam. Maecenas lacinia rutrum sollicitudin. Etiam dapibus erat purus, et iaculis libero malesuada ut. Maecenas vel metus vestibulum, imperdiet ipsum vitae, venenatis quam. In ut ultricies dolor, imperdiet dapibus erat. Vestibulum ac quam massa. Nunc et porttitor enim. Suspendisse malesuada tempor tortor, et tempor orci sollicitudin ut. Praesent non sagittis ipsum, quis faucibus metus.
Donec in nunc varius, lacinia ligula id, fermentum lacus. Morbi elementum arcu et felis sagittis, et ornare arcu eleifend. Nunc rutrum efficitur ornare. Donec hendrerit porta sollicitudin. Vestibulum eu vehicula eros, blandit finibus turpis. Sed id arcu at eros faucibus tempor ac nec nunc. Fusce lacinia luctus dignissim. Donec ut imperdiet nisi. Morbi quis augue urna. Aliquam nunc ligula, euismod in augue et, malesuada vestibulum ante. Praesent viverra dolor eu fringilla pulvinar. Sed a felis libero. Vestibulum.
<side-aside>
<img src="brudna-zieleń.jpg" alt="drzewo">
</side-aside>
</body>
<footer>
<p>copyrights&copy nowesredniowiecze.com 2022</p>
</footer>

</HTML5>

#main{
    font-family: 'Trebuchet MS', 'garamond', 'helvetica','sans-serif';
	font-size: 46px;
	display: block;
	float: left;
	width: 299px;
	color: #3c6a9b;
	background-image:"drzewazdołu.jpg" alt="oświetlone drzewa";
	background-position": absolute;
	background-repeat: repeat;
	border: 46px 23px 46px 46px;
	padding: 4px;
	margin: 46px;
}
#side-asside{
   float: left;
   width: 31px;
   background-image: "brudna-zieleń.jpg" alt="wrześniowe drzewo";
}
&footer{
	font-size: 18px;
	display: inline;
	text-align: center;

Tak mam na początku i w środku strony:

a dalej jest tak:

Dlaczego nie wyświetla się tak, jak trzeba przez grid?

Sat, 27 Sep 2025 14:09:06 +0000

Dlaczego nie wyświetla się tak - jak trzeba przez grid?

<!DOCTYPE html5>
<html5>
<lang="pl-PL">
<head>
<meta charset="UTF-8">
<meta name="description" content="Określić swój problem i poczuć wszystkie emocje i przyjąć  wszystkie emocje do siebie.">
<meta name="keywords" content="uświadamiający, uświadamiające, uświadamiająca, analiza, oświecający, oświecająca, oświecające, filozofowanie, analizowanie.">
<meta name="view-port" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="estetykablogu3.css" type="text/css">
<body>
<div id="main">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,</p>
</body>
<div id="side-asside">
<img src="C:\Users\micha\Pictures\Saved Pictures\IMG_20220806_132156.jpg">
<footer>
 <p>copy&copyright; uswiadamiajacaanaliza.com 2022</p>
</footer>
</html5>

#main
    font-family: 'Trebuchet MS', 'garamond', 'helvetica','sans-serif';
    font-size: 46px;
    /display: block;/
    /float: left;/
    /display: flex;/
    /width: 100%;/
    display: grid;
    grid-template-columns: 80%;
    text-align: justify;
    width: 299px;
    color: #3c6a9b;
    background-image: ('C:\Users\micha\Pictures\Saved Pictures\IMG_20220827_070956.jpg');
    background-position: absolute;
    background-repeat: repeat;
    border: 46px 23px 46px 46px;
    padding: 4px;
    margin: 46px;
}
#side-asside{
   float: left;
   width: 31px;
   background-image: ("C:\Users\micha\Pictures\Saved Pictures\IMG_20220806_132156.jpg");
}
&footer{
    font-size: 18px;
    display: inline;
    text-align: center;
}

Mogę wysłać zrzut ekranu, tylko na razie nie wiem jak. Tam wyszło bez bez marginesów itp. w layoucie i za małą czcionką i obraz pod spodem zamiast w tle i to inny.

Jak nauczyć się robić proste szablony WWW?

Thu, 03 Jul 2025 12:07:59 +0000

Jak mogę nauczyć się robić od zera proste czytelne szablony, bez frameworków, z minimalną ilością JavaScriptu niezbędną do zapewnienia użytkownikowi dobrego doświadczenia, działających na najważniejszych przeglądarkach internetowych? Nie chcę pchać niepotrzebnego bloatu w swoje strony internetowe

Chcę, aby robione przeze mnie szablony były w podobnym stylu i klimacie co ten na stronie slackware.com

Jak zakodować stronę z aktualnościami (np. takie jakie są w stronach szkół)

Sat, 07 Dec 2024 23:46:04 +0000

Witam, od dawna szukam odpowiedzi jak dokładnie wygląda kodowanie strony z aktualnościami (w sensie, dodawanie postów przez użytkowników, którzy nie umieją kodować itd..) i jak to działa. Natknąłem się na to, że trzeba umieć w CMS'y itd, ale zauważyłem, że wiele stron ma swoje własne (chyba?) CMS'y i chciałem dowiedzieć się jak w ogóle można zacząć, żeby jakkolwiek ruszyć.

Pozdrawiam

Dot. Zadania do samodzielnego wykonania - Programowanie webowe odc. 3.

Tue, 12 Nov 2024 18:44:22 +0000

Witajcie.

Uczę się programowania webowego. Rozwiązuję zadania i przy odcinku 3 Przegląd znaczników HTML w zadaniu do samodzielnego wykonania mamy utworzyć dwie strony html. index.html i register.html. Utworzyłam stronę index uzupełniłam ją zgodnie z wytycznymi, do tego mam podpięty kod z css i wszystko cacy chodzi. Gdy utworzyłam podstronę register.html. Podpięłam do niego ten sam kod css co jest przy indexie. I... rozjechało mi się wszystko.

Generalnie utworzyłam wszystkie formularze z zadania, tylko układ mi się zwalił.

Proszę wyjaśnijcie, czy mam napisać nowy kod css podpięty pod register, czy nie? I ewentualnie dlaczego mi rozjechało stronę? Czy mam podpiąć screen strony? by było widać?

Jak sprawić by pasek menu był przyklejony do lewej strony i zajmował całą wysokość okna ?

Tue, 24 Sep 2024 10:15:34 +0000

Jak sprawić by pasek menu był przyklejony do lewej strony i zajmował całą wysokość okna i nie nakładał się na tekst?

Poniżej przesyłam kod.

https://jsfiddle.net/kitan23/87yehzja/

Problem z czytaniem kodu html przez różne Poczty Mailowe

Mon, 29 Jul 2024 10:27:18 +0000

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <table cellpadding="0" cellspacing="0" width="300" style="border-collapse: collapse; width: 300px; ">
        <tr>
            <td width="140" style="padding: 0; text-align: center;">
                <img src="logo.png" alt=" Logo" style="display: block; width: 140px; height: auto; margin: 0 auto;">
            </td>
            <td width="2" style="padding: 0; background-color: #222F60; width: 2px; height: 60px;"></td> 
            <td width="140" valign="top" style="padding: 0; text-align: center;">
                <table cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse;">
                    <tr>
                        <td style="font-size: 12px; line-height: 14px; color: #222F60; text-align: center;">
                            <strong style="font-size: 18px;">imienazwisko</strong><br>
                            właściciel<br>
                            <a href="tel:00000000" style="color: #222F60; text-decoration: none;">numer</a><br>
                            <a href="mailto:mail" style="color: #222F60; text-decoration: none;">mail</a>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td colspan="3" style="width: 300px; height: 33px; padding: 10px 0; text-align: center;">
                <img src="pasekdolny.png" alt="Decorative Graphic" style="display: block; width: 300px; height: 33px; margin: 0 auto;">
            </td>
        </tr>
        <tr>
            <td colspan="3" style="font-size: 11px; line-height: 12px; color: #222F60; text-align: center; margin: 2px">
                <div>
                    <a href="https://maps.app.goo.gl/adres" style="color: #222F60; text-decoration: none;">adres</a><br>
                    <a href="https://rejestr.io/krs/rejestr" style="color: #222F60; text-decoration: none;"> KRS: 0000000, REGON: 0000000, NIP: 00000000</a><br>
                    <a href="mailto:mail" style="color: #222F60; text-decoration: none;">mail</a>, 
                    <a href="mailto:mail" style="color: #222F60; text-decoration: none;">mail</a><br>
                    <a href="https://facebook.com/nazwafirmy" style="color: #222F60; text-decoration: none;">Facebook</a> | 
                    <a href="https://pl.linkedin.com/in/linkdoprofilu" style="color: #222F60; text-decoration: none;">LinkedIn |</a>
                    <a href="https://stronawww" style="color: #222F60; text-decoration: none;">www.adcolors.pl</a>
                </div>
            </td>
        </tr>
        <tr>
            <td colspan="3" style="padding: 10px 0;">
                <div style="border-top: 1px solid #222F60; width: 300px; margin: 10px auto;"></div>
            </td>
        </tr>
        <tr>
            <td colspan="3" style="font-size: 9px; line-height: 11px; color: #222F60; text-align: center;">
                klauzula rodo
            </td>
        </tr>
    </table>
</body>
</html>

Hej, tworze stopkę mailową w HTML i inline CSS i napotykam problem którego nie rozumiem. Na gmailu i thunderbirdzie moja stopka wyświetla sie tak jak powinna, ale na outlooku i mailach iphonowych totalnie sie wszystko rozjeżdża, grafiki mimo że im zapisałem na sztywno wielkość nagle sie dziwnie skalują nawet nie do tych wielkości które one same posiadają, niektóre style nie są nawet pokazywane, przeszukiwałem internet by zrozumieć czemu to wystepuje ale nic nie znalazłem, często problemem jest czytanie stylów zapisanych w CSS ale dlatego używam inline CSS i zapisuje to w kodzie html co naprawiło błędy na niektórych e-mailach lecz nie na wszystkich. Jeśli ktoś miał podobny problem to dajcie znać jak go naprawiliście. Podsyłam też kod ale zmieniłem tam poufne informacje na to co tam sie znajduje, dla prywatności.

Lista zadań bez JS

Fri, 21 Jun 2024 13:56:59 +0000

Hej

W ramach ćwiczeń postanowiłem stworzyć prostą stronkę do zapisywania swoich zadań.
Haczyk w tym, że stronka nie mogła być stworzona w PHP czy z pomocą JS.
Zapraszam również do zajrzenia w plik README - zapisałem tam swoje poczynania (oczywiście w języku angielskim).

Jestem otwarty na wasze spostrzeżenia
Czy mogę coś poprawić, dodać? Jakie są wasze przemyślenia?

Github
CodePen

karuzela z perspektywą

Fri, 17 May 2024 12:50:46 +0000

witam, chciał bym zrobić karuzelę aby slajdy wyglądały jak tutaj na obrazku, wykorzystuje do tego swipera ale nie wiem jak zrobić aby to podobnie wyglądało, dzięki za pomoc.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Swiper demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />

  <!-- Demo styles -->
  <style>

    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    html,
    body {
      position: relative;
      height: 100%;
    }

    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }

    .swiper {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      padding: 40px;
    }

    .swiper-slide{
        transform-style: preserve-3d;
        transform: perspective(700px) rotateY(15deg) !important;
    }

    .swiper-slide div{
        height: 100%;
        background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
        box-shadow: 0px 0px 24px 0px rgba(66, 68, 90, 1);
    }

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    body {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .container {
        width: 1500px;
        height: 800px;
        padding: 80px;
        background-image: url(./04_Image_InstaPostAesthetic.webp);
        background-size: cover;
        background-repeat: no-repeat;
    }



  </style>

</head>

<body>
  <!-- Swiper -->
  <div class="container">
    <div class="swiper mySwiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide"><div>Slide 1</div></div>
          <div class="swiper-slide"><div>Slide 2</div></div>
          <div class="swiper-slide"><div>Slide 3</div></div>
          <div class="swiper-slide"><div>Slide 4</div></div>
          <div class="swiper-slide"><div>Slide 5</div></div>
          <div class="swiper-slide"><div>Slide 6</div></div>
          <div class="swiper-slide"><div>Slide 7</div></div>
          <div class="swiper-slide"><div>Slide 8</div></div>
          <div class="swiper-slide"><div>Slide 9</div></div>
        </div>
        <div class="swiper-pagination"></div>
      </div>
  </div>


  <!-- Swiper JS -->
  <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper(".mySwiper", {
        loop: true,
      slidesPerView: 3,
      spaceBetween: 30,
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
    });
  </script>
</body>

</html>

plan jezyka programowania do uzywania na stronie - czy to dobry pomysł

Sat, 11 May 2024 17:40:55 +0000

witam, mam protse pytanie jestem w trakcie pisania strony i podstron z moim własnym jezykiem programowania (pseudo jezyk) gdyz nauczyłem sie juz sam pisac interpreter strona ma byc bez logowania gdyz nie chce mi sie robic duzej polityki prywatnosci. tak to lenistwo . ale w trakcie pisania zaczełem sie zastanawiac czy to dobry pomysł i teraz mam pytanie co sądzice o tym pomysle ? (oczywiscie chodzi o strone udostepnioną a nie tak dla cwiczen )

@media queries problem

Mon, 25 Mar 2024 21:44:05 +0000

Witam,

Mam problem z media queries mianowicie ustawiłem tak aby przy danej szerokosci wielkość czcionki się zmieniała lecz gdy zmniejszam okno chroma to nic sie nie dzieje. Jedynie nie przesuwa sie i zostaje cały czas na środku. Męczyłem się nad tym już spory kawałek czasu i dalej nie mogę zrozumieć co robie nie tak.

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        body{
            font-size: large;
        }

        @media (max-width: 992px) {
            body{
                font-size: large;
            }
        }

        @media (min-width: 450px){
            body{
                font-size: xx-large;
            }
        }
    </style>
</head>
<body id="body">
    <center>
        <p>
            NAPIS
        </p>
    </center>
</body>
</html>

Shoper Specialist - znajomość tylko HTML/CSS

Tue, 19 Mar 2024 10:54:25 +0000

Witam.

Zastanawiam się nad podjęciem pracy jako specjalista ds. Sklepu Internetowego (Shoper Specialist). Wymagania to obsługa sklepu internetowego na silniku Shoper, znajomość tylko HTML/CSS i zainteresowanie branżą e-commerce.

Czy ktoś z Was miał albo ma do czynienia z tym sklepem internetowym typu Shoper?

Co uważacie o tym sklepie internetowym typu Shoper?

Zawijanie tekstu w menu

Thu, 29 Feb 2024 06:39:23 +0000

Powiedzmy że chcę ustawić rozmiar każdego elementu menu na jakąś stałą wielkość na przykład 40px.

Mam taki kod jak poniżej

index.php

<?php
declare(strict_types=1);
session_start();

if (!isset($_SESSION['auth_user'])) {
    $_SESSION['auth_user'] = false;
}
$action = $_GET['action'] ?? null;

function getPageContent(): void
{
    $action = $_GET['action'] ?? null;
    switch ($action) {
        case 'login':
            include 'templates/user/login.php';
            break;
        case 'register':
            include 'templates/user/register.php';
            break;
        case 'logout':
            header('Location: actions/user/logout.php');
            break;
        case 'edit_profile':
            include 'templates/user/edit_profile.php';
            break;
        case 'new_entry':
            include 'templates/guestbook/new_entry.php';
            break;
        default:
            include 'templates/guestbook/list_entries.php';
    }
}
if (!isset($page_title)) {
    $page_title = 'Index';
}
?>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/styles.css">
    <title>Guest book - <?=$page_title?></title>
</head>
<body>
    <header class="page-header">
        <h1>Guest book</h1>
        <p>Yet another page written in PHP</p>
    </header>
    <nav>
        <ul>
            <li><a href="index.php">Index</a></li>
            <li><a href="index.php?action=new_entry">New entry</a></li>
            <?php if ($_SESSION['auth_user']): ?>
            <li><a href="index.php?action=edit_profile">Edit profile</a></li>
            <li><a href="actions/user/logout.php">Logout</a></li>
            <?php else: ?>
            <li><a href="index.php?action=register">Register</a></li>
            <li><a href="index.php?action=login">Login</a></li>
            <?php endif; ?>
        </ul>
    </nav>
    <main>
        <h2><?=$page_title?></h2>
        <?php getPageContent(); ?>
    </main>
    <footer class="page-footer">
        <p>Made by whiteman808</p>
    </footer>
</body>
</html>

css/styles.css

body {
    background-color: #ffffcc;
    width: 60%;
    margin: 0 auto;
}

nav ul {
    list-style-position: inside;
    list-style-type: none;
    padding: 0;
    display: inline;
}

nav ul li {
    display: inline-block;
    border: 3px solid #000;
    padding: 5px;
    text-align: center;
    width: 40px;
}

nav ul li:not(:first-child) {
    margin-left: -4px;
}

nav ul li:not(:last-child) {
    border-right: none;
}

nav ul li a {
    color: #000;
    text-decoration: none;
}

nav ul li a:hover {
    text-decoration: underline;
}

.page-header {
    margin-top: 75px;
}

main {
    margin-top: 75px;
}

.guestbook-entries article:not(:last-child) {
    border-bottom: 1px solid black;
}

.page-footer {
    margin-top: 75px;
    text-align: center;
}

Aktualny rezultat działania kodu jest przedstawiony na rysunku poniżej

Oczekiwany efekt to mniej więcej taki

Co zrobić żeby przed tabulatorami był akapit?

Wed, 28 Feb 2024 13:49:05 +0000

Co zrobić żeby przed tabulatorami był akapit, i żeby wyświetliła się stopka?


		& li {
		   text-indent: 32px;
		                        }

            <footer>
		 <p>Copyright &bez zadnej dyskalkulii</p>
	    </footer>
     </body>

Jak zrobić żeby obraz się wyświetlił w programie?

Sat, 24 Feb 2024 19:17:43 +0000

Jak zrobić żeby obraz się wyświetlił w programie, czy w css się nie zagnieżdża, czy kolor jest zapisany dobrze text-shadow?

    #main{  
         font-family: 'helvetica', 'garamond', 'arial', 'sans-serif';
		 font-size: 32px;
         display: inline-block; 
		 border: 63px;
		 padding: 6px;
		 margin:  69px 66px 56px 69px; }
		                            
		    .aside {
			 background-image: url(lisc.jpg);
			 background-size: cover;
             width: 67px;
			 height: 560px;
			 margin: 0px;
			 padding: 2px;
			 float: left;
			 
		     
		                            }
			
         		  
		   
		   #article-1 {
		   float: left;
		   text-decoration: underline; 
		   letter-spacing: 2px;
		   word-spacing: 3px;
		   font-size: 32px;
		   overflow-x: hidden;
		   overflow-y: scroll;
		   
		                             }
		   #article-2 {
		    clear: left;
		    text-decoration: underline; 
		    letter-spacing: 2px;
			word-spacing: 3px;
		    font-size: 32px;
			overflow-x: hidden;
			overflow-y: scroll;
		   }
		   #article-3 {
		    clear: left;
		    text-decoration: underline; 
		    letter-spacing: 2px;
			word-spacing: 3px;
		    font-size: 32px;
		    overflow-x: hidden;
			overflow-y: scroll; 
		   }
			
			
			
			
		
           text-shadow: 1 px, 1 px, 5 px, #aa09aa;
		   background-color: #3fd93f;
		   position: relative;
		   color: #633600;
           background-image: url(klon.jpg); 
		   position: absolute;
           background-repeat: round;
		   
                                       }

Nauka tworzenia stron internetowych kilka pytań

Tue, 20 Feb 2024 15:52:56 +0000

WItam , chciałbym zacząć karierę w tworzeniu stron internetowych , jestem bezrobotny i mam fobię społeczną więc nie przemawia do mnie praca z ludźmi , wolałbym pracować przy komputerze , bardzo kręci mnie tworzenie stron lecz nie wiem od czego zacząć, jak to ogarnąć , szybko się uczę mam 25 lat , Czy możecie mi powiedzieć jak tego dokonać? Od czego zacząć ? Czy robić to w html css Czy php Czy coś innego tak żebym wiązał z tym jakaś przyszłość i za jakiś rok móc zarobic z tego z tysiaka na miesiąc chociaż, proszę o jak najwięcej informacji na ten temat , chciałbym tworzyc No takie strony wizytówki, np pomoc drogowa , busy za granicę takie strony z usługami np , lub jakieś portfolio , i moje pytanie właśnie jest takie od czego to wszystko najlepiej zacząć, jak oprawiać w grafikę te strony , czy lepszy jest wordpress bez nauki innych języków? Proszę mi to rozjaśnić chce zacząć robić coś w tym kierunku.

Raport PageSpeed Insights: CLS, LCP

Sat, 03 Feb 2024 08:59:53 +0000

Witam.

Bardzo bym prosiło o pomoc jak mogę poprawić wyniki dla parametrów CLS, LCP.

Tutaj raport z google pagespeed insight:

https://pagespeed.web.dev/analysis/https-lexdex-pl-uslugi-cesielsko-dekarskie/yd9xvmk6tt?form_factor=desktop

Nie mogę zrozumieć jak mogę poprawić LCP dla głównego obrazka. W przypadku desktop obrazek ten waży 250kb (na mobile około 50kb). Dodatkowo preloduje go więc dlaczego google ma z tym jakiś problem. Przecież nawet nie ma informacji o tym że rozmiar czy format jest niewłaściwy.

Druga sprawa to CLS. Co ja mam w kodzie zrobić aby pozbyć się tych niskich wyników?

Nie wiem skąd się niby biorą te "mityczne" przesunięcia. Obrazki przecież mają ustalone rozmiary.

Natomiast na innej podstronie:

https://pagespeed.web.dev/analysis/https-lexdex-pl-market/hllwzzosmh?form_factor=mobile

Dla google największym problemem jest LCP elementu textowego:

Dlaczego tutaj text jest problemem?

Pomniejszy jeszcze problem to redukcja nie używanego kodu JS.

Nie wiem niby jak miałbym jquery zredukować jak to cała paczka jednolita. Z tym chyba trzeba już żyć albo nie korzystać.

Natomiast nie rozumiem jeszcze co jest nie tak z ze skryptem googla Google Tag. To przecież google ten skrypt tworzy więc dlaczego teraz raportuje że część jest nie używana.

Tak więc proszę bardzo o pomoc w wyjaśnieniu tego LCP i CLS. Co jest nie tak w kodzie html i jak mogę to poprawić.

Z góry dziękuję.

Samodzielne tworzenie od podstaw szablonów w CSS3

Sun, 21 Jan 2024 02:04:45 +0000

Witam wszystkich, mam takie pytanie czy da się wyrobić zmysł grafika potrzebny przy tworzeniu od podstaw ciekawych szablonów w HTML5 i CSS3? Nigdy nie miałem talentu jeśli chodzi o rysowanie, grafiką komputerową też się nie zajmuję. Da się wyrobić ten zmysł czy lepiej skorzystać z gotowych frameworków CSS typu Tailwind, Bootstrap i dostosować lekko je pod projekt? Dziękuję

Braki w wiedzy programistycznej

Wed, 17 Jan 2024 15:06:01 +0000

Good Afternoon :) Mam taki problem w związku z nauką programowania webowego. Ostatnio zauważyłem, że mam duże braki w wiedzy szczególnie w html i css. Gdy zajrzałem do kodu mojego bloga stworzonego na wordpressie zauważyłem nieznany mi znacznik "figure" i jakby tego było mało to właściwość atrybutu style "ratio: 2/3" (coś podobnego), którego też nie znałem. Poza tym gdy chciałem aby chat gpt od binga wygenerował dla mnie formularz logowania (chciałem zobaczyć co ciekawego "wypluje"), okazało się, że tam było tyle styli i znaczzników, których nie praktykowałem i to tylko w formularzu logowania. W porównaniu do mnie to kod był by ze 3 razy krótszy i nie wyglądałoby to ciekawie. Co na to poradzić? Jakie działania podjąć, aby uzupełnić wiedzę głównie z html i css, ale także z js, chociaż tu nie ma tak sporego problemu bo jestem taki "średniopoczątkujący".

Proszę o rozwiązanie problemu w HTML

Wed, 01 Nov 2023 03:57:51 +0000

Witam stworzyłem kod html który pokazuje listę świąt w Korei Północnej. Najbliższe święto jest zaznaczone na zielono, lecz gdy wypadają święta Dzień Matki i Święto konstytucji Koreańskiej Republiki Ludowo-Demokratycznej zaznaczają się obydwa święta, chociaż teoretycznie Dzień Matki powinien być zaznaczony gdyż wypada wcześniej i gdy to piszę to jest bliżej nas.

Tutaj kod:

<!DOCTYPE html>
<html>
<head>
    <title>Święta w Korei Północnej</title>
    <script>
        // Funkcja do obliczania pozostałych dni do najbliższego święta
        function obliczPozostaleDni(data) {
            var dzis = new Date();
            var strefaKoreanska = 9; // Różnica czasowa w godzinach
            var dataSwieta = new Date(data);

            // Dostosuj datę na podstawie różnicy czasowej
            dataSwieta.setHours(dataSwieta.getHours() - strefaKoreanska);

            if (dataSwieta < dzis) {
                dataSwieta.setFullYear(dataSwieta.getFullYear() + 1); // Przesuń na kolejny rok
            }

            var roznica = dataSwieta - dzis;
            var dni = Math.floor(roznica / (1000 * 60 * 60 * 24));
            return dni;
        }

        // Funkcja do ustawiania koloru tekstu dla najbliższego święta
        function ustawKolorTekstu(dataSwieta) {
            var dzis = new Date();
            var strefaKoreanska = 9; // Różnica czasowa w godzinach
            var dataSwieta = new Date(dataSwieta);

            // Dostosuj datę na podstawie różnicy czasowej
            dataSwieta.setHours(dataSwieta.getHours() - strefaKoreanska);

            if (dataSwieta > dzis) {
                return "green";
            }
            return "black";
        }

        // Funkcja wyświetlająca święta i pozostałe dni
        function wyswietlSwieta() {
            var aktualnaData = new Date();
            var rok = aktualnaData.getFullYear(); // Pobierz aktualny rok

            var swieta = [
                { data: rok + "-01-01", nazwa: "Nowy Rok" },
                { data: rok + "-03-08", nazwa: "Dzień Kobiet" },
                { data: rok + "-04-15", nazwa: "Dzień Słońca (Rocznica urodzin Kim Ir Sena)" },
                { data: rok + "-04-25", nazwa: "Rocznica ustanowienia Koreańskiej Armii Ludowej" },
                { data: rok + "-05-01", nazwa: "Święto Robotnicze" },
                { data: rok + "-07-27", nazwa: "Dzień Zwycięstwa Wyzwolenia Ojczyzny" },
                { data: rok + "-08-25", nazwa: "Dzień Songun" },
                { data: rok + "-09-09", nazwa: "Rocznica ustanowienia Koreańskiej Republiki Ludowo-Demokratycznej" },
                { data: rok + "-10-10", nazwa: "Rocznica założenia Partii Pracy Korei" },
                { data: rok + "-11-16", nazwa: "Dzień Matki" },
                { data: rok + "-12-27", nazwa: "Święto konstytucji Koreańskiej Republiki Ludowo-Demokratycznej" }
            ];

            var dzis = new Date();
            var lista = document.getElementById("listaSwiat");
            lista.innerHTML = "";

            for (var i = 0; i < swieta.length; i++) {
                var dataSwieta = new Date(swieta[i].data);
                var dniDoSwieta = obliczPozostaleDni(dataSwieta);
                var kolorTekstu = ustawKolorTekstu(dataSwieta);

                var wpis = document.createElement("li");
                var dniTekst = dniDoSwieta === 1 ? "dzień" : "dni";
                var dzienText;

                if (dniDoSwieta === 0) {
                    dzienText = "dziś";
                } else if (dniDoSwieta > 0) {
                    dzienText = "za " + dniDoSwieta + " " + dniTekst;
                } else {
                    var jutro = new Date(dataSwieta);
                    jutro.setDate(jutro.getDate() + 1);
                    dniDoSwieta = obliczPozostaleDni(jutro);
                    dniTekst = dniDoSwieta === 1 ? "dzień" : "dni";
                    dzienText = "za " + dniDoSwieta + " " + dniTekst;
                }

                wpis.innerHTML = swieta[i].data.substr(5) + " - " + swieta[i].nazwa + " (" + dzienText + ")";
                wpis.style.color = kolorTekstu;

                lista.appendChild(wpis);
            }
        }
    </script>
</head>
<body onload="wyswietlSwieta()">
    <h1>Święta w Korei Północnej</h1>
    <ul id="listaSwiat"></ul>
</body>
</html>

Proszę o rozwiązanie problemu aby te dwa święta nie były zaznaczone jednocześnie a tylko to które jest bliżej nas.

CSS / HTML Obramowanie całości 3/2 segmentowych elementów innym kolorem

Wed, 06 Sep 2023 13:51:44 +0000

Witam, potrzebuję utworzyć takie wpisy css aby uzyskać efekt jak na załączonym obrazku, mianowicie chodzi mi tutaj aby zewnętrzny obrys całego zbioru miał inny kolor niż wewnętrzne elementy, problem jest taki że ilość elementów wewnątrz może być nie parzysta na końcu przez co selektory nth-child nie zdadzą tutaj egzaminu bo trzeba by tworzyć dużo różnorakich kombinacji + przy skalowaniu się w dół z 3 segmentów robią się dwa więc robi się tego jeszcze więcej. Istnieje jakiś sposób na utworzenie takiego obramowania?

No i jest jeszcze drugi problem, mianowicie po najechaniu na wybrany element potrzebuję aby jego obramowanie wyszło ponad to "zielone"

Czy jest możliwe uzyskanie takiego efektu przy pomocy samego css?

WordPress problem z wyświetleniem listy

Thu, 24 Aug 2023 12:07:15 +0000

Cześć,

Mam problem z wyświetleniem rozwijanej listy języków do wyboru. Strona jest zrobiona w WordPressie i problem jest tylko na rozdzielczościach urządzeń mobilnych. Z mojej diagnozy wynika, że podczas kliknięcia w element, który powinien rozsuwać listę, do klas listy <ul> nie dodaje się klasa toggled. Jak dodałem sam ręcznie to klasę w devtoolsach to lista ładnie się wyświetliła, a więc problem jest jakiś z kodem javascript, tylko ta strona jest zrobiona w WordPressie i wszystkie zmiany powinienem robić przez Wordpress co mi polecacie zrobić?

Nieskończona karuzela kręcąca się w prawo

Wed, 09 Aug 2023 08:49:00 +0000

Cześć,

Próbuję zrobić karuzelę z obrazami i szybką animacją podczas przejścia. Ale utknąłem z moim problemem, prawdopodobnie jest to podstawowy problem, ale jestem nowy w JS. Muszę zrobić pętlę w nieskończoność na mojej karuzeli. Chcę to zrobić tak, aby zawsze kręciło się w prawo. Musi zawsze obracać się w prawo bez powrotu do indeksu 0 i ponownego obracania się, ponieważ to właśnie udało mi się stworzyć wcześniej.

Jak mogę to osiągnąć?

Z góry dziękuję za Twoją pomoc!

JS:

document.addEventListener('DOMContentLoaded', function() {
  const carousel = document.querySelector('.carouselm');
  let slides = Array.from(document.querySelectorAll('.slide'));
  const slideWidth = slides[0].offsetWidth;
  const centerOffset = (carousel.offsetWidth - slideWidth) / 2;
  let currentCenterIndex = 2;
  let intervalId;
  function goToSlide(index) {
    const slideOffset = centerOffset - slideWidth * index;
    carousel.style.transform = `translateX(${slideOffset}px)`;
    currentCenterIndex = index;
    slides.forEach((slide, i) => {
      slide.classList.toggle('color-slide', i === currentCenterIndex);
    });
  }

  goToSlide(currentCenterIndex);

  function nextSlide() {
    if (currentCenterIndex < slides.length - 3) {
      goToSlide(currentCenterIndex + 1);
    } else {
      const firstSlide = slides.shift();
      slides.push(firstSlide);
      currentCenterIndex = slides.length - 3;
      goToSlide(currentCenterIndex);
    }
   
  }

  function startCarousel() {
    intervalId = setInterval(nextSlide, 600);
  }

  function stopCarousel() {
    clearInterval(intervalId);
  }

  startCarousel();

  carousel.addEventListener('mouseenter', stopCarousel);
  carousel.addEventListener('mouseleave', startCarousel);


});

HTML:

<div class='carousel-container'>
    <div class='carouselm'>
      <div class='slide'>
        <a href="#">
          <img src='' alt=''>
        </a>
      </div>
      <div class='slide'>
        <a href="#">
          <img src='' alt=''>
        </a>
      </div>
      <div class='slide'>
        <a href="#">
          <img src='' alt=''>
        </a>
      </div>
      <div class='slide'>
        <a href="#">
          <img src='' alt=''>
        </a>
      </div>
      <div class='slide'>
        <a href="#">
          <img src='' alt=''>
        </a>
      </div>
      <div class='slide'>
        <a href="#">
          <img src='' alt=''>
        </a>
    </div>
      <div class='slide'>
        <a href="#">
          <img src='' alt=''>
        </a>
    </div>
      <div class='slide'>
        <a href="#">
          <img src='' alt=''>
        </a>
      </div>
      <div class='slide'>
        <a href="#">
          <img src='' alt=''>
        </a>
      </div>
      <div class='slide'>
        <a href="#">
          <img src='' alt=''>
        </a>
      </div>
      <div class='slide'>
        <a href="#">
          <img src='' alt=''>
        </a>
      </div>
      <div class='slide'>
        <a href="#">
          <img src='' alt=''>
        </a>
      </div>
      <div class='slide'>
        <a href="#">
          <img src='' alt=''>
        </a>
      </div>
      <div class='slide'>
        <a href="#">
          <img src='' alt='piekarnia-cukiernia'>
        </a>
      </div>
      <div class='slide'>
        <a href="#">
          <img src='' alt=''>
        </a>
      </div>
      <div class='slide'>
        <a href="#">
          <img src='' alt=''>
        </a>
      </div>
      <div class='slide'>
        <a href="#">
          <img src='' alt=''>
        </a>
      </div>

CSS:

.carousel-container {
    overflow: hidden;
    position: relative;
  }

.carouselm {
    display: flex;
    transition: transform 0.5s ease-in-out; 
}

.slide img {
    width: 384px;
    height: 305px;
    filter: grayscale(1);
    transition: scale 1.4s;
    scale: .7;
}

.color-slide img {
    filter: grayscale(0);
    scale: .9;
    opacity: 1;
}

Bootstrap nie działa justify-content

Mon, 17 Jul 2023 15:38:30 +0000

            <div class="container-fluid">
               <div class="row d-flex flex-row align-items-center justify-content-evenly">
                <div class="col d-flex flex-column align-items-start justify-content-between">
                    <img src="img/icons/icon1.svg" alt="icon">
                    <p class="number pink number__bigger">721</p>
                    <p class="text__section2">Aliquam ac dui vel dui vulputate consectetur. Mauris massa.</p>
                </div>
                <div class="col d-flex flex-column align-items-start justify-content-between">
                    <img src="img/icons/icon2.svg" alt="icon">
                    <p class="number pink number__bigger text-uppercase">16 kg</p>
                    <p class="text__section2">Aliquam ac dui vel dui vulputate consectetur. Mauris massa.</p>
                </div>
                <div class="col d-flex flex-column align-items-start justify-content-between">
                    <img src="img/icons/icon3.svg" alt="icon">
                    <p class="number pink number__bigger">84</p>
                    <p class="text__section2">Aliquam ac dui vel dui vulputate consectetur. Mauris massa.</p>
                </div>
             </div>

Cześć czy możecie mi wytłumaczyć czemu nie justify-content nie działa zarówno w przypadku "row" jak "col"?

Czy jest sens próbować w freelancing jako początkujący front-end developer?

Fri, 07 Jul 2023 10:48:15 +0000

Cześć!

Z góry przepraszam, jak złą kategorię wybrałem ale nie za bardzo wiedziałem do czego moje pytanie zkategoryzować.

Jestem dość świeżo po technikum 4 letnim (ostatni rocznik gimnazjalny), a że w wolnym czasie uczyłem się HTML-a i CSS-a więc nie wiem czy w ogóle jest sens próbować w freelancing jako osoba co zna jedynie HTML i CSS3, bo nie ukrywam jakieś pierwsze pieniądze bym zarobił?

I żeby nie było, nie chodzi mi o to aby zarabiać kokosy, bo nawet jak dałbym radę zarobić nawet 2-3$ to byłoby super, ale że nie znam kompletnie rynku freelancerskiego, to przychodzę z poradą do was :)

Opinie z google

Mon, 26 Jun 2023 11:11:59 +0000

Cześć,

Czy ktoś z Was dodawał już może opinie z google na stronie u swojego klienta???

Wiem, że trzeba skorzystać z API google, ale czy jest jakieś szybsze rozwiązanie ?

Generalnie chodzi o slider/widget z aktualnymi opiniami na google. Czy wogole są darmowe opcje ?

photoshop blysk przeniesienie do css

Tue, 20 Jun 2023 06:23:09 +0000

Mam photoshopie element który ma blask zewnętrzny jako cień lecz nie mogę go odwzorować 1:1, wychodzi mi albo za mało rozmyty albo za bardzo go widać. Jakieś sugestie jak właściwości ustawić w box-shadow dla poniższych właściwości ps. Najbardziej podobny efekt daje zastosowanie opcji box-shadow: 0 0 50px -30px #ccc;

instagram post na stronie

Wed, 17 May 2023 21:10:55 +0000

Chciałbym wrzucić posty z IG na własnej stronie z mojej strony "firmowej". O ile z FB mi się udało (jest tutorial i ładnie opisany) o tyle na IG nie ma poradnika. Wrzuciłem "darmowy" skrypt z jednych generatorów ale niestety ma tylko 200 wyświteleń. Czy jest jakiś skrypt z IG?

Miejsce na kod źródłowy w\w aplikacji internetowej oraz podgląd

Sat, 06 May 2023 16:06:53 +0000

Chcę stworzyć pole do edycji kodu HTML CSS oraz Jscript, a także miejsce obok na podgląd strony.

Problem w tym, że nie potrafię stworzyć takiego pola na kod. Nie wiem, czy użyć tagu texarea, czy code, tak aby np ostre nawiasy w HTML, albo klamry w CSS były widoczne dla przeglądarki jako napis, a nie kod, który zinterpretuje wewnątrz tagu texarea/code.

Druga sprawa, chcę aby element obok wyświetlał zinterpretowany kod HTML jako stronę w widoku na żywo.

Wyśrodkowanie strony

Thu, 06 Apr 2023 17:22:31 +0000

Wita=j zainteresowaly mnie twoje filmiki odnosnie tworzenia stron i nie ukrywam bardzo mnie rpzekonałes do tego by sprobowac swoich sił nie mniej jednak sa to stare filmy bo sprzed 8 lat ale i tak działam.. napotkalem kilka bledów w swoim kodzie i nabierzaco je analizowalem i naprawialem lecz teraz od 2 dni kombinuje bo nie jestem w stanie ustalić co poszło nie tak a mianowicie chodzi o wysrodkowanie strony , aby wszytskie kafelki byly w pojemniku bo rozlazły mi sie ... moze pomoze ktos ? najgorsze jest to ze analizuje kazda linijke z mojego kodu z filmem i nie widze roznicy

Rozjechanie sie elementów po ustawieniu @media

Fri, 31 Mar 2023 14:49:23 +0000

Witam.
Udało mi się ogarnąć media wygląda to teraz okej. Lecz mam pytanie dlaczego jak wrócę do normalnych rozmiarów ( przy 361px zmniejszyłem rozmiar squerów i desc) i do ułożenia squerów w formie wiersza a nie kolumny to ostatni kwadrat się wykrzacza? Jak usunę media to wszystko jest w porządku niezbyt rozumiem czemu się tak dzieje... Jeszcze pytanie odnoście desc czemu tylko w ostatnim jest justowanie?

https://codepen.io/Kondziks/pen/RwYzbmW

Dodanie duzej ilosci zdjec bez recznego dodawania znacznikow img w HTML.

Fri, 24 Mar 2023 09:55:52 +0000

WItam

Na samym poczatku przepraszam za brak polskich znakow poniewaz nie odkrylem jak je wlaczyc w I3wm xD.

Chcialbym poprosic oto zeby ktos mi powiedzial w jakim kierunku mam poczytac aby dowiedziec sie jak dodac duza ilosc zdjec z folderu do HTML bez dodawania ich recznie poprzez znaczniki <img> bylo by to strasznie mozolne :P.

Usunięcie litery w podtytule na wpisie bloga wp

Fri, 24 Feb 2023 20:05:18 +0000

Dzień dobry,

chciałem usunąć literę w podtytule wpisu bloga. Niestety nie potrafię dojść jak to zrobić poniżej piszę jak to wygląda:

Wywiad z T.love

22/02/2023| W WYWIADY |PRZEZ MIKOŁAJ

I chciałbym się pozbyć litery "W", żeby to wyglądało tak:

Wywiad z T.love

22/02/2023| WYWIADY|PRZEZ MIKOŁAJ

Ogólnie to po kliknięciu inspekcja wyskakuje mi kod:

<div class="category-info">
<span>|</span>
W <a href="http://....../category/wywiady/" title="Zobacz wszystkie wpisy w Wywiady">Wywiady</a>
</div>

<span>|</span>W

<a href="http:..../category/wywiady/" title="Zobacz wszystkie wpisy w Wywiady">Wywiady</a>

</div>

chciałem nadpisać klasę w Custom CSS robiąc to tak:

.category-info {
    visibility:hidden;   
}

.category-info:after {
    visibility:visible;
    content:"|" ;

}

Niestety rezultatem tego jest:

Wywiad z T.love

22/02/2023 | |PRZEZ MIKOŁAJ

poza tym WYWIADY jest jednym z 3 możliwych kategorii która musi się zmieniać w zależności od rodzaju wpisu.

Dlatego bardzo proszę o pomoc jak rozwiązać ten problem.

Obramowanie zdjęcia na hover

Sat, 28 Jan 2023 02:03:47 +0000

Witam

Mam problem w CSS ze zdjęciem. Mianowicie dodałem do obrazka obramowanie i gdy ustawiam selektor :hover to daje tam między innymi blur. Problem polega na tym, że łapie on też to obramowanie i wygląda to słabo. Dlatego mam pytanie, jak zrobić aby te style łapały samo zdjęcie? Proszę o pomoc.

.cont {
    width: 100%;
}
.img {
    width: 100%;
    border: 0.2rem solid var(--Color9);
    filter: contrast(0.9);
    cursor: pointer;
    transition: .2s ease-in-out;
}
.img:hover {
    filter: contrast(0.6) blur(0.1rem) grayscale(0.7);
}

<div class="cont">
    <img src="images/Subsurface-engineering-1-scaled.jpg" class="img" alt="">
</div>

Zamknięcie menu po kliknięciu w odnośnik

Fri, 13 Jan 2023 16:59:28 +0000

Cześć, jak w tym menu: https://codepen.io/dezzy00/pen/RwBgQMQ

dodać zamykanie menu po kliknięciu w "Home", "O mnie", i tak dalej?

Menu opiera się na samym CSS'ie przy użyciu :checked.

float, pozycjonowanie, div

Wed, 11 Jan 2023 20:04:30 +0000

Hej

Czy da rade wypozycjonować te kafelki tak żeby były jak na obrazku ale usprawniając trochę kod, można to jakoś sprytniej zrobić?

html

<div class="s"></div>
<div class="a"></div>
<div class="a"></div>
<div class="b"></div>
<div class="b"></div>

css

.s {
    width:210px;
    height:210px;
    background-color:red;
    float:left;
    
}
.a {
    width:100px;
    height:100px;
    background-color:blue;
    margin:0 10px 0 10px;
    float:left;  
}
.b {
    width:100px;
    height:100px;
    background-color:blue;
    margin:110px 10px 0 10px;
    float:left;
    position:relative;
    right:240px;
}

css type="checkbox" wybranie kokretnego ??

Sun, 08 Jan 2023 19:32:25 +0000

Hej mam kartę w której jest zdjęcie i po naciśnięciu w button pojawia się tekst i wszystko fajnie działa ale kiedy powieliłam kartę to problem bo nie wiem jak zrobić żeby css wiedział którą ma kartę z tekstem pokazać tzn jak nacisnę na pierwszej to rozwija pierwszą ale jak nacisnę drugą to i tak rozwinie pierwszą i podobnie z trzecią itd. Próbowałam dodać wartość :nth-child ale nie mam pomysłu jak wskazać ten wybrany, a z child nie działa lub źle coś robię. Jakieś podpowiedzi lub sugestie??

<div class="card">
                        <input type="checkbox" id="check">
                        <div class="card-inside">
                            <div class="text-box">
                                <h2>01-01-2023</h2>
                                <h6>Start</h6>
                            </div>
                            <img src="001nn.png" alt="">
                        </div>
                        <label for="check" class="control-btn"><svg xmlns="http://www.w3.org/2000/svg" width="1em"
                                height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
                                <g transform="rotate(180 12 12)">
                                    <path fill="currentColor"
                                        d="M12 19.575q-.2 0-.375-.063q-.175-.062-.325-.212l-6.6-6.6q-.3-.3-.3-.713q0-.412.3-.712t.7-.3q.4 0 .7.3l4.9 4.9v-11.2q0-.425.288-.7Q11.575 4 12 4t.713.287Q13 4.575 13 5v11.175l4.9-4.9q.3-.3.7-.3q.4 0 .7.3q.3.3.3.712q0 .413-.3.713l-6.6 6.6q-.15.15-.325.212q-.175.063-.375.063Z" />
                                </g>
                            </svg></label>
                        <div class="content">
                            <p>
                                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eveniet, tenetur quasi rerum
                                veritatis pariatur obcaecati, aspernatur officia sit vero necessitatibus sapiente
                                corporis harum animi dolor sequi eaque in, accusantium minus?
                            </p>
      </div>
</div>

css

.card{
  position: relative;
  height: 392px;
  background: #000;
  padding: 8px;
  border-top-left-radius: 70px;
  border-top-right-radius: 70px;
  border-bottom-right-radius: 40px;
  border-bottom-left-radius: 5px;
  overflow: hidden;
  box-shadow: 2px 1px 20px #03a9c185;
  border: 2px solid #03a9c185;
  margin-top: -33px;
}
.card .card-inside{
  width: 449px;
  height: 370px;
  position: relative;
  background: linear-gradient(180deg, #eaeaea 0%, #f3f3f3 100%);
  border-radius: 65px;
  overflow: hidden;
  transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.375);
  box-shadow: 4px 4px 4px #000000c4;
  z-index: 10;
}
.card-inside img{
  position: absolute;
  height: 380px;
  bottom: 0;
  top: 0;
  right: -50px;
}
.text-box{
  z-index: 5;
  position: absolute;
  background: #ffffff52;
  border-radius: 50px;
  padding: 4px 20px;
  top: 18px;
  left: 16px;
  width: 35%;
  box-shadow: 4px 4px 4px #00000045;
  text-align: center;
}
.text-box h2{
  color: #0a077d;
  text-shadow: 1px 1px 2px #3b3e6f;
  font-size: 1rem;
}
.text-box h6{
  font-size: 1.2rem;
  font-weight: 600;
  color: #d1693a;
  text-shadow: 0 1px 1px black;
}
.control-btn{
  cursor: pointer;
  color: #fff;
  background: hsl(191, 90%, 40%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  font-size: 2.5rem;
  position: absolute;
  display: grid;
  place-items: center;
  bottom: 9px;
  left: 6px;
  z-index: 10;
  box-shadow: 0 6px 12px hsl(191, 40%, 40%);
  transition: 0.6s cubic-bezier(0.175, 0.885, 0.32, 2.975);
}
.card input[type="checkbox"]:checked{
  appearance: none;
  position: absolute;
}
.card input[type="checkbox"]:checked ~ .card-inside{
  height: 240px;
}
.card input[type="checkbox"]:checked ~ .control-btn{
  bottom: 38%;
  transform: rotate(-180deg);
  transition: 0.7s cubic-bezier(0.075, 0.185, 0.42, 1.975);
}
.card .content{
  width: 449px;
  color: #4b4b4b;
  padding: 10px;
  text-align: right;
  margin-top: 0px;
}
.content p{
  font-size: 0.9rem;
  line-height: 1.5rem;
}

i tutaj nie wiem jak wskazać w css że chodzi mi o rozwinięcie konkretnej karty przy tym zapisie

.card input[type="checkbox"]:checked{
  appearance: none;
  position: absolute;
}
.card input[type="checkbox"]:checked ~ .card-inside{
  height: 240px;
}
.card input[type="checkbox"]:checked ~ .control-btn{
  bottom: 38%;
  transform: rotate(-180deg);
  transition: 0.7s cubic-bezier(0.075, 0.185, 0.42, 1.975);
}

Css hover - jak to zrobić

Fri, 25 Nov 2022 21:48:15 +0000

Witam,

jak zrobić, żeby .photo-box poszerzał się, a sąsiadujące z nim zwężały?

Chciałbym uzyskać efekt jak na filmie (https://www.youtube.com/watch?v=IoCzObAXHm8&list=WL&index=10&t=357s).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Foxes</title>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500;600&display=swap" rel="stylesheet">
</head>
<body>
    <div class="logo">
        Foxes
        <button class="burger"><span class="burger-box">
            <span class="burger-line"></span>
        </span></button>
    </div>
    <div class="nav">
        <ul class="menu">
            <li class="button">Lis Polarny</li>
            <li class="button">Lis Rudy</li>
            <li class="button">Lis Pustynny</li>
        </ul>
    </div>
        <div class="photos">
            <div class="photo-box lis-polarny">
                <p>
                    Lis Polarny
                    <br />
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris faucibus sollicitudin arcu ut ullamcorper. Etiam maximus tristique dictum. Nullam in ligula venenatis, rhoncus ex id.</p>
            </div>
            <div class="photo-box lis-rudy">
                <p>
                    Lis Rudy
                    <br />
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris faucibus sollicitudin arcu ut ullamcorper. Etiam maximus tristique dictum. Nullam in ligula venenatis, rhoncus ex id.</p>
            </div>
            <div class="photo-box lis-pustynny">
                <p>
                    Lis Pustynny
                    <br />
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris faucibus sollicitudin arcu ut ullamcorper. Etiam maximus tristique dictum. Nullam in ligula venenatis, rhoncus ex id.</p>
            </div>
        </div>
    <script src="script.js"></script>
</body>
</html>

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
}
body{
    color: white;
    overflow: hidden;
    position: relative;
    padding: 0;
    margin: 0;
}
.logo{
    background-color: rgba(0, 0, 0, 0.25);
    width: 100vw;
    height: 56px;
    text-align: center;
    font-size: 45px;
    font-weight: 500;
    position: absolute;
    z-index: 9999;
}
.burger{
    position: absolute;
    left: 10px;
    top: 7px;
    background-color: transparent;
    border: transparent;
    display: inline-block;
    cursor: pointer;
}
.burger-box{
    width: 62px;
    height: 38px;
    position: relative;
    display: inline-block;
}
.burger-line{
    display: inline-block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: white;
    width: 100%;
    height: 3px;
    left: 0;
    transition: background-color .3s;
}
.burger-line::before, .burger-line::after{
    content: '';
    display: inline-block;
    position: absolute;
    transform: translateY(-50%);
    background-color: white;
    width: 100%;
    height: 3px;
    left: 0;
    transition: transform .3s linear;
}
.burger-line::before{
    top: -15px;
}
.burger-line::after{
    top: 18px;
}
.burger-active .burger-line{
    background-color: transparent;
}
.burger-active .burger-line::before{
    transform:  translateY(15px) rotate(45deg);
}
.burger-active .burger-line::after{
    transform: translateY(-18px) rotate(-45deg);
}
.nav{
    position: absolute;
    background-color: rgba(0, 0, 0, 0.15);
    top: 56px;
    width: 100vw;
    height: 47px;
    left: 0;
    z-index: 1;
    transform: translateX(-100vw);
    transition: opacity .3s ease-in-out;
    opacity: 0;
    z-index: 9999;
}
.nav-active{
    opacity: 1;
    transform: translateX(0);
}
.menu{
    display: flex;
    list-style-type: none;
    height: 47px;
}
.button{
    font-size: 30px;
    font-weight: 500;
    flex-grow: 1;
    padding-top: 5px;
    text-align: center;
    height: 47px;
}
.button:not(:last-child){
    border-right: 3px solid white;
}
.photos{
    width: 100vw;
    height: 100vh;
    display: flex;
    padding: 0;
    margin: 0;
}
.photo-box{
    background-position: center;
    background-size: cover;
    font-weight: 300;
    font-size: 20px;
    flex-grow: 1;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
    transition: transform .3s ease-in-out;
    text-transform: uppercase;
    text-align: center;
}
.photo-box:hover{
    transform: scale(1.2);
    z-index: 9;
}
.photo-box p{
    z-index: 1;
}
.photo-box p::first-line{
    font-size: 22px;
}
.photo-box::before{
    content: '';
    position: absolute;
    background-color: rgba(0, 0, 0, 0.25);
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    top: 0;
}
.lis-rudy{
    background-image: url(img/rudy/lis1.jpg);
}
.lis-pustynny{
    background-image: url(img/fenek/fenek1.jpg);
}
.lis-polarny{
    background-image: url(img/polarny/polarny1.webp);
}

Z góry dziękuję za wszystkie odpowiedzi

Css hover mi nie działa

Wed, 23 Nov 2022 17:18:59 +0000

Witam,

nie działa mi .photo-box:hover .

Jest w stanie ktoś pomóc?

@font-face{
    font-family: Montserrat-extra-light;
    src: url(/fonts/Montserrat-ExtraLight.ttf);
}
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
}
body{
    color: white;
    overflow: hidden;
    background-color: #2b2b2b;
}
.logo{
    background-color: #2b2b2b;
    position: relative;
    width: 100vw;
    height: 56px;
    text-align: center;
    font-size: 45px;
    font-weight: 600;
}
.burger{
    position: absolute;
    left: 10px;
    top: 7px;
    background-color: transparent;
    border: transparent;
    display: inline-block;
    cursor: pointer;
}
.burger-box{
    width: 62px;
    height: 38px;
    position: relative;
    display: inline-block;
}
.burger-line{
    display: inline-block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: white;
    width: 100%;
    height: 3px;
    left: 0;
}
.burger-line::before, .burger-line::after{
    content: '';
    display: inline-block;
    position: absolute;
    transform: translateY(-50%);
    background-color: white;
    width: 100%;
    height: 3px;
    left: 0;
}
.burger-line::before{
    top: -15px;
}
.burger-line::after{
    top: 18px;
}
.photos{
    width: 100vw;
    height: calc(100vh - 56px);
    display: flex;
    padding: 0;
    margin: 0;
}
.photo-box{
    background-position: center;
    background-size: cover;
    font-weight: 300;
    font-size: 20px;
    flex-grow: 1;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
    transition: flex-grow .3s ease-in-out;
    text-transform: uppercase;
}
.photo-box:hover{
    flex-grow: 3;
}
.photo-box p{
    z-index: 1;
}
.photo-box p::first-line{
    font-size: 22px;
}
.photo-box::before{
    content: '';
    position: absolute;
    background-color: rgba(0, 0, 0, 0.25);
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}
.lis-rudy{
    background-image: url(img/rudy/lis1.jpg);
}
.lis-pustynny{
    background-image: url(img/fenek/fenek1.jpg);
}
.lis-polarny{
    background-image: url(img/polarny/polarny1.webp);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Foxes</title>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500;600&display=swap" rel="stylesheet">
</head>
<body>
    <div class="logo">
        Foxes
        <button class="burger"><span class="burger-box">
            <span class="burger-line"></span>
        </span></button>
        <div class="photos">
            <div class="photo-box lis-polarny">
                <p>
                    Lis Polarny
                    <br />
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris faucibus sollicitudin arcu ut ullamcorper. Etiam maximus tristique dictum. Nullam in ligula venenatis, rhoncus ex id.</p>
            </div>
            <div class="photo-box lis-rudy">
                <p>
                    Lis Rudy
                    <br />
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris faucibus sollicitudin arcu ut ullamcorper. Etiam maximus tristique dictum. Nullam in ligula venenatis, rhoncus ex id.</p>
            </div>
            <div class="photo-box lis-pustynny">
                <p>
                    Lis Pustynny
                    <br />
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris faucibus sollicitudin arcu ut ullamcorper. Etiam maximus tristique dictum. Nullam in ligula venenatis, rhoncus ex id.</p>
            </div>
        </div>
    </div>
</body>
</html>

Z góry dziękuję za wszystkie odpowiedzi.

Czy kursy M.Z są aktualne?

Mon, 21 Nov 2022 20:32:57 +0000

Mam pytanie czy kursy M.Z są aktualne?

Uczę się ale widzę ,że niektóre rzeczy są stare. Czy aktualne kursy to dobry wybór? Skąd znaleźć dobre źrodło do aktualnej wiedzy?

Hover css, div mi ucieka.

Mon, 21 Nov 2022 19:57:47 +0000

Witam,

chciałbym zrobić, żeby po najechaniu na .button w .nav wyświetlił się .hover i dało się na niego najechać.

Jak chcę przejechać myszką z .button na .hover to .hover mi ucieka.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Podróże</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Kolker+Brush&display=swap" rel="stylesheet">
    <style>
        :root{
           --dark: #0a0a0a; 
           --blue: #26278a;
        }
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
            color: white;
            font-family: 'Lato', sans-serif;
        }
        body{
            width: 100vw;
            height: 100vh;
            background: var(--blue);
            background-image: url("blue.jpg");
            background-size: cover;
            background-position: center;
            align-items: center;
            justify-content: center;
            display: flex;
            position: relative;
            overflow: hidden;
        }
        .container{
            background: rgba(0, 0, 0, 0.55);
            background: linear-gradient(45deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.1));
            backdrop-filter: blur(10px);
            width: 70vw;
            min-height: 70vh;
            border-radius: 1.5vh;
            animation: opacity linear 1s;
            position: relative;
            overflow: hidden;
        }
       a{
        text-decoration: none;
       }
        h1{
            text-align: center;
            font-weight: 700;
            color: white;
            font-size: 28px;
            margin-top: 10px;
        }
        @keyframes opacity{
            from{
                opacity: 0;
            }
            to{
                opacity: 1;
            }
        }
        .hamburger{
            position: absolute;
            background-color: transparent;
            border: transparent;
            padding: 10px;
            top: 5px;
            left: 15px;
            display: inline-block;
            cursor: pointer;
            transition: .3s transform;
        }
        .hamburger-box{
            position: relative;
            width: 48px;
            height: 24px;
            display: inline-block;
        }
        .hamburger-line{
            width: 100%;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            background-color: white;
            height: 3px;
            display: inline-block;
            transition: background-color .3s;
        }
        .hamburger-line::before, .hamburger-line::after{
            width: 100%;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            background-color: white;
            height: 3px;
            display: inline-block;
            content: ' ';
            transition: transform .2s .15s;
        }
        .hamburger-line::before{
            top: -10px;
        }
        .hamburger-line::after{
            top: 11.5px;
        }
        .hamburger-active{
            transform: translateX(20vw);
        }
        .hamburger-active .hamburger-line{
            background: transparent;
        }
        .hamburger-active .hamburger-line::before{
            transform: translateY(10px) rotate(45deg);
        }
        .hamburger-active .hamburger-line::after{
            transform: translateY(-11.5px) rotate(-45deg);
        }
        .nav{
            height: 100%;
            width: 20vw;
            position: absolute;
            top: 0;
            font-size: 20px;
            transform: translateX(-20vw);
            border-radius: 20px;
            background: linear-gradient(45deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.25));
            transition: transform .3s;
            padding-top: 20px;
        }
        .menu{
            list-style-type: none;
            padding: 20px;
            overflow: hidden;
        }
        .nav-active{
            transform: translateX(0);
        }
        .button{
            padding: 10px;
            border-bottom: solid white 3px;
            cursor: pointer;
        }
        .button-button{
            background-color: transparent;
            border: transparent;
            font-size: 20px;
            cursor: pointer;
        }
        .menu li:last-child{
            border-bottom: none;
        }
        .logo{
            text-align: center;
            font-size: 30px;
            font-weight: 700;
            margin-top: 7px;
        }
        .hover{
            position: absolute;
            width: 15vw;
            left: 21vw;
            background: linear-gradient(45deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.15));
            border-radius: 10px;
            transform: translateX(-36vw);
        }
        .hover ul{
            list-style-type: none;
        }
        .button:hover .hover{
            transform: translateX(0);
        }
        .hover:hover{
            transform: translateX(0);
        }
    </style>
</head>
<body>
    <div class="container">
        <main>
        <div class="logo">
            <a href="index.html">
                Podróże
            </a>
           <button class="hamburger">
            <span class="hamburger-box">
                <span class="hamburger-line"></span>
            </span>
           </button>
           <div class="nav">
            <ul class="menu">
                <li class="button"><a href="#">Madagaskar</a><span class="hover">
                    <ul>
                        <li>Stolica</li>
                        <li>Miasto</li>
                        <li>Plaża</li>
                        <li>Nie wiem</li>
                        <li>Słoń</li>
                        <li>Super</li>
                        <li>Zoo</li>
                    </ul></span></li>
                <li class="button"><a href="#">Warszawa</a><span class="hover">
                    <ul>
                        <li>Stolica</li>
                        <li>Miasto</li>
                        <li>Plaża</li>
                        <li>Nie wiem</li>
                        <li>Słoń</li>
                        <li>Super</li>
                        <li>Zoo</li>
                    </ul></li>
                <li class="button"><a href="#">Zanzibar</a><span class="hover">
                    <ul>
                        <li>Stolica</li>
                        <li>Miasto</li>
                        <li>Plaża</li>
                        <li>Nie wiem</li>
                        <li>Słoń</li>
                        <li>Super</li>
                        <li>Zoo</li>
                    </ul></li>
                <li class="button"><a href="#">Los Angeles</a><span class="hover">
                    <ul>
                        <li>Stolica</li>
                        <li>Miasto</li>
                        <li>Plaża</li>
                        <li>Nie wiem</li>
                        <li>Słoń</li>
                        <li>Super</li>
                        <li>Zoo</li>
                    </ul></li>
                <li class="button"><a href="#">San Francisco</a><span class="hover">
                    <ul>
                        <li>Stolica</li>
                        <li>Miasto</li>
                        <li>Plaża</li>
                        <li>Nie wiem</li>
                        <li>Słoń</li>
                        <li>Super</li>
                        <li>Zoo</li>
                    </ul></li>
            </ul>
           </div>
        </div>
        <div id="content">
            <p>
                
            </p>
        </div>
    </div>
    </main>
    <script>
        var burger = document.querySelector('.hamburger');
        var nav = document.querySelector('.nav');
        var clicked = () => {
            burger.classList.toggle('hamburger-active');
            nav.classList.toggle('nav-active');
        }
        burger.addEventListener('click', clicked);
    </script>
</body>
</html>

Z góry dziękuję za wszystkie odpowiedzi.

Flexbox - umieszczenie elementów obok siebie

Thu, 17 Nov 2022 19:02:17 +0000

Witam, ostatnio chciałem użyć flexboxa by odwzorować umieszczenie elementów zrobionych za pomocą float, myślałem że nie będzie trudno, niestety nie jestem usatysfakcjonowany z efektu końcowego - elementy nie są równe poziomo, oczywiście można bawić się marginesami, ale mam jakieś przeczucie, że za bardzo przekombinowałem używając wielu kontenerów by efekt był podobny do pierwszego projektu, który umieszczam poniżej:

https://codepen.io/jonasschmedtmann/pen/eYgbXrV/1a12771af64312342aa5a5f45bd2347c

a tutaj moja wersja z flexboxem:

https://jsfiddle.net/joLkeq18/

Proszę o jakiś feedback co poprawić.

Problem z menu - HTML i CSS

Thu, 03 Nov 2022 16:26:34 +0000

Witam, chciałbym zrobić menu na stronie za pomocą

<a>

a nie

<div>

Mój kod wygląda tak:

<?php
session_start();
?>
<html>
<head>
	<title>Strona Główna! - Geo Master</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="btn-group">
	<a class=menu href="main.php"><br /><br />main</a>
	<a class=menu href="maps.php"><br /><br />maps</a>
	<a class=menu href="stats.php"><br /><br />stats</a>
	<a class=menu href="state.php"><br /><br />state</a>
	<a class=menu href="friends.php"><br /><br />friends</a>
	<a class=menu href="settings.php"><br /><br />settings</a>
	</div>
</body>
<footer>

</footer>
</html>

a CSS:

body {
	background-image: url('bg.png');
	color: white;
	text-align: center;
}
footer {
	background: gray;
	color: black;
}
input {
	
}
.title {
	font-size: 90px;
}
.button {
	display: block;
    height: 30px;
    width: 200px;
    background: #07a3f3;
    border: 2px solid rgba(33, 68, 72, 0.59);
	
	text-align: center;
    font: bold 1.5em/25px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	
	background: linear-gradient(top, #0bdf00, #11610d);
    border-radius: 50px;
    box-shadow: 0 8px 0 #063c03;
    text-shadow: 0 2px 2px rgba(255, 255, 255, 0.2); 
	
    -webkit-border-radius: 50px;
    -khtml-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
 
    -webkit-box-shadow: 0 8px 0 #063c03;
    -moz-box-shadow: 0 8px 0 #063c03;
    box-shadow: 0 8px 0 #063c03;
 
    text-shadow: 0 2px 2px rgba(255, 255, 255, 0.2);
}
a.button {
    text-decoration: none;
}
a.button:hover {
    background: blue;
    background: -webkit-linear-gradient(top, blue, lightblue);
    background: -moz-linear-gradient(top, blue, lightblue);
    background: -o-linear-gradient(top, blue, lightblue);
    background: -ms-linear-gradient(top, blue, lightblue);
    background: linear-gradient(top, blue, lightblue);
}
.szara{
    background: #d4d9df;
}
.szara input[type=text]{
    border:1px solid #acb1b7;
    background-color:#fcfcfc;
	border-radius: 25%;
}
.menu {
	text-align: right;
	display: block;
    height: 50px;
    width: 50px;
    background: white;
    border: 2px solid rgba(33, 68, 72, 0.59);
	
    font: bold 1.5em/10px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	text-align: center;
    font-size: 10px;
	
	background: linear-gradient(top, white, white);
}
a.menu {
	text-decoration: none;
}

Proszę o szybką odpowiedź.

CSS HTML position absolute

Mon, 17 Oct 2022 22:30:29 +0000

Witam, mam taki problem, gdy daje tło position: absolute, to nie mogę w ogóle nacisnąć linków, może ktoś pomóc jak to rozwiązać lub dać jakiś inny sposób na umieszczenie tła pod wszystkim.

https://ibb.co/Ssxk3SL

Pozdrawiam

<head>

	<title>www.x.pl</title>
	<link rel="stylesheet" href="css/style.css">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">


</head>

<body>

	<div class="szerokosc">
		<div class="bg">

		</div>

<div class="belka">

	<a href="index.php">HOME</a>
	<a href="omnie.php">O MNIE</a>

</div>
	</div>

</body>

* {margin:0px; padding: 0px;}

body, html{
	background-color: #282828;
	font-family: Arial, Open Sans;
	width: 100%;
}



.szerokosc{
	width: 100%;
	overflow:hidden;
	margin: 0 auto;
}

/* KOMPUTERY */

@media (min-width: 950px) {

.bg{
	width: 1617px;
	height: 100%;
	right: 0;
	position: absolute;
	background-image: url("/ew/images/bg.png");
}

.belka{
	width: 70%;
	height: 100px;
	margin: 0 auto;
	margin-top: 50px;
}

.belka a{
	color: #ffffff;
	text-decoration: none;
}

.logo{
	background-image: url("/images/logo.png");
	width: 132px;
	height: 29px;
	position: relative;
	top: 40px;
}

}

/* TABLETY*/

@media (max-width: 950px) and (min-width:650px){



}

/* SMARTFONY */

@media (max-width: 650px) {



}

alert toast js jak dodać możliwość koloru tła

Sun, 25 Sep 2022 17:55:39 +0000

Witajcie kombinuje jak zmieniać tło w alertach tzn tak wszystko działa tylko teraz chciałabmy to stylizować pod siebie, kod z tutoriala i tak

const DEFAULT_OPTIONS = {
  autoClose: 50000,
  position: "top-right",
  onClose: () => {},
  canClose: true,
  showProgress: true,
}

export default class Toast {
  #toastElem
  #autoCloseInterval
  #progressInterval
  #removeBinded
  #timeVisible = 0
  #autoClose
  #isPaused = false
  #unpause
  #pause
  #visibilityChange
  #shouldUnPause

  constructor(options) {
    this.#toastElem = document.createElement("div")
    this.#toastElem.classList.add("toast")   
    requestAnimationFrame(() => {
      this.#toastElem.classList.add("show")
    })
    this.#removeBinded = this.remove.bind(this)
    this.#unpause = () => (this.#isPaused = false)
    this.#pause = () => (this.#isPaused = true)
    this.#visibilityChange = () => {
      this.#shouldUnPause = document.visibilityState === "visible"
    }
    this.update({ ...DEFAULT_OPTIONS, ...options })
  }

  set autoClose(value) {
    this.#autoClose = value
    this.#timeVisible = 0
    if (value === false) return

    let lastTime
    const func = time => {
      if (this.#shouldUnPause) {
        lastTime = null
        this.#shouldUnPause = false
      }
      if (lastTime == null) {
        lastTime = time
        this.#autoCloseInterval = requestAnimationFrame(func)
        return
      }
      if (!this.#isPaused) {
        this.#timeVisible += time - lastTime
        if (this.#timeVisible >= this.#autoClose) {
          this.remove()
          return
        }
      }

      lastTime = time
      this.#autoCloseInterval = requestAnimationFrame(func)
    }

    this.#autoCloseInterval = requestAnimationFrame(func)
  }

  set position(value) {
    const currentContainer = this.#toastElem.parentElement
    const selector = `.toast-container[data-position="${value}"]`
    const container = document.querySelector(selector) || createContainer(value)
    container.append(this.#toastElem)
    if (currentContainer == null || currentContainer.hasChildNodes()) return
    currentContainer.remove()
  }


  set text(value) {
    this.#toastElem.textContent = value
  }

  set canClose(value) {
    this.#toastElem.classList.toggle("can-close", value)
    if (value) {
      this.#toastElem.addEventListener("click", this.#removeBinded)
    } else {
      this.#toastElem.removeEventListener("click", this.#removeBinded)
    }
  }

  set showProgress(value) {
    this.#toastElem.classList.toggle("progress", value)
    this.#toastElem.style.setProperty("--progress", 1)

    if (value) {
      const func = () => {
        if (!this.#isPaused) {
          this.#toastElem.style.setProperty(
            "--progress",
            1 - this.#timeVisible / this.#autoClose
          )
        }
        this.#progressInterval = requestAnimationFrame(func)
      }

      this.#progressInterval = requestAnimationFrame(func)
    }
  }

  set color(value) {
    this.#toastElem.className("color", value)
    this.#toastElem.style.setProperty("--color")
    this.#color
  }

  set pauseOnHover(value) {
    if (value) {
      this.#toastElem.addEventListener("mouseover", this.#pause)
      this.#toastElem.addEventListener("mouseleave", this.#unpause)
    } else {
      this.#toastElem.removeEventListener("mouseover", this.#pause)
      this.#toastElem.removeEventListener("mouseleave", this.#unpause)
    }
  }

  set pauseOnFocusLoss(value) {
    if (value) {
      document.addEventListener("visibilitychange", this.#visibilityChange)
    } else {
      document.removeEventListener("visibilitychange", this.#visibilityChange)
    }
  }

  update(options) {
    Object.entries(options).forEach(([key, value]) => {
      this[key] = value
    })
  }

  remove() {
    cancelAnimationFrame(this.#autoCloseInterval)
    cancelAnimationFrame(this.#progressInterval)
    const container = this.#toastElem.parentElement
    this.#toastElem.classList.remove("show")
    this.#toastElem.addEventListener("transitionend", () => {
      this.#toastElem.remove()
      if (container.hasChildNodes()) return
      container.remove()
    })
    this.onClose()
  }
}

function createContainer(position) {
  const container = document.createElement("div")
  container.classList.add("toast-container")
  container.dataset.position = position
  document.body.append(container)
  return container
}

i modyfikuje kod

const toast = new Toast({
    text: "Hello",
    position: "top-right",
    pauseOnHover: true,
    pauseOnFocusLoss: true,
  })

i teraz kombinowałam żeby wystylizować alerty do konkretnego zadania czyli danger, success itp do tej pory wzorując się na kodzie próbowałam dodać klasę i wystylizować w css jak mam tu

set position(value) {
    const currentContainer = this.#toastElem.parentElement
    const selector = `.toast-container[data-position="${value}"]`
    const container = document.querySelector(selector) || createContainer(value)
    container.append(this.#toastElem)
    if (currentContainer == null || currentContainer.hasChildNodes()) return
    currentContainer.remove()
  }

ale

const selector = `.toast-container[data-position="${value}"]`

nie bardzo potrafię wykombinować jak w podobny sposób zrobić z inną klasą gdzie po wpisaniu wartości value zostanie dodana odpowiednia klasa w css mam tak

.toast-container[data-position^="top-"] {
  top: 0;
}
.toast-container[data-position^="bottom-"] {
  bottom: 0;
}
.toast-container[data-position$="-right"] {
  right: 0;
}
.toast-container[data-position$="-left"] {
  left: 0;
}
.toast-container[data-position$="-center"] {
  left: 50%;
  transform: translateX(-50%);
}

i kombinowałam żeby dynamicznie np color: "success" lub "danger" i je wystylizować ale jak bym nie próbowała to mi nie działa i prośba o nakierowanie jak powinno poprawnie się to zrobić bo tu jest do [data-position$=""]

Obrazek najeżdża na obrazek.

Wed, 21 Sep 2022 06:54:28 +0000

Witam, mam pytanie co mogę zrobić by obrazek nie najechiwał mi na tło? Na tło użyłem background-image.....

A teraz chciałbym by ta smuga była równo na dole.

HTML:
<body>
    <style>
        body {
            background-image: url("tlo-gora.png");
        }
    </style>
    <section class="kontener-top">
        <div class="wrapper">
            <div class="logo">
                <img src="logo magia-gadzetow.png">
            </div>
            <div class="aktualnosci">
                <p class="purple-color">O nas</p>
                <p>Wyróżnione</p>
                <p>Aktualności</p>
                <p>Katalogi</p>
                <div class="background">
                    <p class="Kontakt">Kontakt</p>
                </div>
            </div>
            <div class="background-fb">
                <svg class="svg" width="7" height="12" viewBox="0 0 7 12" fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M4.54767 12V6.53386H6.61973L6.93016 4.39433H4.54767V3.03168C4.54767 2.41365 4.74059 1.99254 5.73709 1.99254H7V0.0841144C6.78028 0.0581252 6.02642 0 5.14923 0C3.31775 0 2.0643 0.993844 2.0643 2.81977V4.39433H0V6.53386H2.0643V12H4.54767Z"
                        fill="#969BA9" />
                </svg>
            </div>
        </div>
        </div>
    </section>
    <section class="kontener-top-center">
        <div class="tytul">
            <h1>Jesteśmy Czarodziejami<br>Magii Gadżetów</h1>
        </div>
        <div class="cytat">
            <p class="notka">Ciekawość doprowadzi Cię do nas</p>
        </div>
    </section>

    <section class="kontener-center">
        <div class="left">
            <div class="smuga">
                <img src="esencja.png">
            </div>
        </div>
    </section>
</body>
</html>

Wyśrodkowanie oraz rozszerzenie tekstu w CSS

Thu, 08 Sep 2022 15:54:36 +0000

Hejka,

Mam pytanie jak mogę zrobić, użyć by te dwa ostatnie teksty po lewej mi je wyśrodkowało oraz trochę rozszerzyło?

Oto zdjęcia oraz HTML/CSS

To co mam:

To co chciałbym osiągnąć:

Zdjęcie HTML/CSS:

.dane-kontaktowe {
   color: #FFFFFF;
   display: flex;
   justify-content: space-evenly;
   text-align: right;
   font-family: 'Prosto One';
   font-style: normal;
   font-weight: 400;
   font-size: 14px;
   line-height: 150%;
   width: 40%;
}

.czcionka-text {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 150%;
}

.end {
    color: #969BA9;
    font-family: 'Montserrat';
    font-style: normal;
    text-transform: uppercase;
    display: flex;
justify-content: space-evenly;
    width: 40%;
    font-weight: 400;
    font-size: 18px;
    line-height: 22px;
    letter-spacing: 0.08em;
    padding-top: 88px;
}

HTML:

<div class="dane-kontaktowe">
            <div class="czcionka-kontakt">
                <h4>Napisz do nas, odpowiemy <br>lorem@ipsum.com</h4>
            </div>
            <div>
                <img src="poczta.png">
            </div>

            <div class="czcionka-kontakt">
                <h4>Zadzwoń do nas, doradzimy <br>+48 000 000 000</h4>
            </div>
            <div>
                <img src="telefon.png">
            </div>

            <div class="czcionka-kontakt">
                <h4> Odwiedź nas, zapraszamy ul. <br>ul. Lorem Ipsum 00 <br>00-000 Lorem Ipsum</h4>
            </div>
            <div>
                <img src="siedziba.png">
            </div>
        </div>
        <div class="end">
            <div>
                <h4>COPYRIGHTS 2021</h4>
            </div>

            <div>
                <h4>POLITYKA PRYWATNOŚCI</h4>
            </div>

            <div>
                <h4>CREATED BY</h4>
            </div>
            
            <div>
                <img src="SNWS.png">
            </div>
        
        </div>

Float - elementy obok siebie

Sat, 20 Aug 2022 13:25:41 +0000

Witam, myślałem że rozumiem float, jednakże analizuje pewien przypadek, gdzie zestawiam ze sobą elementy obok, nie stosowałem clearfixa, tylko nadałem już wysokość rodzica na sztywno. Moje pytanie, dlaczego drugi element(Pianino) nie wypełnia całej szerokości nagłowka, tylko muszę użyć na niego również float:left jak na poprzednim elemencie. Link z kodem poniżej:

https://jsfiddle.net/7umh4fbj/

Position absolute height - wartości procentowe nie działają

Fri, 19 Aug 2022 22:34:34 +0000

Hej, proszę bardzo o zrozumienie dlaczego nie mogę ustawić wartości procentowych dla obiektów z position absolute.
Mam div o nazwie container, który chcę żeby mial 100% szerokość i 100% wysokość. Problem pojawia się gdy ustawiam wysokość - kiedy w containerze wysokość jest ustawiona w pikselach, pozostałe divy mogę ustawiać w procentach. Gdy height w container zmienię na proenty, wtedy w divach muszę używać pikseli.

Będę bardzo wdzięczna za wyjaśnienie!

<body>
  <div id="container">
    <div id="logo">
      <img src="//via.placeholder.com/150x50/ 2c72db/ffffff?text=Canvas">
    </div>
    <nav>
      <div class="menu">
        <ul>
          <li>Home</li>
          <li>About Us</li>
          <li>Rates</li>
          <li>Contact Us</li>
          </div>
        </nav>
      </div>
    </body>


#container {
    margin-left:auto;
    margin-right:auto;
    height:100%;
    width:100%;
    position: relative;
}
#logo {
  position: absolute;
  top:2%;
  left:2%;
}
.menu {
  position: absolute;
  top:2%;
  left: 55%;
}
li {
  display: inline-block;
  margin-right:70px;