28172 sujets

CSS et mise en forme, CSS3

Background-image : rien ne s'affiche :/

Bonjour,

j'ai un problème avec la propriété background-image d'une div. En effet, l'image de fond de ma div ne s'affiche pas. Ci-dessous le code de la page index.php :

<table width="100%" height="100%"><tr>
    <td align="center" valign="top"> 
      <?php include("header.php"); ?>
      <div id="page"><div id="hello">Hello world,</div></div>
	  <?php include("footer.php"); ?>
</td></tr></table>


puis la ligne incrimnée de ma css (enfin je pense) :
div#hello {background-image:url(images/lisere.gif); 
margin:0px; padding:10px 0px 10px 0px; 
width:740px; 
height:30px; 
text-align:left; 
}


J'ai essayé pleins de trucs, avec guillemets, sans, avec le terme div, sans, background-color marche bien, je suis sur de mon chemin relatif.

Par avance merci de votre aide

Hell doc
Modifié par Hell doc (19 Mar 2008 - 15:19)
re,

en mettant un lien absolu de ce type :

C:\wamp\www\monsite\images\lisere.gif

Ca marche sous IE (pas sous FF) !! Alors pourquoi donc absolu ? et même absolu que IE ?

HD
Modifié par Hell doc (19 Mar 2008 - 15:28)
le chemin doit etre un chemin http absolu ou relatif à la feuille de style.

En tout cas certainement pas un chemin par rapport à la racine du disque.
Merci skywalk3r c'était effectivement mon erreur. Je me suis positionné par rapport à l'endroit de la page et non depuis ma feuille de style. Ca marche également sous FF maintenant.

Par contre j'ai un autre souci mais je ne sais pas si je dois ouvrir un nouveau topic ?

Voici néanmoins le truc :

J'ai aligné le texte de mon footer à droite et pour ne pas le coller j'ai mis un padding-right de 10px mais sous FF mon footer s'aggrandit au lieu que mon texte se décale, tu vois d'où ca peut venir ?
Sous IE j'ai enfin le même rendu pour le moment que sous photoshop, cool Smiley smile

HD
Ca vient du fait que FF et IE n'ont pas le meme modèle de boite.

Sous FF : largeur réelle = width + padding + border

Sous IE : largeur réelle = width

Le comportement à prendre en référence est celui de FF (le meme que opera, safari, etc...).

As-tu un DOCTYPE sur ta page? Si oui lequel? Un doctype absent ou erroné fait passer IE en mode Quirks.

Il faut donc que tu mettes le bon Doctype (très important). Et que tu retires 10px de la propriété width de ton footer (ou enlever le padding du footer et mettre un margin-right sur l'élément qui contient le texte du footer.
Merci pour ta réactivité et l'info (je ne savais pas, je comprends mieux certaines choses maintenant, je débute en la matière Smiley cligne )

Par défaut quand j'ai créé une nouvelle page sous dreamweaver, ca me met :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HD
Modifié par Hell doc (19 Mar 2008 - 16:09)
Hell doc a écrit :
je débute en la matière


Alors comme tu peux le voir les navigateurs n'interpretent pas tous les choses de la meme facon. Tu auras souvent besoin d'inclure des feuilles de styles correctives pour IE. Tu pourras trouver comment les inclure avec
les commentaires conditionnels, qu'il te faut utiliser pour inclure un lien vers une feuille de style reservée à IE après avoir mis le lien vers la feuille de style principale.

Et si tu veux progresser n'hésites pas à abandonner Dreamweaver dès que tu t'en sens près. Le meilleur moyen de maitriser un rendu visuel est de maitriser le code que l'on produit, ce qui n'est pas le cas avec DreamWeaver.

Bon courage Smiley smile
Modifié par skywalk3r (19 Mar 2008 - 16:08)
Impec'. Pour tout dire j'ai toujours construit mes sites en tableaux (css pour le texte uniquement) comme tu peux voir ^^, je suis un vieux de la vieille et j'ai toujours réussi à faire ainsi même si je sais que les tableaux...héhé

Les css me semblent pas encore tout à fait au point mais de toute façon c'est le moment ou jamais pour s'y mettre. Quand je dis cela c'est par rapport à tous les navigateurs...

Pour finir avec mon souci, après on pourra clore le topic Smiley cligne

J'ai laissé 760px pour mon footer et mis mon texte dans un span avec le margin-right :10px c'est nickel Smiley cligne , par contre le margin-top n'est pas pris en compte zarbi, pourquoi ? Smiley confus

HD
Modifié par Hell doc (19 Mar 2008 - 16:16)
Apparemment le span n'est pas reconnu par le margin-top, le fait qu'il soit inline ?

J'ai donc passé mon texte en paragraphe (j'aurai pu faire en liste également je pense) et j'ai placé ce code qui marche plutôt bien :

