Problème entre différents navigateur

Passion1970 · Problème entre différents navigateur

Bonsoir,
je travaille sur une nouvelle mise en page de mon site.

Je travaille avec IE7, FF 3.0.5 et Safari.

Je rencontre plusieurs problèmes.
Le premier qui est liée au 3 navigateur et que je n'arrive pas en partie à aligner des div horizatelement.

Le second problème que je rencontre est le rendu.
En effet, sous IE 7 et Safari j'ai le rendu que je souhaite mais sous FF c'est la cata.

Code:

/* Menu de navigation */
#navigation {
    float: left;
    width: 310px;
    background: white;
}
#navigation ul {
    margin: 0;
    padding: 20px 10px 20px 10px;
    list-style: none;
}

/* Contenu principal */
#principal {
    margin-left: 320px;
    margin-right: 300px;
    padding: 10px 10px;
}
#principal > :first-child {
    margin-top: 10px;
}
#principal p, #principal li {
    line-height: 1.5;
}

/* Contenu secondaire */
#secondaire {
    float: right;
    width: 300px;
    padding: 12px 20px;
    background: yellow;
}

Merci de votre aide.

Mister $$$ · 02-10-2009 20:43:53

mic54800 · Re Problème entre différents navigateur

Bonsoir passion 1970 !

Essayes voir ceci :

Code:

/* Menu de navigation */
#navigation {
    float: left;
    width: 310px;
    background: white;
}
#navigation ul {
    margin: 0;
    padding: 20px 10px 20px 10px;
    list-style: none;
}

/* Contenu principal */
#principal {
    float:left;
    width:300px;
    padding: 10px;
    margin:0 0 0 10px;
}
#principal > :first-child {
    margin-top: 10px;
}
#principal p, #principal li {
    line-height: 1.5;
}

/* Contenu secondaire */
#secondaire {
    width: 300px;
    padding: 12px 20px;
    margin:0 0 0 660px;
    background: yellow;
}

Par contre, l'inconvéniant dans ce code est que tu ne peux pas avoir une taille variable au contenu principal de ta page.
Pour en disposer, je crains que tu dois utiliser des tableaux (Beurk) ou alors développer une syntaxe HTML + CSS bien plus complète avec bien plus de <div> ..

EDIT :

Essayes tout de même de placer ton bloc "secondaire" entre le bloc "navigation" et le bloc "principal" (au milieu quoi ..)

Passion1970 · Re Problème entre différents navigateur

Alors attend je te mets tous le code CSS et ensuite la page

Code:

/* Général */
body {
    color: #F0E39E;
    background: #a91a16;
}


/* Conteneur central */
#centre {
    background: url(img/11-colgauche.png) repeat-y left top;
}
#centre-bis {
    background: url(img/11-coldroite.png) repeat-y right top;
}

/* Navigation */
#navigation {
    /*background: #000099;*/
}

/* Contenu principal */
#principal {
    color: #181A12;
    /*background: #fff;*/
}
#principal a {
    color: #332510;
}
#principal a:hover, #principal a:focus {
    color: #6E5122;
}
#principal strong {
    color: #181A12;
}

/* Contenu secondaire */
#secondaire {
    background: #001b3d;
}



/* --- POSITIONNEMENT --- */

/* Page */
body {
    padding: 20px 5px;
}
#global {
    width: 90%;
    max-width: 90em;
    min-width: 850px;
    margin-left: auto;
    margin-right: auto;
}

/* En-tête */
#entete {
    padding: 20px 0;
    background:black;
}
#entete h1 {
    margin: 0;
}
#entete h1 img {
    float: left;
    margin: 7px 20px 10px 0;
}
#entete .sous-titre {
    margin: 4px 0 15px 0;
}
#sondage
{
position: relative;
float:right;
}
/* Bloc central */
#centre-bis {
    width: 100%;
    overflow: hidden;
}

/* Menu de navigation */
#navigation {
    float: left;
    width: 310px;
    background: white;
}
#navigation ul {
    margin: 0;
    padding: 20px 10px 20px 10px;
    list-style: none;
}

/* Contenu principal */
#principal {
    margin-left: 320px;
    margin-right: 300px;
    padding: 10px 10px;
}
#principal > :first-child {
    margin-top: 10px;
}
#principal p, #principal li {
    line-height: 1.5;
}

/* Contenu secondaire */
#secondaire {
    float: right;
    width: 300px;
    padding: 12px 20px;
    background: yellow;
}

/* Pied de page */
#pied {
    margin: 0;
    padding: 15px 260px 10px 200px;
    font-size: .85em;
}

/* Mention de copyright */
#copyright {
    margin: 8px 0 0 0;
    font-size: 1em;
    text-align: left;
}
#prochainmatch
{
display: inline;
/*top:0px;*/
position:relative;
/*left:420px;*/
height:215px;
width: 285px;
/*border:2px solid red;*/
/*background: url("../images/prochainmatch.JPG") no-repeat;*/
}

#Avant-matchProchain{
position: relative;
left:0px;
width: 140px;
height:20px;
text-align:center; 
color:#ffffff; 
padding-top:5px;
float:left;
/*border:1px solid blue;
font-size:0.8em;
*/}
#imgAvant-matchProchain
{
background: url('http://www.passion1970.fr/Projeum/images/site/AvantMatch_rect_rouge.png') no-repeat;
height:20px;
}
#imgAvant-matchProchain:hover
{
background: url('http://www.passion1970.fr/Projeum/images/images/site/AvantMatch_rect_bleu.png') no-repeat; 
height:20px;
}
#StatistiquesProchain{
position: relative;
width: 140px;
height:20px;
display: inline;
text-align:center; 
color:#ffffff; 
/*border:1px solid blue; 
font-size:0.8em;*/
padding-top:5px;
float:right;
}
#imgStatistiquesProchain
{
background: url('http://www.passion1970.fr/Projeum/images/site/Stats_rouge.png') no-repeat;
height:20px;
}
#imgStatistiquesProchain:hover
{
background: url('http://www.passion1970.fr/Projeum/images/site/Stats_bleu.png') no-repeat; 
height:20px;
}
#InterProchain{
position: relative;
left:0px;
width: 140px;
padding-top:5px;
height:20px;
display: inline;
text-align:center; 
color:#ffffff; 
float: left;
/*border:1px solid blue; 
background:red; 
font-size:0.8em; */
}
#imgInterProchain
{
background: url('http://www.passion1970.fr/Projeum/images/site/Inter_rouge.png') no-repeat;
height:20px;
}
#imgInterProchain:hover
{
background: url('http://www.passion1970.fr/Projeum/images/site/Inter_bleu.png') no-repeat; 
height:20px;
}
#LiveProchain{
position: relative;
float:right;
width: 140px;
height:20px;
display: inline;
text-align:center; 
color:#ffffff; 
/*border:1px solid blue; 
background:red; 
font-size:0.8em*/
padding-top:5px;
}
#imgLiveProchain
{
background: url('http://www.passion1970.fr/Projeum/images/site/Live_rouge.png') no-repeat;
height:20px;
}
#imgLiveProchain:hover
{
background: url('http://www.passion1970.fr/Projeum/images/site/Live_bleu.png') no-repeat; 
height:20px;
}


