Problème de gouttière avec knacss

Bonjour,
Je ne parviens pas à fixé mes gouttière à mes blocs.

j'utilise knacss pour la première fois.

La version en ligne est une vision de ce que j'aimerais obtenir mais avec des marge à droite et en bas. Mais la méthode utilisé ne doit pas être la bonne.

Ma démarche est la suivante.

1) une div .container qui est fixé à 960px centrer
2) une partis header
3) deux sections aligner cote à cote w66 et w33 (j'ais essayer avec une div supplémentaire en gid2-1).
4) Ces deux section contiennent des blocs.
Pour la première section il y à trois bloc deux cote à cote sur un troisième.(w50 + w50 et w100).
Pour la deuxième section il y à cinq bloc présenté deux cote à cote sur deux autres bloc cote à cote sur le cinquième.

Pour vous rendre compte de ce que j'aimerais je vous laisse l'adresse du site :

alidufresne.fr/index-portail.html

Merci et A+
Modifié par ali13 (15 Feb 2013 - 14:18)

Bon j'ai trouvé une partie de la solution, enfin je pense.

Mais ma solution présente un problème sur mon smartphone.

Pour voir la solution:
www.alidufresne.fr/index-portail2.html

A+

Bon je fait la conversation tout seul sa sent les vacances

Je viens de regarder le tutoriel encore une fois et je voie qu'il y a une class gut, Mais je ne la trouve pas dans le fichier. Cela fait il partie de la personnalisation du fichier ou est-ce que ce serait un ajout à télécharger ?

Si vous avez la réponse merci de m’aiguiller.

merci A+

Il n'y à personne qui utilise Knacss ?

L’énoncer de mon problème n'est pas suffisamment claire ?

Là actuellement je cale sur la première section. C'est le dernier bloc qui ne se comporte pas comme je le désire. il faudrait qu'il prenne tout l'espace sous les deux bloc. La non il ne veut pas il se décale et ne prend pas tout l'espace.

	<div class="container grid2">
<!--section 1-->
			<section class="gris-c grid2">	
			<!--<h2 class="">section 1</h2>-->
			<div class="rose"><img class="right" src="images/dark/appbar.adobe.aftereffects.png" alt="img-test">
			<h5 class="h5-like">actualité</h5>
			</div>
			
			<div class="vert"><img class="right" src="images/dark/appbar.smiley.angry.png" alt="img-test">
			<h5 class="h5-like">mobilité</h5>
			</div>
		
			<div class="rouge">	
			<img class="right" src="images/dark/appbar.smiley.cry.png" alt="img-test">
			<h5 class="h5-like">Agenda</h5>
			</div>
			</section> ...

Modifié par ali13 (15 Feb 2013 - 14:19)

Bon je laisse tombé perdu trop de temps

je garde ouvert on ne sais jamais peut être qu'une personne voudras bien ce penché sur le problème.

A+

[quote=ali13]Il n'y à personne qui utilise Knacss ?


malheuresement non .

Hello,

Pas vraiment sûr d'avoir tout compris, mais ça devrait plutôt bien fonctionner en utilisant les classes grid :
http://codepen.io/raphaelgoetter/pen/aeqDu

ali13 a écrit :

Je viens de regarder le tutoriel encore une fois et je voie qu'il y a une class gut,

Normalement il n'y a plus de classe gut, où l'as tu trouvée ?
Modifié par Raphael (15 Feb 2013 - 21:26)

Sur le slideshare dans la partie positionnement.

Page :45,46,47.

Tu trouves ces lignes:

conteneur = div class=" line w600p gut2"
conteneur = div class=" line w600p gut3"
conteneur = div class=" line w600p gut4"

J'en ai déduit qu'il y avais une class pour gérer les marges.

voilà A+

ali13 a écrit :
Sur le slideshare dans la partie positionnement.

J'en ai déduit qu'il y avais une class pour gérer les marges.

voilà A+

Ah oui tiens, il va falloir que je le remette à jour

Le mieux est de se fier au document source : http://knacss.com/knacss.html

Oui c'est vrai, mais j'ai pensé à tort que le fichier en ligne pouvait avoir un oubli et que le slideshar était plus sur car j'imagine que c'est ton fichier de démo en conférence.
Pour le reste je suis arrivé à une solution qui est presque similaire à la tienne mais moins propre.

alidufresne.fr/index-portail2.html

	<div class="line grid2-1">
	
		<section class="item">
		<!--<h3>test</h3>-->
			<div class="actualite vert w50 left mr1">
			<img class="right" src="images/dark/appbar.adobe.aftereffects.png" alt="img-test">
			<h5 class="h5-like">actualité</h5>
			</div>
			
			<div class="mobilite jaune mod mb1">	
			<img class="right" src="images/dark/appbar.smiley.angry.png" alt="img-test">
			<h5 class="h5-like">mobilité</h5>
			</div>
			
			<div class="agenda vert mod">
			<img class="right" src="images/dark/appbar.smiley.cry.png" alt="img-test">
			<h5 class="h5-like">Agenda</h5>
			</div>		
		</section>
		
		<section class="item">
	<!--	<h3>test</h3>-->
			<div class="formation bleu txtcenter w50 left mr1 mb1">
			<img src="images/dark/appbar.smiley.frown.png" alt="img-test">
			<h5 class="h5-like">formation</h5>	
			</div>
			
			<div class="carriere jaune txtcenter mod mb1">
			<img src="images/dark/appbar.smiley.glasses.png" alt="img-test">
			<h5 class="h5-like">carrière</h5>	
			</div>
			
			<div class="regie violet txtcenter w50 left mr1">
			<img src="images/dark/appbar.smiley.grin.png" alt="img-test">
			<h5 class="h5-like">régie</h5>
			</div>
			
			<div class="temps prune txtcenter mod">
			<img src="images/dark/appbar.smiley.grumpy.png" alt="img-test">
			<h5 class="h5-like">temps</h5>	
			</div>
			
			<div class="sociale rose mod mt1">
			<img class="right" src="images/dark/appbar.smiley.happy.png" alt="img-test">
			<h5 class="h5-like">sociale</h5>	
			</div>		
		</section>
		
	</div>

