28220 sujets

CSS et mise en forme, CSS3

[Résolu]Des espaces, mais il viennent d'où ?

Bonsoir,

j'essai de me créer un site web en apprenant l'XHTML et améliorer les connaissances basiques que j'ai en CSS, mais je bute sur une chose.

Tout d'abord, je sais, on peut faire une mise en page sans tableaux, pour le moment je la fais avec pour apprendre l'XHTML et améliorer mes connaissances en CSS. Dans un 2ème temps j'essaierai de le faire sans talbeau. J'ai déjà imprimé le tutorial disponible sur ce site Smiley cligne

Donc j'ai commencé ma mise en page avec tableaux, fais une feuille CSS et essayer de tout imbriquer. Mais entre mes différents lignes, il y a des espaces, plus exactement au fond de chaque cellules, ce qui décale la ligne d'en dessous. J'ai essayé plusieurs choses, mais je ne trouve pas la solution.

Voici le rendu :
http://img381.imageshack.us/img381/6250/rendubt8.th.png

Le code XHTML de ma page :

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
 <head>
  <title>Fripix</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
  <table summary="mise en page du site">
   <tr> <!-- Ligne 1 contient : b1.png, b2.png, b3.png -->
    <td class="w8h8"><img src="img/design/b1.png" alt="coin haut gauche" /></td>
    <td class="w770h8" colspan="3"><img src="img/design/b2.png" alt="bord haut" /></td>
    <td class="w8h8"><img src="img/design/b3.png" alt="coin haut droite" /></td>
   </tr>
   <tr> <!-- Ligne 2 contient : b4.png background, h1.png, bouton contact.png +rollover, b5.png background -->
    <td class="b4" rowspan="4"></td>
    <td colspan="2"><img src="img/design/h1.png" alt="header partie 1" /></td>
    <td><a href="index.php?p=contact"><img src="img/btn/contact.png" alt="bouton contact" /></a></td>
    <td class="b5" rowspan="4"></td>
   </tr>
   <tr> <!-- Ligne 3 contient : logo.png, h2.png, h2.1.png -->
    <td><img src="img/design/logo.png" alt="logo Fripix" /></td>
    <td><img src="img/design/h2.png" alt="header partie 2" /></td>
    <td><img src="img/design/h2.1.png" alt="header partie 2.1" /></td>
   </tr>
   <tr> <!-- Ligne 4 contient : h5.png background -->
    <td><img src="img/design/logo2.png" alt="logo partie 2 Fripix" /></td>
    <td colspan="2"></td>
   </tr>
   <tr> <!-- Ligne 5 contient : logo2.png, tableau avec menu -->
    <td colspan="3" class="h5"></td>
   </tr>
  </table>
 </body>
</html>



Mon fichier CSS :

body {
 background-image: url(img/design/background.png);
 background-repeat: repeat;
}

table {
 border-collapse: collapse;
 border: none;
 padding: 0px 0px 0px 0px;
 margin-left: auto;
 margin-right: auto;
 width: 786px;
}

td {
 border: none;
 padding: 0px;
}

.b4 {
 width: 8px;
 background-image: url(img/design/b4.png);
 background-repeat: repeat-y;
}

.b5 {
 width: 8px;
 background-image: url(img/design/b5.png);
 background-repeat: repeat-y;
}

.h5 {
 background-image: url(img/design/h5.png);
 background-repeat: repeat-x;
 height: 8px;
}

.w8h8 {
 width: 8px;
 height: 8px;
}

.w770h8 {
 width: 770px;
 height: 8px;
}

.img {
 border: none;
}


Ma page a été validée sur validator.w3.org, par contre je n'ai pas fais contrôlé mon document CSS (pas pour le moment, je fais le gros d'abord, j'affine ensuite).

Où est mon erreur, quelle est la solution? Je tourne en rond depuis un peu plus de 2h.

Merci Smiley smile
Modifié par Graphix (07 Aug 2006 - 14:51)
Salut

a écrit :
Tout d'abord, je sais, on peut faire une mise en page sans tableaux, pour le moment je la fais avec pour apprendre l'XHTML et améliorer mes connaissances en CSS. Dans un 2ème temps j'essaierai de le faire sans talbeau. J'ai déjà imprimé le tutorial disponible sur ce site cligne


Dommage, il me semble que tu fais un peu les choses à l'envers : tu apprends les détails (comment colorer le texte et mettre des images d'arrière-plan, ...) au lieu de commencer par l'essentiel (balisage sémantique, positionnement, ...) Smiley ohwell

Pour ce problème de (marges/padding ?), tu n'aurais pas un exemple en ligne ? (on est vendredi soir, j'avoue, j'ai un peu la flemme Smiley murf )
Modifié par Sopo (04 Aug 2006 - 19:43)
Sopo, pour le moment, j'applique ce que je connais, ensuite j'apprendrai le positionnement, que je ne connais pas encore mis à part de non Smiley cligne
Et ça me permettra de comparer directement les différences Smiley smile


Merci Laurent Denis, j'ai lu en gros et vu ce qu'il fallait que je rejoute. Je vais essayer tout cela un peu plus tard, là, dodo Smiley smile
Sujet clos
Aller à