Forum PHP.pl

Mam taki oto problem. Chcialbym ostylowac sobie w CSS zmienna w nastepujacej postaci:

[PHP] pobierz, plaintext 
<div style="padding:2px;" id="poll_buttons_<?php echo $poll->id;?>" ></div>
[PHP] pobierz, plaintext 

Oczywiscie jest to tylko niewielki fragment kodu sondy do glosowania. Istotny dla mnie element to:

[PHP] pobierz, plaintext 
<?php echo $poll->id;?>
[PHP] pobierz, plaintext 

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?

Ten post edytował alek37 27.11.2013, 10:14:34

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

Nie wystarczy dodać klasy do elementu z danym id?

[PHP] pobierz, plaintext 
<div style="padding:2px;" class="poll_buttons" id="poll_buttons_<?php echo $poll->id;?>" ></div>
[PHP] pobierz, plaintext 

[CSS] pobierz, plaintext 
.poll_buttons { color: #ff0000; }
[CSS] pobierz, plaintext 

Ten post edytował Tuminure 27.11.2013, 10:43:49

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.

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:

[HTML] pobierz, plaintext 
<div style="color: <?php echo $color; // Kolor skalkulowany w oparciu o id ?>" ></div>
[HTML] pobierz, plaintext 

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

[PHP] pobierz, plaintext 
$id = $poll->id % 10; 
[PHP] pobierz, plaintext 

[HTML] pobierz, plaintext 
<div id="costam_costam_<?php echo $id; ?>" >tresc</div>
[HTML] pobierz, plaintext 

To co się nie zmienia w stylu, jak już wspomniano - zapisać w klasie.

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:

[PHP] pobierz, plaintext 
<div style="padding:2px;" id="poll_buttons_<?php echo $poll->id;?>" ></div>
[PHP] pobierz, plaintext 

CSS

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

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.

Ten post edytował alek37 27.11.2013, 17:46:03

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.

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.

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.

Jeżeli struktura wygląda tak:

[PHP] pobierz, plaintext 
<div class="poll_container">
    <div style="padding:2px;" id="poll_buttons_<?php echo $poll->id;?>" ></div>
    ...
    <div style="padding:2px;" id="poll_buttons_<?php echo $poll->id;?>" ></div>
</div>
[PHP] pobierz, plaintext 

to możesz nadać styl w taki sposób:

[CSS] pobierz, plaintext 
.poll_container div { color: #ff0000; }
[CSS] pobierz, plaintext 

Dodatkowo nie musisz robić kopiuj-wklej w stylach:

[CSS] pobierz, plaintext 
.asdf { color: #ff0000; }
.zxcv { color: #ff0000; }
[CSS] pobierz, plaintext 

działa tak samo jak:

[CSS] pobierz, plaintext 
.asdf, .zxcv { color: #ff0000; }
[CSS] pobierz, plaintext 

Ten post edytował Tuminure 28.11.2013, 11:50:51

[quote name='Tuminure' date='28.11.2013, 11:50:04 ' post='1077822']
Jeżeli struktura wygląda tak:

[PHP] pobierz, plaintext 
<div class="poll_container">
    <div style="padding:2px;" id="poll_buttons_<?php echo $poll->id;?>" ></div>
    ...
    <div style="padding:2px;" id="poll_buttons_<?php echo $poll->id;?>" ></div>
</div>
[PHP] pobierz, plaintext 

To nie powtarza sie tak jak to napisales. Przedstawiony przeze mnie <div> jest odpowiedzialny (w polaczeniu z input) za przycisk do glosowania w sondzie.

[PHP] pobierz, plaintext 
<div style="padding:2px;" class="poll_buttons" id="poll_buttons_<?php echo $poll->id;?>" >	
	<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; ?> />
	</div>	
	<div id="poll_loading_<?php echo $poll->id;?>" style="display:none;"><?php echo JText::_('MOD_PROCESSING'); ?>
	</div>
[PHP] pobierz, plaintext 

Ten post edytował alek37 28.11.2013, 17:01:16

To czego szukasz:

[CSS] pobierz, plaintext 
div[id^="poll_butons_"] {
    property: value;
}
[CSS] pobierz, plaintext 

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

Faktem jest jednak to, że powinieneś użyć klasy

Liczylem po prostu na to ze istnieje sposob na zapisanie w arkuszu stylow formatowania dla:

[PHP] pobierz, plaintext 
id="poll_buttons_n"
[PHP] pobierz, plaintext 

gdzie:

[PHP] pobierz, plaintext 
n=1, 2, 3, 4, ...
[PHP] pobierz, plaintext 

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

[PHP] pobierz, plaintext 
#poll_butons_1, #poll_butons_2, #poll_butons_3, #poll_butons_4, #poll_butons_5, ... { .......}
[PHP] pobierz, plaintext 

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.