fundacja tvn joomla-cms.com.pl
A+ A A-

Dynamiczne boksy php i css

  • Kategoria: Dodatki dla www
  • Opublikowano: niedziela, 08, marzec 2015 12:15
  • Super User
  • Odsłony: 29606

Dynamiczne boksy php i css

Ostatnim czasy spotkałem się z takim problemem, podczas pracy nad jednym projektem. Problem polegał na dużej ilości pól do zaznaczenia  type="checkbox" , które miały być poukładane w kolumnach pionowych np. po trzy sztuki lub dwie w zależności od dokumentu. Na początku próbowałem zrobić te rozwiązanie za pomocą tabel lecz nie za bardzo mi to wychodziło,  źle się ustawiały albo było ich po dwa w pierwszej tabeli, a pozostałych po jednej, nie wyglądało to estetycznie, takie niechlujstwo J.  Kombinowałem dalej przerzuciłem się na <div> i spróbowałem .css   box-sizing: border-box; lecz w moim przypadku też nie pomogło,  bo nie było szansy ustawić boksów jeden koło drugiego ze względu na to,  że miałem ustawioną pętlę pobierającą dane z bazy danych dynamicznie while ($row = @mysql_fetch_array($result)) {   

<div class="box">'.$row['nazwa'].' </div>';

<div class="box1"><input type="checkbox"     itd… 

Kolejnym rozwiązaniem na jakie wpadłem to ustawiłem funkcję sterującą if(){} i dodałem do niej modulo, dzięki niej dzieliło mi na trzy boksy,  ale też okazało się nie wystarczające, ze względu na nie możliwość do poustawiania tak jak było wymagane. Pomogło w końcu column-count:J ,   na początku nie mogłem się nadziwić że rozwiązanie było takie proste, a jednak. Skróciłem kod css o parę linijek i pozbyłem się troszkę zbędnego kodu, który okazał się teraz nie potrzebny. Kod poniżej pokazuje rozwiązanie dzielenia elementów pobranych z bazy danych za pomocą pętli while ($row = @mysql_fetch_array($result)) {   } i podanie wyniku na trzy boksy umieszczone w pionie obok siebie. 

 

  .box_kolumny {
   column-count: 3; /* All */
   -moz-column-count: 3; /* firefox */
   -webkit-column-count: 3; /* opera, chrome, safari*/
   width: 45em;
}
 
  .szerokosc_kolumny {
    column-width: 55px; /* All */
    -webkit-column-width: 55px; /* opera, chrome, safari */
    -moz-column-width: 55px; /* firefox */
}
   .box {
       width: 59%;
       float: left;
       padding-bottom: 5px;
       height:20px;
     font-size:10px;
   }
   .box1 {
       width: 25%;
       float: left;
       padding-bottom: 25px;
       height:20px;
       font-size:10px;
   }
 
 
 
<div class="box_kolumny">
 
 $result = @mysql_query("SELECT * FROM kategorie WHERE poziom='1' ORDER BY nazwa ASC");
 
 while ($row = @mysql_fetch_array($result)) {
 $kategorii  = '<div class="box">'.$row['nazwa'].'</div>';
 $kategorii .= '<div class="box1">
<input id="'.$row['id'].'" type="checkbox" name="kategorie[]" value="'.$row['id'].'"checked="checked" /></div>'; 
 }
</div>
 

A tu efekt końcowy

kolumny css

Dodaj komentarz


Kod antyspamowy
Odśwież

 Pozycjonowanie-Joomla, seo-joomla Tworzenie-Sitemap-joomla, TG-Chmura-Tagów, rs-rules-security Admin-Login-Security, joomla Licencja-Drupal, Licencja-ZenCart, Licencja-GPL2, Licencja-GPL3 Creative-Commons-License, joomla-2.5.x Kalendarz-Celtycki data-zodiak-data-majowie, moduł-GA-Gadu-gg, Moduł-Lotto-joomla K2-joomla Moduł-Kodownik-joomla kontakt-admin-3-pl Moduł-miłość-joomla Moduł-minutnik-joomla Google-Gadżet-strona-www Moduł-Multi-AnalogClock-joomla Grafika-Wektorowa-joomla Pascal-podstawy Pascal-instrukcja-if Pascal-pętla-for Pascal-Pętla-white-Repet Pascal-Instrukcja-Case Pascal Pascal-record Pascal-Tablice-(Macierze) Kolory-w-Pascalu Systemy-Liczbowe-10-16-8 Pak-top10-głosowanych-jQuery Waga-Bmi BF-Bear-Form Joomla+2.5+captcha+google BSD joomla, MP3 Creating, SEO, Admin tg RS BF The Celtic Forever Création Erstellen Toujours Immer Multi Contact-Admin-3-EN Contact-Admin-3-fr Contact-Admin-3-DE Open-Software-License-v.3.0-(OSL-3.0) System Interfejsy Mozilla joomla-metadane, seo-katalogi, wymiana Slider aukcjoner, Informator Osiemnaście CiastkoPl sem, Class Class-PDO-session login, registerUserClass, index PHP PDO, Class-ResponsiveCss zarabiarka-allegro Pogodynka Pogodynka Praca-Programisty Praca Funkcja-if Special+Arguments Simple-Captchta Jquery, Od 2 Konfiguracja 4.Instalacja 5.Konfiguracja 6.Instalacja 7.Konfiguracja 8.Metadane 9.Optymalizacja 10.Ciasteczka 11.System 12.Diagnostyka 13.Sesja Klasa Książka responsive Uniwersal Dodatek GoogAd.v1.4-polish-utf-8 Error Cooki Funkcje Linki Google Kompresja pdf, Dynamiczne template wycena Twoja Separation reklama ssd, bezpieczeństwo wzorce rekrutacja Zastosowanie Urządzenia Portale chat, dyski Platformy QUIZ 

Używamy cookies i podobnych technologii m.in. w celach: świadczenia usług, reklamy, statystyk. Korzystanie z witryny bez zmiany ustawień Twojej przeglądarki oznacza, że będą one umieszczane w Twoim urządzeniu końcowym. Pamiętaj, że zawsze możesz zmienić te ustawienia. To find out more about the cookies we use and how to delete them, see our privacy policy.

I accept cookies from this site.

EU Cookie Directive Module Information