div#footer p {color:#FFFFFF; padding-top:5px;margin:0px 10px 0px 0px;}/* T R B L */
<!--[if gte IE 5.5000]> div#footer p {color:#FFFFFF;  margin:10px 10px 0px 0px;}/* T R B L */ <![endif]-->


Ca te parrait bon dans l'esprit ?

ENCORE MERCI. Par ton soutien, ta patience et la qualité de tes réponses, tu me confortes dans l'idée qu'un post vaut mieux qu'un tuto Smiley smile
Et bien les éléments de type inline ne supportent pas les propriétés inhérentes au type block, je ne serai pas étonné que ce soit le cas pour margin-top. Il vaut mieux en effet utiliser une balise p ou tout simplement une div. J'utilise personnellement les balises span uniquement pour "styler" du texte (couleur, gras, taille de texte,...) mais pas pour le positionner.

Pour le CSS de ton post précédent ça ne colle pas. La première raison est que tu ne devrais pas avoir d'interpretations différentes entre IE/FF en utilisant la solution du margin sur ton texte (au lieu de celle du padding dans le footer), et donc aucune raison d'avoir un code spécifique IE.

La deuxième raison est que les commentaires conditionels doivent être inclus dans du code HTML et non dans du code CSS. Smiley eek

Concrètement tu as une première feuille de style (qu'on appellera style.css) contenant :

div#footer p {
color:#FFFFFF; 
padding-top:5px;
margin:0px 10px 0px 0px;
}


Une autre feuille corrective pour IE 6 et inférieur (attention IE7 interprète "un peu mieux" les choses mais est très inconfortable car il se situe "entre" le rendu de la version 6 et celui de FF) (qu'on appellera styleFixIE.css), contenant uniquement les propriétés à "ecraser" pour IE:

div#footer p {
padding-top:0px;
margin:0px 10px 0px 0px;
}


et enfin entre les balises "<head>" dans la partie HTML on va placer ceci :

<link rel="stylesheet" type="text/css" href="style.css"/>
<!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="styleFixIE.css"/><![endif]-->


De manière a écraser les paramètres qui doivent être redéfinis pour que IE6 et moins aient un rendu correct.

J'ai pris le temps de te le réexpliquer mais il faut bien lire les articles de la Faq et tutoriels. Chaque informations est importantes. Ici il s'agisasait bien de commentaires HTML et non de commentaires CSS.

Donc le code que tu as ecris ci dessus est invalide et risque d'interrompre l'interpretation de la feuille de style du fait d'une syntaxe de commentaire qui n'existe pas dans le code CSS.

Alsa est une mine d'informations énorme (Faq + tutos). Bonne continuation
Smiley cligne .
Modifié par skywalk3r (20 Mar 2008 - 10:16)
<mode modérateur=off>

skywalk3r a écrit :
Ca vient du fait que FF et IE n'ont pas le meme modèle de boite.

Sous FF : largeur réelle = width + padding + border

Sous IE : largeur réelle = width

Rah boudiou de berdel de morde, c'est pas fini de répéter cette bêtise??? Smiley eek

Travaillez en mode Standard, et ne vous posez même pas la question du vieux modèle de boite des Internet Explorer 4 et 5, disparus de la circulation! Travaillez en mode Standard, expliquez à ceux qui ont oublié d'utiliser un Doctype en bonne et due forme qu'il faut le faire, et basta.

Non mais ho!

</mode>
Smiley eek Smiley eek Smiley eek

a écrit :
Le comportement à prendre en référence est celui de FF (le meme que opera, safari, etc...).

As-tu un DOCTYPE sur ta page? Si oui lequel? Un doctype absent ou erroné fait passer IE en mode Quirks.

