Salut à tous.
Bon désolé pour le titre où je me suis un peu exité mais sa va faire plus de 2 jour que j'ai à peu près fini mon design mais Firefox refuse toujours de me l'afficher correctement alors que chez IE il y a aucun problem !!

Je pense que mon problem vien plustot du code html et non du CSS après un tour chez CSS validator il y a pas de problem.

Voici mon code (de la colonne gauche de mon site)

Citation : undefined

table width="150" id="align_gauche">
<tr>
<td>
<div class="Titre_Rubrique">
Les logiciels
</div>
<div class="Rubrique_gauche">
<img src=images/puce.gif><a href="accueil.php?page=Azureus">Azureus</a><br>
<img src=images/puce.gif><a href="accueil.php?page=Bit_Torrent">BitTorrent</a><br/>
<img src=images/puce.gif><a href="accueil.php?page=DC_plus_plus">DC++</a><br/>
<img src=images/puce.gif><a href="accueil.php?page=eChamblard">eChamblard</a><br/>
<img src=images/puce.gif><a href="accueil.php?page=eDonkey2000">eDonkey2000</a><br/>
<img src=images/puce.gif><a href="accueil.php?page=emule">Emule</a><br/>
<img src=images/puce.gif><a href="accueil.php?page=Emule_plus">Emule +</a><br/>
<img src=images/puce.gif><a href="accueil.php?page=Frost_Wire">Frost Wire</a><br/>
<img src=images/puce.gif><a href="accueil.php?page=Kazaa">Kazaa</a><br/>
<img src=images/puce.gif><a href="accueil.php?page=Limewire">Limewire</a><br/>
<img src=images/puce.gif><a href="accueil.php?page=Morpheus">Morpheus</a><br/>
<img src=images/puce.gif><a href="accueil.php?page=Piolet">Piolet</a><br/>
<img src=images/puce.gif><a href="accueil.php?page=Projet_Neon">Projet Neon</a><br/>
<img src=images/puce.gif><a href="accueil.php?page=Shareaza">Shareaza</a><br/>
<img src=images/puce.gif><a href="accueil.php?page=TrustyFile">TrustyFile</a><br/>
<img src=images/puce.gif><a href="accueil.php?page=Warez">Warez</a><br/>
<img src=images/puce.gif><a href="accueil.php?page=WinMX">WinMX</a><br><br/>
</div>
<br/><br/>
<div class="Titre_Rubrique_gauche">
Extra
</div>
<div class="Rubrique_gauche">
<img src=images/puce.gif><a href="http://worldp2p.free.fr/forum/" target="_blank">Forum</a><br>
<img src=images/puce.gif><a href="accueil.php?page=Recrutement">Recrutement</a><br>
<img src=images/puce.gif><a href="accueil.php?page=Partenariat">Partenariat</a><br>
<img src=images/puce.gif><a href="accueil.php?page=Don">Faire un Don</a><br>
<img src=images/puce.gif><a href="accueil.php?page=utilitaires">Utilitaires</a><br>
<img src=images/puce.gif><a href="accueil.php?page=Loi">la loi et le P2P</a><br>
<img src=images/puce.gif><a href="accueil.php?page=Dico">Dico du P2P</a><br>
<br>

</div>
</tr>
</td>

</table>

Merci à tous !

PS : Oui j'avoue m'etre beaucoup inspiré du design du sdz et je m'en excuse, iln'y a rien d'original dans la copie mais après m'etre lancé dans un projet trop ambitieux j'ai buté et donc pour un design simple pratique et pas si mal j'ai déssidé pour l'instant de prendre exemple sur le SDZ.

montre le CSS

Je pense que tu as pas du etre asez strict car netscape a le meme probleme que firefox

Salut,
ta table fait 150 de large est tu sur que ton menu dans le css en fasse autant ?
de plus pourquoi utilisé une table alors que tu as utilisé un div ? (enlève la table, elle ne sert à rien , <div> fait déjà office de bloc.)

Voici le code CSS :



Et je vois pas ce que tu veux dire par, etre assez stricte ..... j'ai fais un test avec "deepnet explorer" et sa marche aussi très bien !!

Si vous voyez d'ou vien le problem .... je suis preneur !
Merci !

EDIT : je vien seulement de voir le post de Lhinks. Et donc j'ai mis le <table> car si non meme sous IE sa partait dans tous les sens !

dit moi juste pourquoi dans ton ta page html tu as Rubrique_Gauche et dans ton CSS .Rubrique

met le meme dans les deux ca devrait mieux marcher non?

Mince je me suis trompé de CSS

voici le bon :

Citation : Le bon css

#align_gauche
{
float:left;
}

.Titre_rubrique_gauche
{
padding: 10px;
width:150px;
height:47px;
background-image: url("images/titre.png");
text-align: center;
font-weight: bold;
float:left;
border: 2px dashed black;
}

