% Décimale en CSS ?

Hyuunkel · 06/06/2011, 16h08

Bonjour à tous,

Je suis soucieux des détails et il m'arrive pardois d'avoir un légé décalage lors de centrage contolé en css.

Donc tout est dans le titre, je voulais juste posé une petite question rapide :

Existe t'il un moyen de faire prendre en compte les décimales en CSS ?

Exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
margin-left: 45,5%;

A la place de :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
margin-left: 46%;

Je précise qu'une "fausse solution" en "x px" est inutile.

Merci d'avance pour les réponses, Cordialement

David55 · 06/06/2011, 16h16

Et 45.5%?

Candygirl · 06/06/2011, 17h57

Hello,

Jouer avec les décimales risque de te provoquer des différences d'interprétation d'un navigateur à l'autre, en plus des diverses interprétations des arrondis. Par exemple, opera ne les prends pas du tout en compte :-/

Niveau des arrondis, webkit et opera arrondissent toujours au nb de pixels inférieur, IE 6 (et 7 ?) au supérieur dès 0.5 tandis que FF et IE8-9 distribuent les fractions de pixels pour ne pas dépasser la largeur total (le résultat escompté quand on veut du 50%/50% sur un nombre impair)

Ton décalage provient donc vraisemblablement de là. Avant de jouer avec des décimales il faudrait voir en quoi le décalage observé est gênant pour pouvoir y remédier de la meilleure manière possible.

Hyuunkel · 06/06/2011, 18h28

Citation:

Envoyé par Candygirl

le résultat escompté quand on veut du 50%/50% sur un nombre impair

Exact je travaille sur du 1009x761 bien jouer ^^, c'est pas plus dérangeant que ça au pire je passerai en 1010x762, c'était plus par curiosité qu'autre chose.

Merci bien pour ton explication précise en tout cas.

PS: si mon code t'intéresse et que tu veux y jeté un œil (j'ai enlevé les contenu pour évite le code inutile):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
.fond {
	position: absolute ; 
	top: 0 ;
	left: 0 ;
	height: 100% ;
	width: 100% ; 
	border: solid black 0px
} 
.menugauche {
	position: absolute ; 
	width: 90%;
	height: 47%;
	margin-top: auto;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: 10%;
}
.menudroite {
	position: absolute ; 
	width: 30%;
	height: 47%;
	margin-top: auto;
	margin-right:  auto;
	margin-bottom: auto;
	margin-left: 70%;
}
.contenu {
	position: relative ; 
	top: 53%;
}
.compteur {
	position: absolute ; 
	width: 0%;
	height: 0%;
	margin-top:  -10%;
	margin-right:  auto;
	margin-bottom: auto;
	margin-left: 46%;
}
-->
<!--[if IE]>
html, body {height:100%; width: 100%; margin:0; padding:0;}
<![endif]-->
</style>
</head>
<body> 
<img class="fond" src="Index/Accueil.gif" alt="">
<div class="fond">
<div class="contenu">
<div class="menugauche"></div>
<div class="menudroite"></div>
<div class="compteur"><? include("Compteur/compteur.inc"); ?></div>
</div>
</div>
</body>
</html>

NoSmoking · 07/06/2011, 20h18

Bonsoir,

Citation:

PS: si mon code t'intéresse et que tu veux y jeté un œil (j'ai enlevé les contenu pour évite le code inutile):

ce qui m'interpelle
- pas de DOCTYPE
- le code conditionnel pour IE
- la DIV globale en position absolute

Hyuunkel · 09/06/2011, 13h01

Citation:

Envoyé par NoSmoking

Bonsoir,

ce qui m'interpelle
- pas de DOCTYPE
- le code conditionnel pour IE
- la DIV globale en position absolute

Merci pour ton analyse, toutes critiques es bonne pour optimisé mon code

, pour être franc j'ai commencer à apprendre le CSS y'a à peine une semaine, donc je me débrouille comme je peux avec ce que je peux trouvé ^^

- Alors concernant le DOCTYPE, je n'es mis que mon code CSS et ma structure html la, tu remarquera qu'il n'y a pas de contenu (juste pour facilité la lecture de mon "script" ^^).

- Le code conditionnel IE es la pour un max de compatibilité, car si un utilisateur utilise un IE 7 standart, le full screen fonctionne pas sans.

- Pour le div globable je ne comprend pas de quoi tu parle a vrai dire, j'ai mon fond en absolute pour le full screen, et mes menus en absolute pour un bon positionnement dans ma page et que mon texte ne remonte pas par rapport au fond lors d'un F11 par exemple, en revanche le contenu est en relative...

