différence de texte sous photoshop/ie

pourquoi??

23 avril 2006 à 10:52:53

Bonjour a tous

J'ai commencé a faire mon design sous photoshop. Voici un rendu:

http://img96.imageshack.us/img96/5052/designdeuxiemejetcopie4ey.jpg

Puis, j'ai commencé à le coder.Voici le résultat obtenu sous ie, alors que j'ai respecté les polices et tailles de caractères que j'avais utilisé sous photoshop:

http://img96.imageshack.us/img96/1046/screendesign2gx.jpg

Comment se fait il que les polices sous ie soit aussi grosses et disproportionné, enfin aps terrible quoi....

Je peux le changer, l'améliorer??

Merci!

Anonyme

23 avril 2006 à 10:55:40

Un petit bout de code stp

axl

23 avril 2006 à 10:57:14

html:

<!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" >
<head>
<title>Axelle's Gate .... ~ Bienvenue à vous, voyageurs égarés... </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="accueil" href="design_index2.css" />
</head>
<body>

<div id="fond">
</div>

<div id="corps">

<div id="header"><img src="images/header3.jpg" class="" alt=""/></div>

<div id="menu"><p>Axelle's Gate - Livre d'or - Forum - News - Te@m - Liens</p></div>

<div id="news">
<div id="barresousmenu"><div id="titrenews"<p>>> Ouverture du site!!</p></div></div>

   <div id="menunews"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed vehicula, metus sit amet malesuada faucibus, ipsum sapien suscipit est, id commodo ante lorem vel nibh. Fusce ante elit, consectetuer aliquet, luctus eu, cursus et, dolor. Duis justo felis, nonummy id, mattis non, tempor feugiat, tellus. I nteger varius metus eu erat consequat euismod. Donec sit amet nunc. Etiam elementum nibh id ipsum. Etiam fringilla ligula sed enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur mattis eros sed dolor. Donec sapien diam, dictum in, molestie sed, tristique eget. <p> </div>

   </div>

<div id="footer"><div id="copyright"><p>Copyright © Axelle’s Gate - Tout droits réservés</p></div></div>

</div>

</body>
</html>

code css:

* { margin:0;padding:0;} /* ne pas modifier a partir d'ici */

html /* taille de reference */
{
height:100%;
width:100%;
}

body
{
background-image:url("images/fond.gif");
}

#corps
{
width:573px;
margin:auto;
background-color:#676363;
}

#header
{
width:573px;
}

#menu
{
height:37px;
width:573px;
background-image:url("images/barre_menu.jpg");
background-repeat:no-repeat;
font-family: Eurostile, Arial;
font-size:21px;
font-variant:small-caps;
font-weight:bold;
text-align:center;
padding-top:7px;
}

#barresousmenu
{
height:45px;
width:454px;
background-image:url("images/barre_sous_menu.gif");
background-repeat:no-repeat;
margin:auto;
margin-top:50px;
font-family: Eurostile, Arial;
font-size:26px;
font-weight:bold;
padding-top:8px;
text-align:left;
}

#titrenews
{
padding-left:10px;
}

#menunews
{
background-color:#EFE9E9;
width:444px;
margin:auto;
font-family:ITC Franklin Gothic, Arial;
font-size:18px;
text-align:justify;
margin-top:-8px;
padding:5px;
margin-bottom:50px;
}

#footer
{
height:37px;
width:573px;
background-image:url("images/barre_menu.jpg");
background-repeat:no-repeat;
font-family: Poor Richard, Arial;
font-size:20px;
text-align:center;
}

#copyright
{
padding-top:7px;
}

Anonyme

23 avril 2006 à 11:05:40

<div id="menunews">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed vehicula, metus sit amet malesuada faucibus, ipsum sapien suscipit est, id commodo ante lorem vel nibh. Fusce ante elit, consectetuer aliquet, luctus eu, cursus et, dolor. Duis justo felis, nonummy id, mattis non, tempor feugiat, tellus. I nteger varius metus eu erat consequat euismod. Donec sit amet nunc. Etiam elementum nibh id ipsum. Etiam fringilla ligula sed enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur mattis eros sed dolor. Donec sapien diam, dictum in, molestie sed, tristique eget.</p></div>

Tu n'avais pas fermé le <p> </p>

Tu a écrit sous Word

L'apostrophe doit être comme ceci : '
et non comme celà : ´

Pour ce qui est du CSS, je ne vois rien

axl

23 avril 2006 à 11:08:56

merci de tes précisions mais... ça ne répond aps vraiment a mon problème...

Pourquoi mon texte n'as pas la meme forme sous photoshop et ie? sous photoshop, il est beaucoup plus clair, plus lisible!

Gounlaf

23 avril 2006 à 11:11:17

Sous photoshop ou sous tout autres logiciel graphique, les polices sont "traités" grâce aux effets de police "lisse, net, épais, sans" ... ce qui fait que c'est "magnifique".
Or, sur un site, les polices ne sont pas traités, et elles perdent donc leur effet ...

axl

23 avril 2006 à 11:13:17

ok.. et y'a aucun moyen d'y remédier alors?

et sinoin, vous me cosniellez quoi comme police qui rend bien et qui pourrait aller avec mon design?

Gounlaf

23 avril 2006 à 11:17:26

Ba, les images ...
Mais, ca vaut bien pour des titres de menu, ou un header.
Mais sache que, un ordinateur, de base, n'a pas 150 000 polices, et que les plus courantes sont Verdana, Arial, Heltevica (un truc du genre xD) et sans-serif. Donc, quand tu fait ton diz, évite d'utiliser 150 polices, avec des effets dans tout les sens