28173 sujets

CSS et mise en forme, CSS3

Problème modification taille police em, marges qui changent...

Bonjour !

J'utilise des tailles de caractères dans le format em, mais lorsque sur Internet Explorer on met une taille plus grande ou une taille plus petite, alors tout le texte qui était centré se décale... Et le texte se met l'un sur l'autre (faites le test sur la page "Restaurant et ses spécialités", en y allant en normal puis en changeant une fois sur la page).

Alors que sur Firefox, le centrage se fait normalement quel que soit la taille.

En fait, ce problème n'apparaît que lorsqu'on exécute le changement : après, une fois que IE a compris que la taille avait changé (et qu'on raffraîchit la page ou le site), les marges sont ok et les centrages aussi. Mais c'est quand même embêtant pour les premières lectures...

Que puis-je faire ?

Mon site se trouve ici, et la feuille de style là.

Merci d'avance pour votre aide.

Judith
Salut

Il faut aussi mettre la taille des contenant em pour qu’il puisse suivre la taille du txt

A+
En fait, ce n'est pas ça mon problème : j'ai mis la taille en em, ça ne change rien à mon problème (donc du coup je viens de la remettre en px car je préfère) -- le problème, c'est qu'avant de rafraîchir ça fait un affichage qui ne correspond pas, mais par contre dès qu'on raffraîchit l'affichage est normal. Y aurait-il un moyen pour que lorsqu'on demande le changement de taille des pixels la page se raffraîchisse automatiquement ???
Modifié par judithrou (04 May 2006 - 11:58)
Salut

J’ai regardé ton code !

Tu utilises un DOCTYPE XHTML 1.0 Strict
Et de tu utilise de nombreuse balises non-conforme Smiley decu :
les <iframe> et <embed> (Remplacer par des <object>);
les liens dans le <head>

De plus tu utilises plusieurs balises de mise en forme dans tes pages
alors qu'il est recommandé d’utiliser le CSS Smiley decu

Pour ton problème, il découle forcement des problèmes ci dessus car si on ouvre ta page http://www.ilsettimo.com/specialites.html directement tous les centrages sont bons

Autre problème ton pied de page quant ont redimensionne le texte sous IE ta signature (qui est en position absolue) se mélange au texte, et sous FF il disparais dans la zone blanche

Voila mes petite remarque et il y en aurais d’autres
Bonne corrections et a bientôt Smiley ravi
Modifié par gege71 (05 May 2006 - 00:07)
Merci beaucoup.

En fait je ne suis pas une pro du css, ça fait peu de temps que je m'y suis mise, alors je ne comprends pas tout encore.

Quand tu dis :
a écrit :
Tu utilises un DOCTYPE XHTML 1.0 Strict
, qu'est-ce que je devrais mettre à la place ? Quelque chose qui permettrait un allégement de ma page ?

Ensuite, que veux-tu dire quand tu me dis que je dois remplacer les <iframe> et les <embed> par des <object> ?
Les <iframe> je les ai mis dans le but d'avoir toutes mes pages sur la page d'index, sans que l'animation en Flash ne se remette à chaque fois au début (j'ai essayé avec la fonction include, mais ça fait des nouvelles pages, alors qu'avec iframe non).
Les <embed> ont été automatiquement créés par le fichier Flash. Je ne sais pas trop comment les transformer...

Pour les liens dans le <head>, je les ai mis car ce sont les liens du fichier Flash, pour qu'ils soient accessibles à une personnes n'utilisant pas Flash. Il ne faut pas les y mettre ?? -- Je viens de me rendre compte que dans le fichier Flash ils étaient dans le body. Je viens donc de les y déplacer... Mais ça ne change rien à mon problème pour l'instant.

Merci d'avance,

Judith.
Modifié par judithrou (05 May 2006 - 12:04)
Salut

Raisonnablement je ne suis pas suffisamment connaisseurs (je n’utilise pas de Flash) pour te conseiller sur l’intégration du flash ainsi que l’utilisation d’un doctype adapté, mais je pence qu’il doit y avoir des connaisseur de flash sur le forum (il te faudrait peu être mettre un nouveau post avec un autre titre)

A+
Merci. Pour le Flash, je l'ai simplifié comme écrit sur le post que tu m'as indiqué ; ça marche, mais ça ne change toujours rien à mon problème de polices.

J'ai essayé de faire ce que tu me dis pour remplacer l'iframe, mais je ne comprends pas bien comment je dois modifier ma barre de navigation Flash pour que le lien fasse aller la nouvelle page à la place de ma page "accueil.html" (là où se trouvait l'iframe avant) : tu peux aller voir ici ce que j'ai pour l'instant.

Dans mon fichier Flash, j'avais mis :

on(release){ getURL("accueil.htm","main");

Le "main" était appelé par la fonction iframe. J'ai bien essayé de corriger le problème en nommant mon object "main", mais ça ne fonctionne pas.
Que faut-il que je fasse ?

Sinon, avec le code que tu m'as donné, pour l'instant j'ai un scrolling et un frameBorder que j'avais enlevés sur ma page avec iframe avec les mentions : frameBorder="0" scrolling="no", mais si je rajoute ça au code que tu m'as proposé, ça ne marche pas...
(J'ai écrit : <object id="main" data="accueil.html" width="700" height="300" align="top" frameBorder="0" scrolling="no"> </object>).

Merci de ton aide,

Judith.
P.S. Pour ma signature, j'ai essayé de modifier le problème en mettant en position "relative", mais je n'y arrive pas. J'ai pourtant modifié la "margin-top" en faisant divers tests (d'abord en ajoutant toutes les hauteurs qui précèdent celle-là, puis en mettant 0), et rien ne marche...

Pourrais-tu me donner un peu plus d'indices pour ça aussi ?...

Merci... (Et désolée !!)
J'ai modifier ton CSS test le, et dit moi ce que tu en pense




body {
	font-family: Arial;
	margin: 0;
	padding: 0;
	background-color: #FFFFFF;
	background-repeat:repeat-x;
	scrollbar-face-color: #515E5C;
	scrollbar-shadow-color: #E3E8E8;
	scrollbar-highlight-color: #515E5C;
	scrollbar-3dlight-color: white;
	scrollbar-darkshadow-color: black;
	scrollbar-track-color: #515E5C;
	scrollbar-arrow-color: #E3E8E8;
	font-size: 0.8em;
	text-align: center;
}
#haut {
height: 100px;
}
#conteneur-haut {
	height: 100px;
	width: 700px;
	margin-left: auto;
	background-color: #556463;
	background-image:url(images/fond.jpg);
	background-repeat:no-repeat;
	border-top: solid 1px #000000;
	border-right: solid 1px #000000;
	border-left: solid 1px #000000;
	padding: 0px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
}
#milieu {
	height: 300px;
	background-color: #556463;
	background-image:url(images/test-couleur.jpg);
	background-repeat:repeat;
	width: 100%;
}
#centre0 {
	width: 700px;
	height: 300px;
	margin-left: auto;
	overflow: auto;
	border: solid 1px #000000;
	background-color: #FFFFFF;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
}
#centre {
position: absolute;
width: 698px;
left: 50%;
height: 298px;
margin-left: -350px;
overflow: auto;
z-index: 1;
}
#navig {
	width: 700px;
	height: auto;
	margin-top: 0px;
	margin-left: auto;
	background-color:#556463;
	background-image:url(images/test-couleur.jpg);
	background-repeat:repeat;
	border: solid 1px #000000;
	margin-right: auto;
	margin-bottom: 0px;
}
#photos {
	width: 700px;
	height: 96.3px;
	margin-top: 0px;
	margin-left: auto;
	background-color:#556463;
	background-image:url(images/test-couleur.jpg);
	background-repeat:repeat;
	border-top: solid 1px #000000;
	border-left: solid 1px #000000;
	border-right: solid 1px #000000;
	margin-right: auto;
	margin-bottom: 0px;
}
#pied {
	width: 700px;
	height: auto;
	margin-left: auto;
	background-image:url(images/test-couleur.jpg);
	background-repeat:repeat;
	border: solid 1px #000000;
	background-color: #556463;
	margin-right: auto;
}
#bas {
	width: 700px;
	height: 20px;
	margin-left: auto;
	margin-right: auto;
}
p.texte {
text-align:center;
color: #333333;
font-weight: bold;
font-size: 1em;
}
p.texte2 {
text-align:left;
margin-left: 30px;
margin-right: 30px;
color: #333333;
font-size: 1em;
}
p.texte3 {
text-align:justify;
margin-left: 15px;
margin-right: 15px;
color: #333333;
font-size: 1em;
}
p.titre {
text-align:center;
margin-top: 5px;
color: #333333;
font-weight: bold;
font-size: 1.8em;
}
p.titre2 {
text-align:center;
color: #333333;
font-weight: bold;
font-size: 1.6em;
}
p.titre4 {
text-align:center;
margin-left: 10px;
margin-right: 10px;
color: #333333;
font-weight: bold;
font-size: 1.3em;
}
.float1 {
  float: left;
  margin-left: 1px;
  margin-top: 0;
  width: 585px;
}
.float2 {
  float: left;
  margin-left: 1px;
}
p.adresse {
text-align:center;
margin:10px;
font-weight: bold;
font-size:0.8em;
color: #FFFFFF;
}
p.crea-sites {
text-align:right;
font-size:0.8em;
margin-top: 0.5px;
}
a:link {
text-decoration: none;
color: #FFFFFF;	
}
a:visited {
text-decoration: none;
color: #FFFFFF;
}
a:hover {
text-decoration: none;
color: #D7E3DA;	
}
a:active {
text-decoration: none;
color: #FFFFFF;
}
.presse:link {
	color: #333333;
}
.presse:visited {
	color: #333333;
}
.presse:active {
	color: #A6A6A6;
}
.presse:hover {
	color: #A6A6A6;
}
.crea:link {
	color: #556463;
}
.crea:visited {
	color: #556463;
}
.crea:active {
	color: #556463;
}
.crea:hover {
	color: #CCCCCC;
}