#derniermatch
{
position:relative;
height:215px;
width: 285px;
display:inline;
}
#ApresMatch{
position: relative;
left:0px;
width: 140px;
height:20px;
text-align:center; 
color:#ffffff; 
padding-top:5px;
float:left;
}
#imgApresMatch
{
background: url('http://www.passion1970.fr/Projeum/images/site/AvantMatch_rect_rouge.png') no-repeat;
height:20px;
}
#imgApresMatch:hover
{
background: url('http://www.passion1970.fr/Projeum/images/images/site/AvantMatch_rect_bleu.png') no-repeat; 
height:20px;
}
#InterDernier{
position: relative;
width: 140px;
height:20px;
display: inline;
text-align:center; 
color:#ffffff; 
/*border:1px solid blue; 
font-size:0.8em;*/
padding-top:5px;
float:left;
}
#ReacDernier{
position: relative;
width: 140px;
height:20px;
display: inline;
text-align:center; 
color:#ffffff; 
/*border:1px solid blue; 
font-size:0.8em;*/
padding-top:5px;
float:right;
}
#imgReacProchain
{
background: url(http://www.passion1970.fr/Projeum/images/site/Reac_rouge.png) no-repeat;
height:20px;
}
#imgReacProchain:hover
{
background: url(http://www.passion1970.fr/Projeum/images/site/Reac_bleu.png) no-repeat; 
height:20px;
}
#VideoDernier{
position: relative;
width: 140px;
height:20px;
display: inline;
text-align:center; 
color:#ffffff; 
/*border:1px solid blue; 
font-size:0.8em;*/
padding-top:5px;
float:right;
}
#imgVideoProchain
{
background:url(http://www.passion1970.fr/Projeum/images/site/VideosM_rouge.png) no-repeat;
height:20px;
}
#imgVideoProchain:hover
{
background:url(http://www.passion1970.fr/Projeum/images/site/VideosM_bleu.png) no-repeat; 
height:20px;
}

#express
{
margin-top:10px;
background: #FFF url(http://www.passion1970.fr/Projeum/images/site/box_Express.png) no-repeat;
position:relavite;
width:285px;
height:180px;
}
#directforum
{
position:relative;
width:0%;
width:285px;
height:287px;
background: #FFF url(http://www.passion1970.fr/Projeum/images/forum.png) no-repeat;
}
#directforumtxt{
margin-top:20px;
text-align:left;
margin-bottom:5px;
margin-left:5px;
}
#directforumtxt a{
text-align: justify;
text-decoration: none;
color: #000099;
font-size: 0.6em;
}

et ma page

Code:

<body>
<div id="global">
    <div id="entete">
        <img src="images/banniere.png"/>
        <div id="sondage">
                            
        </div>
    </div>
    <div id="centre">
        <div id="centre-bis">
            <div id="navigation">
                <p><? include('Accueil/filinfo.php')?></p>
                <div id="directforum">
                    <div id="directforumtxt">
                    
                </div>
            </div>    
                <p><? include('Accueil/partenaire.php')?></p>
            </div>
            <div id="secondaire">
                <div id="prochainmatch">
                    <span class="match">Prochain match du PSG :</span><br />
                    <img src="http://www.Passion1970.fr/images/prochain_match/PSGvsLyon.gif" />
                    <div id="Avant-matchProchain"><a href=#><div id="imgAvant-matchProchain">&nbsp;</div></a></div>
                    <div id="StatistiquesProchain"><a href=#><div id="imgStatistiquesProchain">&nbsp;</div></a></div>
                    <div id="InterProchain"><a href=#><div id="imgInterProchain">&nbsp;</a></div></div>
                    <div id="LiveProchain"><a href=#><div id="imgLiveProchain">&nbsp;</div></a></div>
                    
                </div>
                <br />
                <div id="derniermatch">
                    <span class="match">Dernier match joué :</span><br />
                    <img src="http://www.Passion1970.fr/images/prochain_match/MonacovsPSG.gif" />
                    <div id="ApresDernier"><a href=#><div id="imgApresMatch">&nbsp;</div></a></div>
                    <div id="InterDernier"><a href=#><div id="imgInterProchain">&nbsp;</div></a></div>
                    <div id="ReacDernier"><a href=#><div id="imgReacProchain">&nbsp;</div></a></div>
                    <div id="VideoDernier"><a href=#><div id="imgVideoProchain">&nbsp;</div></a></div>
                </div>
                <div id="classement">
                    <div id="classementtxt">
                        <br />
                        <?include("actu/mini.php");?>
                    </div>
                </div>
                <div id="express">
                    &nbsp;
                </div>
            </div>
          <div id="principal"><? include('include/home.php') ?></div>
        </div>
    </div>
    <div id="pied">Copyrigh@Passion1970.fr 2007-2010</div>
</div>

</body>

mic54800 · Re Problème entre différents navigateur

N'aurais tu pas plutôt un lien pour que je vois ce que ça donne en réel parce qu'avec tes include, je ne pourrais pas simuler toute ta page !

c00lman · Re Problème entre différents navigateur

Tu as l'url dans son css -http://www.passion1970.fr/Projeum/home.php?include=accueil icon_mrgreen

Passion1970 · Re Problème entre différents navigateur

c'est pas la bonne page.
La bonne c'est http://www.passion1970.fr/Projeum/home_ … de=accueil

c00lman · Re Problème entre différents navigateur

Le soucis avec le code css des autres, c'est que c'est chiant à résoudre ^^ surtout quand c'est long content (130) .

Voici un exemple d'alignement 3 box à adapter à ton cas:

Code:

  <style type="text/css">
div#englobe {
width: 900px;
margin : auto;
border:1px solid #000;
padding:5px;
overflow: hidden;
}
div#colonnegauche {
float: left;
width: 300px;
border:1px solid #000;
}
div#colonnedroite {
float: right;
width: 300px;
border:1px solid #000;
}
div#centre {
margin-left: 310px;
margin-right: 310px;
border:1px solid #000;
}
  </style>
