28173 sujets

CSS et mise en forme, CSS3

Salutations !

Je me suis décidé à me mettre un peu aux DIV (je m'étais toçujours cantonné à des design "tableaux" auparavant) j'ai donc jetter un oeil aux tutoriels présents sur le site, mais depuis maintenant quelques jours je bloque sur un problème plutôt frustrant, en effet, les background de mes div ne s'affichent pas sur firefox alors que sur IE tout s'affiche correctement. Enfin comme du code vaut mieux qu'un long discours je joint a mon message l'extrait de ma CSS concerné ainsi qu'un exemple de DIV qui ne marche pas ... :\

div#blocs_nav { width:189px; background: url('../images/mfond.gif');}
div#blocs_nav p { margin-top:0; margin-bottom:0; margin-left:20; margin-right:20; }
div#menu1_head {background: url('../images/m1_01.gif'); height: 33px; width: 189px;
background-repeat: no-repeat;}
div#menu1_bottom {background: url('../images/m1_02.gif'); height: 72px; width: 189px;
background-repeat: no-repeat;}


<!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>Sans titre</title>
<link rel="stylesheet" href="css/css_site.css">
</head>
<body>
<div id="blocs_nav">
<div id="menu1_head"></div>
<p><a href="index.php">Accueil</a></p>
<p>Présentation</p>
<p>Exposition</p>
<div id="menu1_bottom"></div>
</div>
</body>

</html>


Si vous avez une solution je suis preneur, car après avoir déambulé des heures sur le net je ne trouve pas ce qui cloche :\
Modifié par nuts62 (06 Jan 2008 - 21:05)
Il n'y a aucune raison, à ma connaissance et au vu de tes codes, que les background s'affichent sur un navigateur et pas sur un autre. D'autant plus qu'il me semble que la propriété *background* est prise en compte par tous les navigateurs.

Serait-il possible d'avoir l'adresse en question ? Autre chose : vérifies que les images sont bien activées sur Firefox. Ca paraît bête mais on sait jamais. Smiley langue

Aussi, habituellement, j'utilise *background-image* lorsqu'il s'agit de mettre une image en fond. De même, je n'avais jamais vu d'apostrophe entre l'adresse des images. Essaies sans pour voir (bien que je doute que le problème vienne de là). Sinon voir le paragraphe 2 de ma réponse. Smiley smile
Modifié par Gaylord.P (06 Jan 2008 - 19:58)
Je viens de vérifier tout cela mais rien n'y change :\ J'avoue ne vraiment pas comprendre d'où le problème viendrait :\
Est-ce possible de voir la page en ligne ? (ou a defaut dans un .zip hébergé n'importe où)
Modifié par Gaylord.P (06 Jan 2008 - 20:11)
hakkou a écrit :
ca parrait peut etre evident...mais est tu sur du chemin de tes images de background ?


Je viens de tester avec l'attribut
 style="background-image: url('images/m1_01.gif');"
... ça fonctionne bien

j'ai également tenté en déplacant mon css (qui se trouvait dans un repertoire propre) et j'ai donc changé l'adresse des iamges mais sans succès, ça fonctionne quand je passe par l'attribut "style" mais pas par ma CSS externe :\
Modifié par nuts62 (06 Jan 2008 - 20:16)
essai de rectifier ton link

<link rel="stylesheet" type="text/css" href="css/tonCss.css" [b]media="screen"[/b]/>

et bien evidament s'assurer que le chemin de ta feuille de stlye est le bon Smiley cligne
Edit je vien de voir ta page:
je ne sais pas si t'a mis le bon fichier CSS ou pas
car le seul CSS charger par ta page est css_site.css qui contient

body {
background-color:#DFDFDF;
background-image:url(../images/fond.gif);
background-repeat:repeat-x;
font-family:verdana;
font-size:9pt;
margin:0pt;
}
td {
text-align:left;
vertical-align:top;
}
img {
border:medium none;
vertical-align:top;
}
p {
font-size:9pt;
line-height:120%;
}
div {
font-family:verdana;
font-size:9pt;
text-decoration:none;
}
div#wip_head {
color:#FFFFFF;
padding-top:5px;
text-decoration:none;
}


on remarque que tout ce que tu cite dans ton premier post est absent du CSS Smiley biggol
Modifié par hakkou (06 Jan 2008 - 20:20)
hakkou a écrit :
essai de rectifier ton link

<link rel="stylesheet" type="text/css" href="css/tonCss.css" [b]media="screen"[/b]/>

et bien evidament s'assurer que le chemin de ta feuille de stlye est le bon Smiley cligne


Je viens de tester encore une fois sans succès :\ le chemin est bon puisque les autres propriétés de ma feuille sont bien appliqués lorsque j'ouvre ma page avec IE :\

