Marge sur le côté et Foundation

Bonjour

J'utilise le framework Foundation, et je ne suis pas très douée en CSS..

J'aimerai savoir s'il est possible de réduire la marge entre el cadre de la fenêtre et le contenu de la page lorsqu'on utilise la grille ?

En effet je trouve qu'elle est vraiment trop grande est que ça fait vide...

Par exemple, ce code :

<div class="large-12 columns">
	<div class="row">
		test
       </div>
 </div>

Va me produire une marge entre le cadre de la fenêtre et test, que je trouve vraiment trop grande...
Je ne sais pas du tout quoi manipuler dans mon fichier CSS pour reduire cette marge, ni si c'est possible...
Je voudrais que cela s'applique à chaque fois que j'utilise la grille.

Quelqu'un aurait il une idée? est ce possible?

Merci beaucoup d'avance !

Bonjour,

pour mofifier la marge (droite, gauche, haute et basse) de la 1ère div, et la passer par exemple à 10 pixels :

.large-12 {margin:10px;}

Pour ne modifier que la marge gauche :

.large-12 {margin-left:10px;}

Si le résultat n'est pas bon, on peut utiliser les facilités données par le navigateur pour voir les propriétés css d'un élément : faire 'Bouton droit de souris' sur l'élément (ici, sur 'test') et choisir 'Inspecter l'élément'...

Notez qu'on peut utiliser soit la classe large-12, soit la classe columns, pour atteindre la div.

Pour modifier visuellement une marge, on peut utiliser margin... ou padding !

CSS est un vaste sujet, et il existe sur alsacreations de bons livres et un très bon tuto en ligne. Il est nécessaire d'avoir une base suffisante avant de commencer à utiliser css.
Modifié par jlon (29 Jul 2014 - 16:07)

Bonjour et merci de votre réponse

Je pense que je me suis mal exprimée...

Si j'applique ce que vous me dites, alors celà ne fait qu'augmenter la marge déjà imposée par le framework Foundation que j'utilise.

Lorsqu'on utilise la grille par le biais de la classe row ou large-x, alors la largeur de la grille est fixe et il y a une marge entre le bord de la fenetre et le "cotntenu" de la grille.
Je m'explique en image :
Pour ce code: (issu du site du framework)

<div class="row">
<div class="large-12 columns centered-text">
<h2>Let Us Help You</h2>
<h4 class="subheader">Where ever you are, count on us</h4>
<p>We've made Foundation the lightest responsive framework so that it's fast and easy to use. But we understand that sometimes folks get stuck. That's why we're available to answer your questions and you can hit us up on any of these channels.</p>
</div>
</div>

le resultat est le suivant :


Je souhaite reduire la marge imposée par la grille, là où j'ai mis des flèches noires...

(re)Bonjour,

Avec votre navigateur préféré, faîtes 'Bouton droit de souris', puis 'Inspecter l'élément', là ou vous avez mis une flèche noire, et vous verrez d'une part sur quel élément il faut agir, d'autre part le css liè à l'élément. A priori, dans votre cas, l'élément concerné est soit 'row', soit 'body'.

Si vous réduisez la largeur de la fenêtre, les marges droites et gauches diminuent t'elles ? si oui, les marges sont peut-être définies en 'auto', ce qui permet de centrer un contenu dont la largeur est inférieure à celle de la fenêtre. Le peu que je connaisse de Foundation css est qu'il est prévu pour s'adapter aux différentes tailles d'écran...

Si vous avez une page en ligne, à la place de la copie d'écran...