Partage
  • Partager sur Facebook
  • Partager sur Twitter

Ou est l'erreur dans ce tableau

?????

2 janvier 2006 à 15:33:20

Bonjour

Je sais que ce truc doit être truffé d'errreurs idiotes mais je les vois pas ...

C'est censé être un tableau avec le texte au milieu et un cadre en bois avec les coins en feuilles.

Css :



/* Tableau */

.gauche
{
width: 31px;
background-image: url("http://worldedit.free.fr/images/bois_y.jpg");
background-repeat: repeat-y;
background-position: left;
}
.droite
{
width: 31px;
background-image: url("http://worldedit.free.fr/images/bois_y.jpg");
background-repeat: repeat-y;
background-position: right;
}
.haut
{
height: 33px;
background-image: url("http://worldedit.free.fr/images/bois_x.jpg");
background-repeat: repeat-x;
}
.bas
{
height: 33px;
background-image: url("http://worldedit.free.fr/images/bois_x.jpg");
background-repeat: repeat-x;
}
.coin-HD
{
width: 102px;
height: 68px;
background-image: url("http://worldedit.free.fr/images/feuillesHD.gif");
float: right;
}
.coin-HG
{
width: 68px;
height: 102px;
background-image: url("http://worldedit.free.fr/images/feuillesHG.gif");
float: left;
}
.coin-BG
{
width: 102px;
height: 68px;
background-image: url("http://worldedit.free.fr/images/feuillesBG.gif");
float: right;
}
.coin-BD
{
width: 68px;
height: 102px;
background-image: url("http://worldedit.free.fr/images/feuillesBD.gif");
float: left;
}
.contenu
{
background-image: url("http://worldedit.free.fr/images/papyrus3ja.jpg");
background-position: center;
padding: 33px 31px 33px 31px;
}



XHTML


<div id="corps">
<div class="gauche">
                <div class="droite">
        <div class="haut">
<div class="coin-HG">
<div class="coin-HD">
</div>
</div>
        </div>
<div class="contenu">
Mon texte ici
</div>
        <div class="bas">
<div class="coin-BG">
<div class="coin-BD">
</div>
</div>
        </div>
                </div>
                </div>
</div>
  • Partager sur Facebook
  • Partager sur Twitter
2 janvier 2006 à 15:44:00

il est en ligne ton site qu'on voit ce que ca donne ?

j'ai regardé que 2 secondes, et déja, je vois dans un <div> appelé "gauche" un autre <div> appelé "droite" ...
puis, dans le div "droite", inclus dans le div "gauche", il y a 2 div qui sont nommés "haut gauche" et "haut droite"

je saisis pas bien la logique ...
  • Partager sur Facebook
  • Partager sur Twitter
2 janvier 2006 à 15:54:25

Oui ok je m'explique.
Il y a
Le div gauche qui est la partie gauche du cadre.
Le div droite qui est la partie droite du cadre
Le div bas qui est la partie basse du cadre
Le div haut qui est la partie haute du cadre.

Ensuite il y a
Le div HD haut droite
Le div HG haut gauche
Le div BG bas gauche
Le div BD bas droite

Puis il y a le div contenu

Le tout est dans un div center

http://worldedit.free.fr

pas terrible n'est ce pas ?
  • Partager sur Facebook
  • Partager sur Twitter
2 janvier 2006 à 15:56:06

tu as des div inutiles et d'autres ne sont pas inseres correctement dans le code html
voir le code a cette adresse
  • Partager sur Facebook
  • Partager sur Twitter
2 janvier 2006 à 15:58:42

oui, il me semble bien, parceque franchement, même en regardant le css, j'ai du mal a comprendre ...

faudrait pas fermer le gauche avant d'ouvrir le droite par exemple ?

  • Partager sur Facebook
  • Partager sur Twitter
2 janvier 2006 à 16:03:55

J'ai refermé la gauche et la droite avant mais certaines images ne s'affichent pas.
Celà dit c'est mieux que avant :D

Pourtant j'avais suivi un modèle donné sur un site ...
Ca me paraissait bizzard aussi mais bon ... ^^

En fait quelqu'un pourrai tme dire comment centrer la backgroundimage du header ?
  • Partager sur Facebook
  • Partager sur Twitter