Il faut donc que tu mettes le bon Doctype (très important). Et que tu retires 10px de la propriété width de ton footer (ou enlever le padding du footer et mettre un margin-right sur l'élément qui contient le texte du footer.


As-tu au moins lu la fin de mon post?... Peut-être l'ai-je mal formulé mais c'est exactement ce que je voulais expliquer... Smiley confus Il est tout de meme bon à savoir pour une personne qui débute que IE 6 meme avec un doctype n'a pas forcément un comportement "standard" et que l'on peut palier proprement à ces problèmes.

Edit : D'autant que ce modèle de boite est aussi valable pour IE6 en mode Quirks et qu'il est encore d'actualité dans la construction des IHM de clients lourd sous windows. Microsoft a voulu imposer son modèle de boite et il persiste encore malheuresement jusque dans son OS. Il n'a donc pas entièrement disparu de la circulation... (Certes on s'en fout un peu des IHM de clients lourds ici mais c'est tout de meme bon à savoir Smiley langue )
Modifié par skywalk3r (20 Mar 2008 - 14:12)
Allons allons, on va pas se chamailler pour si peu de choses, j'voudrais pas être la source d'un conflit alsatestin Smiley smile

Ok donc si j'ai bien compris le mode standard c'est width + padding + border, ca roule !

Merci à toi Florent pour ton conseil et BIG UP pour toi skywalk3r pour ton aide et ton comportement. On semble faire parti du même monde. Autant j'aime bien quand les gens se débrouillent par eux-mêmes avec un tuto et sont autonomes, autant j'adore transmettre mon savoir à des personnes impliquées, pleines de bonne volonté et désireux d'échanger Smiley cligne

Je retourne à ma débroussailleuse et manger des chips avec mon indien lol (énorme ce détournement)

HD
Modifié par Hell doc (20 Mar 2008 - 16:05)
skywalk3r, j'avais bien lu l'intégralité de ton message, je te rassure. Smiley smile
Et j'y suis allé un peu fort. Mais sur le fond je maintiens ce que je disais.

skywalk3r a écrit :
Il est tout de meme bon à savoir pour une personne qui débute que IE 6 meme avec un doctype n'a pas forcément un comportement "standard" et que l'on peut palier proprement à ces problèmes.

Non. Ça n'est pas bon à savoir pour un débutant. C'est bon à savoir pour une personne qui se perfectionne, mais pas pour un débutant. Aux débutants, on dit: utilisez un Doctype qui va bien, générez votre gabarit de base avec squelettor par exemple, et ne vous posez pas plus de questions.

Je pense que tu saisis la différence entre:
- IE ne se comporte pas correctement sur ce point, sauf si on lui dit de le faire;
et
- IE se comporte correctement sur ce point, vérifies que ta page est bien construite avec un Doctype en bonne et due forme (cf. modèle).

Question de pédagogie. Le problème de la première formulation, c'est qu'il se peut que seule la première partie de l'information passe du côté du lecteur, la deuxième étant minimisée ou oubliée.

skywalk3r a écrit :
Microsoft a voulu imposer son modèle de boite

Je me demande si le modèle de boite CSS était présent dans CSS 1 dès la publication en décembre 1996, ou s'il est apparu lors de la révision de 1999. N'ayant pas suivi l'évolution de CSS à l'époque, je n'irais pas prétendre sans plus d'informations que Microsoft a voulu imposer son modèle de boite. Smiley cligne

skywalk3r a écrit :
et il persiste encore malheuresement jusque dans son OS

Je veux bien une info là-dessus (lien qui va bien) à tout hasard. Mais cette information est totalement négligeable pour un débutant qui veut faire une page web, tu en conviendras.

PS: mes réactions, aussi vives et peu contenues soient-elles, n'ont bien entendu rien de personnel.
Modifié par Florent V. (20 Mar 2008 - 16:52)
a écrit :
Je pense que tu saisis la différence entre:
- IE ne se comporte pas correctement sur ce point, sauf si on lui dit de le faire;
et
- IE se comporte correctement sur ce point, vérifies que ta page est bien construite avec un Doctype en bonne et due forme (cf. modèle).

Tout à fait Smiley cligne .

Concernant le modèle de boite Microsoft, cette information m'a été donnée à la base par un de mes enseignants en DUT quand on apprenais à faire des IHM client lourd en Java, qui nous avais expliqué que le modele de boite MS avait toujours été ainsi (concernant la bordure à l'interieur de la largeur spécifiée), ce que j'avais pu constater avec les exercices de ce cours (et que par la suite ils n'y avaient pas eu de raisons - le respect d'un quelconque standard n'étant pas dans leur prérogatives - d'en avoir implementé un autre dans leur internet explorer).

Je n'ai pas réussi à trouvé de document la-dessus car ce doit être un problème beaucoup moins génant et beaucoup moins fréquent en client lourd (d'autant que maintenant la plupart des langages n'utilisent plus les éléments sytèmes - qui est d'ailleurs une des principales différence entre l'AWT et le Swing de Java). Mais il serait en effet intéressant d'en savoir plus la-dessus pour le côté historique de ce modèle de boîte.
Modifié par skywalk3r (21 Mar 2008 - 10:09)
Sujet clos
Aller à