[Dev Web] police: pt ou px? [Résolu/Fermé]

Messages postés
43
Date d'inscription
mardi 6 juillet 2004
Statut
Membre
Dernière intervention
24 janvier 2008
- - Dernière réponse : paupiette
Messages postés
43
Date d'inscription
mardi 6 juillet 2004
Statut
Membre
Dernière intervention
24 janvier 2008
- 15 mars 2006 à 11:51
Bonsoir à tous!

J'aurais une petite question, plus anecdotique qu'autre chose mais je n'arrive pas à trouver une réponse sur le net...

Je suis en train de développer un site Web et je me demandais quelle était la différence entre un pixel (px) et un point (pt) au niveau de l'affichage de texte?

Je sais bien ce qu'est un pixel, en particulier que ce n'est pas une unité absolue et que donc ça peut être gênant dans la création d'un site web si l'on se retrouve avec une résolution très élevée qui affiche les caractères en tout petit!

Par contre un point est une unité absolue, et j'ai du mal à me représenter ce que c'est... (il me semble que la taille de la police est en points dans la majorité des éditeurs textes)

Sinon quelle est selon vous la meilleure "unité" pour afficher du texte html? Je pencherai personellement pour une unité absolue...

D'autre part j'ai un autre petit problème : j'ai créé un cadre pour le titre de mon site et dans mon css j'ai mis un

 .titre{ ...
width : 100% ; 
...}


et je me retrouve à l'affichage avec un cadre qui "dépasse" (horizontalement ) le cadre de mon navigateur (une barre de défilement horizontal apparaît donc). Savez vous d'ou cela vient?
Pour info: j'utilise Mozilla Firefox 1.5.1 et mon site est fait sous Vim
(et je pense que ça n'a rien à voir mais j'ai un écran tout petit: 15 pouces)

Voilà, merci beaucoup à tous!

Bonne soirée

Paupiette
Afficher la suite 

12 réponses

Messages postés
5155
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
6 mars 2019
2607
0
Merci
Bonjur,

La meilleure façon de présenter des polices serait d'utiliser les mots-clés (x-small, small…) si IE 5 ne demandait pas des adaptations.
J'ai essayé un % dans le body et le reste défini en em.
Voir ici : http://pompage.net/pompe/designelastique/
Ça donne un résultat assez constant.

Si tu pratiques l'anglais, tu sauras tirer parti de ces bons conseils :
http://www.maxdesign.com.au/presentation/relative/
http://css-discuss.incutio.com/?page=FontSize

Ici aussi :
http://www.thenoodleincident.com/tutorials/box_lesson/font/
avec des exemples :
http://www.thenoodleincident.com/tutorials/box_lesson/font/browser.html
selon les navigateurs.

15" avec quelle résolution ?
Messages postés
43
Date d'inscription
mardi 6 juillet 2004
Statut
Membre
Dernière intervention
24 janvier 2008
10
0
Merci
Bonsoir!

Merci pour ta réponse et tous ces liens!

Mon problème du débordement de ma page est résolu, ce n'était en fait que le padding qui rajoutait quelques cm sur le côté (je pensais que le width : 100% englobait le tout mais apparemment non...)

Pour ce qui est de la police, je vais aller me documenter grâce à tes liens et je verrais mais ta solution m'a l'air bien.

Merci beaucoup en tout cas!

Bonne soirée

Paupiette
Messages postés
3141
Date d'inscription
mercredi 30 janvier 2002
Statut
Contributeur
Dernière intervention
12 avril 2017
371
0
Merci
Salut a tous,
Le padding ne concerne que les marges INTERIEURES et non exterieures (MARGIN).
Donc ton 100% est bon si c'est du texte car s'il s'agit d'une image, les dimensions en pourcentage ou cm ou pixels n'y changeront rien...
Messages postés
43
Date d'inscription
mardi 6 juillet 2004
Statut
Membre
Dernière intervention
24 janvier 2008
10
0
Merci
C'est aussi ce qui me semblait mais non, j'ai fait le test plusieurs fois: rajouter un padding me fait sortir le cadre de l'écran (le width passe donc à plus de 100%).

