aide pour la base du css

Par flo3376, il y a 13 ans

Les bases HTML/CSS

bonjour à tous,

voici ce qui m’amène,
lors d'un précédent épisode, j'utilisé cette méthode de rangement pour mes css

mais voilà j'avais des soucis de parent enfant à gogo.

donc je vais repasser à un css unique, mais le soucis c'est que je vais avoir des élément qui vont revenir régulièrement:
-des tableaux avec les balise TH TD TR
-des menus
...

ces élément qui reviennent souvent vont avoir des style différent, par exemple:
-le premier tableau auras tous les texte aligné à gauche
-le second tableau centrer et avec des couleurs
......

je souhaiterai pourvoir donc avoir la possibilité de gérer toutes les variantes possible en les identifiants.

j'ai aperçu, les id et les classes, mais je suis paumé totalement, et oui je débute en css, comme certain ont pu constater.

j'ai cru comprendre ça:

tableau1 TD TH TR{style1}

tableau2 TD TH TR{style2}

et donc quand une page arrive avec les simple balise TD TH TR, il ne va pas piocher les styles 1 et 2 car il ne porte pas le nom de tableau 1 ou 2.

Ai je faux, auriez vous des exemples simple coté CSS et coté html.

je sais que là que je vais en exaspéré quelques un mais là je suis largué.

merci de votre compréhension et de votre aide.

Flo

3 réponses

flo3376, il y a 13 ans

re,

bon google va finir par me trouver soulant comme amis je vous le dit :)

bon je suis arrivé à ceci

coté css

.lastv TD{
  padding: 1px 4px 1px 4px;
text-align: left; 
}
.lastv TH {
  padding: 5px 6px 2px 6px;
text-align: center; 
   border-width:1%;
 border-style:solid;
 border-color:#FF9900;
  margin-bottom:5px; 
  /*arrondir les coins en haut à gauche et en bas à droite*/
-moz-border-radius:10px 10px 10px 10px;
-webkit-border-radius:10px 10px 10px 10px;
border-radius:10px 10px 10px 10px;
background: rgba(255,153,0,1);
}
.bestl TD{
  padding: 1px 1px 1px 1px;
text-align: center; 
}
.bestl TH {
  padding: 5px 6px 2px 6px;
text-align: center; 
   border-width:1%;
 border-style:solid;
 border-color:#FF9900;

  margin-bottom:5px; 
  /*arrondir les coins en haut à gauche et en bas à droite*/
-moz-border-radius:10px 10px 10px 10px;
-webkit-border-radius:10px 10px 10px 10px;
border-radius:10px 10px 10px 10px;
background: rgba(255,153,0,1);
}

et coté php html 

........
<table class="lastv">       
        <tr> 
        <th> Pilote </th> 
        <th> Numéro de vol </th> 
        <th> Avion </th> 
        <th> Départ </th> 
        <th> Arrivée </th> 
        <th> Durée </th> 
        <th> Distance </th> 
        <th> Taux de chute </th> 
        <th> Effectué le </th> 
        <th> Validé </th> 

        </tr> 
        <?php       
        while(($row = mysql_fetch_array($result1))) 
            {
                ?> 
                <tr> 
                <td> <?php echo $row'lastname'] ; ?> </td> 
                <td> <?php echo $row'flightnum'] ; ?> </td>
                <td> <?php echo $row'registration'] ; ?> </td>  
                <td> <?php echo $row'depicao'] ; ?> </td> 
                <td> <?php echo $row'arricao'] ; ?> </td> 
                <td> <?php echo $row'flighttime'] ; ?> </td> 
                <td> <?php echo $row'distance'] ; ?> </td> 
                <td> <?php echo $row'landingrate'] ; ?> </td> 
                <td> <?php echo $row'submitdate'] ; ?> </td> 
                <?php 
                if (($row'accepted'])==1)
                    {
                        ?> 
                        <td> <?php echo oui; ?> </td> 
                        <?php 
                    }
                else {
                        ?> 
                        <td> <?php echo non; ?> </td> 
                        <?php 
                    }
                ?> 
                </tr> 
                <?php 
            } 
        ?> 
        </table>
......
<table class="lastv">       
        <tr> 
        <th> Pilote </th> 
        <th> Numéro de vol </th> 
        <th> Avion </th> 
        <th> Départ </th> 
        <th> Arrivée </th> 
        <th> Durée </th> 
        <th> Distance </th> 
        <th> Taux de chute </th> 
        <th> Effectué le </th> 
        <th> Validé </th> 

        </tr> 
        <?php       
        while(($row = mysql_fetch_array($result1))) 
            {
                ?> 
                <tr> 
                <td> <?php echo $row'lastname'] ; ?> </td> 
                <td> <?php echo $row'flightnum'] ; ?> </td>
                <td> <?php echo $row'registration'] ; ?> </td>  
                <td> <?php echo $row'depicao'] ; ?> </td> 
                <td> <?php echo $row'arricao'] ; ?> </td> 
                <td> <?php echo $row'flighttime'] ; ?> </td> 
                <td> <?php echo $row'distance'] ; ?> </td> 
                <td> <?php echo $row'landingrate'] ; ?> </td> 
                <td> <?php echo $row'submitdate'] ; ?> </td> 
                <?php 
                if (($row'accepted'])==1)
                    {
                        ?> 
                        <td> <?php echo oui; ?> </td> 
                        <?php 
                    }
                else {
                        ?> 
                        <td> <?php echo non; ?> </td> 
                        <?php 
                    }
                ?> 
                </tr> 
                <?php 
            } 
        ?> 
        </table>