</head>
<body>
<div id="englobe">
<div id="colonnegauche">***</div>
<div id="colonnedroite">***</div>
<div id="centre">***</div>
</div>

Rorschach · Re Problème entre différents navigateur

je ne sais pas exactement à quoi tu veux que ça ressemble mais je pense que tu peux faire ainsi :

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Passion 1970</title>
    <link rel="stylesheet" type="text/css" href="styles.css" media="screen" title="Normal" />
</head>
<body>
    <div id="global">

        <div id="header">
            <h1>Titre</h1>
        </div>

        <div id="navigation">
            <h2>menu</h2>
            <ul>
                <li><a href="#">lien</a></li>
                <li><a href="#">lien</a></li>
                <li><a href="#">lien</a></li>
                <li><a href="#">lien</a></li>
                <li><a href="#">lien</a></li>
            </ul>
            <h2>menu</h2>
            <ul>
                <li><a href="#">lien</a></li>
                <li><a href="#">lien</a></li>
                <li><a href="#">lien</a></li>
                <li><a href="#">lien</a></li>
                <li><a href="#">lien</a></li>
            </ul>
            <h2>menu</h2>
            <ul>
                <li><a href="#">lien</a></li>
                <li><a href="#">lien</a></li>
                <li><a href="#">lien</a></li>
                <li><a href="#">lien</a></li>
                <li><a href="#">lien</a></li>
            </ul>
        </div>

        <div id="info">
            <h2>Zone info</h2>
            <p>Duis blandit quam eget leo ultricies elementum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque id risus et quam vulputate posuere a ut tellus. Sed ac velit vitae erat auctor tristique. Cras id dapibus diam. Nulla vel massa vel purus porta vehicula ut eget magna. Quisque massa dui, rutrum a ultricies commodo, rhoncus imperdiet augue. Nulla vel mauris arcu. Etiam porttitor nisl in lacus commodo eu fermentum nunc imperdiet. Morbi aliquam, velit ac tempus consectetur, metus ipsum semper purus, vel laoreet orci velit et nisi. Nam velit arcu, semper et cursus at, pharetra et lectus.</p>
        </div>

        <div id="content">
            <h1>titre</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mi lacus, varius vel cursus quis, hendrerit et nunc. Nulla ultricies nulla eget diam consectetur pharetra. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean vitae nibh sapien, et laoreet orci. Pellentesque porta accumsan libero, vitae sollicitudin erat commodo ut. Mauris quis leo et augue tincidunt malesuada ac auctor augue. Etiam suscipit, elit vitae mattis feugiat, enim diam mattis leo, sit amet tincidunt nisl dolor viverra felis. In sit amet augue ac lorem sagittis tempor id ac massa. Donec sodales pretium interdum. Sed id purus pharetra magna placerat venenatis. Aliquam erat volutpat. Vivamus eleifend hendrerit orci quis elementum. Pellentesque nec turpis sed purus gravida dapibus eu iaculis dolor. Mauris sit amet pellentesque risus. Morbi eget felis neque. Proin quis sapien eu velit egestas aliquam quis et sem.</p>
            <h2>sous titre</h2>        
            <p>Vivamus magna orci, aliquet at faucibus tempus, eleifend at mi. Quisque vitae tortor elit. Maecenas sit amet ligula in massa vehicula scelerisque ac eget velit. Nulla ac porta dolor. Nulla facilisi. Mauris pulvinar, felis et accumsan mattis, velit est luctus ipsum, pharetra auctor libero nisl vel magna. Aliquam placerat molestie tristique. Ut a lorem diam. Praesent tincidunt porttitor eros, nec scelerisque nulla pretium pulvinar. Morbi odio ipsum, laoreet tincidunt dictum vitae, faucibus quis dolor. Maecenas mauris orci, elementum eu consectetur non, ultrices sed nunc. Cras dolor sem, convallis ac laoreet vestibulum, tempor in lorem. Cras at tincidunt felis. Morbi adipiscing, eros vitae ornare hendrerit, neque erat feugiat metus, sed scelerisque libero metus at eros. Phasellus cursus facilisis ante a tincidunt. Nulla condimentum, sapien vitae scelerisque eleifend, quam erat imperdiet nibh, vel condimentum dui ipsum eget elit. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras arcu magna, faucibus eu venenatis non, vulputate sit amet elit.</p>
            <h2>sous titre</h2>        
            <p>Praesent bibendum consectetur ligula, feugiat tempus metus dapibus nec. Curabitur nec nulla nulla, ut elementum nunc. Proin mi arcu, vulputate et tempor et, rutrum vitae lectus. Curabitur ac ligula sed urna sagittis hendrerit. Aliquam facilisis tempus egestas. Nulla malesuada odio in orci hendrerit ut aliquam dui porta. Etiam lectus nisl, placerat ac rhoncus id, accumsan non nibh. Duis elit lectus, lacinia sed suscipit vitae, tincidunt eget nunc. Donec ante lorem, adipiscing eget condimentum venenatis, semper vitae lectus. Nunc nec arcu metus, mollis accumsan tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum mattis nisi. Aliquam commodo elit nibh, in vestibulum lacus. Maecenas malesuada odio libero, nec dictum neque. Duis tincidunt ornare odio, non feugiat orci feugiat et.</p>
        </div>
        
        <div id="footer">
            <p>pied de page</p>
        </div>       

    </div>
</body>
</html>

et la css :

Code:

* {
    /* un reset css plus évoluer doit être utilisé*/
    padding:0;
    margin:0;
    list-style-type:none;
}
html {
    background-color:#369;
    padding:10px;
}
#global {
    margin: 0 50px;;
    background-color:#fff;
}

/* ------------------------------------------
                 L'en-tête
   ------------------------------------------*/
#header {
    height:150px;
    background-color:#aaa;
}
#header h1 {
    margin:0;
    padding: 0;
    text-indent:-5000px; /* on décale le texte du titre pour qu'il ne soit pas par dessus l'image du header */
    background-image:utl(images/header:png);
}

/* ------------------------------------------
                La navigation
   ------------------------------------------*/
