Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Stylowanie CSS
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
alek37
Mam taki oto problem. Chcialbym ostylowac sobie w CSS zmienna w nastepujacej postaci:
  1. <div style="padding:2px;" id="poll_buttons_<?php echo $poll->id;?>" ></div>

Oczywiscie jest to tylko niewielki fragment kodu sondy do glosowania. Istotny dla mnie element to:
  1. <?php echo $poll->id;?>

Jest to zmienna uzalezniona od numeru id stworzonej sondy. W kodzie wynikowym html wyglada to tak ze id stylu przybiera postac polll_buttons_1, poll_butons_2, ... itd

Moje pytanie to jak stworzyc do tego styl w elegancki sposob aby zabezpieczyc sobie uniwersalnosc dla wielu sond (nie jestem w stanie przewidziec dla ilu).
Ja wymyslilem tylko cos takiego:
#poll_butons_1, #poll_butons_2, #poll_butons_3, #poll_butons_4, #poll_butons_5 { .......}

Wydaje mi sie ze jest to malo eleganckie i kompletnie nie uniwersalne. Gdy sond bedzie 6, 7, lub wiecej bedzie trzeba pamietac o modyfikacji arkusza stylow.
Czy istnieje na to jakies inne rozwiazanie?
werdan
Bez LESS lub Sass nic nie zrobisz. chyba ze użyjesz swojego sposobu lub uzyjesz class i selektórw :first-child, :last-child, :nth-child()
Tuminure
Nie wystarczy dodać klasy do elementu z danym id?

  1. <div style="padding:2px;" class="poll_buttons" id="poll_buttons_<?php echo $poll->id;?>" ></div>

  1. .poll_buttons { color: #ff0000; }
alek37
Dzieki wielki za zainteresowanie i pomoc. Propozycja Tuminure wydaje sie byc bardzo prosta i przystepna. Sprawdze to dopiero po poludniu, pomiewaz teraz jestem w pracy. Na pewno napisze co wyszlo z moich eksperymentow.
lukasz1985
Ja widzę kilka rozwiązań, najprostszym z nich byłoby stworzenie stylu inline i zmiana koloru, wprowadzając zmienną w styl, bo zapewne nie będziesz zmieniał innych wartości. Jeśli jednak będziesz, wiele z nich ma wartości liczbowe, wyglądałoby to tak:


  1. <div style="color: <?php echo $color; // Kolor skalkulowany w oparciu o id ?>" ></div>


Inną metodą jest powtarzanie na przykład co 10 sond - tego samego stylu. W tym przypadku można by użyć operatora "modulo" zwracającego resztę z dzielenia przez daną liczbę:

  1. $id = $poll->id % 10;

  1. <div id="costam_costam_<?php echo $id; ?>" >tresc</div>


To co się nie zmienia w stylu, jak już wspomniano - zapisać w klasie.
alek37
Dzieki lukasz1985. Ogolnie nie chodzi mi tylko o zmiane koloru, ale o utworzenie klasy z wieksza liczba elementow. Podany przez Ciebie przyklad stylu inline nie bardzo sie chyba do tego nadaje. Generalnie to jest to komponet sondy do CMS Joomla, a fragment ktory mnie interesuje ma dotyczyc ostylowania przycisku do glosowania.
Sam przycisk ma wygladac zawsze tak samo, obojetnie jakiej sondy dotyczy.
Ja w PHP to nie specjalnie sie orientuje, nie mialem z programowaniem do tej pory nic wspolnego. HTML i CSS znam w miare dobrze, ale nie wiem jak poradzic sobie ze zmiennymi o ktorych pisalem na poczatku, aby mimo kolejnych zmiennych zastosowac do nich ten sam styl (klase).

Podam to na przykladzie:
  1. <div style="padding:2px;" id="poll_buttons_<?php echo $poll->id;?>" ></div>

CSS

  1. #poll_buttons_(nie wiem jak to zapisac aby spelnialo warunek <?php echo $poll->id;?>{padding: ; border: ; text-align: ; ....... itd}

Jak pisalem wczesniej id jest uzaleznione od numeru utworzonej sondy, a ostateczna ilosc sond nie jest znana.

W ostatecznosci moge zastosowac sposob podany przez Tuminure (sprawdzilem dziala) lub styl inline, ale wiaze sie to dla mnie z dodatkowym dublowaniem czesci arkusza stylow. Mam nadzieje ze jest jakis sposob stworzenia klasy CSS odnoszacej sie do zmiennej.
pedro84
Jeśli button wszędzie ma wyglądać tak samo (tak z resztą napisałeś), to po co w ogóle pakujesz tam jakąkolwiek zmienną? Utwórz klasę, np. buttons i ją sobie ostyluj.
lukasz1985
Teraz to ja już nic z tego nie rozumiem, chcesz ostylować element nadając mu id, wiedząc i tak, że będzie wyglądał tak samo dla każdej sondy. Jeśli ma wyglądać tak samo dla każdej sondy to użyj klasy tak jak inni mówią, nie ma w tym nic dziwnego. Natomiast jeśli chcesz aby button czy cokolwiek wyglądało inaczej to musisz uzależnić styl wynikowy od id elementu, które jest generowane na podstawie sondy:
Ilości sond nie możesz przewidzieć więc nie możesz się opierać na id, jeśli nie wygenerujesz pewnego wzorca, na przykład w oparciu o modulo, które opisałem. Może to być jakakolwiek algebraiczna wartość, która może zostać przetworzona na wartość czytelną w stylu inline, jeśli nie chcesz użyć modulo.
alek37
No dobra. Dziekuje ogolnie za pomoc. Niestety w szablonach i modulach Joomla nie zawsze wszystko da sie zrobic tak prosto. Uzyta przeze mnie templatka posiada juz zdefiniowane przyciski, i chcialem aby modul sondy mial takie same przyciski jak pozostala szata graficzna. Niestety modul jest tak napisany ze co prawda przejmuje przyciski templatki ale wystepuja pewne roznice w wygladzie i formatowaniu. Mialem nadzieje ze uda sie to zrobic tylko za pomoca arkusza styli, ale wychodzi na to ze bez przerobek i nadpisania szablonem sie nie obejdzie.
Tuminure
Jeżeli struktura wygląda tak:
  1. <div class="poll_container">
  2. <div style="padding:2px;" id="poll_buttons_<?php echo $poll->id;?>" ></div>
  3. ...
  4. <div style="padding:2px;" id="poll_buttons_<?php echo $poll->id;?>" ></div>
  5. </div>

to możesz nadać styl w taki sposób:
  1. .poll_container div { color: #ff0000; }


Dodatkowo nie musisz robić kopiuj-wklej w stylach:
  1. .asdf { color: #ff0000; }
  2. .zxcv { color: #ff0000; }

działa tak samo jak:
  1. .asdf, .zxcv { color: #ff0000; }
alek37
[quote name='Tuminure' date='28.11.2013, 11:50:04 ' post='1077822']
Jeżeli struktura wygląda tak:
  1. <div class="poll_container">
  2. <div style="padding:2px;" id="poll_buttons_<?php echo $poll->id;?>" ></div>
  3. ...
  4. <div style="padding:2px;" id="poll_buttons_<?php echo $poll->id;?>" ></div>
  5. </div>

To nie powtarza sie tak jak to napisales. Przedstawiony przeze mnie <div> jest odpowiedzialny (w polaczeniu z input) za przycisk do glosowania w sondzie.
  1. <div style="padding:2px;" class="poll_buttons" id="poll_buttons_<?php echo $poll->id;?>" >
  2. <input type="submit" id="submit_vote_<?php echo $poll->id; ?>" name="task_button" class="<?php echo (Helper::is30() ? 'btn btn-primary' : 'button'); ?>" value="<?php echo JText::_('MOD_MIJOPOLLS_VOTE'); ?>" <?php echo $disabled; ?> />
  3. </div>
  4. <div id="poll_loading_<?php echo $poll->id;?>" style="display:none;"><?php echo JText::_('MOD_PROCESSING'); ?>
  5. </div>
MountainDew
To czego szukasz:
  1. div[id^="poll_butons_"] {
  2. property: value;
  3. }

Polecam przejrzeć: http://css-tricks.com/attribute-selectors/

Faktem jest jednak to, że powinieneś użyć klasy wink.gif
alek37
Liczylem po prostu na to ze istnieje sposob na zapisanie w arkuszu stylow formatowania dla:
  1. id="poll_buttons_n"
gdzie:
  1. n=1, 2, 3, 4, ...
i jest uzaleznione od kolejnego numeru sondy. Zaznaczam iz dla kazdego n styl ma byc taki sam.
Podsumowujac n jest inny dla kazdej kolejno utworzonej sondy.

Pisalem ze ja wymyslilem tylko format
  1. #poll_butons_1, #poll_butons_2, #poll_butons_3, #poll_butons_4, #poll_butons_5, ... { .......}
MountainDew
Cytat(alek37 @ 1.12.2013, 17:29:13 ) *
Liczylem po prostu na to ze istnieje sposob na zapisanie w arkuszu stylow formatowania dla:
  1. id="poll_buttons_n"
gdzie:
  1. n=1, 2, 3, 4, ...

Kod który napisałem 2 posty wyżej robi dokładnie to co tutaj opisałeś...
Przyjrzyj mu się dokładniej i zerknij na link który wkleiłem.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.