Skalowalny komponent / Floating / Flex
Strona 1 z 2 12 OstatniOstatni
Wyniki 1 do 10 z 15

Temat: Skalowalny komponent / Floating / Flex

  1. #1
    Przeglądacz
    Dołączył
    19-07-2009
    Wpisy
    33
    Punkty
    10

    Domyślny Skalowalny komponent / Floating / Flex

    Dzień dobry, zostałem poproszony o "unowocześnienie" strony małego klubu. Dużo zmieniłem i poprawiłem ale jeszcze dużo zmian, głównie treści.
    Utknąłem na temacie stopki i nie wiem jak to ugryźć proszę o pomoc.

    Chciałbym zrobić stopkę która będzie miała 3 - 4 kolumny: logo , adres, linki mapka google. We wersji na komputer to proste bo można ustawić w tabeli ale problem w wersjach mobilnych. Tabela się nie skaluje i część jest niewidoczna. a chciałbym aby kolejne kolumny pojawiały się jedna pod drugą w widoku mobilnym.

    Stronka testowa klubu:
    http://testowa.goniecstaniatki.pl/


    Chciałbym żeby działała tak jak na tej stronie. W widoku mobilnym poszczególne elementy stopki są jeden pod drugim.
    http://mzszach.krakow.pl/

    Proszę o podpowiedź jak to zrobić. Czytałem o elementach float i flex ale napisanie tego samodzielnie przerasta moje możliwości. Robię to dla dzieciaków zupełnie za free wiec proszę tez was o pomoc.

  2. Pani Reklamowa
    Pani Reklamowa jest aktywna
    Avatar Panny Google

    Dołączył
    19-08-2010
    Skąd
    Internet
    Postów
    milion
    Pochwał
    setki
  3. #2
    Wyga alex51 awatar
    Dołączył
    16-01-2007
    Skąd
    Kamień Pomorski
    Wpisy
    3 369
    Punkty
    485

    Domyślny

    Uważam, że nie musisz szukać dodatkowych rozszerzeń, aby ustawić w stopce responsywne elementy.
    Najprościej uzyskasz zaplanowany efekt osadzając treści stopki w oddzielnych modułach.
    Innym sposobem może być użycie edytora JCE, w którym stosując poniższy kod otrzymasz widok czterech responsywnych kolumn.
    Kod HTML:
    <div class="wf-columns wf-columns-stack-medium" data-wf-columns="1"><div class="wf-column"><h3>Tytuł pierwszej kolumny</h3><p>Pierwszy akapit</p><p>Drugi akapit</p></div><div class="wf-column"><h3>Tytuł drugiej kolumny</h3><p>Pierwszy akapit</p><p>Drugi akapit</p></div><div class="wf-column"><h3>Tytuł trzeciej kolumny</h3><p>Pierwszy akapit</p><p>Drugi akapit</p></div><div class="wf-column"><h3>Tytuł czwartej kolumny</h3><p>Pierwszy akapit</p><p>Drugi akapit</p></div></div>
    PS.
    Skoro korzystasz z Joomla!3, to warto zadbać o dostosowanie strony do standardu dostępności. Polecam stronę dostepny.joomla.pl, gdzie możesz pobrać i wdrożyć na swojej stronie jeden z oferowanych szablonów zgodnych ze standardem WCAG 2.0. Przy okazji będziesz mieć pewność, że użycie pierwszego z powyższych sposobów będzie pokazywać responsywne moduły.

  4. #3
    Bywalec pablop76 awatar
    Dołączył
    07-01-2011
    Skąd
    Skierniewice
    Wpisy
    154
    Punkty
    22

    Domyślny

    Ten szablon jest z 2021 roku, ale nie posiada żadnej dokumentacji, wiec nie wiem na co go stać
    Ogólnie nie powinieneś korzystać z tabel do tworzenia układu strony. Tabele służą do przedstawiania danych tabelarycznych.
    Jeżeli nie masz swobody w korzystaniu z css, html to może powinieneś wspomóc się jakimś buliderem np. Gantry 5
    Czy ta templatka jest gotowa na joomla 4? Jest tam bootstrap, który mógłby Ci ułatwić pracę.

    W tym momencie przydałby się dostęp do zaplecza, żeby ocenić możliwości. Kierunek flexbox jest jak najbardziej poprawny.

  5. #4
    Przeglądacz
    Dołączył
    19-07-2009
    Wpisy
    33
    Punkty
    10

    Domyślny

    Cytat Wysłane przez alex51 Zobacz wiadomość
    Uważam, że nie musisz szukać dodatkowych rozszerzeń, aby ustawić w stopce responsywne elementy.
    Najprościej uzyskasz zaplanowany efekt osadzając treści stopki w oddzielnych modułach.
    Innym sposobem może być użycie edytora JCE, w którym stosując poniższy kod otrzymasz widok czterech responsywnych kolumn.
    Kod HTML:
    <div class="wf-columns wf-columns-stack-medium" data-wf-columns="1"><div class="wf-column"><h3>Tytuł pierwszej kolumny</h3><p>Pierwszy akapit</p><p>Drugi akapit</p></div><div class="wf-column"><h3>Tytuł drugiej kolumny</h3><p>Pierwszy akapit</p><p>Drugi akapit</p></div><div class="wf-column"><h3>Tytuł trzeciej kolumny</h3><p>Pierwszy akapit</p><p>Drugi akapit</p></div><div class="wf-column"><h3>Tytuł czwartej kolumny</h3><p>Pierwszy akapit</p><p>Drugi akapit</p></div></div>
    Myślę że to fajnie zadziała i wystarczy, dziękuję. Na próbę wstawiłem do http://testowa.goniecstaniatki.pl/
    Ogarnę to wieczorem ale mam jeszcze drugi problem. W jaki sposób mogę zmienić styl tego modułu stopki np: czcionkę, kolor tła itd.
    Chcę to ustawić w position-26.

    w index.php jest kod:
    <?php echo $view->position('position-26', 'dd-nostyle'); ?>

    Czy jesli zamienię na:
    <?php echo $view->position('position-26', 'dd-footer2'); ?>

    i w template.css dodam np:
    .dd-footer2
    {
    background: #3D4848;
    border-top: 1px solid #91BF1D;
    margin: 10px auto 0;
    position: relative;
    color: #ACB9B9;
    font-size: 11px;
    font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
    text-align: center;
    padding: 0;
    }

    .dd-footer2 h3
    {
    margin-top: 35px;
    margin-bottom: 35px;
    font-size: 11px;
    font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
    }

    .dd-footer2 img
    {
    margin: 10px 10px 10px 10px;
    }



    Czy to zadziała czy nazbyt upraszczam temat css ? Coś więcej muszę dodać do CSS lub index.php ?

  6. #5
    Wyjadacz
    Dołączył
    03-12-2007
    Skąd
    Lublin
    Wpisy
    682
    Punkty
    48

    Domyślny

    Po co kombinować:
    Kod HTML:
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    i masz 3 kolumny. dodajesz regułę @media i masz załatwione skalowanie.

  7. #6
    Przeglądacz
    Dołączył
    19-07-2009
    Wpisy
    33
    Punkty
    10

    Domyślny

    Cytat Wysłane przez rkonik Zobacz wiadomość
    dodajesz regułę @media
    Co masz na mysli ? Przepraszam ale nie jestem biegły w temacie ;)

    Mówimy o tym : http://www.w3bai.com/pl/cssref/css3_...html#gsc.tab=0 ?

  8. #7
    Wyjadacz
    Dołączył
    03-12-2007
    Skąd
    Lublin
    Wpisy
    682
    Punkty
    48

    Domyślny

    Tak o to chodzi
    dodajesz klasę do tego diva:
    Kod HTML:
    <div class="wf-columns wf-columns-stack-medium" data-wf-columns="1">
    powiedzmy niech się nazywa .footer-grid

    Kod:
    .footer-grid {
    display: grid;
    }
    @media (min-width: 800px) {
        .footer-grid {
             grid-template-columns: 1fr 1fr 1fr;   
       }
    }
    grid domyślnie zawsze jest 1fr więc dla urządzeń mobilnych nie ma sensu pisać reguły a wyłącznie dodanie liczby kolumn przy większych ekranach
    800px jest jedynie wartością przykładową przy której nastąpi przełączenie na 3 kolumny. Nie znam prostszego sposobu. Jeżeli ktoś zna to chętnie się pouczę.

  9. #8
    Wyga siristru awatar
    Dołączył
    28-05-2009
    Skąd
    Szczecin
    Wpisy
    3 238
    Punkty
    302

    Domyślny

    Joomla ma dołączony bootstrap wiec nie ma sensu wyważać otwartych drzwi. Niestety wersja 3 używa przestarzałego... ale wciąż można go wykorzystać.
    Zatem w kodzie szablonu zorganizować stopkę tak:

    Kod HTML:
    <footer>
    <div class="container-fluid">
    <div class="row-fluid">
    <div class="span4">treść 1</div>
    <div class="span4">treść 2</div>
    <div class="span4">treść 3</div>
    </div>
    </div>
    </footer>
    Dla nowego Bootstrapa to:

    Kod HTML:
    <div class="container">
    <div class="row">
    <div class="col-lg-4">treść 1</div>
    <div class="col-lg-4">treść 2</div>
    <div class="col-lg-4">treść 2</div>
    </div>
    </div>
    Jeśli nie strukturą to CSS - w sposób w jaki pokazał @rkonik lub wykorzystując kolumny i połączeniu ich z breakpointami:
    https://www.w3schools.com/css/css3_multiple_columns.asp
    Na Forum pomagam bezpłatnie ad maiorem Joomla gloriam
    Mimo pomocy na forum nie dajesz rady? Potrzebujesz by ekspert "zrobił to" za Ciebie?
    Napisz do mnie na PW. Argentum et Aurum nie zawsze jest konieczne ;)

  10. #9
    Przeglądacz
    Dołączył
    19-07-2009
    Wpisy
    33
    Punkty
    10

    Domyślny

    Wszystkie "fachowe" rozwiązania przerosły moje umiejętności programistyczne.
    Najłatwiejsze dla mnie okazało się rozwiązanie @alex51. Nawet nieźle wyszło i chyba działa poprawnie.
    Dzieki za pomoc.

    W wolnej chwili zerknijcie. Może nie działa a ja nie wiem

    http://testowa.goniecstaniatki.pl/

    - - - Updated - - -

    Przy okazji może ktoś podpowie jak wyłączyć to słowo "Podkategorie" bezpośrednio nad stopką. Próbowałem wszystkiego i nie mogę tego wyłączyć.

  11. #10
    Wyga siristru awatar
    Dołączył
    28-05-2009
    Skąd
    Szczecin
    Wpisy
    3 238
    Punkty
    302

    Domyślny

    Cytat Wysłane przez corvim Zobacz wiadomość
    Przy okazji może ktoś podpowie jak wyłączyć to słowo "Podkategorie" bezpośrednio nad stopką. Próbowałem wszystkiego i nie mogę tego wyłączyć.
    Możesz wyłączyć w pozycji menu: https://prnt.sc/LThjUesp_nuz
    Na Forum pomagam bezpłatnie ad maiorem Joomla gloriam
    Mimo pomocy na forum nie dajesz rady? Potrzebujesz by ekspert "zrobił to" za Ciebie?
    Napisz do mnie na PW. Argentum et Aurum nie zawsze jest konieczne ;)