#navigation {
    width:200px;
    background-color:#ccc;
    float:left;
    padding:5px;
}
#navigation h2 {
    margin-bottom:5px;
    padding-left:5px;
    background-color:orange;
    text-transform:capitalize;
}
#navigation ul {
    margin-bottom:5px;
}
#navigation li {}
#navigation a {
    display:block;
    padding-left:10px;
    color:#000;
    text-decoration:none;
}
#navigation a:hover {
    color:#fff;
    background-color:#000;
}

/* ------------------------------------------
             Les infos à droite
   ------------------------------------------*/
#info {
    width:200px;
    background-color:#bbb;
    float:right;
    padding:5px;
}
#info h2 {
    border-bottom:1px #000 solid;
    margin-bottom:10px;
}
#info p {
    margin-bottom:10px;
}

/* ------------------------------------------
                Le contenu
   ------------------------------------------*/
#content {
    padding: 0 5px;
    background-color:#eee;
    margin-left:210px;
    margin-right:210px;
}
#content h1 {
    padding-bottom: 5px;
}
#content h2 {
    padding-bottom:5px;
}
#content h3 {}
#content h4 {}
#content p {
    padding-bottom:10px;
}
#content a {}
#content a:hover {}

/* ------------------------------------------
               Le pied de page
   ------------------------------------------*/
#footer {
    height:30px;
    clear:both;
    background-color:#ddd;
}
#footer p {
    line-height:30px;
    text-align:center;
}

c00lman · Re Problème entre différents navigateur

Jolie applause .
Voila un bon gabarit de départ pour commencer un site.

Passion1970 · Re Problème entre différents navigateur

Ce que je veux faire :
C'est un header avec bannière sur la gauche et sur droite la partie sondage.
Un menu avec des rollovers et des sous menus qui s'affiche lorsque l'on passe dessus.

ensuite le corps du site qui je souhaite le faire sur 3 colonnes dont deux qui ne doivent faire qu'une seule lorsque l'on navigue sur les différentes pages.

La colonne de gauche doit contenir:
le fil d'info
le flux rss du forum
nos partenaires.
la boutique.
La double colonne centrale doit contenir:
les articles entre 5 et 6
les infos sur le prochain match,
les infos sur le dernier match,
la box classement,
une box PSG express.

c00lman · Re Problème entre différents navigateur

C'est un header avec bannière sur la gauche et sur droite la partie sondage.

Dans le code de Rorschach, je pense qu'avec un float left et float right dans le header, ça le ferait!

Un menu avec des rollovers et des sous menus qui s'affiche lorsque l'on passe dessus.

Voir http://www.cssplay.co.uk/menus/flyoutt.html

ensuite le corps du site qui je souhaite le faire sur 3 colonnes dont deux qui ne doivent faire qu'une seule lorsque l'on navigue sur les différentes pages.

Toujours par rapport au code de Rorschach, ça mise en page est sur 3 colonnes, pour passer à 2-> supprimer la partie -><div id="info"></div> ->passer le margin-right à 0px du style #content

Pour le reste,c'est de l'adaptation.

Passion1970 · Re Problème entre différents navigateur

Effectivement le gabarit est nickel.

Maintenant la question que je me pose est ce que je dois faire des include ou appeler directement le contenu de mes pages ?

Rorschach · Re Problème entre différents navigateur

C'est un header avec bannière sur la gauche et sur droite la partie sondage.
Un menu avec des rollovers et des sous menus qui s'affiche lorsque l'on passe dessus.

ensuite le corps du site qui je souhaite le faire sur 3 colonnes dont deux qui ne doivent faire qu'une seule lorsque l'on navigue sur les différentes pages.

La colonne de gauche doit contenir:
le fil d'info
le flux rss du forum
nos partenaires.
la boutique.
La double colonne centrale doit contenir:
les articles entre 5 et 6
les infos sur le prochain match,
les infos sur le dernier match,
la box classement,
une box PSG express.

Alors attention au vocabulaire pour bien se comprendre il faudrait plutôt utiliser le même, par bannière tu entend "bannière de publicité" (type 468x60) ou bannière d'en-tête (c'est à dire image du titre du site) ?
dans le header à mon avis place l'image du titre du site (en background-image dans le h1) puis si tu souhaite y ajouter un sondage tout dépend du type de sondage que tu as prévu (un script fait maison, un widget, un service de l'hébergeur, etc)suivant le code que tu devra utiliser place le dans des balise <div id="sondage"></div> placé dans le header juste sous le h1, et avec les css tu positionne #sondage {} et #header h1 {} soit cote à cote soit en position absolu, enfin en background-image du #header place un fond qui fasse le raccord (et qui puisse se répéter) avec ton image mise en h1.

pour le corps du site, si tu veux fusionner les deux colonnes d'un même coté je te conseil de placer les deux colonne plutôt à droite c'est à dire change le float:left; de #navigation en float:right; et dans #content utiliser plutôt margin-left:0px; et margin-right:440px; de cette façon tu aura dans ta page à gauche la zone de texte avec tes articles, image, et autre, puis à droite deux colonnes cote à cote d'abord #info puis #navigation, cela permet au visiteur qui lise de gauche à droite d'avoir en premier le contenu du site, puis le fil d'info, rss, boutique et enfin la partie navigation à droite comme la souris chez la plupart de gens, de cette façon tu optimise la lecture de ton site

si tu souhaite ajouter de la publicité je te conseil de la mettre plutôt entre les article ou à droite dans la zone info ou menu

pour les infos sur le prochain match, les infos sur le dernier match, la box classement, une box PSG express, il faudrait savoir à quoi cela ressemble, mais je pense que cela ira plutôt dans la zone info.

tu souhaite ensuite "un menu avec des rollovers et des sous menus qui s'affiche lorsque l'on passe dessus", attention ce n'est pas forcement une bonne idée, tout dépend du nombre de menu que tu compte mettre sur tes page, il faut savoir que ce genre de menu passe pas toujours bien sur tout les navigateur, et que si tu utilise des éléments flash dans ta page, tes menu déroulant passeront dessous donc si tu utilise par exemple des widget oubli les menu à la windows ou mac, si tu veux absolument des menu déroulant regarde plutôt du coté des menu en accordéon genre : http://www.dezinerfolio.com/2007/07/19/ … accordions qui est facile à mettre en place, léger et vraiment bien foutu :p

