28172 sujets

CSS et mise en forme, CSS3

Différence de positionnement (firefox et chrome)

Salut à tous !

Je viens vous demander un petit coup de main aujourd'hui parce que j'ai un soucis de positionnement de certaines images.
Sous firefox (et IE) tout va bien, mais alors sous Chrome c'est la catastrophe, je vous laisse admirer :

Firefox
Chrome

Et voici mon code (d'ailleurs si vous voyez des erreurs allez y dites le moi) :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
        <title>Portfolio Thomas Demont - Accueil</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <link rel="stylesheet" href="style.css" type="text/css" />
        <link href="./zoombox/zoombox.css" rel="stylesheet" type="text/css" media="screen" />
        <script type="text/javascript" src="./zoombox/jquery.js"></script>
        <script type="text/javascript" src="./zoombox/zoombox.js"></script>
        <script language="javascript">   
            function precharg()
            {
            img1 = new Image;
            img1.src = "images/menu_accueil.jpg";
            img2 = new Image;
            img2.src = "images/menu_portfolio.jpg";
            img3 = new Image;
            img3.src = "images/menu_contact.jpg";
            }
        </script>
    </head>

    <body onload="precharg()">                         
                                
                                
        <div id="global">
            
            <div id="header">
            
                    <img class="titre_apropos" src="./images/titre_apropos.png" alt="A propos" />
                    <img class="titre_news" src="./images/titre_news.png" alt="News" />
                    <map name="menu" id="menu">
                    <area id="m1" alt="Accueil" shape="poly" href="index.php" onmouseover ="document.images['menu'].src ='images/menu_accueil.jpg';" onmouseout ="document.images['menu'].src ='images/menu.jpg';" coords="48,30 , 156,138 , 124,138 , 33,46" />
                    <area id="m2" alt="Portfolio" shape="poly" href="portfolio.php" onmouseover ="document.images['menu'].src ='images/menu_portfolio.jpg';" onmouseout ="document.images['menu'].src ='images/menu.jpg';" coords="88,30 , 193,138 , 164,138 , 73,46" />
                    <area id="m3" alt="Contact" shape="poly" href="contact.php" onmouseover ="document.images['menu'].src ='images/menu_contact.jpg';" onmouseout ="document.images['menu'].src ='images/menu.jpg';" coords="128,30 , 236,138 , 204,138 , 113,46" />
                    </map>
                    <img name="menu" class="menu" src="./images/menu.jpg" alt="Menu" usemap="#menu" />
                                
            </div>
            
                
                
                
                <div id="bordure">
                    <div id="bordureg"></div>
                    <div id="bordured"></div>
                        
                        <div id="conteneur">
                                <p class="para">
                                    Bonjour et bienvenue sur mon portfolio ! Moi c'est Thomas Demont, j'ai 20 ans et je vous propose de visionner à travers ce site, mes diverses créations. 
                                    Attendez vous à voir un peu de tout, webdesign, vectorisation, je vous laisse découvrir ... <br /><br />
                                    Je sort tout droit d'un BTS en Communication et Industries Graphiques, qui m'a permis de me familiariser avec différents logiciels 
                                    tel que Photoshop ou Illustrator et plein d'autres choses qui n'ont rien à voir avec le web. Enfin bref, cette année j'entre en Licence E-Commerce
                                    et les dernières vacances m'ont permis de me replonger dans ce que j'aime ! Donc je ressort la créativité que j'avais enfouie en moi durant quelques années et je m'y remets.<br /><br />
                                    Mais qu'est ce que je fait exactement ? Je créer et je code pour le plaisir, mais j'aide aussi différentes personnes dans leurs projets (bénévolement). Webdesign, logo, html/css et bien d'autes choses.<br /><br />
                                    Si vous avez besoin d'un renseignement sur quoi que ce soit me concernant, ou de quelqu'un pour un projet qui tient la route, je vous envoie vers la page de <a href="contact.php">contact</a>.<br /><br />
                                    En espérant vous revoir bientôt ! Bonne visite !
                                </p>
                                
                                <p class="news">
                                    Le site est en ligne ! Si vous trouvez des erreurs faites le moi savoir et je vous en remercie d'avance !<br /><br />
                                    Boulot du moment :<br />
                                    <div id="list"><ul>
                                        <li>- Lieek.com : logo, modèle de newsletter et modification d'un thème WordPress (CMS).</li>
                                        <li>- Comité Consultatif des Jeunes de la Ligue d'Escrime d'Alsace : webdesign, réalisation<br />de la page Html/Css, numérisation du logo, favicon, création de lettre à en-tête, et d'affiches</li>
                                    </ul></div>
                                </p>
                                
                                <div id="lastone"><a href="./images/portfolio/normal/tequila.jpg" rel="zoombox"><img class="lastone" src="./images/portfolio/mini/miniature_tequila.jpg" alt="Miniature tequila" /></a></div>
                        </div>
                        
                        
                    
                
                </div>
                
                
            
            <div id="footer"><img class="indic_accueil" src="./images/indic_accueil.png" alt="Accueil" /></div>
        </div>
    
    
    </body>
</html>


/* CSS Document */

body {
    background:url(images/background.jpg);
    background-position:top center;
    font-family:arial;
    font-size:11px;
    font-weight:bold;
    color:#f6f3ec;
    margin:auto;
    }
    
a {color:#f6f3ec;text-decoration:none;outline:0 none;}
a:link {color:#f6f3ec;text-decoration:none;outline:0 none;}
a:visited {color:#f6f3ec;text-decoration:none;outline:0 none;}
a:hover {color:#f6f3ec;text-decoration:none;outline:0 none;}

div#global {
    width:1100px;
    height:900px;
    margin:auto;
    }
    
div#header {
    background-image:url(images/header.jpg);
    width:1100px;
    height:221px;
    }
    
div#bordureg {
    background-image:url(images/bordureg.jpg);
    width:103px;
    height:542px;
    float:left;
    }
    
div#bordured {
    background-image:url(images/bordured.jpg);
    width:103px;
    height:542px;
    float:right;
    }
    
div#bordure {
    width:1100px;
    height:542px;
    }
    
