Auteur Sujet: Feuille de style CSS  (Lu 2912 fois)

Borak

  • Full Member
  • ***
  • Messages: 595
Feuille de style CSS
« le: août 04, 2012, 19:02:31 pm »
Bonjour,

Comme sur ma présentation, on avait parlé de feuilles de style pour page html, j'ai préparé quelque chose. J'ai extrait une page du site Petoin et je l'ai transformée en lui adaptant une feuille de style.

Page originale - Page transformée - La feuille de style.

Ca m'a pris quand même un chouïa de temps, il y avait du travail. Je conseille de regarder comment ont évoluée les pages. J'ai viré pas mal de chose :
-  Retrait de tout les blockquote.
-  Retrait de tout les font
-  Retrait de toutes les mises en gras et en surlignage des titres.
-  Retrait d'une bonne partie de forcage de saut de ligne.
-  Ajout de quelques classes particulières de présentation.

J'ai mis une petite explication à cette adresse. Peut-être un petit peu rapide et brouillon :)

Mais s'il y a des questions je peux tout expliquer :)


petoind

  • Administrator
  • Hero Member
  • *****
  • Messages: 7574
    • Conception des enceintes acoustiques
    • E-mail
Re : Feuille de style CSS
« Réponse #1 le: août 05, 2012, 15:47:08 pm »
C'est bien tout ça, nous gagnons de la place pour le texte sur la droite de l'écran, alors que <blocquote> enlève équitablement à droite et à gauche.
Une justification à droite et à gauche est pas mal non plus.

Le résultat convient, et pour l'application pratique dans le code ?

LeChacal619

  • Sr. Member
  • ****
  • Messages: 1235
    • E-mail
Re : Feuille de style CSS
« Réponse #2 le: août 05, 2012, 16:17:12 pm »
Moi j'aime bien. Effectivement le CSS est beaucoup mieux pour une utilisation régulière : une fois les mises en formes particulières définies (h1,h2,h3) elles sont appliquées sur l'ensemble du site. Si on souhaite un jour changer la mise en forme de h1, pas besoin de tout réécrire une simple modification de la feuille de style CSS et tout les titres changent de mise en forme !

De plus, le CSS permet de bien séparer le contenu (html) de la mise en forme (feuille de style css). Pour un webmaster, le travail est simplifié au niveau de la modification des pages ou de la présentation du site, même si je ne m'y connais rien en CSS ton travail Borak me semble le bienvenu pour l'amélioration du site !  :cheers:

Borak

  • Full Member
  • ***
  • Messages: 595
Re : Feuille de style CSS
« Réponse #3 le: août 05, 2012, 17:48:43 pm »
C'est vrai que c'est bien plus pratique. Dans le code, on ne s'occupe presque plus de la présentation, c'est le but. Il ne devrait plus rester que les tag de soulignement, de gras et d'italique. Et on utilise uniquement les tag classiques dans leur destination normale : un <p> pour un paragraphe, ect...

Par contre, il faut bien travailler tous les cas sur la feuille de style. Et je n'ai travaillé que sur une page : Je n'ai pas vu les formulaires, les tableaux, ...

On peut aussi faire évoluer le menu en haut : Plus d'image, tous en style (il y a beaucoup de possibilité de présentation).

En général, on appelle la feuille de style avec une ligne dans l’entête avec une ligne :
<link href="Petoin01.css" type="text/css" rel="stylesheet" />
Et pour les cas particuliers de présentation on utilise des identifiants ou des classes :
<p id="monmenuamoi">...</p>
<p class="labonneblague">...</p>

Pour les évolutions futures, on peut aussi placer des blocs de construction : qui permettent de faire évoluer la présentation.
<div id="page">
<div id="entete">...</div>
<div id="corp">...</div>
<div id="piedpage">...</div>
</div>

Et on peut aussi envisager de faire une évolution tranquille : Les anciens articles sans CSS, les nouveaux avec.

petoind

  • Administrator
  • Hero Member
  • *****
  • Messages: 7574
    • Conception des enceintes acoustiques
    • E-mail
Re : Feuille de style CSS
« Réponse #4 le: août 07, 2012, 18:16:50 pm »
J'ai une feuille de style dans le site, actuellement en test.

Je rencontre une première difficulté, mais je n'ai pas creusé les choses :
J'aurai besoin d'au moins 3 balise <p>.
- Celle définie par Borak.
- Une balise <p.date> avec un décalage plus faible, comme titre1.
- Une balise <p.marron> qui met la couleur du texte en marron.