ce que je te conseil également c'est d'utiliser le pied de page comme d'une zone de navigation supplémentaire, c'est utile et plutôt simple à faire il suffit de faire un pied de page plus grand et d'y ajouter des liens genre sitemap en plus des informations légales.

Une chose importante si tu ne veux pas te casser la tête est de commencer la mise en page de ton site non pas sur pc mais d'abord sur une feuille de papier, et noter tout ce que tu va mettre dans chaques zone, cela va te permettre :
1 - d'équilibrer les pages
2 - de répertorier tout les styles css dont tu va avoir besoin
3 - de mieux visualiser à quoi doit ressembler le site au final parce que une liste qui énumère ton contenu ce n'est pas très parlant

quand tu sera au css pense "orienté objet", c'est à dire donne des id="" et/ou class="" à tes éléments particulier (édito, galerie, etc) et assure toi de pouvoir utiliser les sélecteurs css pour cibler chaque éléments à styler, teste tes page sous firefox, opera, google chrome, safari puis IE, il est plus facile de faire une page qui passe partout et corriger pour IE que de faire une page qui passe sous IE et corriger pour tout le reste après (petit plus idéaliste, boycott IE6 et indique le mais bon ce n'est pas une obligation)

quand ta page est bien formée, c'est à dire avec un html ou xhtml correct et propre, facile à lire, facile à modifier sans élément en trop, quand ta css est fini, propre, documenté, indenté, sans propriété en trop, tu peux commencer alors le php, repère les éléments qui seront sur toute les pages (pied de page, menu, zone info, header, etc) et place les dans des fichiers à part que tu ajoute à tes page avec des include php, attention dans les fichier à inclure ne rajoute pas de balise en trop, juste le code à inclure et rien d'autre pas de doctype, html, body, head sinon c'est MAL

créé un fichier fonction.inc.php dans lequel tu place tes fonctions php à utiliser dans tes pages c'est important cela permet de ne pas avoir des pages lourde pleine de php, créé un fichier param.inc.php par exemple avec dedans les variables de connection à ta bdd, pense à jouter les session à tes pages si tu en à besoin, et plus tu simplifie ton code mieux c'est :)

tout cela prend du temps mais il faut mieux prendre son temps et bien faire que faire vite et devoir recommencer (rien ne sert de courir il faut partir à point)

Rorschach · Re Problème entre différents navigateur

voilà le code utilisable en fonction de mon post précédent et de ce que j'ai compris que tu voulais faire sur ton site, à noter que c'est aussi utilisable pour d'autre site n'hésitez pas à prendre le code :)

donc le html :

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Maquette modele</title>
    <link rel="stylesheet" type="text/css" href="styles.css" media="screen" title="Normal" />
</head>
<body>
    <div id="global">

        <div id="header">
            <h1>Titre</h1>
            <div id="sondage">sondage</div>
        </div>

        <div id="navigation">
            <h2>menu</h2>
            <ul>
                <li><a href="#">lien</a></li>
                <li><a href="#">lien</a></li>
                <li><a href="#">lien</a></li>
                <li><a href="#">lien</a></li>
                <li><a href="#">lien</a></li>
            </ul>
            <h2>menu</h2>
            <ul>
                <li><a href="#">lien</a></li>
                <li><a href="#">lien</a></li>
                <li><a href="#">lien</a></li>
                <li><a href="#">lien</a></li>
                <li><a href="#">lien</a></li>
            </ul>
            <h2>menu</h2>
            <ul>
                <li><a href="#">lien</a></li>
                <li><a href="#">lien</a></li>
                <li><a href="#">lien</a></li>
                <li><a href="#">lien</a></li>
                <li><a href="#">lien</a></li>
            </ul>
        </div>

        <div id="info">
            <h2>Zone info</h2>
            <p>Duis blandit quam eget leo ultricies elementum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque id risus et quam vulputate posuere a ut tellus. Sed ac velit vitae erat auctor tristique. Cras id dapibus diam. Nulla vel massa vel purus porta vehicula ut eget magna. Quisque massa dui, rutrum a ultricies commodo, rhoncus imperdiet augue. Nulla vel mauris arcu. Etiam porttitor nisl in lacus commodo eu fermentum nunc imperdiet. Morbi aliquam, velit ac tempus consectetur, metus ipsum semper purus, vel laoreet orci velit et nisi. Nam velit arcu, semper et cursus at, pharetra et lectus.</p>
        </div>

        <div id="content">
            <p class="edito">Praesent bibendum consectetur ligula, feugiat tempus metus dapibus nec. Curabitur nec nulla nulla, ut elementum nunc. Proin mi arcu, vulputate et tempor et, rutrum vitae lectus. Curabitur ac ligula sed urna sagittis hendrerit. Aliquam facilisis tempus egestas. Nulla malesuada odio in orci hendrerit ut aliquam dui porta.</p>
            <h1>titre</h1>
            <p><img src="image.jpg" alt="image" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mi lacus, varius vel cursus quis, hendrerit et nunc. Nulla ultricies nulla eget diam consectetur pharetra. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean vitae nibh sapien, et laoreet orci. Pellentesque porta accumsan libero, vitae sollicitudin erat commodo ut. Mauris quis leo et augue tincidunt malesuada ac auctor augue. Etiam suscipit, elit vitae mattis feugiat, enim diam mattis leo, sit amet tincidunt nisl dolor viverra felis. In sit amet augue ac lorem sagittis tempor id ac massa. Donec sodales pretium interdum. Sed id purus pharetra magna placerat venenatis. Aliquam erat volutpat. Vivamus eleifend hendrerit orci quis elementum. Pellentesque nec turpis sed purus gravida dapibus eu iaculis dolor. Mauris sit amet pellentesque risus. Morbi eget felis neque. Proin quis sapien eu velit egestas aliquam quis et sem.</p>
            <blockquote>"Curabitur ac ligula sed urna sagittis hendrerit. Aliquam facilisis tempus egestas. Nulla malesuada odio in orci hendrerit ut aliquam dui porta. Etiam lectus nisl, placerat ac rhoncus id, accumsan non nibh. Duis elit lectus, lacinia sed suscipit vitae, tincidunt eget nunc. Donec ante lorem, adipiscing eget condimentum venenatis, semper vitae lectus. Nunc nec arcu metus, mollis accumsan tortor."</blockquote>
            <h2>sous titre</h2>        
            <img src="image.jpg" alt="image" />
            <p>Vivamus magna orci, aliquet at faucibus tempus, eleifend at mi. Quisque vitae tortor elit. Maecenas sit amet ligula in massa vehicula scelerisque ac eget velit. Nulla ac porta dolor. Nulla facilisi. Mauris pulvinar, felis et accumsan mattis, velit est luctus ipsum, pharetra auctor libero nisl vel magna. Aliquam placerat molestie tristique. Ut a lorem diam. Praesent tincidunt porttitor eros, nec scelerisque nulla pretium pulvinar. Morbi odio ipsum, laoreet tincidunt dictum vitae, faucibus quis dolor. Maecenas mauris orci, elementum eu consectetur non, ultrices sed nunc. Cras dolor sem, convallis ac laoreet vestibulum, tempor in lorem. Cras at tincidunt felis. Morbi adipiscing, eros vitae ornare hendrerit, neque erat feugiat metus, sed scelerisque libero metus at eros. Phasellus cursus facilisis ante a tincidunt. Nulla condimentum, sapien vitae scelerisque eleifend, quam erat imperdiet nibh, vel condimentum dui ipsum eget elit. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras arcu magna, faucibus eu venenatis non, vulputate sit amet elit.</p>
            <h2>sous titre</h2>        
            <p>Praesent bibendum consectetur ligula, feugiat tempus metus dapibus nec. Curabitur nec nulla nulla, ut elementum nunc. Proin mi arcu, vulputate et tempor et, rutrum vitae lectus. Curabitur ac ligula sed urna sagittis hendrerit. Aliquam facilisis tempus egestas. Nulla malesuada odio in orci hendrerit ut aliquam dui porta. Etiam lectus nisl, placerat ac rhoncus id, accumsan non nibh. Duis elit lectus, lacinia sed suscipit vitae, tincidunt eget nunc. Donec ante lorem, adipiscing eget condimentum venenatis, semper vitae lectus. Nunc nec arcu metus, mollis accumsan tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum mattis nisi. Aliquam commodo elit nibh, in vestibulum lacus. Maecenas malesuada odio libero, nec dictum neque. Duis tincidunt ornare odio, non feugiat orci feugiat et.</p>
        </div>
        
        <div id="footer">
            <ul>
                <li><a href="#">Lien</a></li>
                <li><a href="#">Lien</a></li>
                <li><a href="#">Lien</a></li>
                <li><a href="#">Lien</a></li>
                <li><a href="#">Lien</a></li>
                <li><a href="#">Lien</a></li>
                <li><a href="#">Lien</a></li>
                <li><a href="#">Lien</a></li>
                <li><a href="#">Lien</a></li>
                <li><a href="#">Lien</a></li>
                <li><a href="#">Lien</a></li>
                <li><a href="#">Lien</a></li>
            </ul>
            <p class="legal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum mattis nisi. Aliquam commodo elit nibh, in vestibulum lacus. Maecenas malesuada odio libero, nec dictum neque. Duis tincidunt ornare odio, non feugiat orci feugiat et.</p>
            <p class="copyright">pied de page</p>
        </div>       

    </div>