.... alors la question à la con la voici,

Pourquoi ça marche:
-réponse 1: Gros coup de bol
-réponse 2: code correct mais pas optimisé
-réponse 3: code nickel

BenFarhat, il y a 13 ans

En oubliant que la classe bestl n'est pas utilisée, réponse 3 :)
Tu peux aller plus loin en donnant plusieurs styles à la fois

par exemple: ( un bout de code de bootstrap)

table {
  max-width: 100%;
  background-color: transparent;
  border-collapse: collapse;
  border-spacing: 0;
}
.table {
  width: 100%;
  margin-bottom: 20px;
}
.table th,
.table td {
  padding: 8px;
  line-height: 20px;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid #dddddd;
}
.table th {
  font-weight: bold;
}
.table thead th {
  vertical-align: bottom;
}
.table caption + thead tr:first-child th,
.table caption + thead tr:first-child td,
.table colgroup + thead tr:first-child th,
.table colgroup + thead tr:first-child td,
.table thead:first-child tr:first-child th,
.table thead:first-child tr:first-child td {
  border-top: 0;
}
.table tbody + tbody {
  border-top: 2px solid #dddddd;
}
.table-condensed th,
.table-condensed td {
  padding: 4px 5px;
}
.table-bordered {
  border: 1px solid #dddddd;
  border-collapse: separate;
  *border-collapse: collapse;
  border-left: 0;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}
.table-bordered th,
.table-bordered td {
  border-left: 1px solid #dddddd;
}
.table-bordered caption + thead tr:first-child th,
.table-bordered caption + tbody tr:first-child th,
.table-bordered caption + tbody tr:first-child td,
.table-bordered colgroup + thead tr:first-child th,
.table-bordered colgroup + tbody tr:first-child th,
.table-bordered colgroup + tbody tr:first-child td,
.table-bordered thead:first-child tr:first-child th,
.table-bordered tbody:first-child tr:first-child th,
.table-bordered tbody:first-child tr:first-child td {
  border-top: 0;
}
.table-bordered thead:first-child tr:first-child th:first-child,
.table-bordered tbody:first-child tr:first-child td:first-child {
  -webkit-border-top-left-radius: 4px;
          border-top-left-radius: 4px;
  -moz-border-radius-topleft: 4px;
}
.table-bordered thead:first-child tr:first-child th:last-child,
.table-bordered tbody:first-child tr:first-child td:last-child {
  -webkit-border-top-right-radius: 4px;
          border-top-right-radius: 4px;
  -moz-border-radius-topright: 4px;
}
.table-bordered thead:last-child tr:last-child th:first-child,
.table-bordered tbody:last-child tr:last-child td:first-child,
.table-bordered tfoot:last-child tr:last-child td:first-child {
  -webkit-border-radius: 0 0 0 4px;
     -moz-border-radius: 0 0 0 4px;
          border-radius: 0 0 0 4px;
  -webkit-border-bottom-left-radius: 4px;
          border-bottom-left-radius: 4px;
  -moz-border-radius-bottomleft: 4px;
}
.table-bordered thead:last-child tr:last-child th:last-child,
.table-bordered tbody:last-child tr:last-child td:last-child,
.table-bordered tfoot:last-child tr:last-child td:last-child {
  -webkit-border-bottom-right-radius: 4px;
          border-bottom-right-radius: 4px;
  -moz-border-radius-bottomright: 4px;
}
.table-bordered caption + thead tr:first-child th:first-child,
.table-bordered caption + tbody tr:first-child td:first-child,
.table-bordered colgroup + thead tr:first-child th:first-child,
.table-bordered colgroup + tbody tr:first-child td:first-child {
  -webkit-border-top-left-radius: 4px;
          border-top-left-radius: 4px;
  -moz-border-radius-topleft: 4px;
}
.table-bordered caption + thead tr:first-child th:last-child,
.table-bordered caption + tbody tr:first-child td:last-child,
.table-bordered colgroup + thead tr:first-child th:last-child,
.table-bordered colgroup + tbody tr:first-child td:last-child {
  -webkit-border-top-right-radius: 4px;
          border-top-right-radius: 4px;
  -moz-border-radius-topleft: 4px;
}
.table-striped tbody tr:nth-child(odd) td,
.table-striped tbody tr:nth-child(odd) th {
  background-color: #f9f9f9;
}
.table-hover tbody tr:hover td,
.table-hover tbody tr:hover th {
  background-color: #f5f5f5;
}

ensuite pour l'utilisation tu as juste a faire 

<table class="table">
....
</table>

ou 

<table class="table table-bordered">
....
</table>

ou encore 

<table class="table table-stripped">
....
</table>

etc etc...

je te conseil de faire pareil dans le sens ou ton site en totalité est en harmonie.
Le fait de faire un type de table pour chaque div ca fait pas trop class (sauf si par exemple c'est juste pour changer les couleurs)

deux liens intéréssants:
http://coding.smashingmagazine.com/2008/08/13/top-10-css-table-designs/
http://johnsardine.com/freebies/dl-html-css/simple-little-tab/

flo3376, il y a 13 ans

oups j'ai copié 2 fois le même code php, mais merci je vai regarder tes liens.