.Rubrique_gauche
{
width:150px;
background-image: url("images/fond_colonne_gauche.jpg");
float:left;
border-bottom :2px dashed black;
border-left : 2px dashed black;
border-right : 2px dashed black;
}
a
{
background: auto;
color: blue;
text-decoration: none;
}

a:hover
{
text-decoration: underline;
}

Désolé.

Je crois que la faut tout reprendre car ton menu sera déjà mieux avec une liste (parce que les <br /> c'est un peu moche. Je vois ce que je peux faire et je te poste dès que tt est règlé.

Ok merci je vaios attendre ton code avec impatience !

Si j'ai bien compris tu dis qu'il serait mieux de faire des cellules différentes <tr> </tr> pour chaque lien au lieu de mettre un <br />. Je vois pas vraiment ce que sa modifierais ....

Non, je pense qu'il ne vaut mieux pas mettre de table, les balises div suffiront. Il ne sert à rien d'allourdir le code pour rien.
Pour les liens, il serait mieux de les mettre dans une liste ( <li></li> ).

J'ai essayé de mettre dans une liste mais sa décalé trop vers la droite meme en alignant le tout a gauche (du moin en essayant d'aligner le tout à gauche)

Je vais enlever le table pour voir mais je croi que sa part dans tout les sens meme sous IE. Et comme chez moi firefox ne marche pas et que à cette heure mes potes qui utilisent firefox sont couché je pourrais pas tester pour voir si sa s'affiche enfin corréctement

Non, t'inquiètes c'est bon j'ai réussi, encore quelques petites choses à vérifier et je te poste le tout.

Et bien Merci il reste plus que sa marche aussi sous IE.

Moi perso je vien de tester sans le <table> et sa part bien dans tout les sens !

Bon alors voilà les codes :




PS: J'ai tout mis dans un seul css, c'est plus clair je trouve.
PS2: si tu as des questions sur le code n'hésites pas.

Merci je vais tester sa tout de suite.
Après si sa marche je vais "analyser" le code pour voir si il y a des trucs que je comprend pas.

Merci.

ps : j'éspère que tu sera la pour répondre à mes éventuelle questions

bonjour,

ce n'est pas IE qui fait bien , une fois de plus, pas de doctype = rendu en mode quirk ...
Firefoxe et les autres vont appliquer le css comme convenu, tandis que IE va en ignorer une partie ou l'interpretater de façon differentes

par exemple:

width:150px + un padding:10px te donne une largeur de 170px , et IE te fera la même chose si tu donne un doctype a ta page.

Le doctype permet de definir la façon dont tu code (html 4.01 ou xhtml 1.0 par exemple )ta page et ça permet aussi de s'assurer d'une interpretation assez similaire d'un navigateurs a l'autre, sans doctype, l'interpretation des regles css et des affichage par defaut des "balies est aleatoires.
Le doctype n'est pas obligatoire, mais c'est tellement mieux de s'en servir, pour le codeur et le surfeur .

++

Bon Bon alors je vien de tester et sa marche impec.
Sauf que : (et oui sa pouvait pas etre parfait vous saviez pas exactement ce que je voulez)

Alors enfaite comme je me sert d'include j'avais fait expret de découper ma page php en plusieurs morceaux meme si c'est plus simple dans une seul page html grace au include sa m'épargne de changer mes 40 pages une à une si je dois changer un lien dans une des colonnes.

Et donc la il va falloir que je re divise le code .... mais c'est pas un problem. De plus comme c'est la "V2" de mon site je voulais créer un design extensible et mon "corps" est en "%".

Ma question principal est, si je devai repartir avec mon script en faite il faut juste que je remplace le <table> par un <div> car c'est le principal chanement que je vois .....

Oui remplace ton <table> par un div général qui englobe tout le menu.
Désolé, d'avoir changer ton code mais je ne m'y retrouvait plus ^^.
Bonne chance.

Tu inclus les menus ou la partie centrale ?

Bon j'ai remplacé le <table> par un <div> mais sa marche pas, sa part encore dans tout les sens !! (je parle de FF biensur parce que IE lui pas de pb!)

Et j'inclu tout, le corp et les menus.

Bon bien je vais regarder ça avec les 3 css.

3 css et 3 pages html différente !
ce que je comprend pas c'est pouruqoi lorsque toi tu met un "div" genral sa marche et chez moi non ??

Bon je n'ai pas mis les <li> par contre mais je pense pas que sa importe beaucoup si ?

En plus je vien de tester, sa marche avec quasiment tout les navigateur sauf FF et Netscape mais il faut dire aussi que netscape réagi comme FF donc c'est quasiment FF.

EDIT :

