28173 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

Lorsque j'utilise une typo Google dans une grille la dernière colonne passe tout le temps à la ligne :


<!doctype html>
<!--[if lte IE 7]> <html class="no-js ie67 ie678" lang="fr"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 ie678" lang="fr"> <![endif]-->
<!--[if IE 9]> <html class="no-js ie9" lang="fr"> <![endif]-->
<!--[if gt IE 9]> <!--><html class="no-js" lang="fr"> <!--<![endif]-->
<head>
		<meta charset="UTF-8">
		<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge"><![endif]-->
		<title>J'aime Schnaps.it</title>
		<meta name="viewport" content="initial-scale=1.0">
		<!--[if lt IE 9]>
		<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
		<link href='http://fonts.googleapis.com/css?family=Julius+Sans+One&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
		<link rel="stylesheet" href="css/knacss.css" media="all">
		<link rel="stylesheet" href="css/styles.css" media="all">
</head>
<body>

	<div id="main" role="main" class="w60 center grid pam">
		<div class="grid4">
			<div class="mtm">Yoo ch'ai lu dans les DNA que le Racing a encore perdu contre Oberschaeffolsheim.</div>
			<div class="mtm">Verdammi et moi ch'avais donc parié deux knacks et une flammekueche. Ah so ? T'inquiète, ch'ai ramené du schpeck</div>
			<div class="mtm">du chambon, un kuglopf et du schnaps dans mon rucksack. Allez, s'guelt !</div>
			<div class="mtm">Wotch a kofee avec ton bibalaekaess et ta wurscht ? Yeuh non che suis au réchime</div>
			<div class="mtm">je ne mange plus que des Grumbeere light et che fais de la chym avec Chulien. Tiens, un rottznoz sur le comptoir</div>
			<div class="mtm">Tu restes pour le lotto-owe ce soir, y'a baeckeoffe ? Yeuh non, merci vielmols mais che dois partir à la Coopé de Truchtersheim acheter des mänele et des rossbolla</div>
		</div>
	</div>

	</body>
</html>


si je supprime la typo ma grille se met bien en place, je ne comprends pas bien pourquoi.
Modifié par erehcab (05 Oct 2013 - 16:01)
Administrateur
Bonsoir,

C'est effectivement un problème qui peut survenir avec ce type de grilles.
La police joue un rôle assez important et il est conseillé que le parent (.grid) dispose d'une fonte "classique".
Tu peux ensuite réaffecter ta police "exotique" aux enfants de .grid4.

Il y a une explication détaillée sur le blog de Pure : http://blog.purecss.io/post/60789414532/how-we-improved-grids-in-pure-0-3-0

Je vais ajouter cette manipulation dans une prochaine version de KNACSS.

Voici une façon de corriger ce problème : http://codepen.io/raphaelgoetter/pen/vLoJc

Bonne soirée Smiley smile
Modifié par Raphael (06 Oct 2013 - 22:38)