[Résolu] Html+css div problème de taille et décallage

Bonjour,

j'ai un gros soucis que je ne parviens pas à résoudre.

J'ai plusieurs div qui float dans un div parent.

Toutes mes tailles sont en em et je n'ai pas modifié la taille de la police.

Mon problème est que malgré une cohérence (ou pas, vous me direz ) de mes mesure, lorsque je zoom - dézoom j'ai mon dernier block qui float qui retourne à la ligne.

j'ai recréé le problème dans un code plus simple que le mien :

<div class="container">
	<div class="row">
		<div class="quifloat"></div>
		<div class="quifloat"></div>
		<div class="quifloat"></div>
	</div>
	<div class="row">
		<div class="quifloat"></div>
		<div class="quifloat"></div>
		<div class="quifloat"></div>
	</div>
</div>

.container
{
	clear : both;
	width : 12em;
	height : 8em;
	background-color : orange;
}

.row
{
	width : 12em;
	height : 4em;
	background-color : purple;
}

.quifloat
{
	float : left;
	width : 3.8em;
	height : 3.8em;
	background-color : green;
	border : 0.1em solid black;
}

Le problème vient de la bordure qui n'adapte pas sa taille en fonction du zoom contrairement aux autres dimension en em.

Pouvez-vous me dire comment pallier à ce problème ?

Merci à vous
Modifié par Gadwin (12 Sep 2013 - 22:01)

Bonjour,

à priori le plus simple est de changer le modèle de boîte :

box-sizing: border-box;

(avec les déclinaisons -moz- et -webkit-). Cette instruction va faire en sorte que les dimensions des bordures soit comprises dans les dimensions des éléments, et pas s'ajouter comme c'est le cas habituellement.

Ça devrait résoudre ton problème - si je ne fais pas erreur bien sûr

Hello, merci pour la réponse très rapide !

ça m'embête un peu de devoir utiliser ces préfixes mais en tout cas ça marche effectivement avec cette propriété, l'autre avantage c'est que je n'ai plus à déduire la somme des bordures pour définir mes tailles ^^

Vivement qu'elle soit en release (dans mon cas ça ne gène pas tant que ça que sur certains navigateurs ça s'affiche pas très bien vu que c'était à partir d'un dézoom que personne ne fera sans doute jamais mais je voulais quand même savoir )

Bref merci

Pas de quoi !!
Concernant les préfixes c'est uniquement pour la rétro-compatibilité avec les navigateurs mobiles notamment, cette propriété est très bien supportée
Modifié par Ten (12 Sep 2013 - 16:08)

C'est noté ^^ De toute façon mon appli ne concerne que des gens qui ont un navigateur à jour ^^

Ten a écrit :

Concernant les préfixes c'est uniquement pour la rétro-compatibilité avec les navigateurs mobiles notamment, cette propriété est très bien supportée

Attention, Elle n'est pas encore implémentée sans préfixe dans Gecko et comporte encore quelques bug. L'utilisation du préfixe -moz est donc nécessaire pour la faire fonctionner sur Firefox, même pour ceux qui ont un navigateur à jour.

Je teste principalement sur Firefox (et d'ailleurs ça m'a valu pas mal de surprise étrange sur chrome et IE) du coup j'avais vu que sans le préfixe ça ne marchait pas (contrairement à IE par exemple).

Donc j'ai mis les préfixes en plus de la syntaxe potentiellement admise, je verrai si ça change.

Par contre j'ai un autre problème mais je vais essayer de l'isoler avant de faire un nouveau sujet .

Merci les Alsacreateurs