1485 sujets

Web Mobile et responsive web design

[Résolu] Pourquoi nav 8btn x12% > 100% ? (si < 714px)

J'applique la méthode de responsive design de BoilerPlate :
button{width: 100%; max-width: 12%;} /* 8 boutons horizontaux plein écran */

Or, mon 8ème bouton passe à la ligne lorsque la largeur de l'écran devient inférieure à 714px !
(ou inférieure à 365px si button max-width: 11.5%)

J'ai pourtant supprimé toutes les bordures éventuelles !
Et le texte intérieur ne pousse pas le bouton à être plus large !
Comment est-il possible qu'en ne gérant que des pourcentages, on puisse avoir des débordements ?

Testez vous-même cette page HTML sur JSBin : http://jsbin.com/nibepoji/1/edit

Smiley eek Smiley biggrin Smiley sweatdrop
Ca y est ! J'ai trouvé la réponse en voulant réduire la taille d'affichage de mon code.
C'est ce fichu saut de ligne dans le HTML qui est considéré comme un caractère entre les boutons !
Bon... Je soumets quand même ce problème dans le forum, au cas où ça aiderait quelqu'un à se rappeler de cette évidence Smiley rolleyes ... Tssss !

<!doctype html>
<html>
<head>
	<style>
		button, nav{
			text-align: center;
			border: 0; padding: 0; margin: 0;
		}
		button{
			width: 100%;
			max-width: 12%; /* 12% x 8 = 96%  < 100% !! */
		}
	</style>
</head>

<body>
  <p>Redimensionnez la largeur de l'écran :</p>
	<nav>
		<button>1</button>
		<button>2</button>
		<button>3</button>
		<button>4</button>
		<button>5</button>
		<button>6</button>
		<button>7</button>
		<button>8</button>
	</nav>
	<script>
		window.onresize = function(){
			document.getElementById('largeur').innerHTML = window.innerWidth;
		}
        // avec 12%, le bouton 8 est reporté à la ligne lorsque l'écran passe de 714 à 713 pixels de large
       // avec 11.5%, le bouton 8 est reporté à la ligne lorsque l'écran passe de 365 à 364 pixels de large
	</script>
  <p>Largeur de l'écran : <span id="largeur"></span> pixels</p>
<p>Trouvé : c'est ce fichu saut de ligne dans le HTML qui est considéré comme un caractère entre les boutons !</p>
    <nav>   
<button>1</button><button>2</button><button>3</button><button>4</button><button>5</button><button>6</button><button>7</button><button>8</button> 
	</nav>
</body>
</html>

Modifié par Gill (21 Apr 2014 - 14:06)
Voilà donc une exemple tout simple de barre de navigation 8 boutons en Responsive Web Design
<!doctype html>
<html>
<head>
	<style>
		button, nav{
			text-align: center;
			border: 0; padding: 0; margin: 0;
		}
		button{
			width: 100%;
			max-width: 12.5%; /* 12.5% x 8 = 100% */
		}
	</style>
</head>

<body>
  <p>Redimensionnez la largeur de l'écran :</p>
	<nav>
		<button>1</button><!--	
		--><button>2</button><!--	
		--><button>3</button><!--	
		--><button>4</button><!--	
		--><button>5</button><!--	
		--><button>6</button><!--	
		--><button>7</button><!--	
		--><button>8</button>
	</nav>
</body>
</html>
Sujet clos
Aller à