Personalizzare etichetta css in base a risultati query

[daduz]

Ciao a tutti.
Ho una query in php che estrae solo i campi valorizzati.
Nel css posso fare in modo che riconosca se un certo td e' presente e allora gli dia un certa etichetta?
Grazie

[fluxKami]

Un po' difficile capire cosa ti serve senza dare uno sguardo ad un minimo di codice.
In generale penso che tu possa risolvere così:
Do per scontato che tu stia creando i vari td tramite un echo nel ciclo while. Supponiamo che il campo (valorizzato o no) si chiami $pippo:

echo '<td';
if($pippo) {echo ' alt="', $pippo, '"';} // Gli da l'etichetta solo se $pippo è valorizzato
echo '>Contenuto del td</td>';

E' questo che intendevi?

[daduz]

Un po' difficile capire cosa ti serve senza dare uno sguardo ad un minimo di codice.
In generale penso che tu possa risolvere così:
Do per scontato che tu stia creando i vari td tramite un echo nel ciclo while. Supponiamo che il campo (valorizzato o no) si chiami $pippo:

echo '<td';
if($pippo) {echo ' alt="', $pippo, '"';} // Gli da l'etichetta solo se $pippo è valorizzato
echo '>Contenuto del td</td>';

E' questo che intendevi?

Ciao flux e grazie intanto.
Ho questo codice css

td:nth-of-type(1):before { content: "Codice"; }
td:nth-of-type(2):before { content: "Descrizione"; }
td:nth-of-type(3):before { content: "Altezza cm"; }
td:nth-of-type(4):before { content: "Lungh."; }

Da php riesco a capire se manca "descrizione" e quindi intesto il td con il nome della colonna che trovo in successione.
Da css se "descrizione" manca non so.come farlo passare alla riga successiva e rieseguire il controllo.
Spero di essere stato chiaro
Grazie

[fluxKami]

Magari il problema sono io, però no, non ho capito del tutto.
Ti va di incollarmi il pezzo di html/php?

[daduz]

Magari il problema sono io, però no, non ho capito del tutto.
Ti va di incollarmi il pezzo di html/php?

Da dove sono oggi non ho modo di postarti il html e php.
In sostanza ho una tabella html di 2 righe e 20 colonne.
Ogni colonna della tabella e' una potenziale colonna del db che ha 20 colonne anche lui.
Con la mia query php capisco se l articolo che mi interessa ha un qualcosa nel campo "lunghezza" e allora faccio apparire la colonna "lunghezza" della tabella e sulla prima riga scrivo lunghezza e sulla seconda scrivo il numero della lunghezza appena letto. Questo controllo ovviamente lo faccio per tutti i campi del db e mi funziona bene.

Il problema lo ho nel css dove devo fargli fare questo controllo in qualche modo, infatti quel pezzo di css che ti ho postato viene chiamato in causa solo ad una certa risoluzione per mobili... in realta a css sto messo proprio male e forse uscire dal mio schema se hai idee migliori sarebbe meglio.

[fluxKami]

Forse ho capito.
Potresti risolvere inserendo il css tramite php sono nel caso in cui la colonna sia presente.
Quando fai il controllo tramite php e, suppongo sempre tramite php, crei la colonna, puoi inserire una roba del genere all'interno dell'echo.

<style>
Inserisci qua il css che compare solo insieme all'echo.
</style>

Ti è di aiuto?

[daduz]

la tua idea è ottima, solo che quel pezzo di codice css viene interpretato solo se la risoluzione è di un certo tipo, ti posto il codice css completo che sto usando