NoSmoking · 09/06/2011, 18h38

Citation:

Envoyé par Hyuunkel

- Alors concernant le DOCTYPE, je n'es mis que mon code CSS et ma structure html la, tu remarquera qu'il n'y a pas de contenu (juste pour facilité la lecture de mon "script" ^^).

on ne le rapellera jamais assez le DOCTYPE change la vie...

Citation:

Envoyé par Hyuunkel

- Le code conditionnel IE es la pour un max de compatibilité, car si un utilisateur utilise un IE 7 standart, le full screen fonctionne pas sans.

pourquoi ne pas le mettre en commun, comme cela se pratique très souvent?

Citation:

Envoyé par Hyuunkel

- Pour le div globable je ne comprend pas de quoi tu parle a vrai dire, j'ai mon fond en absolute pour le full screen, et mes menus en absolute pour un bon positionnement dans ma page et que mon texte ne remonte pas par rapport au fond lors d'un F11 par exemple, en revanche le contenu est en relative...

tu mets ton image en fond background de la DIV globale et dans ce cas elle peut, la DIV, être en positionnement normal...

Hyuunkel · 10/06/2011, 14h13

Citation:

Envoyé par NoSmoking

on ne le rapellera jamais assez le DOCTYPE change la vie...

Tu n'as pas compris, j'en ai un doctype, ainsi qu'un contenu, je les ai seulement pas mis dans la citation de mon code, inutile puisque c'est seulement de la structure de ma page dont l'on parle...

Citation:

Envoyé par NoSmoking

pourquoi ne pas le mettre en commun, comme cela se pratique très souvent?

Effectivement j'ai modifié cela, je croyais que ce paramètre s'appliquait qu'a IE...

Citation:

Envoyé par NoSmoking

tu mets ton image en fond background de la DIV globale et dans ce cas elle peut, la DIV, être en positionnement normal...

J'avais essayer de procédé ainsi au début de la conception de la page, seulement avec cette méthode je n'avais pas réussi à avoir une page "auto-size" en fonction des résolutions et correctement positionné avec mes bloc...
D'où la "bidouille" que j'ai faite qui fonctionne parfaitement

NoSmoking · 10/06/2011, 16h06

Citation:

Envoyé par Hyuunkel

Tu n'as pas compris, j'en ai un doctype, ainsi qu'un contenu, je les ai seulement pas mis dans la citation de mon code, inutile puisque c'est seulement de la structure de ma page dont l'on parle...

si si j'avais compris mais...
on ne le rappellera jamais assez le DOCTYPE change la vie...

06/06/2011, 16h16	#2
David55 Rédacteur/Modérateur David S. Etudiant en alternance Inscription : août 2010 Messages : 1 167 Détails du profil Informations personnelles : Nom : David S. Âge : 22 Localisation : France, Paris (Île de France) Informations professionnelles : Activité : Etudiant en alternance Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : août 2010 Messages : 1 167 Points : 2 304 Points : 2 304	Et 45.5%? __________________ Vous trouverez ma page perso avec des tutoriels sur Android et BIRT au lien suivant : http://dsilvera.developpez.com N'oubliez pas de voter pour les messages dont la réponse est pertinente (en bas à droite du cadrant) Vous voulez afficher du code : Votre problème est résolu : Pas de question technique par MP ! David55
	10

06/06/2011, 17h57	#3
Candygirl Modératrice Inscription : juillet 2006 Messages : 1 529 Détails du profil Informations personnelles : Sexe : Âge : 40 Localisation : Suisse Informations forums : Inscription : juillet 2006 Messages : 1 529 Points : 1 869 Points : 1 869	Hello, Jouer avec les décimales risque de te provoquer des différences d'interprétation d'un navigateur à l'autre, en plus des diverses interprétations des arrondis. Par exemple, opera ne les prends pas du tout en compte :-/ Niveau des arrondis, webkit et opera arrondissent toujours au nb de pixels inférieur, IE 6 (et 7 ?) au supérieur dès 0.5 tandis que FF et IE8-9 distribuent les fractions de pixels pour ne pas dépasser la largeur total (le résultat escompté quand on veut du 50%/50% sur un nombre impair) Ton décalage provient donc vraisemblablement de là. Avant de jouer avec des décimales il faudrait voir en quoi le décalage observé est gênant pour pouvoir y remédier de la meilleure manière possible. __________________ Les bons réflexes: avant de poser une question: règles \| faq \| tutoriels \| recherche clarté, politesse, vocabulaire et orthographe soignés = efficacité remercier ceux qui ont pris le temps d'aider et si c'est le cas
	40

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email