div#conteneur {
    background-color:#39302b;
    width:894px;
    height:542px;
    margin-left:103px;
    overflow:hidden;
    }
    
.menu {
    width:239px;
    height:138px;
    left:758px;
    top:577px;
    position:relative;
    z-index:10;
    }
    
div#footer {
    background-image:url(images/footer.jpg);
    width:1100px;
    height:137px;
    }
    
div#lastone {
    background-image:url(images/lastone.jpg);
    width:234px;
    height:324px;
    float:right;
    position:relative;
    top:-450px;
    margin-right:25px;
    }
    
div#navigation {
    background-image:url(images/navigation.jpg);
    background-repeat:no-repeat;
    width:234px;
    height:246px;
    position:relative;
    top:-400px;
    left:650px;
    text-align:center;
    padding-top:100px;
    z-index:9;
    }
    
.indic_accueil {
    width:57px;
    height:68px;
    left:875px;
    top:5px;
    position:relative;
    }
    
.indic_portfolio {
    width:57px;
    height:68px;
    left:915px;
    top:5px;
    position:relative;
    }
    
.indic_contact {
    width:57px;
    height:68px;
    left:957px;
    top:5px;
    position:relative;
    }

.titre_apropos {
    width:180px;
    height:45px;
    top:240px;
    left:103px;
    position:relative;
    }
    
.titre_news {
    width:180px;
    height:45px;
    left:-80px;
    top:555px;
    position:relative;
    }
    
.titre_portfolio {
    width:180px;
    height:45px;
    left:817px;
    top:240px;
    position:relative;
    }
    
.titre_contact {
    width:180px;
    height:45px;
    left:103px;
    top:705px;
    position:relative;
    }
    
.para {
    text-indent:20px;
    padding-left:40px;
    padding-right:300px;
    padding-top:60px;
    text-align:justify;
    }
    
#list ul {
    list-style-type:none;
    text-indent:20px;
    }
    
.news {
    text-indent:20px;
    padding-left:40px;
    padding-right:300px;
    padding-top:60px;
    text-align:justify;
    }

.lastone {
    margin-top:70px;
    margin-left:55px;
    }
    
table {
    margin-left:25px;
    margin-top:15px;
    z-index:8;
    }

td {
    padding-top:10px;
    text-align:center;
    width:150px;
    }
    
img {
    border:none;
    }
    