@media only screen and (min-width: 481px) and (max-width: 767px){        
table, thead, tbody, th, td, tr {             /* Forza la tabella a non essere più una tabella */
display: block; 
}
        
thead tr {                         /* Nascondiamo l'intestazione della tabella thead */
position: absolute;
top: -9999px;
left: -9999px;
}
tr { border: 1px solid #666; }
        
td { 
position: relative;        /* Creiamo lo spazio per l'intestazione  */
padding-left: 50%; 
border:0;
}
        
td:before {     
position: absolute;            /* Creiamo le altre celle per la descrizione */
top: 8px;
left: 20px;
width: 40%;  
font-weight:bold;
}
/*  inseriamo l'etichetta per ciascuna cella con il selettore nth-of-type  */

td:nth-of-type(1):before { content: "Codice"; }                
td:nth-of-type(2):before { content: "Descrizione"; }
td:nth-of-type(3):before { content: "Altezza cm"; }
td:nth-of-type(4):before { content: "Lungh."; }
td:nth-of-type(5):before { content: "Gr./M²"; }
td:nth-of-type(6):before { content: "Spess. µ"; }
td:nth-of-type(7):before { content: "Colore"; }
td:nth-of-type(8):before { content: "Superf."; }
td:nth-of-type(9):before { content: "Confez."; }
td:nth-of-type(10):before { content: "Qta' per collo"; }
td:nth-of-type(11):before { content: "Prezzo Euro"; }
td:nth-of-type(12):before { content: "Qt&agrave"; }

}

quindi quando usare quel pezzo di css lo posso sapere solo nel file css... dovrebbe essere cosi se non erro...
il controllo penso si possa fare solo nel css o sbaglio?
grazie ancora.

[daduz]

in effetti non sono stato la chiarezza in persona!
sono risucito ad avere i codice esatti

* {     margin: 0;     padding: 0; }body {     font-size:100%;    font-family:Verdana,Georgia, "Times New Roman", Times, serif;}#contenitore {    width:95%;    margin: 50px auto;}p {    margin: 20px 0; }/*********        STILE GENERICO TABELLA      **********/table { width: 100%; border-collapse: collapse; text-align: center; }th { background: #13571B; color: white; font-weight: bold; }td, th { padding: 10px; border: 1px solid #fff;}a:link    {text-decoration: none; color:#333;}a:visited {text-decoration: none; color: #333;}a:hover   {color: #F00;}
tr:nth-of-type(odd){                /*  Alternanza Righe */background:rgba(102,255,153,1);}tr:nth-of-type(even){                /*  Alternanza Righe */background:rgba(204,255,255,1);}a{text-decoration:none;color:#36F;line-height:50px;}
/*********        MEDIA QUERY      **********/    @media only screen and (min-width: 481px) and (max-width: 767px){        table, thead, tbody, th, td, tr {             /* Forza la tabella a non essere più una tabella */display: block; }        thead tr {                         /* Nascondiamo l'intestazione della tabella thead */position: absolute;top: -9999px;left: -9999px;}tr { border: 1px solid #666; }        td { position: relative;        /* Creiamo lo spazio per l'intestazione  */padding-left: 50%; border:0;}        td:before {     position: absolute;            /* Creiamo le altre celle per la descrizione */top: 8px;left: 20px;width: 40%;  font-weight:bold;}/*  inseriamo l'etichetta per ciascuna cella con il selettore nth-of-type  */
td:nth-of-type(1):before { content: "Codice"; }                td:nth-of-type(2):before { content: "Descrizione"; }td:nth-of-type(3):before { content: "Altezza cm"; }td:nth-of-type(4):before { content: "Lungh."; }td:nth-of-type(5):before { content: "Gr./M²"; }td:nth-of-type(6):before { content: "Spess. µ"; }td:nth-of-type(7):before { content: "Colore"; }td:nth-of-type(8):before { content: "Superf."; }td:nth-of-type(9):before { content: "Confez."; }td:nth-of-type(10):before { content: "Qta' per collo"; }td:nth-of-type(11):before { content: "Prezzo Euro"; }td:nth-of-type(12):before { content: "Qt&agrave"; }}    
@media only screen and (min-width: 320px) and (max-width: 480px){    
table, thead, tbody, th, td, tr {             /* Forza la tabella a non essere più una tabella */display: block; }        thead tr {                         /* Nascondiamo l'intestazione della tabella thead */position: absolute;top: -9999px;left: -9999px;}tr { border: 1px solid #666; padding-top:20px;}        td { position: relative;        /* Creiamo lo spazio per l'intestazione  */ line-height:50px;border:0;}        td:before {     position: absolute;            /* Creiamo le altre celle per la descrizione */top: 0px;left: 0px;width: 100%;  font-weight:bold;line-height:0px;top:5px;
}/*  inseriamo l'etichetta per ciascuna cella con il selettore nth-of-type  */
td:nth-of-type(1):before { content: "Codice"; }                td:nth-of-type(2):before { content: "Descrizione"; }td:nth-of-type(3):before { content: "Altezza cm"; }td:nth-of-type(4):before { content: "Lungh."; }td:nth-of-type(5):before { content: "Gr./M²"; }td:nth-of-type(6):before { content: "Spess. µ"; }td:nth-of-type(7):before { content: "Colore"; }td:nth-of-type(8):before { content: "Superf."; }td:nth-of-type(9):before { content: "Confez."; }td:nth-of-type(10):before { content: "Qta' per collo"; }td:nth-of-type(11):before { content: "Prezzo Euro"; }td:nth-of-type(12):before { content: "Qt&agrave"; }}}

qui riporto il php

<table id="index"> <thead>    <tr class="intesta13">        <th>Codice</th>        <th>Descrizione</th><?php if ($option_altezza1) { ?><th>Altezza cm </th> <?php }  ?><?php if ($option_lunghezza1) { ?><th>Lungh. <?php echo $unimislunghezza;?></td> <?php } ?><?php if ($option_grammatura1) { ?><th>Gr./M²</th> <?php } ?><?php if ($option_spessore1) { ?><th>Spess. &micro;</th> <?php } ?><?php if ($option_colore1) { ?><th>Colore</th> <?php } ?><?php if ($option_superficie1) { ?><th>Superf.</th> <?php } ?><?php if ($option_confezione1) { ?><th>Confez.</th><?php } ?><th>Qta' per collo</th><th>Prezzo Euro</th>    <th>Qt&agrave </th>    <th>&nbsp;</th>    </tr>    </thead>    <tr>        <td><?php echo $codicearticolo; ?></td><td align="left">                                                                                                                                                                                                                                                       <a href="catalogo.php?codicearticolo=<?php echo trim($codicearticolo);?>"><b><?php echo $descrizionearticolo; ?></b></a></td><?php if ($option_altezza1) { ?>        <td><?php echo number_format($altezza, 2, ',', '.'); ?></td> <?php } ?><?php if ($option_lunghezza1) { ?>        <td><?php echo number_format($lunghezza, 2, ',', '.'); ?></td> <?php } ?><?php if ($option_grammatura1) { ?>     <td><?php echo number_format($grammatura, 0, '', '.'); ?></td> <?php } ?><?php if ($option_spessore1) { ?>         <td><?php echo number_format($spessore, 0, '', '.'); ?></td> <?php } ?><?php if ($option_colore1) { ?>         <td><?php echo $colore; ?></td> <?php } ?><?php if ($option_superficie1) { ?>     <td><?php echo $superficie; ?></td> <?php } ?><?php if ($option_confezione1) { ?>     <td><?php echo $confezione; ?></td><?php } ?><td><?php echo number_format($qtaxcollo, 0, '', '.'); ?></td> <td><?php echo number_format($prezzoarticolonetto, 2, ',', '.'); ?></td></tbody></table>

dato che questa tabella deve essere responsive ho trovato in rete un aiuto nel file css riportato sopra ma sicuramente è da adattare..
quando il css riconosce che si tratta di mobile etcc attiva delle variazioni come vedrai, la cosa che non riesco a fare è come far capire al css se
deve o non deve essere interpretato per determinate colonne (cosa che in php riesco a fare).

ditemi che sono stato chiaro vi prego!!

[daduz]

Non si può fare un condiziale css in base al contenuto in questo modo.
Non puoi chiedere al browser: "se il titolo è 'manuale di css' allora metti la scritta verde", per lo meno non con il css, queste cose le fà javascript.
Poi un'altra cosa che non capisco sono gli adattamenti che usi nel css:
1)metti 'display:block' a tutti gli elementi della tabella, ma non è meglio allora creare dei DIV normali e togliere i tag specifici delle tabelle, al posto di <td> metti display:table-cell
2)top:-9.999px e left:-9.999px con position absolute mi fanno pensare che la tua struttura html sia sbagliata, le tabelle non le usa più nessuno, per due motivi: il primo è che nell css display:table funziona da IE8 in poi, quindi ha una compatibilità quasi universale e viene messo al posto dei vecchi tag <table>,ecc, e il secondo riguarda la compatibilità con i dispositivi mobili. Infatti le celle sono fatte per stare sulla stessa riga, e tu qui nel tuo esempio le hai forzate andando a capo, quindi hai fatto una cosa che non dovevi, perchè tanto valeva usare un contenitore normale(DIV) e cambiare display, può sembrare la stessa cosa ma non lo è
3)hai un codice troppo incasinato, la struttura è veramente pessima, poi apri e richiudi continuamente il php non sò per quale motivo, dovresti valutare se ti conviene creare una funzione apposta per la creazione della tabella invece di fare così come vedo
4)con il css non puoi fare un condizionale sul contenuto della cella, se vuoi una cosa simile devi usare javascript.

Ciao Marco!
Quindi potrei abolire le tabelle e usare i div legati alle if php se ho capito bene...se si come?
Evitando sempre di usare js?
Grazie!

[fluxKami]

5) Fossi in te mi concentrerei un minimo sull'indentazione del tuo html/php, altrimenti quando devi andare a modificare cose a distanza di un giorno o due triplichi lo sforzo perché devi prima capire che cosa avevi fatto, come se il codice non fosse tuo.
0) Nulla ti vieta, all'interno del tag <style> che ti ho suggerito di inserire con l'if del php, di inserire un'altra @media query e magari di dare !important dove ti occorre.