D'ailleurs, je ne comprend pas du tout d'ou cela vient puisque logiquement mon bout de texte qui sort (il sort car j'ai un center et le padding le décale) devrait retourner à la ligne et le cadre ne pas dépasser!
Je précise que mes tests se font sur un cadre dans lequel se trouve un titre h1 et que je n'ai mis aucune balise de non retour à la ligne...


Je ne sais pas trop qu'en penser...

voici les codes CSS de mon div .titre et de mon h1 :

.titre
{
	border-style : solid ;
	border-width : 0px ;
	border-color : black ;
	background-color : #6234a2 ;
	height : 18% ;
	top : 5px ;
	width : 99% ;
	padding : 8% ;
	position : absolute ;
}


h1
{
	font-family : verdana ;
	font-size : 200% ;
	text-align : center ;
	
}



Voilà, voilà...

Bonne soirée à tous
Messages postés
3141
Date d'inscription
mercredi 30 janvier 2002
Statut
Contributeur
Dernière intervention
12 avril 2017
371
0
Merci
Salut paupiette,
Hey !
h1
{
font-family : verdana ;
font-size : 200% ;
text-align : center ;

}

/* h1 c'est h1, t'imagine, tu lui double la taille par défaut, ça doit etre énorme ! */
En plus tu a mis un saut de ligne avant l'}

Ici, tu peux résumer à ceci:
.titre
{
border-style : solid ;
border-width : 0px ;
border-color : black ;

a:
border-style: 0px solid #000000; /* ça sera la même chose mais en plus bref ! */

D'autre part, tu doit terminer le h1 par </h1> puis passer à un paragraphe <p> ton texte avec éventuellement une classe</p>

Un conseil ! quand tu ne met qu'une police comme le verdana, ajoutes-en d'autres au cas où les visiteurs n'aient pas cette police disponible sur le bécane (arial, helvetica). Dans l'ordre dans laquelle elle seront prises en compte càd, verdana d'abord, ensuite l'arial etc....

Je suis quasiment certain que ton Pb de dépassement vient de ta feuille de style, si tu met 100%, c'est 100% de l'écran donc le texte aura des retours à la ligne.
Bon courage !
Messages postés
43
Date d'inscription
mardi 6 juillet 2004
Statut
Membre
Dernière intervention
24 janvier 2008
10
0
Merci
Salut!

J'y comprend plus rien! :-)

Alors j'ai mis un titre h1 tout petit et un padding : 8% ; et je me retrouve avec un texte minuscule dans un cadre énorme! Et je ne comprend pas pourquoi...

Voilà l'url du site:

http://corvaisi.iiens.net

et le CSS à :

http://corvaisi.iiens.net/style.css

Bon la mise en page moche vient du padding mais sans lui, tout marche nickel!!!
Si quelqu'un a une explication rationnelle, je suis preneur!! :-)

Au passage, si vous avez des critiques ou des conseils pour le site, n'hésitez pas (bon c'est encore qu'une ébauche d'ébauche et on voit pas la mise en page mais bon...) !

Voilà, merci à tous et bonne soirée!

paupiette
Messages postés
3141
Date d'inscription
mercredi 30 janvier 2002
Statut
Contributeur
Dernière intervention
12 avril 2017
371
0
Merci
Salut paupiette,
Ton est très très long a ouvrir (j'ai zappé).... ???

Pourquoi t'a mis le h1 tout petit ?
h1 a une taille, tout comme h2, h3 etc jusqu'à h6...
C'est la norme. Sauf si elle ne te convient pas et que tu veux un titre plus gros.

Quant au padding en %, ça sera 8% de la largeur de ton bloc qui, je crois est de 100% ? Je trouve que c'est beaucoup. Mieux vaut fixer le padding en Pixels.
Messages postés
43
Date d'inscription
mardi 6 juillet 2004
Statut
Membre
Dernière intervention
24 janvier 2008
10
0
Merci
Salut!

Non, ne t'inquiète pas j'ai mis tout ça juste pour tester! :-)

Je voulais un texte petit dans mon cadre pour être sûr qu'il n'était pas la cause du dépassement de l'écran et je suis formel:

Avec ma configuration présente, lorsque je mets le padding 8% ; le texte sort de l'écran et sans le padding tout rentre dans l'ordre.
Et il y a largement plus de 8% de l'écran de chaque côté du titre...

Tu peux aller voir sur mon site, c'est très bizarre... (le serveur a quelques problèmes à l'heure ou j'écris ces lignes mais ça devrait être réglé très vite. Ca doit etre pour ça que le temps d'accès était très long, le serveur marche pas bien)

Bonne aprèm'
Messages postés
3141
Date d'inscription
mercredi 30 janvier 2002
Statut
Contributeur
Dernière intervention
12 avril 2017
371
0
Merci
Bin désolé,
voici ce qu'il m'affiche:
ERROR
The requested URL could not be retrieved

--------------------------------------------------------------------------------

While trying to retrieve the URL: http://corvaisi.iiens.net/

The following error was encountered:

Connection Failed
The system returned:

(111) Connection refused
The remote host or network may be down. Please try the request again.

Your cache administrator is root.


???
Messages postés
43
Date d'inscription
mardi 6 juillet 2004
Statut
Membre
Dernière intervention
24 janvier 2008
10
0
Merci
Bonsoir!

Désolé le serveur a été down toute la journée d'hier mais tout est revenu à la normale maintenant! :-)

Bonne soirée

Paupiette
Messages postés
5155
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
6 mars 2019
2607
0
Merci
J'ai repris ce que tu as fait.
Si un peu moins “d'élasticité” te convient, j'ai mis ça ici :
http://cjoint.com/?doaH3fqYKg
http://cjoint.com/?doaJnV2Ste

Comme toi je débute et je n'ai pas trouvé de solution pour tout…
Ce ne sont que des idées, des pistes… Et je ne suis pas sûr que ces solutions soient les bonnes.

+ N'hésite pas à mettre tes menus dans des <ul> <li>.
Un seul <div> doit être suffisant pour accueillir tes menus de gauche.
Si tu utilises des <p> à la place des <br />, tu auras un plus grand contrôle dessus.

Connais-tu ces sites :
http://openweb.eu.org/css/
http://www.alsacreations.com/
http://pompage.net/articles
et, pour te faire rêver :
http://www.csszengarden.com/tr/francais/
Navigue dans “choisissez une conception”.
Le contenu est identique dans toutes les pages.
 ?
Messages postés
43
Date d'inscription
mardi 6 juillet 2004
Statut
Membre
Dernière intervention
24 janvier 2008
10
0
Merci
Salut!

Woua, le CSS Zen Garden est vraiment très impressionnant, il me reste "un peu" de marge avant d'en arriver la !!!

Alors pour le site, tu as en fait vu la version précédente avec des tailles en px, je n'avais pas mis à jour... Maintenant ça ressemble un peu plus à ce que je cherche, en fait je veux une élasticité maximale pour les menus mais garder, bien sûr une taille de police acceptable et ce quelque soit la résolution de l'écran. Qu'en penses-tu? (il y a un javascript pas terminé, c'est normal :-) ) Après il va falloir s'attaquer au design à proprement parler!

Je n'ai pas encore regardé toutes tes modif mais je vais étudier ça (beaucoup de boulot en ce moment...). En tout cas merci beaucoup pour tout !

Bonne journée

Paupiette