Etrange, je viens de revérifier si je n'avais oublié de mettre à jour mon fichier CSS en ligne mais je l'ai bien en complet
body{background-color:#DFDFDF; margin:0; background-image: url('../images/fond.gif'); background-repeat: repeat-x; font-size:9pt; font-family:verdana; }
td{vertical-align:top; text-align:left;}
img{vertical-align:top;border:none;}
p{line-height:120%;font-size:9pt;}
div{font-size:9pt; font-family:verdana; text-decoration:none;}


/* Propri‚t‚s DIV du bloc Work In Progress */
div#wip_head {text-decoration:none;padding-top: 5px;  color:#FFFFFF}
div#wip_content(padding-bottom: 5px; color:#FFFFFF;}
div#wip_content p:first-letter {color:#395781;}
div#wip_content p {line-height:100%; margin-top:0; margin-bottom:0;}
/*********************************************/



/* Propri‚t‚s DIV du bloc central */
/* VERSION 1 : petit soucis */
/*div#content_head { background-color:#282828; width:585px; vertical-align:top;padding-left:5;}
div#content_head p { color:#FFFFFF; margin: 5; font-variant:small-caps; font-size:150%;}
div#content_c { background-color:#ECECEC;}
div#content_c p { padding : 5px;	margin: 0 10px 0 10px;font-variant:normal; font-weight:none; font-size:9pt; color:#000000}
div#content_c p:first-letter { font-weight:bold; font-size:12pt;}*/

/*VERSION 2 */
div#content_conteneur { background-color:#282828; width:585px; vertical-align:top;}
div#content_title { vertical-align:top; margin-left:5;}
div#content_title p { color:#FFFFFF; margin: 5; font-variant:small-caps; font-size:150%;}
div#content_bloc {background-color:#ECECEC; color:#000000; margin-left:5;}
div#content_text p { padding : 5px;	margin: 0 10px 0 10px; color:#000000}
div#content_text p:first-letter { font-weight:bold; font-size:12pt;}
/***************************************************/

/*Propri‚t‚s DIV du sous-bloc news */
div#news_conteneur { margin-left:5; margin-right:5;}
div#news_title { background-color:#2d5a9b; font-weight:bold; background: url('../images/news_bar.gif') top right no-repeat;}
div#news_title p { padding-left:5;color:#FFFFFF; font-variant:small-caps;}
div#news_text p { margin-top:0; margin-bottom:0; margin-left:5;}
/********************************************/


/*Propri‚t‚ largueur menus */
div#blocs_nav { width:189px; background: url('../images/mfond.gif');}
div#blocs_nav p { margin-top:0; margin-bottom:0; margin-left:20; margin-right:20; }

div#blocs_nav a:link { color:#000000; background-color:#ececec; text-decoration:none; }
div#blocs_nav a:hover { color:#FFFFFF; background-color:#2d5a9b; text-decoration:none; }
div#blocs_nav a:visited { color:#000000; background-color:#ececec; text-decoration:none; }
div#blocs_nav a:active { color:#000000; background-color:#ececec; text-decoration:none; }

/*Propri‚t‚s DIV du bloc menu1 */
div#menu1_head {background: url('../images/m1_01.gif'); height: 33px; width: 189px;
background-repeat: no-repeat;}
div#menu1_bottom {background: url('../images/m1_02.gif'); height: 72px; width: 189px;
background-repeat: no-repeat;}

Et tous mes tests sont fait également en local (je n'ai pas publié les différents tests que j'ai fait mais si vous voulez que je change quelque chose en ligne .. n'hésitez pas Smiley smile )
Modifié par nuts62 (06 Jan 2008 - 20:25)
l'applicatin du CSS (selon firebug) s'arrete a cette ligne


div#wip_head {text-decoration:none;padding-top: 5px;  color:#FFFFFF}

et on remarque que ta oublier un ";" aprés la propriété color. essai demettre le ";" et relire tout ton CSS car ya different endroit ou ta oublier le ";'
hakkou a écrit :
l'applicatin du CSS (selon firebug) s'arrete a cette ligne


div#wip_head {text-decoration:none;padding-top: 5px;  color:#FFFFFF}

et on remarque que ta oublier un ";" aprés la propriété color. essai demettre le ";" et relire tout ton CSS car ya different endroit ou ta oublier le ";'


Je viens de rejouter les quelques ";" qu'il manquait .. sans changement :\
a ba il y avait une grosse erreur qui m'a echappé desolé Smiley biggol
a cette ligne la
[b]div#wip_content([/b]padding-bottom: 5px; color:#FFFFFF;}

ta une ( au lieu de {
J'ai trouvé la solution ... si bête :s il s'aggissait en fait d'une erreur lors de la frappe et une parenthèse s'étaitinstallée à la place d'une accolade ouvrante ... je suis navré du dérangement et vous remercie de votre aide si rapide Smiley smile

Ps : par contre quelque chose me chiffone, comment vérifier la bonne execution de sa CSS ? Comment avez vvous su que l'aplication s'arretait à la ligne
div#wip_head {text-decoration:none;padding-top: 5px;  color:#FFFFFF}
(c'est bien la ligne suivante qui contenait l'erreur :s ^^)

Edit : oups désolé je n'avais pas réactualisé la page avant de psoter, merci beaucoup à toi Smiley smile
Modifié par nuts62 (06 Jan 2008 - 20:57)
j'utilise firebug extension de firefox. aprés l'installation de l'extension il y a une petite icone qui apparant dans le coin bas droit du navigateur. il suffit de cliquer dessus... ensuite choisi l'onglet CSS et on y voit le ( ou la partie du fichier ) css chargé ^^
si le probleme est resolu merci de mettre [résolu] dans le titre Smiley smile
bonne soirée
Bonjour,

Lorsqu'un navigateur applique la feuille de style et qu'un autre n'en applique qu'une partie ou ne l'applique pas du tout:
- valider le code HTML pour vérifier qu'il n'y a pas d'erreur;
- valider le code CSS pour vérifier qu'il n'y a pas d'erreur;
- à la rigueur, ça peut venir d'une syntaxe valide que ne comprend pas tel ou tel navigateur (notamment: Internet Explorer 6-7, ou bien d'anciennes versions des navigateurs).