2 janvier 2006 à 16:04:06

<div class="coin-HG">
</div>
<div class="haut">
</div>
<div class="coin-HD">
</div>

<div class="gauche">
</div>
<div class="contenu">
</div>
<div class="droite">
</div>

<div class="coin-BG">
</div>
<div class="bas">
</div>
<div class="coin-BD">
</div>


C'est mieux ;)

Je te laisse adapter le CSS avec des float:left; et des clear: both ;) (si tu t'en sors pas, poste :) )
  • Partager sur Facebook
  • Partager sur Twitter
2 janvier 2006 à 16:19:24

Houla faut que j'arrête d edire des conneries moi, pas des clear: both mais bien left !

En gros a chaque div tmets un float: left; et a tout ceux qui sont à gauche (coinHG, gauche, CcoinBG) tu mets EN PLUS un float: left;

Et tu règles bien les dimensions ;)
  • Partager sur Facebook
  • Partager sur Twitter
2 janvier 2006 à 16:27:58

je lui ai donné une adresse y a plus qu'a copier/coller le code css compris entre les commentaires
  • Partager sur Facebook
  • Partager sur Twitter
2 janvier 2006 à 16:28:06

2 float left ????

PS : et pour ma bannière ? comment je peux la centrer ? :-°
  • Partager sur Facebook
  • Partager sur Twitter
2 janvier 2006 à 16:31:38

ils ont ou les codes html et css pour la banniere?
#en-tete {margin:0 auto 2px auto}
  • Partager sur Facebook
  • Partager sur Twitter
2 janvier 2006 à 16:55:47

Je continue ma série :

Seules les images des div haut et bas s'affichent ...
CSS :


/* Tableau */

.gauche
{
width: 31px;
background-image: url("http://worldedit.free.fr/images/bois_y.jpg");
background-repeat: repeat-y;
background-position: left;
float: left;
}
.droite
{
width: 31px;
background-image: url("http://worldedit.free.fr/images/bois_y.jpg");
background-repeat: repeat-y;
background-position: right;
float: right;
}
.haut
{
height: 33px;
background-image: url("http://worldedit.free.fr/images/bois_x.jpg");
background-repeat: repeat-x;
}
.bas
{
height: 33px;
background-image: url("http://worldedit.free.fr/images/bois_x.jpg");
background-repeat: repeat-x;
}
.coin-HD
{
float: left;
width: 102px;
height: 68px;
background-image: url("http://worldedit.free.fr/images/feuillesHD.gif");
float: right;
background-position: center center;
}
.coin-HG
{
float: left;
width: 68px;
height: 102px;
background-image: url("http://worldedit.free.fr/images/feuillesHG.gif");
background-position: center center;
}
.coin-BG
{
width: 102px;
height: 68px;
background-image: url("http://worldedit.free.fr/images/feuillesBG.gif");
float: left;
background-position: center center;
}
.coin-BD
{
float: left;
width: 68px;
height: 102px;
background-image: url("http://worldedit.free.fr/images/feuillesBD.gif");
float: right;
background-position: center center;
}
.contenu
{
background-image: url("http://worldedit.free.fr/images/papyrus3ja.jpg");
background-position: center;
padding: 33px 31px 33px 31px;
}



Le XHTML


<div id="corps">
<div class="gauche"></div>
<div class="droite"></div>
<div class="haut"></div>
<div class="coin-HG">
<div class="coin-HD">
</div>
</div>
<div class="contenu">
MON TEXTE ICI
</div>
<div class="bas"></div>
<div class="coin-BG">
<div class="coin-BD">
</div>
</div>
</div>


Et ça donne

http://worldedit.free.fr
  • Partager sur Facebook
  • Partager sur Twitter
2 janvier 2006 à 17:06:57

Utilise le code xhtml que je t'ai donné !

Le tien n'a aucun sens !

<div id="corps">
<div class="gauche"></div>
<div class="droite"></div>
<div class="haut"></div>
<div class="coin-HG">
<div class="coin-HD">
</div>
</div>
<div class="contenu">
MON TEXTE ICI
</div>
<div class="bas"></div>
<div class="coin-BG">
<div class="coin-BD">
</div>
</div>
</div>