</body>
</html>

pour bien faire il faudrai ajouter les liens d'accessibilité, les tabindex et peut etre des accesskey

pour le css :

Code:

* {
    /* un reset css plus évoluer doit être utilisé*/
    padding:0;
    margin:0;
    list-style-type:none;
}
html {
    background-color:#369;
    padding:10px;
}
h1, h2, h3, h4, h5, h6 {
    text-transform:capitalize;
}
#global {
    margin: 0 30px;;
    min-width:720px;
    background-color:#fff;
}

/* ------------------------------------------
                 L'en-tête
   ------------------------------------------*/
#header {
    height:150px;
    background-color:#aaa;
}
#header h1 {
    margin:0;
    padding: 0;
    text-indent:-5000px;
    background-image:utl(images/header:png);
    background-color:#ccc;
    height:150px;
    width:300px;
    float:left;
}
#sondage {
    height:150px;
    width:420px;
    background-color:#555;
    float:right;
}

/* ------------------------------------------
                La navigation
   ------------------------------------------*/
#navigation {
    width:200px;
    background-color:#fff;
    float:right;
    padding:5px;
}
#navigation h2 {
    margin-bottom:5px;
    padding-left:5px;
    background-color:orange;
    text-transform:capitalize;
}
#navigation ul {
    margin-bottom:5px;
    background-color:blue;
    padding-bottom:10px;
}
#navigation li {
    background-color:red;
}
#navigation li:first-child {
    background-color:yellow;
}
/* attention IE 8 ne comprend pas la pseudo class :last-child */
#navigation li:last-child {
    background-color:purple;
}
#navigation a {
    display:block;
    padding-left:10px;
    color:#000;
    text-decoration:none;
}
#navigation a:hover {
    color:#fff;
    background-color:#000;
}

/* ------------------------------------------
             Les infos à droite
   ------------------------------------------*/
#info {
    width:200px;
    background-color:#fff;
    float:right;
    padding:10px;
}
#info h2 {
    border-bottom:1px #000 solid;
    margin-bottom:10px;
}
#info p {
    margin-bottom:10px;
    text-align:justify;
}

/* ------------------------------------------
                Le contenu
   ------------------------------------------*/
#content {
    padding: 0 10px;
    background-color:#fff;
    margin-left:0px;
    margin-right:440px;
}
#content h1, #content h2, #content h3, #content h4 {
    border-bottom:1px #000 solid;
    padding-bottom:2px;
    margin-bottom:5px;
}
#content h2 {}
#content h3 {}
#content h4 {}
#content p {
    margin-bottom:10px;
    text-align:justify;
}
#content blockquote {
    background-color:#eee;
    border:1px solid #ccc;
    padding:10px;
    text-align:justify;
    margin-bottom:10px;
}
#content img {
    float:right;
    padding: 0 0 5px 5px;
}
#content p img {
    float:left;
    padding: 0 5px 5px 0;
}
#content a {}
#content a:hover {}

/* ------------------------------------------
                  Les class
   ------------------------------------------*/
.edito {
    margin:10px 0 0 0;
    padding:0 10px;
    font-style:italic;
    border-left: 10px #369 solid;
}

/* ------------------------------------------
               Le pied de page
   ------------------------------------------*/