Strona 1 z 2 12 OstatniOstatni

Podobne tematy

  1. css - flex
    przez qrdziel na forum Szablony, formatowanie wyglądu
    Odpowiedzi: 7
    Ostatni post/autor: 14-03-2021, 09:44
  2. BuaXua Floating
    przez wini74 na forum Rozszerzenia - problemy z obsługą, zarządzaniem
    Odpowiedzi: 0
    Ostatni post/autor: 04-01-2015, 18:29
  3. Jb Flex Slider - podwójny nagłówek problem
    przez balckbrookly na forum Rozszerzenia - problemy z obsługą, zarządzaniem
    Odpowiedzi: 0
    Ostatni post/autor: 22-07-2014, 00:57
  4. Absolute floating menu- Proszę o pomoc w konfiguracji
    przez powis na forum Rozszerzenia - problemy z obsługą, zarządzaniem
    Odpowiedzi: 1
    Ostatni post/autor: 18-05-2013, 01:18
  5. Problem z Flex Content
    przez ADE na forum Administracja Joomla!
    Odpowiedzi: 0
    Ostatni post/autor: 12-09-2006, 20:11

Reguły pisania

  • Nie możesz zakładać nowych tematów
  • Nie możesz dodawać wypowiedzi
  • Nie możesz dodawać załączników
  • Nie możesz poprawiać swoich postów
  •