Skalowalny komponent / Floating / Flex

[corvim]

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.

[alex51]

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.

<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.

[pablop76]

Ten szablon (https://diablodesign.eu/free-joomla-templates/dd-running-76) 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 (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table).
Jeżeli nie masz swobody w korzystaniu z css, html to może powinieneś wspomóc się jakimś buliderem np. Gantry 5 (https://gantry.org/)
Czy ta templatka jest gotowa na joomla 4? Jest tam bootstrap (https://getbootstrap.com/), 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 (https://css-tricks.com/snippets/css/a-guide-to-flexbox/) jest jak najbardziej poprawny.

[corvim]

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.

<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 ?

[rkonik]

Po co kombinować:


display: grid;
grid-template-columns: 1fr 1fr 1fr;

i masz 3 kolumny. dodajesz regułę @media i masz załatwione skalowanie.

[corvim]

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_pr_mediaquery.html#gsc.tab=0 ?

[rkonik]

Tak o to chodzi
dodajesz klasę do tego diva:


<div class="wf-columns wf-columns-stack-medium" data-wf-columns="1">


powiedzmy niech się nazywa .footer-grid




.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ę.

[siristru]

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:


<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:


<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

[corvim]

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ć.

[siristru]

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

[corvim]

Możesz wyłączyć w pozycji menu: https://prnt.sc/LThjUesp_nuz

Dobry trop. Ale udało się dopiero jak ustawiłem "subcategory levels" na None

[siristru]

Dobra, tylko w takim razie zastanów się nad strukturą strony. Bo z tego co piszesz wynika, że zaznaczyłeś kategorię nadrzędną, która posiada kategorie potomne.
Czy to znaczy, że pot tą pozycją menu chcesz wyświetlać artykuły TYLKO z kategorii nadrzędnej czy również z kategorii potomnych?
Jeśli z kategorii potomnych również to ustawiając "Poziomy podkategorii" na None uniemożliwiasz ich wyświetlanie.

[corvim]

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.

<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>


Ok, a czy jest możliwość ustawienia szerokości kolumn. Np aby pierwsza po lewej miała maks 200px ?

[alex51]

Ze względu na responsywność lepiej używać % niż px.
Sprawdź artykuł z JCE (https://www.joomlacontenteditor.net/support/documentation/columns/creating-and-editing-columns), gdzie znajdziesz opis możliwości edycji kolumn.
Przykładowy kod na 3 kolumny w układzie 2-1-1, czyli 50% dla kolumny pierwszej i po 25% dla drugiej i trzeciej.

<div class="wf-columns wf-columns-stack-medium wf-columns-layout-2-1-1" 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>

[terra]

Z tymi procentami to uważałbym, ponieważ istotne jest to do jakiej ramki się odnosi, ale faktycznie lepiej jest używać jednostki skalowalne.

Corvim (http://forum.joomla.pl/member.php?21001-corvim) tutaj masz artykuł, który pozwoli zrozumiec to co masz i jak to zmienić https://bedeprogramistka.pl/layout-strony-glownej-grid-bootstrap-flexbox/