Problème pour refaire un squelette

Version imprimable

Salut salut,

Voilà j'essaye de réadapter un ancien design de XHTML vers HTML5 et je dois avouer que je suis pas un super grand spécialiste du HTML donc j'ai quelques difficultés :(

Voilà mon problème tiens en une image :
http://img4.hostingpics.net/pics/946...1220181540.png

Comme vous le voyez, ma bannière (dans mon header) est séparé de mon menu (dans mon nav) par une bande blanche de 4 ou 5 pixels qui sort de je ne sais où.

Voici mon code HTML :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="author" content="xxx">
    <link rel="shortcut icon" href="image/favicon.ico">
    <link rel="stylesheet" href="index.css">
    <title>Entreprise xxx - Acceuil</title>
  </head>
  <body>
    <header class="style1">
        <img alt="Bannière" src="image/banniere2.png">
    </header>
    <nav>
      <table width="288">
        <tbody>
          <tr>
            <td class="style3"><a href="index.htm"></a><br>
            </td>
          </tr>
          <tr>
            <td class="style4"><a href="tournee1.htm"></a><br>
            </td>
          </tr>
          <tr>
            <td class="style5"><a href="tournee2.htm"></a><br>
            </td>
          </tr>
          <tr>
            <td class="style6"><a href="prix.htm"></a><br>
            </td>
          </tr>
          <tr>
            <td class="style7"><a href="contact.htm"></a><br>
            </td>
          </tr>
        </tbody>
      </table>
    </nav>
  </body>
</html>

Et mon code CSS :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
 
a {
	text-decoration: none;
}
table, tr, td {
	border-spacing: 0;
	border-collapse: collapse ;
	border: none;
	padding: 0;
}
.style1 {
	width: 100%;
	height: 185;
	text-align: left;
	background-repeat: repeat-x;
	background-image: url('image/repetition.png');
}
.style3 {
	height: 38px;
	width: 288px
	text-align: left;
	background-image: url('image/menu12%20copie.png');
	outline: none;
}
.style4 {
	height: 34px;
	width: 288px
	text-align: left;
	background-image: url('image/menu22%20copie.png');
	outline: none;
}
.style5 {
	height: 34px;
	width: 288px
	text-align: left;
	background-image: url('image/menu32%20copie.png');
	outline: none;
}
.style6 {
	height: 33px;
	width: 288px
	text-align: left;
	background-image: url('image/menu42%20copie.png');
	outline: none;
}
.style7 {
	height: 32px;
	width: 288px
	text-align: left;
	background-image: url('image/menu52%20copie.png');
	outline: none;
}

J'étais persuadé que cela venait de la bordure de mon tableau mais j'ai cherché sur internet comment l'enlever et malgré sa, sa ne fonctionne pas ...

Quelqu'un pourrait-t'il m'aider ?
Je vous remercie d'avance.

20/12/2011, 21h49
Bisûnûrs

Alors en vrac .. : c'est une très mauvaise méthode de travail d'utiliser des noms de classe comme style1, style2, etc., tu as des dimensions sans unités (185... patates ? choux ?), on écrit "Accueil" et pas "Acceuil", FAQ CSS, ..
21/12/2011, 02h05
thelvin

Notons aussi que les images par morceaux c'est que des nids à emmerdes.
Il vaut mieux avoir une seule image qu'on met en arrière-plan de quelque chose, et caler le texte à peu près où on veut dessus avec du positionnement ou des tailles absolus.

Alors j'ai suivi vos conseils : d'une part j'ai essayé de ne pas découper le design mais plutôt de le mettre en image de fond, mais aussi de mettre des noms évocateurs dans mon CSS.

Mais j'ai toujours mon problème :

http://img4.hostingpics.net/pics/351...1221141640.png

La bande blanche que vous voyez en bas est une espèce de marge ou de bordure qui sépare les lignes de mon tableau HTML.
En effet, le menu en rouge doit se terminer en bas de l'écran. J'utilise pour sa une image de 1px de haut que je répète sur l'axe Y.

Voici mon code HTML :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 <!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <meta name="author" content="xxx"> <link rel="shortcut icon" href="image/favicon.ico"> <link rel="stylesheet" href="index.css"> <title>Entreprise xxx - Accueil</title> </head> <body> <table> <tbody> <tr> <td><img alt="Bannière" src="image/HeadNav.png"></td> <td class="repetitionx"><br> </td> </tr> <tr> <td class="repetitiony"><br> </td> </tr> </tbody> </table> </body> </html>
Puis mon code CSS simplifié :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 a { text-decoration: none; } table{ border-collapse: collapse ; } td{ padding: 0px; margin: 0px; } tr{ padding-left:0px; padding-right:0px; padding-top:0px; padding-bottom:0px; margin-left:0px; margin-right:0px; margin-top:0px; margin-bottom:0px; border-width:0px; border-style:none; } .repetitionx { width: 100%; height: 185px; background-repeat: repeat-x; background-image: url('image/repetition.png'); } .repetitiony { width: 288px; text-align: left; background-repeat: repeat-y; background-image: url('image/repetition2.png'); outline: none; }
Pour les TR, je sais que j'ai mis trop de choses dans mon CSS mais j'ai tenter d'essayer tout ce qui était possible pour enlever cette foutu marge et même sans cela, sa ne marche pas :/

Merci de votre aide.

21/12/2011, 14h41
Meloooo

Pourquoi avoir un saut de ligne avant chaque fin de colonne ?
21/12/2011, 14h43
Bisûnûrs

Citation:

Envoyé par Bisûnûrs

FAQ CSS

Faut lire jusqu'au bout ..
21/12/2011, 15h53
Wizard50

Aaaaaah merci merci merci j'étais loin de me douter que sa aurait pu être sa. J'avais jeté un coup d'oeil sur le FAQ mais pas assez en profondeur me semble t'il : mea culpa ;)

PS : Pour les BR, c'est mon éditeur que mi les rajoute automatiquement quand je met rien dedans. Un peu lourd je sais mais je dois pouvoir le régler, je ne fait que l'essayer pour l'instant.