Voila le code actuelle :

Citation : colonne gauche code HTML

<div id="align_gauche">
<div class="Titre_Rubrique_gauche">
Les logiciels
</div>
<div class="Rubrique_gauche">
<img src=images/puce.gif><a href="accueil.php?page=Azureus">Azureus</a><br>
<img src=images/puce.gif><a href="accueil.php?page=Bit_Torrent">BitTorrent</a><br/>
<img src=images/puce.gif><a href="accueil.php?page=DC_plus_plus">DC++</a><br/>
<img src=images/puce.gif><a href="accueil.php?page=eChamblard">eChamblard</a><br/>
<img src=images/puce.gif><a href="accueil.php?page=eDonkey2000">eDonkey2000</a><br/>
<img src=images/puce.gif><a href="accueil.php?page=emule">Emule</a><br/>
<img src=images/puce.gif><a href="accueil.php?page=Emule_plus">Emule +</a><br/>
<img src=images/puce.gif><a href="accueil.php?page=Frost_Wire">Frost Wire</a><br/>
<img src=images/puce.gif><a href="accueil.php?page=Kazaa">Kazaa</a><br/>
<img src=images/puce.gif><a href="accueil.php?page=Limewire">Limewire</a><br/>
<img src=images/puce.gif><a href="accueil.php?page=Morpheus">Morpheus</a><br/>
<img src=images/puce.gif><a href="accueil.php?page=Piolet">Piolet</a><br/>
<img src=images/puce.gif><a href="accueil.php?page=Projet_Neon">Projet Neon</a><br/>
<img src=images/puce.gif><a href="accueil.php?page=Shareaza">Shareaza</a><br/>
<img src=images/puce.gif><a href="accueil.php?page=TrustyFile">TrustyFile</a><br/>
<img src=images/puce.gif><a href="accueil.php?page=Warez">Warez</a><br/>
<img src=images/puce.gif><a href="accueil.php?page=WinMX">WinMX</a><br><br/>
</div>
<br/><br/>
<div class="Titre_Rubrique_gauche">
Extra
</div>
<div class="Rubrique_gauche">
<img src=images/puce.gif><a href="http://worldp2p.free.fr/forum/" target="_blank">Forum</a><br>
<img src=images/puce.gif><a href="accueil.php?page=Recrutement">Recrutement</a><br>
<img src=images/puce.gif><a href="accueil.php?page=Partenariat">Partenariat</a><br>
<img src=images/puce.gif><a href="accueil.php?page=Don">Faire un Don</a><br>
<img src=images/puce.gif><a href="accueil.php?page=utilitaires">Utilitaires</a><br>
<img src=images/puce.gif><a href="accueil.php?page=Loi">la loi et le P2P</a><br>
<img src=images/puce.gif><a href="accueil.php?page=Dico">Dico du P2P</a><br>
<br>
</div>
</div>

Citation : colonne gauche code CSS

#align_gauche
{
float:left;
width:150px;
}

.Titre_rubrique_gauche
{
padding: 10px;
width:150px;
height:47px;
background-image: url("images/titre.png");
text-align: center;
font-weight: bold;
float:left;
border: 2px dashed black;
}

.Rubrique_gauche
{
width:150px;
background-image: url("images/fond_colonne_gauche.jpg");
float:left;
border-bottom :2px dashed black;
border-left : 2px dashed black;
border-right : 2px dashed black;
}
a
{
background: auto;
color: blue;
text-decoration: none;
}

a:hover
{
text-decoration: underline;
}

Y a t il une erreur ?

3 pages html ? tu veux dire que tu as une page pour menu_gauche, une page pour menu_droite et une autre pour le corps ?

Non, je ne pense pas que ça vienne des <li>

Par contre un truc est super important avec le css, c'est que si tu as un bloc flottant à gauche , una utre flottant à droite et le corps entre les 2, le blocs doivent être défini dans cet ordre précis dans le fichier html : - bloc flottant gauche
- bloc flottant droit
- corps (pas flottant lui)

Oui une page menu_gauche - une page muenu_droit et une autre pour le corp c'est exact !

Enfin pour l'instant je me limite à sa si non il y aura bien sur le header mais bon pour sa pas de problem !

PS : regarde je vien de te poster le code actuelle avec le "div" à la place des "table" pour que tu vois peut etre une erreur que j'arrive pas a repérer ...


Merci

Je ne vois rien de particulier, tout s'affiche bien chez moi (sous IE et sous FF), peut-être que ça vient des autres pages.

EDIT :en fait non, j'ai pas le même css.

Ok,en fait il faut que tu enlèves float:left; et width:150px; à .titre_rubrique_gauche et à .rubrique_gauche.