Et en prime je suis posé la question. Pourquoi .item si c'est le même comportement que .mod ?

Merci A+

ali13 a écrit :
Et en prime je suis posé la question. Pourquoi .item si c'est le même comportement que .mod ?
Merci A+

Voilà une excellente question
A vrai dire, je l'ai conservé pour permettre de faire certaines différences dans les styles (par exemple ajouter systématiquement un padding dans les .item)

Bonjour,

Je revient sur le sujet car j'ai effectuer d'autre test sur ma maquette du moment.

Là pour ce test j'ai supprimé mes deux sections j'ai toujours mes 8 bloc présenter comme précédemment mais je n'utilise pas les grid.

j'ai un conteneur en .mod dimensionner à 1003px. Dans ce conteneur je place mes DIV de manière à obtenir l'affichage voulu. Jusqu'ici tous vas bien.

La ou je pêche, surement une mauvaise compréhension de ce que c'est box-sizing.
Donc là ou je pêche disais'je c'est avec les marges mr1 ou ml1 ...

Car dès que je met ces class à mes bloc, le Template explose. Je pensai que c'était un problème de place mais en augmentant la taille de mon conteneur exagérément sa ne marche pas plus.

Pourquoi ?

Sur ce model je ne peut pas placer mes marges il explose.

<div class="container mod w100 jaune">
	<div class="rose actualite w30 left">bloc1</div>
	<div class="rose mobilite w30 left ">bloc2</div>

	<div class="bleu formation w20 right">bloc4</div>
	<div class="vert carriere w20 right">bloc5</div>
	<div class="violet regie w20  right ">bloc6</div>
	<div class="orange temps w20 right ">bloc7</div>
		
	<div class="rose agenda w60 left">

	</div>

	<div class="rose sociale w40 right">bloc8</div>
	
</div><!--fin de container -->

Le même code mais en pixel:
Là, placer des marges c'est possible bien que je n'arrive pas encore à rendre comme je le veux.

<div class="container mod w960p jaune">
	<div class="rose actualite w300p mr1 left">bloc1</div>
	<div class="rose mobilite w300p mr1 left ">bloc2</div>

	<div class="vert carriere w150p mr1 right">bloc5</div>
	<div class="bleu formation w150p mr1 right">bloc4</div>
	<div class="orange temps w150p mr1 right ">bloc7</div>
	<div class="violet regie w150p  mr1 right ">bloc6</div>
<!-- agenda -->			
	<div class="rose agenda w600p left">
		bloc3
	</div>
<!-- FIN agenda -->	
	<div class="rose sociale w300p right">bloc8</div>
	
</div><!--fin de container -->

J'aimerais comprendre, et si quelqu'un pouvait me placer sur la bonne voie.

Merci A+

allo !

Plus personne pour un coup de main ?

merci a+

Bonjour,

Je dirai qu'en % les marges sont ajoutées aux largeurs des blocs (box-sizing), donc tu es systématiquement à plus de 100% si la somme des blocs seuls fait déjà 100%.

Dans l'autre cas tu les prends en compte dans le calcul.

Merci philivert

Je pense donc que ne 'est pas encore compris ce qu'est box-sizing.

Dans une démarche responsive web design est on contraint à utilisé les % sur nos bloc ?
Parce que je doit faire passer mes quatres (4,5,6,7) bloc sous le bloc agenda et le dernier bloc lui reste toujours en bas.

Merci a+

Je crois que box-sizing = bordures + padding's + width, les marges sont à l'extérieur de la box.
Les pros confirmeront (ou pas ).

Pour le responsive, tu dois pouvoir rester en px, mais il faut jouer sur les valeurs en fonction des résolutions.
Il y a d'ailleurs un exemple KNACSS qui est fait comme ça : responsive.html

Bon je pense avoir compris ou je bloquais.

1) mauvaise compréhension de box-sizing malgré l'explication de raphael (mais bon là on ne peut plus rien pour mois) ici sur son blog et là sur le slideshar. Non moi je comprenais que les margin était compris dans le mode de calcule, alors que nul pars cela étais écris. Et donc forcément quelque soit ma façon de faire je n'ais pas assez de place.

2) une mauvaise conception de ma maquette au départ. Le fait de placé mes bloc dans deux bloc conteneur n'était pas judicieux pour faire glisser mes blocs 4,5,6,7 entre mes blocs 1,2 et le bloc 3 agenda.

Sinon je crois que j'ai du irriter Raphael qui à remanier sa page de présentation avec des exemples encore plus claire. Et il y à une petite phrase qui à fait son apparition que je prend pour mon compte bien que je ne soit pas d’accord avec.

a écrit :
Prenez le temps lire toutes les indications et pistes (consulter le tutoriel fourni par exemple) avant de vous jeter dessus : KNACSS n'est pas forcément destiné aux débutants complets et un grand pouvoir implique de grandes responsabilités.

Là j'ai pris une claque, mon niveaux ne vaut pas plus que celui d'un débutant complet

Non moi je pense que même les débutants doivent ce jeter dessus, mais il faut bien lire et surtout comprendre ce que l'on fait.

Allez merci encore et A+