#footer {
    height:200px;
    clear:both;
    background-color:#ddd;
}
#footer ul {
    height:150px;
    width:420px;
    padding:10px;
    float:left;
}
#footer li { 
    float:left;
}
#footer li a {
    padding: 2px 0 2px 5px;
    width:200px;
    display:block;
    color:#000;
    text-decoration:none;
}
#footer li a:hover {
    color:#fff;
    background-color:#000;
}
#footer p.legal {
    margin-left:440px;
    padding:10px;
}
#footer p.copyright {
    float:none;
    padding:0;
    clear:both;
    height:30px;
    line-height:30px;
    text-align:center;
}

à noter que le menu est skinable facilement c'est juste domage que IE ne comprenne pas la pseudo class :lastchild
la page est concu pour avoir une largeur minimum de 720px et la zone de texte d'adapte à la largeur du site, les autre colonnes sont fixes, le simage mise dans les paragraphes (illustrations) se place à gauche du texte, les image en dehors des paragraphes (pub) se place à droite du texte, le texte est justifié, il manque beaucoup de styles pour pleins de balise mais c'est un bon début pour un site siffle

Passion1970 · Re Problème entre différents navigateur

Rorschach a écrit:
tout cela prend du temps mais il faut mieux prendre son temps et bien faire que faire vite et devoir recommencer (rien ne sert de courir il faut partir à point)

j'ai une maquette ici

c00lman · Re Problème entre différents navigateur

@Rorschach, franchement, bravo pour ce code. Si il y en a qui passe par là, ça devrait les intéresser applause .

Passion1970 · Re Problème entre différents navigateur

J'ai un problème avec le height: auto.

Mais images qui sont forcées à 100*100 sur la page d'accueil.

Mes images débordes du contenant.

Pouvez m'aiguiller ?

Merci

c00lman · Re Problème entre différents navigateur

Si il sagit des images de ta colonne de droite, réduit la taille de ta colonne centrale et rajoute la différence dans ta colonne de droite (css), sinon, réduit la taille de tes images.

Passion1970 · Re Problème entre différents navigateur

J'ai quelque problème de mise en page.

Si vous pouviez m'aider => c'est par ici

c00lman · Re Problème entre différents navigateur

Adresse introuvable

Firefox ne peut trouver le serveur à l'adresse www.passion1970.fr.

Rorschach · Re Problème entre différents navigateur

tu as des balises head en trop déjà, tu devrais revoir tes includes (ou alors ce sont les scripts que tu insère dans ta page qui sont foireux o_O), ensuite quelle colonne souhaite tu avoir en extensible et quelles colonnes souhaite tu avoir en fixe ? tu n'as pas un croquis ou une image de ce que tu veux obtenir au final ?

petit conseil, tu ne devrai pas ajouter la pub ni les scripts sur ta page de travail, ajoute ses trucs à la fin ce serai plus pratique

Passion1970 · Re Problème entre différents navigateur

Rorschach a écrit:
tu as des balises head en trop déjà, tu devrais revoir tes includes (ou alors ce sont les scripts que tu insère dans ta page qui sont foireux

Oui le problème du Head vient que j'appelle des modules php pour ma gestion des news qui utilisent eux mêmes des feuilles de styles.

Donc si je comprends bien je dois pouvoir faire mon habillage à partir d'une seule feuille de style ?

Mais vue le nombre de page que j'ai ma feuille de style va vitre être ingérable.

Rorschach a écrit:
o_O), ensuite quelle colonne souhaite tu avoir en extensible et quelles colonnes souhaite tu avoir en fixe ?

Sur ma page, la colonne qui doit être fixe est la colonne de gauche contenant le fil d'info, le forum...

Rorschach a écrit:
tu n'as pas un croquis ou une image de ce que tu veux obtenir au final ?

La maquette est celle ci => ici

Rorschach a écrit:
petit conseil, tu ne devrai pas ajouter la pub ni les scripts sur ta page de travail, ajoute ses trucs à la fin ce serai plus pratique

La pub je vais la virer en attendant.
Mais j'ai un script sur mon fil d'info. Je comprends pas pourquoi, il fonctionne sur le lien que je t'ai fourni mais sur l'autre page j'ai juste les lien haut bas stop et top ...

c00lman · Re Problème entre différents navigateur

Donc si je comprends bien je dois pouvoir faire mon habillage à partir d'une seule feuille de style ?

Pas nécessairement, mais... 5 feuilles de styles répartis n'importe ou et rien que sur ta page maquette, c'est un vraie bordel !

Personnellement, je suis largué dans ton code. L'idéal serait une maquette vide de ton site (1 document php+1 feuille de style de base), bref, ta charte graphique au complet sans tout tes codes (php,include,script,etc..). On viendrait incorporer ensuite chaque élément, un par un, que tu souhaites avoir.

Comme je te l'ai déjà dit et comme Rorschach te la souligné également, nettoie ton code de toute tes balises superflues ou en double.

@Rorschach, tu est insomniaque ^^?

Passion1970 · Re Problème entre différents navigateur

c00lman a écrit:
Donc si je comprends bien je dois pouvoir faire mon habillage à partir d'une seule feuille de style ?
Personnellement, je suis largué dans ton code. L'idéal serait une maquette vide de ton site (1 document php+1 feuille de style de base), bref, ta charte graphique au complet sans tout tes codes (php,include,script,etc..). On viendrait incorporer ensuite chaque élément, un par un, que tu souhaites avoir.

Est ce que la c'est mieux => Maquette ?

Rorschach · Re Problème entre différents navigateur

@Rorschach, tu est insomniaque ^^?

non, je suis webmaster lol
(ah la la on a pas des vies facile)

La maquette sans pub et autre trucs c'est déjà mieux, on peut lire le code et mieux voir ce que tu souhaite obtenir, donc coté code pour la feuille de style tu peux en lier plusieurs voir les spécification ici : http://www.la-grange.net/w3c/html4.01/p … l#h-14.3.2

autrement dit tu peux avoir plusieurs link pour la css dans ton head regarde le lien vers la-grange pour plus d'info

ou alors tu peux tout regrouper dans une feuille de style en utilisant les commentaires pour organiser les diverses partie de ta css, le mieux étant de combiner les deux méthodes, tu fait une feuille de style de base avec un reset css et tes styles de base puis tu ajoute une seconde feuille de style avec les style plus spécifique à la page ce qui donne par exemple :

Code:

    <link rel="stylesheet" type="text/css" href="styles/base.css" media="all" /> 
    <link rel="stylesheet" type="text/css" href="styles/styles.css" media="screen" title="Normal" />