Wahooooo sa marche !! Enfin presque .... pourquoi mon cadre il est plus grand enfin je veu dire regarde par rapport à IE le cadre du titre est plus grand alors que j'ai bien 47px ... FF compte différement le nombre de pixel ou quoi ?

Non enfaite c'est bon en enlevant le height sa marche impec !!
Merci beaucoup !!

Je te le revaudrais un jour (si je peux par un quelconque moyen) Merci !

Hum ... as tu toujours height:47px; dans le css ?

si oui enlève cette ligne.

Oui c'est bon c'est ce que je vien de découvrir par moi meme en enlevant le height sa marche !!

Merci !

Quand j'entends ou plutôt que je lis des mecs qui disent "firefox c dla merde, Ie c dla bomb", je me dis qu'il n'ont encore rien compris à l'HTML/CSS .

Oui enfaite non le problem n'ai pas si RESOLU que sa :s .

je vien d'effectuer les meme manip pour la colonne de droite mais la elle veut pas ce ranger comme il faut :s

Dailleur pas du tout. (toujours sous FF XD)

Citation : colonne droite HTML

<div id="align">
<div class="Titre_rubrique">
Astuces-Boost
</div>
<div class="Rubrique">
<a href="accueil.php?page=Astuces_DC_plus_plus">DC++</a><img src=images/puce.gif><br>
<a href="accueil.php?page=Astuces_eDonkey2000">eDonkey2000</a><img src=images/puce.gif><br>
<a href="accueil.php?page=Astuces_Emule">Emule</a><img src=images/puce.gif><br>
<a href="accueil.php?page=Astuces_Piolet">Piolet</a><img src=images/puce.gif><br>
<a href="accueil.php?page=Astuces_Shareaza">Shareaza</a><img src=images/puce.gif><br><br>
</div>
</tr>
</td>

<br><br>
<div class="Titre_rubrique">
Débutant
</div>
<div class="Rubrique">
<a href="accueil.php?page=Bien_télécharger">Bien télécharger</a><img src=images/puce.gif><br>
<a href="accueil.php?page=dl_jeu">Télécharger un jeu</a><img src=images/puce.gif><br>
<a href="accueil.php?page=DVD_en_DivX">DVD en DivX</a><img src=images/puce.gif><br>
<a href="accueil.php?page=ISO-BIN">Fichiers ISO-BIN</a><img src=images/puce.gif><br>
<a href="accueil.php?page=Emuler_une_image">Emuler une image</a><img src=images/puce.gif><br>
<a href="accueil.php?page=Tuto_Emule">Emule de A à Z</a><img src=images/puce.gif><br>
<a href="accueil.php?page=Tuto_Azureus">Azureus de A à Z</a><img src=images/puce.gif><br>
<a href="accueil.php?page=Tuto_Shareaza">Shareaza de A à Z</a><img src=images/puce.gif><br>
<a href="accueil.php?page=Securite_Anonymat">Sécurité Anonymat</a><img src=images/puce.gif><br>
<a href="accueil.php?page=FTP">FTP</a><img src=images/puce.gif><br><br>
</div>
</div>

Citation : colonne droite CSS

#align
{
float:right;
width:150px;
}

.Titre_rubrique
{
padding: 10px;
background-image: url("images/titre.png");
text-align: center;
font-weight: bold;
border: 2px dashed black;
}

.Rubrique
{
font-weight:normal;
background-image: url("images/fond_colonne_droite.jpg");
border-bottom :2px dashed black;
border-left : 2px dashed black;
border-right : 2px dashed black;
text-align: right;
}

a
{
background: auto;
color : blue;
text-decoration: none;
}

a:hover
{
text-decoration: underline;
}

Okens désolé mais bon j'était bien énervé lorsque j'ai posté ce sujet car alors que tout le monde dit que IE a des problem avec les CSS etc ... bien je trouve qu'on devrait plustot dire sa pour Firefox ou c'est plustot que IE est plus indulgent .... mais sur un point tu a raiuson, j'ai un peu du mal avec les CSS :s

Citation : Dark Silver

j'ai posté ce sujet car alors que tout le monde dit que IE a des problem avec les CSS etc ... bien je trouve qu'on devrait plustot dire sa pour Firefox ou c'est plustot que IE est plus indulgent ....

Hum... Sans rentrer dans le débat, faut savoir qu'IE n'est plus à jour depuis longtemps donc c'est normal qu'il ne gère pas le CSS aussi bien que Firefox car c'est bien IE qui est le problème. Si cela ne s'affiche pas correctement sur Firefox c'est que le problème vient du codage, tout simplement. Heureusement une nouvelle version est prévue pour bientôt donc ce problème devrait être normalement résolu.

Sinon pour ton code, pense peut-être à rajouter la balise <ul></ul> ou <ol></ol> et mettre tes balises <li></li> à l'intérieur.

Voilà.