Je veux me faire une feuille de style, et une seule, pour tout le site.
Pouvez vous me dire si c'est possible, et m'indiquer la syntaxe de ces balises ?

Borak

  • Full Member
  • ***
  • Messages: 595
Re : Feuille de style CSS
« Réponse #5 le: août 07, 2012, 20:36:01 pm »
Oui c'est possible, c'est ce que j'ai mis dans mon exemple :

/* ------ La feuille de Style ------ */

html
{  /* Taille caract - Evite un bug d'IE 6-7. */
   font-size: 100% ;
}

body
{  margin: 0 ;
   padding: 0 ;
   text-align: left ;
   color: #000 ;
   background-color: white ;
   font-family: Arial, sans-serif ;
   font-size: 0.82em ;
}

div
{  margin: 0 ;
   padding: 0 ;
}

h1, h2, h3
{  padding: 0 ;
   margin: 2.5em 30px 1em 48px ;
   color: #000000 ;
   font-family: Arial, sans-serif ;
   font-weight: Bold ;
   text-decoration: underline ;
}

h1
{  margin: 2.2em 30px 0.75em 48px ;
   font-size: 1.8em ;
}

h2
{  font-size: 1.4em ;
}

h3
{  font-style: italic ;
   font-size: 1em ;
}

p, ul, ol, address, pre, dl, table
{  margin: 1em 30px 1em 128px ;
   padding: 0 ;
}

ul, ol
{  list-style-position: outside ;
}

li
{  margin-left: 2.2em ;
   padding: 0 ;
}

dt
{  margin: 0.75em 0 0 0 ;
   padding: 0 ;
}

dd
{  margin: 0.25em 0 0.25em 2.2em ;
   padding: 0 ;
}

q
{  color: #760000 ;
}

table
{  border-style: none ;
   border-collapse: collapse ;
}

th
{  padding: 3px 0.5em ;
   margin: 0 ;
   font-family: Arial, sans-serif ;
   font-weight: Bold ;
   text-align: center ;
   border-color: black ;
   border-style: solid ;
   border-width: 1px ;
}

td
{  padding: 0 0.5em ;
   margin: 0 ;
   border-color: black ;
   border-style: solid ;
   border-width: 1px ;
}

tr, tr.impair

}

tr.pair

}

a:link, a:visited
{  color: #2f559c ;
}

a:hover, a:focus
{  color: #aa324e ;
}

a:active
{  color: #2f559c ;
}

abbr, acronym
{  border-bottom-width: 1px ;
   border-bottom-style: dotted ;
   cursor: help ;
}

pre, code, kbd
{  font-family: 'Courier New', monospace ;
}

/* --- Menu en haut --- */

table.menuduhaut
{  border-collapse: collapse ;
   border-spacing: 0 ;
   margin: 10px auto 10px auto ;
}

table.menuduhaut td
{  padding: 0 ;
   margin: 0 ;
   text-align: center ;
   vertical-align: middle ;
   border-width: 0px ;
   border-style: none ;
}

table.menuduhaut th
{  border-width: 0px ;
   border-style: none ;
}

p.avertissement
{  text-align: center ;
}

p.maj
{  margin-left: 48px ;
   margin-bottom: 4em ;
}

/* --- Bas de page --- */

div.basdepage
{  text-align: center ;
   margin: 50px 10px 10px 10px ;
}

div.basdepage p
{  font-size: 0.8em ;
}


En fait, j'ai fait une classe maj pour la date ("p.maj" que l'on doit utiliser en html de la manière suivante : <p class="maj">) et tu peux en ajouter autant que tu veux dans la feuille de style.
Les balises en html seront donc codés  : <p class="date"> et <p class="marron"> dans la feuille de style on trouverait p.date et p.marron

Quoique une classe marron soit plutôt une mauvaise idée. un classe ne doit pas avoir un nom de style, mais plutôt un nom de type de données, du genre : class="menudac", class="reserv", class="abomination", ...

Et on peut aussi placer un style sur un mot avec le tag <span class="tresclasse">xxxx</span>.
« Modifié: août 07, 2012, 20:38:57 pm par Borak »

petoind

  • Administrator
  • Hero Member
  • *****
  • Messages: 7574
    • Conception des enceintes acoustiques
    • E-mail