input {
    background-color:#f4efe7;
    border:none;
    }
    
textarea {
    background-color:#f4efe7;
    border:none;
    }
    
.votremessage {
    background-image:url(images/votremessage.jpg);
    background-repeat:no-repeat;
    width:327px;
    height:233px;
    padding-top:15px;
    padding-left:27px;
    float:right;
    margin-top:-225px;
    }
    
.objetmail {
    background-image:url(images/votrenom.jpg);
    background-repeat:no-repeat;
    width:312px;
    height:70px;
    padding-top:15px;
    padding-left:22px;
    margin-bottom:-20px;
    }
    
.votremail {
    background-image:url(images/votremail.jpg);
    background-repeat:no-repeat;
    width:312px;
    height:70px;
    padding-top:15px;
    padding-left:22px;
    margin-bottom:-20px;
    }
    
.formulairecontact {
    font-size:12px;
    font-weight:normal;
    padding-left:66px;
    padding-right:95px;
    padding-top:0px;
    }
    
div#contact {
    margin-top:60px;
    margin-left:60px;
    }
    
div#resultat {
    text-align:center;
    }
    
.textecontact {
    margin-top:-5px;
    text-indent:50px;
    font-weight:normal;
    margin-bottom:50px;
    }
    
.boutonenvoyer {
    background-image:url(images/boutonenvoyer.jpg);
    width:78px;
    height:25px;
    margin-left:285px;
    cursor:pointer;
    }


Avec les "hacks" css j'arrive à placer mes images correctement mais j'ai lu que ça n'était pas très propre.

Voici l'adresse temporaire du site : Portfolio

En vous remerciant d'avance ! Bonne journée !
Modifié par Fiouul (13 Sep 2010 - 22:05)
Hello,
ton code est assez lourd, par contre ce que je peux te dire:
Tu utilises la class="menu" et l'id="menu" sur la meme page-> c'est interdit.
Tu utilises trop les positionnement relatif, essaie de positionner les éléments HTML dans l'ordre que tu souhaite les voir s'afficher, évite de mettre les images des titres dans le header puis le texte dans une div plus bas dans ton code, car pour intercaler tout ca en CSS apres, c'est chaud.
Seul ton menu en bas (en biais) peut etre placer dans ton code plus haut ( pour le referencement ) et positionné en absolute en bas à gauche, en ayant pris soin de mettre en position:relative sur ton conteneur.

Voila.
Vincent.

PS: poses moi des questions si tu n'as pas tout compris.
Salut et merci pour ta réponse.

Je comprend pas trop ce que tu veut dire par un code assez lourd.

C'est vrai que j'ai voulu placer mes images d'abord, puis placer mon contenu ensuite, ça m'a induit en erreur je pense. Si je place mes images dans le div contenant le texte j'aurai pas forcément besoin de tout ce css pour les placer.
On m'a conseillé de séparer mon div global (qui contient le texte) en deux afin de pouvoir mieux placer mes éléments, qu'est ce que tu en pense ?

Merci d'avance !
Salut,

vdo93 a écrit :
Tu utilises la class="menu" et l'id="menu" sur la meme page-> c'est interdit.
Pourquoi ça ?
@Heyoan:
Hum je reste dubitatif... mais tu as raison, on peut faire cela...Le validateur ne crie pas! J'avoue que je trouve ca "bizarre" et "déroutant".

@fiouul:
On t'a bien conseillé, réorganise ton code et ensuite ton css découlera tout seul.

A+
Alors j'ai réussi à supprimer quelques class CSS en plaçant mes images directement avec mon texte (j'avais vraiment chercher compliqué xD). Cependant j'ai du en laisser quelques unes, par exemple sur ma page contact (le contenu varie lorsqu'on valide le formulaire), j'ai mis mon image dans mon footer et je l'ai placé. Mais j'ai un CSS moins chargé qu'avant !

De cette façon je n'ai plus aucune différence entre les navigateurs !
Je vous remercie !

Une dernière question, lorsque je veut valider ma page au w3c validator, il me reste une erreur que je ne peut pas enlever sinon mon menu ne fonctionne plus. Il me dit que je ne peut pas mettre d'attribut "name" à une image. Sans le name sur mon image, plus de map. Si vous avez une idée du pourquoi.

Merci !
Sujet clos
Aller à