[HTML 5] Problème pour refaire un squelette [Résolu]

Wizard50 · 20/12/2011, 18h28

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 :

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

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

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, ..

thelvin · 21/12/2011, 02h05

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.

Wizard50 · 21/12/2011, 14h29

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 :

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

Meloooo · 21/12/2011, 14h41

Pourquoi avoir un saut de ligne avant chaque fin de colonne ?

Bisûnûrs · 21/12/2011, 14h43

Citation:

Envoyé par Bisûnûrs

FAQ CSS

Faut lire jusqu'au bout ..

Wizard50 · 21/12/2011, 15h53

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.

20/12/2011, 21h49	#2
Bisûnûrs Modérateur Josselin Développeur Web Inscription : janvier 2004 Messages : 9 050 Détails du profil Informations personnelles : Nom : Josselin Âge : 29 Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : janvier 2004 Messages : 9 050 Points : 12 181 Points : 12 181	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, ..
	00

21/12/2011, 02h05	#3
thelvin Expert Confirmé Sénior Inscription : septembre 2004 Messages : 5 092 Détails du profil Informations forums : Inscription : septembre 2004 Messages : 5 092 Points : 7 020 Points : 7 020	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.
	00

21/12/2011, 14h41	#5
Meloooo Membre actif Mélanie Inscription : novembre 2008 Messages : 275 Détails du profil Informations personnelles : Nom : Mélanie Âge : 22 Informations forums : Inscription : novembre 2008 Messages : 275 Points : 178 Points : 178	Pourquoi avoir un saut de ligne avant chaque fin de colonne ?
	00

21/12/2011, 15h53	#7
Wizard50 Futur Membre du Club Inscription : décembre 2009 Messages : 53 Détails du profil Informations forums : Inscription : décembre 2009 Messages : 53 Points : 19 Points : 19	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.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email