Re : Feuille de style CSS
« Réponse #6 le: août 07, 2012, 21:08:24 pm »
La date à retrouvée sa place.
J'ai un style avec texte en marron.
Les images sont centrées.
Et effectivement, le code est plus simple.

Demain je traite la partie php de la page test.

Dans la période mixte, avec des pages converties et d'autres pas, que se passe t'il si je charge le css sur une page non convertie ?

LeChacal619

  • Sr. Member
  • ****
  • Messages: 1235
    • E-mail
Re : Re : Feuille de style CSS
« Réponse #7 le: août 07, 2012, 21:23:55 pm »
La date à retrouvée sa place.
J'ai un style avec texte en marron.
Les images sont centrées.
Et effectivement, le code est plus simple.

Demain je traite la partie php de la page test.

Dans la période mixte, avec des pages converties et d'autres pas, que se passe t'il si je charge le css sur une page non convertie ?

Normalement il me semble, rien, hormis que tes balises <p> auront le style css appliqué.

Pourquoi chargerai tu le css sur une page que tu n'aurai pas convertie ?

Borak

  • Full Member
  • ***
  • Messages: 595
Re : Feuille de style CSS
« Réponse #8 le: août 07, 2012, 21:44:54 pm »
Ca dépend, tes blockquotes vont faire des décalages supplémentaires. Et tu risque d'avoir des surprises sur les tailles de police cas j'ai placé la taille sur le Body. Tout risque de réduire deux fois plus.
Je déconseille, faudrait pouvoir faire la différence entre récente et ancienne (peut-être la date de modification via php ?).

Borak

  • Full Member
  • ***
  • Messages: 595
Re : Feuille de style CSS
« Réponse #9 le: août 08, 2012, 08:37:06 am »
en php, une solution pourrait être de lire le fichier, si on trouve la chaine ' class=" ' alors on ajoute la feuille de style.

petoind

  • Administrator
  • Hero Member
  • *****
  • Messages: 7574
    • Conception des enceintes acoustiques
    • E-mail
Re : Feuille de style CSS
« Réponse #10 le: août 08, 2012, 20:48:07 pm »
Je vais faire une copie du fichier head.php en head-css.php.
Dans le 2eme je rajouterai la ligne qui lance le fichier css.
Et lorsque je convertirai une page, je change juste le nom du fichier...
J'ai fait pareil pour les fichiers de bas de page.
La page passe le contrôle W3C.

Les menus boutons : Avez vous une solution élégante, bicouleur, et qui puisse s'adapter à la taille de l'écran du lecteur ?

Borak

  • Full Member
  • ***
  • Messages: 595
Re : Feuille de style CSS
« Réponse #11 le: août 08, 2012, 21:29:16 pm »
Aïe, la taille qui s'adapte : moins évident. On peut mettre la largeur du tableau en pourcentage (80% par exemple). Et sa largeur changera toute seule (il faut aussi mettre un % sur le td mais par rapport aux 100% du tableau). Le seul pb, c'est la taille des polices, je n'ai pas de moyen de changer la taille selon la largeur.

Pour la couleur, il suffit de placer des classes spécifiques : Genre : <td class="selection"> ou <td class="lienforum"> ou <td class="nblecteurs">
avec un style
td.selection, td.lienforum
{   background-color : #42FF43 ;
}
td.nblecteurs
{   background-color : #C0C0C0 ;
}

