Partage

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>

dark_ouindu

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

Tadzoa

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 ?

jp949

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

dark_ouindu

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 ?

Tadzoa

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

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 ?

MadX

2 janvier 2006 à 16:04:06

C'est mieux

Je te laisse adapter le CSS avec des float:left; et des clear: both

(si tu t'en sors pas, poste

)

Tadzoa

2 janvier 2006 à 16:16:51

MadX

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

jp949

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

Tadzoa

2 janvier 2006 à 16:28:06

2 float left ????

PS : et pour ma bannière ? comment je peux la centrer ? :-°

jp949

2 janvier 2006 à 16:31:38

ils ont ou les codes html et css pour la banniere?
#en-tete {margin:0 auto 2px auto}

Tadzoa

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

MadX

2 janvier 2006 à 17:06:57

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

Le tien n'a aucun sens !

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

Tadzoa

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;
}

MadX

2 janvier 2006 à 17:21:29

Je viens d'éditer

Ta partie xhtml est toujours mauvaise !

Tadzoa

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

MadX

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 !

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)

Tadzoa

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: left; 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; 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

Ya psa des jours ou tu as les nerfs qui ont une furieuse envie de lacher quand tu codes en CSS ?

MadX

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