28220 sujets

CSS et mise en forme, CSS3

Bonjour à tous !!

Voila mon employeur vient de se procurer un "kit graphique" par allopass
et il veut que je l'utilise pour faire une application Web.

voici un bout du code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
<html>
<head>
<title>Application: DX Gard</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="styles.css" rel="stylesheet" type="text/css">
</head>

<body>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td rowspan="3" background="images/bgGauche.gif">&nbsp;</td>
    <td width="241" rowspan="3"><img src="images/header.jpg" width="241" height="166"></td>
    <td width="535"><img src="images/headerDroit.jpg" width="535" height="40"></td>
    <td background="images/bgDroit.gif">&nbsp;</td>
  </tr>
  <tr>
    <td height="25" background="images/ongletBG.gif">
	  <table width="470" height="25"  border="0" align="center" cellpadding="0" cellspacing="0">
        <tr>
          <td width="94" height="25" background="images/ongletActive.gif" class="menu"><div align="center"><a href="index.htm"> &nbsp;&nbsp;accueil</a></div></td>
          <td width="94" height="25" background="images/onglet.gif" class="menu"><div align="center"><a href="1.htm">&nbsp;&nbsp;paramètrage</a></div></td>
          <td width="94" height="25" background="images/onglet.gif" class="menu"><div align="center"><a href="2.htm">&nbsp;&nbsp;log traitement</a></div></td>
          <td width="94" height="25" background="images/onglet.gif" class="menu"><div align="center"><a href="3.htm">&nbsp;&nbsp;composition lot</a></div></td>
          <td width="94" height="25" background="images/onglet.gif" class="menu"><div align="center"><a href="4.htm">&nbsp;&nbsp;reporting</a></div></td>
        </tr>
      </table></td>
    <td>&nbsp;</td>
  </tr>


Déjà on peut remarquer qu'il utilise une feuille de style, mais je trouve le code HTML un peu lourd.... avec tous les attributs "width", "height"...

comment pourrais je simplifier ce code ?

ma deuxieme question:
Dans l'etat, ce kit comporte un fichier index.htm et 4 autres fichier Html casi identique à l'index.
Est-ce que je peux simplifier tous ca sachant que je dois integrer du php ? (peut etre avec des "include")


j'espère avoir été assez clair.
en esperant avoir de vos nouvelles.... Smiley lol

Sebb
Modérateur
bonjour,
Je pense que si c'est le tout debut d'un projet, que c'est le moment ou jamais de passer ce "kit graphique" en version xhtml (ou html)css separés et de le decouper pour l'utiliser avec la technique des include en php .
On voit effectivement sur ton extrait de code, que l'utilisation d'une class pour l'image "onglet.gif" aiderait grandement a faire le menage et que ces cellules pourrait etre remplace par une liste .

Car plus le projet avancera plus la chose risque de devenir lourde et difficile.
(perso les tableaux m'inquiete toujours un peu quand il faut mettre les mains dans le cambouis 3 mois plus tard... ).

Ceci dit, je ne connais pas l'ensemble des fichiers que tu as et l'ensemble est peut-etre tres bien conçu.

en tout cas bon courage
Merci d'avoir pris un peu de temps pour me répondre.

Pour l'image de fond, il vaut mieux refaire le découpage non ?
car là elle a été découpé en plein de petit morceaux pour pouvoir rentrer dans les cellules du tableau...

je pensai récupérer le tout avec un imprimecran dans PSP et faire un découpage en ligne...

par contre je suis pas tres doué pour les classes (je connais...mais mal Smiley ohwell ) alors si quelqu'un pouvais m'aider à monter la premiere marche, ca serait vraiment cool Smiley lol

merci encore
Modifié par sebb (02 Dec 2005 - 09:01)