28172 sujets

CSS et mise en forme, CSS3

Texte qui ne s'aligne pas correctement

Bonjour,

J'ai un DIV conteneur, sous cette forme :


<div class="conteneur">
<p id="art">titre1</p>
<p id="sports">titre 2</p>
</div>


Mon CSS sous cette forme :

.conteneur { /* mise en place du conteneur */
	background-color:#faf2c2;
	width:172px;
	height:2356px;
	float: left; /* un autre bloc se trouve à côté et contient du texte */
	padding: 0px;
	margin: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	line-height: 15px;
	font-weight: bold;
	text-align:right;
	color: #000000;
}

#art {
	padding:0;
	margin:0;
	position:absolute;
	top: 239px;
	left: 36px;
	width: 123px;
}

#sports {
	padding:0;
	margin:0;
	position:absolute;
	top:636px;
	left:7px;
	width:150px;
}


Dans tous les navigateurs testés : Firefox Mac, Safari Mac, Firefox PC IE7 PC, tout se positionne parfaitement avec Titre1.

Mais pour titre 2 et les autres titres que je tente de mettre ensuite, j'ai toujours une ligbe de décallage avec IE PC et Firefox PC alors que c'est parfait sur FireFox Max et Safari Mac.

Si quelqu'un a une idée de ce que ça peut être ? Car j'y suis depuis 4 heures et je ne sais plus quoi faire !!
J'ai essayé de changer plein de choses (type de positionnement, marges, etc.) mais c'est toujours pareil !

Au secours !!!!
Smiley bawling
Modifié par Bjorken (08 Oct 2008 - 23:26)
Euh, un léger décalage par rapport à quoi ?

Sauf erreur de ma part, les paragraphes "arts" et "sports" ne seront positionnés par rapport au div " conteneur" que si celui-ci est lui-même positionné (ce qui ne me semble pas être le cas dans ton exemple). Dans le cas contraire le positionnement s'effectue par rapport au premier ancêtre positionné (jusqu'au <body> si besoin).

De ton CSS je comprends que le <p> arts est décalé de 36px par rapport au bord gauche de page (le <body>) et le <p> "sports" est décalé de 7px par rapport au même bord.

Comme je doute que tu parles de cela, le + simple serait peut-être de mettre un lien pour que l'on visualise le problème.

Note1 : pourquoi ne travailles-tu pas dans le flux ?
Note2 : puis-je te conseiller de relire le livre CSS2 de Raphaël page 106 et suivantes sur le positionnement absolu.
Bonsoir,

Le décalage est vertical.
Voici un lien d'exemple :
http://www.pierre-leccia.net/anduze1/region.html

... de Nature ? est parfaitement aligne dans tous les navigateurs sur Mac et PC
... de Sports ? est parfait sous Mac (Firefox et Safari) mais présente un décalage vers le bas sur PC (Firefox et IE 7).

Que je positionne ou pas d'ailleurs le bloc conteneur (ici le bandeau vertical de couleur).

Là je ne comprends vraiment pas où est-ce que je ne fais pas bien ??
Modifié par Bjorken (09 Oct 2008 - 00:17)
Si quelqu'un a une idée !!
Je me suis repenché sur le problème ce matin, je n'arrive pas à voir où est-ce que ça ne va pas !!!! Smiley bawling Smiley decu Smiley biggol
La problème est que tu as une mise en page en "absolute" au pixel près.

Suivant la configuration des navigateurs, tu auras + ou - de décalage.
Il suffit pour s'en convaincre de changer la taille du texte (sous firefox CTRL++ ou CTRL+-) pour que le décalage soit considérable. Et je ne pense pas que tu puisses y remédier sans changer ta stratégie. C'est à dire travailler dans le flux en faisant en sorte que les éléments se positionne d'eux même sans (avec le minimum de) contrainte.

Si tu ne veux vraiment pas tout changer tu peux essayer un truc. Définit un <p> pour la partie du texte sur la nature et un second sur la partie concernant le sport et positionne chacun de ces 2 <p> en absolute identiquement aux <p> d'id "arts" et "sports". Quitte à tout contraindre, il faut vraiment TOUT contraindre.

Note : J'ai trouvé le contenu de ta page "Région" très intéressante, d'autant plus que je vais passer une semaine de vacances à la Toussaint à Uzès. Bon courage.
Modifié par Merlin (09 Oct 2008 - 10:18)
Oui mais la le problème c'est que ce qui ne s'aligne pas correctement c'est les mots à gauche, donc déjà positionnées en Absolu avec une contrainte de taille, de marge, d'interlignage... enfin la totale quoi ! Et qu'ils ne s'affichent pas au même endroit suivant les navigateurs.

Même si je mets mon texte de droite en absolu dans des blocs P ça ne changera rien.

Ma seule solution va etre de mettre un seul bloc avec un background image pour simuler le bandeau de gauche avec les tritres gauches sous forme d'image. Il ne me restera donc plus que mon texte à droite sous forme texte.
C'est pas très cavalier.

Mais pourquoi CSS prévoit-il des positions Absolue si ça ne sert à rien à cause d'affichages différents ????

Merci pour ton commentaire Smiley smile
Je ne comprend pas pourquoi cela ne changerait rien. Ton problème c'est d'aligner les mots de gauche ET les paragraphes de droite. Si tu contraints QUE les mots de gauche, il y aura potentiellement des décalages suivant la taille des fonts. Mais si tu contraints AUSSI les paragraphes de droite cela devrait régler le problème. En fait, tu aligneras la droite sur la gauche, mais bon cela doit répondre à ton besoin.

La position:absolute est très interessante dans certains cas (superposition de blocs, etc...). Mais, faire une mise en page tout en absolute est, d'une part hyper difficile à maintenir (si tu ajoutes une ligne dans le § nature, tu dois modifier ton CSS ton décaler de X pixel le mot "sports" de la partie gauche, pas glop), d'autre part très dur à mettre au point (mais cela tu l'as déjà remarqué Smiley cligne )
Je ne comprends pas comment en alignant la droite par rapport à la gauche cela va me sollutionner le problème ?

Car le problème c'est que les mots de gauche ne s'affichent pas de la même manière verticalement en fonction des navigateurs ET avec pourtant les mêmes valeurs de coordonnées absolues.

Donc si j'aligne mes textes de droite sur les mots de gauches, ça va aller pour un navigateur, mais pour un autre le texte de droite ne sera plus en face des sous-titres de gauche.

Ou alors vraiment, je suis fatigué ! Smiley smile Ca reste encore possible Smiley smile
Outch....
L'idée est d'aligner la droite ET la gauche par rapport à un ancêtre commun (et pas l'un par rapport à l'autre, je me suis mal exprimé).
Je viens d'essayer, ça ne marche pas non plus.
Bou hou houuuuuuuuuuuuuuuuuuuuuuu

Bon, je vais changer la présentation.
Pas envie de lutter plus longtemps !

Merde, je rêve d'aller cultiver des patates et des carottes, au moins y'aura pas ce genre de problème. Encore que... Smiley smile

Merci à toi.
Bon , une dernière proposition, pour la route.

Coté gauche tu n'as qu'à utiliser qu'un seul paragraphe et séparer tes 2 mots d'autant de retour chariot que nécessaire. Comme coté droit tu as tout verrouillé cela devrait marché. Au moins tant que l'on n'agrandit pas trop la police de caractère, mais bon....

C'est vraiment pas terrible,mais cela devrait t'éviter de tout reprendre
Sujet clos
Aller à