Littéralement ça veut dire: positionne les blocs .gauche, .droite et .haut puis met le bloc .coin-HD dans le bloc .coin-HG. Positionne le contenu. Met le bas. Mets le bloc .coin-BD dans le bloc .coin-BG
Ce qui n'a strictement aucun sens non ?

Avec mon code on dit: positionne .coin-HG puis .haut puis .coin-HD, puis .gauche, .contenu et .droite et enfin .coin-BG puis .bas et .coin-BD => On les positionne dans leur ordre d'affichage !

Après grace à float left on les fait tous partir a gauche et avec le clear left sur .coin-HG, .gauche et .coin-BG on permet le retour à la ligne.

Si tu comprends toujours pas je te fais une demo

EDIT: Je viens de finir:

Image utilisateur

Voila, j'ai utilisé le code que je t'ai donné plus haut et un css que voila:

        div { margin: 0px; border: 1px solid black; float: left; text-align: center; v-align: middle; color: white; font-weight: bold;}
               
        .coin-HG, .coin-HD, .coin-BG, .coin-BD { width: 30px; height: 30px; background-color: #888397}
               
        .haut, .bas { height: 30px; width: 300px; background-color: #00ac00}
               
        .gauche, .contenu, .droite { height: 300px; }
               
        .gauche, .droite { width: 30px; background-color: #00ac00 }
               
        .coin-HG, .gauche, .coin-BG { clear: left; }
               
        .contenu { width: 300px; }


Je te laisse le soin d'adapter ceci à ton site ;)
  • Partager sur Facebook
  • Partager sur Twitter
2 janvier 2006 à 17:19:56

Désolé j'ai essayé ta technique mais ça donne ça
http://worldedit.free.fr

Alors j'ai arrêté ...

Le css :



/* Tableau */

.gauche
{
width: 31px;
background-image: url("http://worldedit.free.fr/images/bois_y.jpg");
background-repeat: repeat-y;
background-position: left;
float: left;
clear: left;
}
.droite
{
width: 31px;
background-image: url("http://worldedit.free.fr/images/bois_y.jpg");
background-repeat: repeat-y;
background-position: right;
float: left;
}
.haut
{
height: 33px;
background-image: url("http://worldedit.free.fr/images/bois_x.jpg");
background-repeat: repeat-x;
float: left;
}
.bas
{
height: 33px;
background-image: url("http://worldedit.free.fr/images/bois_x.jpg");
background-repeat: repeat-x;
float: left;
}
.coin-HD
{
width: 102px;
height: 68px;
background-image: url("http://worldedit.free.fr/images/feuillesHD.gif");
float: left;
background-position: center center;
}
.coin-HG
{
float: left;
width: 68px;
height: 102px;
background-image: url("http://worldedit.free.fr/images/feuillesHG.gif");
background-position: center center;
clear: left;
}
.coin-BG
{
width: 102px;
height: 68px;
background-image: url("http://worldedit.free.fr/images/feuillesBG.gif");
float: left;
clear: left;
background-position: center center;
}
.coin-BD
{
float: left;
width: 68px;
height: 102px;
background-image: url("http://worldedit.free.fr/images/feuillesBD.gif");
background-position: center center;
}
.contenu
{
background-image: url("http://worldedit.free.fr/images/papyrus3ja.jpg");
background-position: center;
padding: 33px 31px 33px 31px;
float: left;
}



  • Partager sur Facebook
  • Partager sur Twitter
2 janvier 2006 à 17:21:29

Je viens d'éditer ;)

Ta partie xhtml est toujours mauvaise !
  • Partager sur Facebook
  • Partager sur Twitter
2 janvier 2006 à 17:46:59

div { margin: 0px; border: 1px solid black; float: left; text-align: center; v-align: middle; color: white; font-weight: bold;}
               
        .coin-HG { width: 68px; height: 102px; background-image: url("http://worldedit.free.fr/images/feuillesHG.gif"); }
                .coin-HD {width: 102px; height: 68px; background-image: url("http://worldedit.free.fr/images/feuillesHD.gif"); }
                .coin-BG {width: 102px; height: 68px; background-image: url("http://worldedit.free.fr/images/feuillesBG.gif"); }
                .coin-BD { width: 68px; height: 102px; background-image: url("http://worldedit.free.fr/images/feuillesBD.gif");}
               
        .haut, .bas { height: 33px;
background-image: url("http://worldedit.free.fr/images/bois_x.jpg");
background-repeat: repeat-x;}
               
        .gauche, .contenu, .droite { height: 300px; }
               
        .gauche, .droite { width: 31px;
background-image: url("http://worldedit.free.fr/images/bois_y.jpg");
background-repeat: repeat-y;}
               
        .coin-HG, .gauche, .coin-BG { clear: left; }
               
        .contenu { width: 300px; }



Ca rend bof ...

http://worldedit.free.fr


PS : Désolé d'insister mais je suis vraiment débutant :(
  • Partager sur Facebook
  • Partager sur Twitter
2 janvier 2006 à 18:18:12

Change ton code xhtml !!

Je t'ai dit 3 fois qu'il était mauvais et tu continues à employer le même ! :colere:

Lis les posts en entier au lieu de copier/coller juste les css !

<div class="coin-HG">
</div>
<div class="haut">
</div>
<div class="coin-HD">
</div>

<div class="gauche">
</div>
<div class="contenu">
</div>
<div class="droite">
</div>

<div class="coin-BG">
</div>
<div class="bas">
</div>
<div class="coin-BD">
</div>


C'est ça qu'il faut utiliser.

Tu peux aussi virer "v-align: middle" j'avais oublié que ça marchait que sur les balises inline ;)

EDIT : et mets à jour ton css ;) (celui que t'a filé doit marcher)
  • Partager sur Facebook
  • Partager sur Twitter
2 janvier 2006 à 18:35:07

Mais c'est celui que j'ai mis.
et puis le CSS je l'ai un peu modifié :

Les pb c'est que certaines images ne s'affichent pas et que le tableau n'est pas dans le corps ... :(

       
        .coin-HG { float: left; width: 68px; height: 102px; background-image: url("http://worldedit.free.fr/images/feuillesHG.gif"); }
                .coin-HD {float: left; width: 102px; height: 68px; background-image: url("http://worldedit.free.fr/images/feuillesHD.gif"); }
                .coin-BG {float: left; width: 102px; height: 68px; background-image: url("http://worldedit.free.fr/images/feuillesBG.gif"); }
                .coin-BD {float: leftwidth: 68px; height: 102px; background-image: url("http://worldedit.free.fr/images/feuillesBD.gif");}
               
        .haut, .bas { height: 33px;
background-image: url("http://worldedit.free.fr/images/bois_x.jpg");
background-repeat: repeat-x; float: left;}
               
        .gauche, .contenu, .droite { height: 500px; float: left;}
               
        .gauche, .droite { width: 31px;
background-image: url("http://worldedit.free.fr/images/bois_y.jpg");
background-repeat: repeat-y;}
               
        .coin-HG, .gauche, .coin-BG { clear: left; }
               
        .contenu { width: 500px; }



XHTML

<div id="corps">
<div class="coin-HG">
</div>
<div class="haut">
</div>
<div class="coin-HD">
</div>

<div class="gauche">
</div>
<div class="contenu">
</div>
<div class="droite">
</div>

<div class="coin-BG">
</div>
<div class="bas">
</div>
<div class="coin-BD">
</div>
</div>



Ya psa des jours ou tu as les nerfs qui ont une furieuse envie de lacher quand tu codes en CSS ? ;)
  • Partager sur Facebook
  • Partager sur Twitter
3 janvier 2006 à 20:05:39

A mon avis tu as déjà deux problèmes >

1°/ Ton Css est pas logique, ou alors c'est ton découpage du cadre en plusieurs images qui est mal foutu.

Y'a des coins plus larges et d'autres plus haut :s

Ensuite tes images n'existent pas ! (Et tu peux mettre des liens relatifs > sans le "http://worldedit.free.fr/" Donc evidemment, si elles existent pas ... elles s'affichent pas :) Vérifie le nom des images ;)
  • Partager sur Facebook
  • Partager sur Twitter

Ou est l'erreur dans ce tableau

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
  • Editeur
  • Markdown