A+
Merci beaucoup, effectivement comme tu as fait ça permet que ma signature descende avec le reste. Ca m'a permis de voir, en plus, que j'avais fait une erreur dans l'ordre de mes layers : j'avais mis dans tous mes fichers html la barre de navigation après celle des photos, mais ça ne se voyait pas puisqu'en absolute j'avais fait l'inverse. Par contre sans l'absolute je me suis retrouvée avec la barre de navig sous les photos et pas au-dessus comme ça aurait dû...

Sinon concernant mon post d'avant (pour mon éternel problème de changement de police qui ne varie pas) : dis-moi, le remplacement de l'iframe par un object ne permet pas d'ouvrir toutes les pages au milieu de ma page index sans arrêter l'animation, comme l'iframe, n'est-ce pas ? Car mon but dans l'utilisation des iframes est justement que la page autour de l'iframe reste sans bouger, pour que l'on puisse naviguer d'une page à l'autre sans que l'animation Flash reparte à 0 (ce qui est le cas dès qu'on change de page, sans iframe). Est-ce possible avec object ?
Sinon, vois-tu un autre moyen -- encore !! -- de corriger mon problème de police qui ne se recharge pas quand on la modifie, sans qu'on rafraîchisse la page ?...

(P.S. J'ai mis tes modifs sur ma page http://www.ilsettimo.com.)

Ah, pour info je ne lirai pas ta réponse ce soir, et je pars en week-end donc je n'aurai ta réponse que mardi matin. Smiley cligne
Alors n'hésite pas à prendre ton temps pour me répondre !!

En tout cas merci encore pour ton aide pour ma signature, c'est vrai que maintenant c'est top. Smiley lol J'essaierai de retenir cette méthode pour de prochains sites !!!

Alors bon week-end,

Judith.
Modifié par judithrou (10 May 2006 - 11:07)
Bonjour ! As-tu une autre idée - suite à ce que j'ai mis dans mon mail précédent - pour (toujours) mon problème de changement de taille de ma police ?...

Merci d'avance,

Judith.
Merci Aymeric.

J'avais enlevé le "width" car à un moment donné il me posait des problèmes, mais finalement en planchant dessus j'ai vu que je pouvais trouver une solution où il arrangeait l'affichage sur tous les types d'écrans (alors qu'avant il me mettait la colonne de droite en-dessous, seulement sur certains écrans - généralement de portables - sous IE...).

Bref, a priori là mon affichage est correct partout (du moins j'espère !!).

Par contre, je suis allée voir le problème que tu avais eu, mais malheureusement il ne m'aide pas beaucoup puisque c'était tout autre chose...
Le "em" qui me concerne n'est pas la mise en italique de mon texte, mais la taille des polices indiquée dans la feuille de style.
Mon problème actuel étant le fait que je voudrais simplement que lors du changement de la taille de la police par l'internaute dans l'affichage d'IE, celle-ci s'affiche correctement du premier coup, sans qu'on aie besoin pour cela de raffraîchir la page. Ou bien, s'il existait un petit code permettant de dire que la page doit se raffraîchir lorsque quelqu'un change l'affichage, sous IE... Mais je ne sais pas si ce genre de code existe !!!!

Enfin bon, voilà, je repose mon problème à toute personne qui serait susceptible d'avoir une idée de solution...

Merci !!

Judith.
Modifié par judithrou (10 May 2006 - 16:50)
Sujet clos
Aller à