CSS/Problème avec texte justifié [Résolu/Fermé]

Signaler
Messages postés
375
Date d'inscription
mardi 13 mai 2008
Statut
Membre
Dernière intervention
15 février 2010
-
Messages postés
375
Date d'inscription
mardi 13 mai 2008
Statut
Membre
Dernière intervention
15 février 2010
-
Bonjour,

Voilà, j'ai un DIV dans lequel se trouve du texte, le DIV a une largeur définie avec une marge interne définie également et le texte a la valeur justifié. Sous IE le texte va correctement à la ligne en respectant la marge interne du DIV. Sous FireFox le texte semble être justifié oui mais ce dernier ne respecte pas la marge interne. Du coup le texte du côté droit se retrouve sous une marge "photo" en JPEG placée avec un SPAN (c'est une marge que j'ai créé sous Photoshop). Comment faire ?

Le code HTML :

<body>
<div class="text">
<span class="title">
<center>
BIENVENUE
</center>
</span>
<br>
blablabla
<br><br>
blablabla
<br><br>
blablabla
<br><br>
blablabla
<br><br>
blablabla
</div>

Le code CSS :

.text {position:absolute;top:35px;left:35px;width:500px;height:498px;padding:10px;font-size:15px;font-family:Georgia;text-align:justify} <---"Code source du DIV"

3 réponses

Messages postés
996
Date d'inscription
vendredi 9 mai 2008
Statut
Contributeur
Dernière intervention
5 novembre 2009
326
Bonsoir alexou1984,
Selon moi si tu sors ton texte du flux, c'est normal qu'il ne respecte pas les marges de ton div.
Le fait de définir sa position en "absolute" fait que tu dois le positionner "totalement à la main", que tu ne peux plus utiliser les autres éléments de ta page pour t'aider à le positionner.

Es-tu absolument obligé de le positionner en absolute ?

Cordialement,
Messages postés
375
Date d'inscription
mardi 13 mai 2008
Statut
Membre
Dernière intervention
15 février 2010
31
J'ai essayé cette petite modif mais rien à faire ça ne marche toujours pas :

Code HTML :

<body>
<div class="div"> <---"J'ai remplacé TEXT par DIV afin de créer un nouveau code de style dans ma feuille."
<span class="title">
<center>
blablabla
</center>
</span>
<br>
<span class="text"> <---"J'ai rajouté un SPAN avec la class TEXT pour englober le texte et le séparer du DIV."
Bonjour :)
<br><br>
blablabla
<br><br>
blablabla
<br><br>
blablabla
<br><br>
blablabla
</span>
</div>

Code CSS :

.div {position:absolute;top:35px;left:35px;width:500px;height:498px;padding:10px;text-align:justify}
.text {font-size:15px;font-family:Georgia;width:480px;height:478px}

Je vais devenir fou !!!
Messages postés
996
Date d'inscription
vendredi 9 mai 2008
Statut
Contributeur
Dernière intervention
5 novembre 2009
326
Bonjour,
Euh, pour mon post précédent j'ai parlé un peu vite en fait, même en absolute ça devrait marcher, vu que c'est ton div que tu passes en absolute (le conteneur du texte).

Mais en fait, avec ta toute première version, je n'ai aucun problème ni sous ie, ni sous firefox (le padding de ton div est bien respecté sous les 2 navigateurs).

Cordialement,
Messages postés
375
Date d'inscription
mardi 13 mai 2008
Statut
Membre
Dernière intervention
15 février 2010
31
Alors est-il possible que les dimensions sou IE et FF ne soient pas exactement identiques ? Parce que comme je te l'ai dit par-dessus le DIV se trouve une marge en JPEG que j'ai placé avec un SPAN en absolute de manière à masquer le bord du DIV. Sous IE, le texte retourne à la ligne avant d'atteindre la marge, sous FF le texte fini sous la marge avant de retourner à la ligne, je ne sais pas si tu vois ce que je veux dire !? Si je ne peux rien faire, y a t-il un moyen de faire en sorte que l'utilisateur soit redirigé vers une URL précise en fonction de son navigateur ? Ou y a t-il un moyen d'appeler une feuille de style différente en fonction du navigateur de l'utilisateur ?