ensuite, toujours sur le code html tu as des balises <br /> cette balise à pour fonction d'ajouter un retour à la ligne, c'est utilisé dans le cas de poeme, parole de chanson ou texte devant être couper à un endroit précis, mais ça ne doit pas être utilisé pour ajouter des ligne d'espace entre deux éléments, donc cela :

Code:

<h1>A La Une</h1>
<br /><br />
<h1>Club</h1>
<br /><br />

ce n'est pas bon, si tu veux ajouter des espaces utilise les css (margin ou padding par exemple) ton code sera plus propre sans les balises en trop, et donc plus facile à lire et plus facile à modifier et gérer

Sur ma page, la colonne qui doit être fixe est la colonne de gauche contenant le fil d'info, le forum...

donc si je comprend bien tu veux une colonne fixe et deux qui s'adapte en fonction de la taille de la page ?
tout le secret est dans les dimension width des éléments #navigation, #content et #info, si tu donne une valeur en pixels à un width il sera fixe à cette largeur, si tu ne donne pas de width l'élément de type block prendra toute la largeur disponible, si tu donne une largeur width en pourcentage il prendra le pourcentage indiquer comme largeur, donc deux colonne fixe et une colonne extensible c'est facile on indique deux width en pixel et la troisième on n'indique pas de width, mais une colonne fixe et deux extensible il faut rusé un peu, en fait on fait un regroupement des deux colonnes extensible en une seule qui sera divisé en 2 on fait donc une colonne (celle de gauche) fixe avec un width en pixel, puis une autre colonne sans width donc qui prendra toute la largeur restante, cette seconde colonne contient ensuite deux colonne avec des width en pourcentage 50% par exemple

je n'ai pas le temps d'essayer mais en html cela pourrai ressembler à un truc genre :

Code:

<div id="colonnefixe">cette colonne est fixe</div>
<div id="colonnefluide">
    <div class="colonne50pourcent">cette colonne est extensible</div>
    <div class="colonne50pourcent">cette colonne est extensible aussi</div>
</div>

pense à ajouter des class="" aux balises qui en ont besoin pour y accéder plus facilement et n'ajoute pas de balises si ce n'est pas nécessaire par exemple tu as :

Code:

<div id="sondage">
    <p>sondage en php</p>
</div>

les balise de paragraphe <p> ne sont pas forcement utile, ton script de sondage aura probablement déjà ses balises donc ajouter un paragraphe alourdit la page si tu peux éviter c'est mieux

une chose aussi, les balises img devrai avoir un paramètre alt="" qui permet d'avoir un texte de remplacement quand l'image ne s'affiche pas

si tu doit gérer plusieurs présentaion suivant la page tu peux également ajouter un id à la balise body, par expérience je peux te dire que c'est utile, genre : <body id="accueil"> sur la page d'accueil et <body id="contact"> sur la page de contact etc. cela permet ensuite dans la css de spécifier des styles différents suivant la page qui est affiché avec par exemple :
pour les paragraphes de la page d'accueil
#accueil p {}
pour ceux de la page de contact
#contact p {}
et cela pour tout les styles
pour les titres de la navigation de la page d'accueil
#accueil #navigation h2 {}
et pour les titres de la navigation de la page de contact
#contact #navigation h2 {}

:)

Annonce

#1 Problème entre différents navigateur du 02-10-2009 20:43:53

Code:

02-10-2009 20:43:53

#2 Re Problème entre différents navigateur du 03-10-2009 00:33:34

Re: Problème entre différents navigateur

Code:

#3 Re Problème entre différents navigateur du 03-10-2009 09:13:15

Re: Problème entre différents navigateur

Code:

Code:

#4 Re Problème entre différents navigateur du 03-10-2009 13:01:33

Re: Problème entre différents navigateur

#5 Re Problème entre différents navigateur du 03-10-2009 14:59:37

Re: Problème entre différents navigateur

#6 Re Problème entre différents navigateur du 03-10-2009 16:23:21

Re: Problème entre différents navigateur

#7 Re Problème entre différents navigateur du 03-10-2009 19:52:36

Re: Problème entre différents navigateur

Code:

#8 Re Problème entre différents navigateur du 04-10-2009 17:50:22

Re: Problème entre différents navigateur

Code:

Code:

#9 Re Problème entre différents navigateur du 05-10-2009 08:16:33

Re: Problème entre différents navigateur

#10 Re Problème entre différents navigateur du 05-10-2009 09:19:44

Re: Problème entre différents navigateur

#11 Re Problème entre différents navigateur du 05-10-2009 10:04:11

Re: Problème entre différents navigateur

#12 Re Problème entre différents navigateur du 05-10-2009 11:10:38

Re: Problème entre différents navigateur

#13 Re Problème entre différents navigateur du 05-10-2009 17:08:19

Re: Problème entre différents navigateur

#14 Re Problème entre différents navigateur du 05-10-2009 18:04:23

Re: Problème entre différents navigateur

Code:

Code:

#15 Re Problème entre différents navigateur du 05-10-2009 20:04:33

Re: Problème entre différents navigateur

Rorschach a écrit:

#16 Re Problème entre différents navigateur du 05-10-2009 22:15:21

Re: Problème entre différents navigateur

#17 Re Problème entre différents navigateur du 06-10-2009 10:06:11

Re: Problème entre différents navigateur

#18 Re Problème entre différents navigateur du 06-10-2009 16:48:03

Re: Problème entre différents navigateur

#19 Re Problème entre différents navigateur du 06-10-2009 20:24:35

Re: Problème entre différents navigateur

#20 Re Problème entre différents navigateur du 07-10-2009 01:05:49

Re: Problème entre différents navigateur

#21 Re Problème entre différents navigateur du 07-10-2009 02:15:43

Re: Problème entre différents navigateur

#22 Re Problème entre différents navigateur du 07-10-2009 08:29:42

Re: Problème entre différents navigateur

Rorschach a écrit:

Rorschach a écrit:

Rorschach a écrit:

Rorschach a écrit:

#23 Re Problème entre différents navigateur du 07-10-2009 11:13:03

Re: Problème entre différents navigateur

#24 Re Problème entre différents navigateur du 07-10-2009 11:37:11

Re: Problème entre différents navigateur

c00lman a écrit:

#25 Re Problème entre différents navigateur du 07-10-2009 14:04:53

Re: Problème entre différents navigateur

Code:

Code:

Code:

Code:

Partenaires de « créer un site internet »