On peut aussi jouer sur le passage de la souris pour changer le style des liens (bordure, effet d'ombre ou autre) :
dans le CSS :
a:hover, a:focus
{    background-color : #858585 ;
}

Borak

  • Full Member
  • ***
  • Messages: 595
Re : Feuille de style CSS
« Réponse #12 le: août 09, 2012, 08:29:36 am »
Oups, j'ai été un peu trop vite.

en fait la meilleure solution c'est plutôt les margin.

On peut attacher un tableau aux bordures de la page grace aux marges. Il suffit de mettre :
table
{  margin-left : 40px ;
   margin-right : 40px ;
}
Automatiquement le tableau va grandir avec la fenêtre. (On peut aussi utiliser des %).

Par contre, si on veut centrer un tableau, on utiliser plutôt des marges automatiques (et dans ce cas, on peut en plus utiliser la largeur).
table
{  margin-left : auto ;
   margin-right : auto ;
}

Et si on utilise les marges automatique et une largeur en pourcentage, on rejoint la première solution avec un tableau qui varie avec la page.

petoind

  • Administrator
  • Hero Member
  • *****
  • Messages: 7574
    • Conception des enceintes acoustiques
    • E-mail
Re : Feuille de style CSS
« Réponse #13 le: août 09, 2012, 17:08:39 pm »
Mes boutons sont actuellement des images.
Avec le PHP, il est facile de calculer la taille d'une image.
Pour la taille de l'écran, en PHP :

<?php
if ($cste == 1){$largeur 965;}
else
{
if (isset(
$_GET['largeur'])) {
  
$largeur $_GET['largeur']-20;
} else {
  echo 
"<script type=\"text/javascript\">\n";
  echo 
"  location.href=\"${_SERVER['SCRIPT_NAME']}?${_SERVER['QUERY_STRING']}"
            
"&largeur=\" + screen.width;\n";
  echo 
"</script>\n";
  exit();
}
}

//include("../mysql_s/ecran.php") ;
$larg_bouton $largeur/11;
$larg_bouton number_format($larg_bouton0'.''');
$larg_2bouton 2*$larg_bouton;
$larg_3bouton 3*$larg_bouton;
$larg_ecran $larg_bouton*11;
$haut_bouton 51/85*$larg_bouton;
$haut_bouton number_format($haut_bouton0'.''');
?>

<center>
<table border="0" cellpadding="0" cellspacing="0" <?php echo "width=\"$larg_ecran\""?>>
  <tr>

<?php if ($bas01 <> 18 and $bas02 <> 18){ ?>
    <td><a href="../php/accueil.php">
<img border="0" src="../boutons/b_accueil.jpg"
alt="Page d'accueil du site"
title="haut-parleur,enceinte,baffle,calcul,filtre,simulation,realisation"
<?php echo "width=\"$larg_bouton\""?> <?php echo "height=\"$haut_bouton\""?>></a></td>
<?php }else{ ?>
    <td><a href="../php/accueil.php">
<img border="0" src="../boutons/b_accueil_v.jpg"
alt="Page d'accueil du site"
title="haut-parleur,enceinte,baffle,calcul,filtre,simulation,realisation"
<?php echo "width=\"$larg_bouton\""?> <?php echo "height=\"$haut_bouton\""?>></a></td>
<?php ?>

<?php if ($bas01 <> 17 and $bas02 <> 17){ ?>
    <td><a href="../php/12-table.php">
    <img border="0" src="../boutons/b1_table.jpg"
alt="Table des matières"
title="12,haut-parleur,enceinte,baffle,calcul,filtre,simulation,realisation"
<?php echo "width=\"$larg_bouton\""?> <?php echo "height=\"$haut_bouton\""?>></a></td>
<?php }else{ ?>
    <td><a href="../php/12-table.php">
    <img border="0" src="../boutons/b1_table_v.jpg"
alt="Table des matières"
title="12,haut-parleur,enceinte,baffle,calcul,filtre,simulation,realisation"
<?php echo "width=\"$larg_bouton\""?> <?php echo "height=\"$haut_bouton\""?>></a></td>
<?php ?>

<?php if ($bas01 <> 16 and $bas02 <> 16){ ?>
    <td><a href="http://smf.petoindominique.fr">
    <img border="0" src="../boutons/b_forum.jpg"
alt="lien direct vers le forum"
<?php echo "width=\"$larg_bouton\""?> <?php echo "height=\"$haut_bouton\""?>></a></td>
<?php }else{ ?>
    <td><a href="http://smf.petoindominique.fr">
    <img border="0" src="../boutons/b_forum_v.jpg"
alt="lien direct vers le forum"
<?php echo "width=\"$larg_bouton\""?> <?php echo "height=\"$haut_bouton\""?>></a></td>
<?php ?>

<?php if ($bas01 <> 15 and $bas02 <> 15){ ?>
    <td><a href="../php/ecrire.php">
    <img border="0" src="../boutons/b_contact.jpg"
alt="Ecrivez moi"
title="ecrire,contact,question,reponse,hp,utilisation,conseil"
<?php echo "width=\"$larg_bouton\""?> <?php echo "height=\"$haut_bouton\""?>></a></td>
<?php }else{ ?>
    <td><a href="../php/ecrire.php">
    <img border="0" src="../boutons/b_contact_v.jpg"
alt="Ecrivez moi"
title="ecrire,contact,question,reponse,hp,utilisation,conseil"
<?php echo "width=\"$larg_bouton\""?> <?php echo "height=\"$haut_bouton\""?>></a></td>
<?php ?>

<?php if ($bas01 <> 14 and $bas02 <> 14){ ?>
    <td><a href="../php/moteur.php">
    <img border="0" src="../boutons/b_moteur.jpg"
alt="Moteur de recherche"
title="moteur,recherche,google,site,exclusif,petoindominique"
<?php echo "width=\"$larg_bouton\""?> <?php echo "height=\"$haut_bouton\""?>></a></td>
<?php }else{ ?>
    <td><a href="../php/moteur.php">
    <img border="0" src="../boutons/b_moteur_v.jpg"
alt="Moteur de recherche"
title="moteur,recherche,google,site,exclusif,petoindominique"
<?php echo "width=\"$larg_bouton\""?> <?php echo "height=\"$haut_bouton\""?>></a></td>
<?php ?>

<?php if ($compteur == 0){ ?>   
    <td <?php echo "width=\"$larg_3bouton\""?> align="center" bgcolor="#C0C0C0"><b>
    <font face="Arial" size="3">Pas de compteur dans<br>la première page du site.</font></b></td>
<?php 
}else{
 if (
$compteur == 2)
 {include(
"../compteur/compteur_base.php");}
 else
 {include(
"../compteur/compteur_site.php");}
}
?>


<?php if ($bas01 <> 13 and $bas02 <> 13){ ?>
    <td><a href="../php/mysql_menu.php">
    <img border="0" src="../boutons/b_base.jpg"
alt="Menus de la base de données HP, Logiciels de calculs des enceintes acoustiques"
title="base,haut-parleur,mysql,donnée,selection,calcul,enceinte,menu"
<?php echo "width=\"$larg_bouton\""?> <?php echo "height=\"$haut_bouton\""?>></a></td>
<?php }else{ ?>
    <td><a href="../php/mysql_menu.php">
    <img border="0" src="../boutons/b_base_v.jpg"
alt="Menus de la base de données HP, Logiciels de calculs des enceintes acoustiques"
title="base,haut-parleur,mysql,donnée,selection,calcul,enceinte,menu"
<?php echo "width=\"$larg_bouton\""?> <?php echo "height=\"$haut_bouton\""?>></a></td>
<?php ?>

<?php if ($bas01 <> 12 and $bas02 <> 12){ ?>
    <td><a href="../index.php">
    <img border="0" src="../boutons/b_site_comp.jpg"
alt="Première page du site : Conception des enceintes acoustiques"
title="conception,enceinte,acoustique,construction,HI-FI,sono,home cinema,car audio,plan,realisation,calcul,selectionné"
<?php echo "width=\"$larg_2bouton\""?> <?php echo "height=\"$haut_bouton\""?>></a></td>
<?php }else{ ?>
    <td><a href="../index.php">
    <img border="0" src="../boutons/b_site_comp_v.jpg"
alt="Première page du site : Conception des enceintes acoustiques"
title="conception,enceinte,acoustique,construction,HI-FI,sono,home cinema,car audio,plan,realisation,calcul,selectionné"
<?php echo "width=\"$larg_2bouton\""?> <?php echo "height=\"$haut_bouton\""?>></a></td>
<?php ?>
   
  </tr>
</table>

<table border="0" cellpadding="0" cellspacing="0" <?php echo "width=\"$larg_ecran\""?>>
  <tr>

<?php if ($bas01 <> and $bas02 <> 1){ ?>
    <td><a href="../php/01-table.php">
    <img border="0" src="../boutons/01.jpg" alt="01 le site"
    title="01,preambule,accueil,mentions,legale,validation,w3c,compteur,ecrire,sélectionné"
    <?php echo "width=\"$larg_bouton\""?> <?php echo "height=\"$haut_bouton\""?>></a></td>
<?php }else{ ?>
    <td><a href="../php/01-table.php">
    <img border="0" src="../boutons/01_v.jpg" alt="01 le site"
    title="01,preambule,accueil,mentions,legale,validation,w3c,compteur,ecrire,sélectionné"
    <?php echo "width=\"$larg_bouton\""?> <?php echo "height=\"$haut_bouton\""?>></a></td>
<?php ?>

<?php if ($bas01 <> and $bas02 <> 2){ ?>   
    <td><a href="../php/02-table.php">
    <img border="0" src="../boutons/02.jpg" alt="02 Recherche"
    title="02,liste,lien,site,fabricants,HP,autre,HI-FI,moteur,recherche"
    <?php echo "width=\"$larg_bouton\""?> <?php echo "height=\"$haut_bouton\""?>></a></td>
<?php }else{ ?>
    <td><a href="../php/02-table.php">
    <img border="0" src="../boutons/02_v.jpg" alt="02 Recherche"
    title="02,liste,lien,site,fabricants,HP,autre,HI-FI,moteur,recherche"
    <?php echo "width=\"$larg_bouton\""?> <?php echo "height=\"$haut_bouton\""?>></a></td>
<?php ?>

<?php if ($bas01 <> and $bas02 <> 3){ ?>   
    <td><a href="../php/03-table.php">
    <img border="0" src="../boutons/03.jpg" alt="03 Notions techniques"
    title="03,directivité,non linéarité,parallème,données,mesures,puissance,reparation,forum,livre"
    <?php echo "width=\"$larg_bouton\""?> <?php echo "height=\"$haut_bouton\""?>></a></td>
<?php }else{ ?>
    <td><a href="../php/03-table.php">
    <img border="0" src="../boutons/03_v.jpg" alt="03 Notions techniques"
    title="03,directivité,non linéarité,parallème,données,mesures,puissance,reparation,forum,livre"
    <?php echo "width=\"$larg_bouton\""?> <?php echo "height=\"$haut_bouton\""?>></a></td>
<?php ?>

<?php if ($bas01 <> and $bas02 <> 4){ ?>     
    <td><a href="../php/04-table.php">
    <img border="0" src="../boutons/04.jpg" alt="04 Baffles et enceintes"
    title="04,enceinte,baffle,bass-reflex,clos,plan,infini,symétrique,pavillon,wicked,event"
    <?php echo "width=\"$larg_bouton\""?> <?php echo "height=\"$haut_bouton\""?>></a></td>
<?php }else{ ?>
    <td><a href="../php/04-table.php">
    <img border="0" src="../boutons/04_v.jpg" alt="04 Baffles et enceintes"
    title="04,enceinte,baffle,bass-reflex,clos,plan,infini,symétrique,pavillon,wicked,event"
    <?php echo "width=\"$larg_bouton\""?> <?php echo "height=\"$haut_bouton\""?>></a></td>
<?php ?>

<?php if ($bas01 <> and $bas02 <> 5){ ?>     
    <td><a href="../php/05-table.php">
    <img border="0" src="../boutons/05f.jpg" alt="05 Filtrage"
    title="05,filtrage,pente,atténuation,MTM,piezo,limite,ordre,impédance,égalisation,RC,RLC,actif,passif,DCX,phase"
    <?php echo "width=\"$larg_bouton\""?> <?php echo "height=\"$haut_bouton\""?>></a></td>
<?php }else{ ?>
    <td><a href="../php/05-table.php">
    <img border="0" src="../boutons/05f_v.jpg" alt="05 Filtrage"
    title="05,filtrage,pente,atténuation,MTM,piezo,limite,ordre,impédance,égalisation,RC,RLC,actif,passif,DCX,phase"
    <?php echo "width=\"$larg_bouton\""?> <?php echo "height=\"$haut_bouton\""?>></a></td>
<?php ?>

<?php if ($bas01 <> and $bas02 <> 6){ ?>     
    <td><a href="../php/06-table.php">
    <img border="0" src="../boutons/06.jpg" alt="06 Systèmes"
    title="06,solution,marchent,home cinema,reglage,sono,pavillon,roue,large bande,coaxiaux,car audio,spl"
    <?php echo "width=\"$larg_bouton\""?> <?php echo "height=\"$haut_bouton\""?>></a></td>
<?php }else{ ?>
    <td><a href="../php/06-table.php">
    <img border="0" src="../boutons/06_v.jpg" alt="06 Systèmes"
    title="06,solution,marchent,home cinema,reglage,sono,pavillon,roue,large bande,coaxiaux,car audio,spl"
    <?php echo "width=\"$larg_bouton\""?> <?php echo "height=\"$haut_bouton\""?>></a></td>
<?php ?>

<?php if ($bas01 <> and $bas02 <> 7){ ?>     
    <td><a href="../php/07-table.php">
    <img border="0" src="../boutons/07.jpg" alt="07 Réalisations et plans"
    title="07,réalisation,plans,automatique,base,données,enceintes,haut-parleur"
    <?php echo "width=\"$larg_bouton\""?> <?php echo "height=\"$haut_bouton\""?>></a></td>
<?php }else{ ?>
    <td><a href="../php/07-table.php">
    <img border="0" src="../boutons/07_v.jpg" alt="07 Réalisations et plans"
    title="07,réalisation,plans,automatique,base,données,enceintes,haut-parleur"
    <?php echo "width=\"$larg_bouton\""?> <?php echo "height=\"$haut_bouton\""?>></a></td>
<?php ?>

<?php if ($bas01 <> and $bas02 <> 8){ ?>   
    <td><a href="../php/08-table.php">
    <img border="0" src="../boutons/08.jpg" alt="08 Autour des HP et enceintes"
    title="08,câbles,boucle,masse,diagnostic,solution,antenne,pied,support"
    <?php echo "width=\"$larg_bouton\""?> <?php echo "height=\"$haut_bouton\""?>></a></td>
<?php }else{ ?>
    <td><a href="../php/08-table.php">
    <img border="0" src="../boutons/08_v.jpg" alt="08 Autour des HP et enceintes"
    title="08,câbles,boucle,masse,diagnostic,solution,antenne,pied,support"
    <?php echo "width=\"$larg_bouton\""?> <?php echo "height=\"$haut_bouton\""?>></a></td>
<?php ?>

<?php if ($bas01 <> and $bas02 <> 9){ ?>   
    <td><a href="../php/09-table.php">
    <img border="0" src="../boutons/09.jpg" alt="09 Téléchargement"
    title="09,téléchargement"
    <?php echo "width=\"$larg_bouton\""?> <?php echo "height=\"$haut_bouton\""?>></a></td>
<?php }else{ ?>
    <td><a href="../php/09-table.php">
    <img border="0" src="../boutons/09_v.jpg" alt="09 Téléchargement"
    title="09,téléchargement"
    <?php echo "width=\"$larg_bouton\""?> <?php echo "height=\"$haut_bouton\""?>></a></td>
<?php ?>

<?php if ($bas01 <> 10 and $bas02 <> 10){ ?>     
    <td><a href="../php/10-table.php">
    <img border="0" src="../boutons/10.jpg" alt="10 Mon système"
    title="10,configuratio,système,voie,filtre,actif,DCX 2496,grave,baffle plan,SP200X,B200,HAFLER,TA1600,CD723"
    <?php echo "width=\"$larg_bouton\""?> <?php echo "height=\"$haut_bouton\""?>></a></td>
<?php }else{ ?>
    <td><a href="../php/10-table.php">
    <img border="0" src="../boutons/10_v.jpg" alt="10 Mon système"
    title="10,configuratio,système,voie,filtre,actif,DCX 2496,grave,baffle plan,SP200X,B200,HAFLER,TA1600,CD723"
    <?php echo "width=\"$larg_bouton\""?> <?php echo "height=\"$haut_bouton\""?>></a></td>
<?php ?>

<?php if ($bas01 <> 11 and $bas02 <> 11){ ?>   
    <td><a href="../php/11-table.php">
    <img border="0" src="../boutons/11.jpg" alt="11 Hors sujet"
    title="11,coin,râleur,créer,site,web,changement,energie,chauffage,électrique,régulation"
    <?php echo "width=\"$larg_bouton\""?> <?php echo "height=\"$haut_bouton\""?>></a></td>
<?php }else{ ?>
    <td><a href="../php/11-table.php">
    <img border="0" src="../boutons/11_v.jpg" alt="11 Hors sujet"
    title="11,coin,râleur,créer,site,web,changement,energie,chauffage,électrique,régulation"
    <?php echo "width=\"$larg_bouton\""?> <?php echo "height=\"$haut_bouton\""?>></a></td>
<?php ?>
   
  </tr>
</table>
</center>

Est-ce la bonne solution ?

Borak

  • Full Member
  • ***
  • Messages: 595
Re : Feuille de style CSS
« Réponse #14 le: août 09, 2012, 19:50:22 pm »
Vindiou, jamais je n'aurais pensé à ça :)

J'ai plutôt tendance à faire simple, j'aurai tout mis en simple tableau avec du texte. Et j'aurai fait en sorte que ça rende joli :) Dans mon exemple, j'avais repris ton menu en simple tableau avec les images existantes.

Mais si tu veux faire comme ça, je ne te prive pas :) A priori, comme c'est un menu, ce doit être isolé dans un php à part.