[Résolu] Addition de marge?

Bonjour,

Je me demandais s'il y a un moyen de faire une addition de marge.

Je m'explique.

Supposons que j'ai le CSS suivant:

div.marge1 {
    margin-left: 10px;
}

et qu'ensuite j'ai le CSS suivant:

div.marge2 {
     margin-left: 10px;
}

Alors je me demandais s'il y a un moyen que la marge totale d'un div soit de 20px.

<div id="corps">
   <div class="marge1 marge2">Malheureusement, ce div n'a pas 20 pixels de marge.</div>
</div>

J'espère que ma question est claire.


Bye, DoubleV
Modifié par DoubleV (19 Aug 2005 - 19:15)

Mais où est-ce que j'avais la tête?

<div id="corps">
<div class="marge1">
<div class="marge2">Heureusement, ce div a 20 pixels de marge.</div>
</div>
</div>

Mais parreil, est-il possible de faire une addition de marge sans avoir recour à l'utilisation de deux divs?

Trop de div, tue les divs!

Bye, DoubleV
Modifié par DoubleV (19 Aug 2005 - 04:59)

Je comprends bien ta question, mais pourquoi vouloir additionner deux marges? Peut-être avec un exemple concret, mais dans le cas présent, un seul DIV avec une marge de 20px aurait suffit. Peux-tu en dire plus?

Pour ce qui est de

class="marge1 marge2"

pour sûr, la syntaxe est incorrecte. Il me semble avoir vu quelque part la possibilité d'user de deux classes, mais j'ai probablement rêvé. Sinon, c'est anti-standard ou je ne sais quoi.
Modifié par tidanone (19 Aug 2005 - 05:56)

tidanone a écrit :

Pour ce qui est de

class="marge1 marge2"

pour sûr, la syntaxe est incorrecte. Il me semble avoir vu quelque part la possibilité d'user de deux classes, mais j'ai probablement rêvé. Sinon, c'est anti-standard ou je ne sais quoi.

Non non ! Cette syntaxe est tout à fait correcte et très bien supportée d'ailleurs.

Trucs et astuces CSS a écrit :

Plusieurs noms de class

Vous pouvez attribuer plusieurs noms de class à un même élément. Ce qui vous permet d'écrire plusieurs règles pour définir différentes styles, et ensuite d'appliquer seulement celles dont vous avez besoin :

<img src="foo.gif" class="special" />
<img src="bar.gif" class="royaltyfree" />
<img src="baz.gif" class="royaltyfree special" />

Pour styler les images libres de droits différemment des autres, vous pouvez définir une règle pour les éléments ayant royaltyfree comme nom de class, et si vous voulez mettre en évidence les images tombant sous le coup d'une offre spéciale vous pouvez définir une autre règle CSS avec special comme nom de class.

Le code CSS pourra alors ressembler à ceci :

.royaltyfree { border:2px solid #666; }
.special {
padding:2px;
background:#ff0;
}

Toute image ayant special comme nom de class apparaîtra sur fond jaune. Celles ayant royaltyfree comme nom de class auront une bordure. Et celles ayant les deux noms de class en même temps apparaîtront à la fois avec une bordure et sur fond jaune.

Et vous pouvez pousser l'idée encore plus loin — ceci n'est qu'un exemple. Choisissez des noms de class significatifs qui décrivent ce qu'un élément est ou fait, plutôt que ce dont il a l'air.

http://w3qc.org/docs/trucs-et-astuces-css-1.html

En ce qui concerne l'addition des marges, je ne vois pas trop l'intérêt

Une chose est certaine, en CSS2, les marges horizontales ne fusionnent jamais.

http://www.yoyodesign.org/doc/w3c/css2/box.html#collapsing-margins
Modifié par Stephan (19 Aug 2005 - 06:21)

Bonjour,

La syntaxe:

<div class="marge1 marge2">...</div>

...est parfaitement valide. Elle permet à l'élément de cumuler les propriétés des deux classes, selon les règles de la cascade.

Mais les valeurs de marges ne sont pas additionnées, en effet : les deux sélecteurs .marge1 et .marge2 ayant la même spécificité, le dernier appliqué l'emporte sur le premier.

Enfin, il n'existe aucun moyen en CSS2 d'additionner des valeurs de marge de cette manière. La solution consiste à inclure les deux div l'une dans l'autre, comme dans le second message ci-dessus, ou bien, éventuellement, à jouer sur le padding d'une classe et la marge de la seconde.

<edit>Je n'avais pas vu que ma réponse se croisait avec celle de Stephan </>
Modifié par Laurent Denis (19 Aug 2005 - 07:04)

Hooo, je vois!! Désolé alors pour la mésinformation Je trouvais juste étrange que les noms de classes soient écrites avec un espace, à la place de la virgule. Ça fait juste... différent

Il est normal que ce soit "différent"

Tu es habitué aux virgules comme séparateur en CSS. Mais ici, c'est un code HTML : à formats différents, séparateurs différents...
Modifié par Laurent Denis (19 Aug 2005 - 07:05)

Laurent Denis a écrit :
Bonjour,

La syntaxe:

<div class="marge1 marge2">...</div>

...est parfaitement valide. Elle permet à l'élément de cumuler les propriétés des deux classes, selon les règles de la cascade.

. . . . .

Bonjour,

Absolument d'accord !

De plus cette syntaxe peut s'avérer très économe, en permettant la mise en commun de certaines propriétés.

J'entends par "économe" le fait qu'elle permet de condenser les feuilles de style en écrivant des classes "partielles" dont on utilisera le style via cette syntaxe.

Exemple :

.bo { font-weight: bold;}
.bleu { color: #00f; }
.rouge { color: #f00; }
.pola { font-family: arial, helvetica, sans-serif; }
.polt {font-family: times, etc.... }

Cela permet de combiner :

class="bo bleu polt"
class="bleu pola"
class="bleu polt"

ce qui s'avère globalement plus court que d'écrire :

.bleubopolt {
font-weight: bold;
color: #00f;
font-family: times, etc....}
.bleupola {
color: #00f;
font-family: arial, helvetica, sans-serif; }

et ainsi de suite, à condition que le nom de chaque classe soit court, ce qui revient à exclure des noms tels que :

.police_graisse_bold { font-weight: bold;}
.police_couleur_bleue { color: #00f; }

car la répétition dans les pages de ces noms longs fait perdre tout le bénéfice de cette méthode.


Avec le même degré de compression (suppression des tabulations et retours à la ligne inutiles) ou de non compression d'ailleurs, on obtient des fichiers plus légers car contenant moins de caractères et qui se chargeront donc plus rapidement.

Il peut sembler curieux d'invoquer cette question de temps de chargement à l'heure d'un ADSL conquérant, mais ce serait oublier que plus de 40% des internautes français ne sont pas connectés via ADSL (selon certaines stats que l'on trouve sur le web) et que l'ADSL est rare ou inexistant dans un certain nombre de pays (francophones ou non) qui néanmoins surfent sur les sites français (étudiez bien les stats de vos sites).

Pour tous ceux qui utilisent des connexions lentes la première caractéristique d'accessibilité d'un site sera peut-être (et même probablement) la faculté de pouvoir charger les pages dans un temps suffisamment court : de là l'intérêt de gagner des octets, et notamment de compresser les scripts.

Cette compression peut utiliser ob_gzhandler ou zlib compression (avec les précautions à prendre selon le navigateur, voir les documentations officielles php) ou consister simplement dans la suppression de toutes les indentations, tabulations, retours à la ligne et espaces inutiles.

Hum... Etant moi-même en bas-débit et par ailleurs utilisateur de mobiles sur lesquels la question du débit et des temps/coûts de connection est également cruciale, je dirais qu'à l'usage, l'optimisation forcenée du code CSS ne fait pas de différence vraiment significative :
- Le cas le plus critique est celui d'une CSS handheld sur un mobile : mais compte-tenu des capacités de présentation réduites de celui-ci, ces CSS se réduisent de toutes façons à très peu de propriétés et de règles, sur lesquelles l'optimisation en supprimant des espaces, en combinant des classes, en utilisant les propriétés raccourcies, etc. n'aura qu'un effet marginal.
- dans ce cas, comme dans celui d'une CSS screen plus volumineuse, et d'un accès bas-débit desktop, l'optimisation utile se fait avant tout dans la compression des données, dans les formats d'images et d'objets multimédias, dans la suppression des balisages HTML de présentation au profit de CSS (tableaux, font, etc.), et dans l'allègement des scripts pour les machines lentes à les traiter.

Il y a bien un gain avec les économies de syntaxe CSS, mais il faut reconnaître qu'il est vraiment marginal, comparé aux autres optimisations possibles.
Modifié par Laurent Denis (19 Aug 2005 - 08:06)

Laurent Denis a écrit :
. . . . . .

Il y a bien un gain avec les économies de syntaxe CSS, mais il faut reconnaître qu'il est vraiment marginal, comparé aux autres optimisations possibles.

Je te l'accorde, ce gain est marginal, mais une accumulation de gains marginaux peut donner un gain significatif.

J'avais testé différentes solutions (en chiffrant les volumes de données) et cette addition de différents petits gains est souvent intéressante.

Par ailleurs j'ai omis de mentionner un avantage de la méthode de juxtaposition de classes : quand on travaille en langage serveur (php pour ce qui me concerne) cette méthode est très pratique si l'on doit réaliser des zones pour lesquelles la mise en page sera conditionnelle.

Par exemple un tableau de données, si la donnée de telle cellule est supérieure à -> le background est rouge sinon le background est bleu mais la police reste bold tandis que si la donnée est inférieure à -> la police sera normale et le fond vert...

Et là, c'est du gâteau !

Bonjour,

En fait ce que je voulais était d'espacer des DIVs par rapport à la marge de gauche.

Comme sur quelques rares forums, plus il y a de réponse, plus le conteneur s'éloigne de la marge.

Attention: Art ASCII:

|¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯|
|        #1                 |
|__________________|
...|¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯|
...|        #2                 |
...|__________________|
......|¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯|
......|        #3                 |
......|__________________|
[...]
.......................|¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯|
.......................|        #N                 |
.......................|__________________|

Voila, c'est cela que je voulais faire. Je voulais tout simplement additionner les marges pour pousser les réponses vers la droite. Voila!.

Bye, DoubleV
Modifié par DoubleV (19 Aug 2005 - 19:07)

Simple !

.conteneur {avec ce qu'il faut dedans (background, border...)}
.marge1 { margin-left: 10px; } 
(ou .marge1 { margin-left: 1em; } )

.marge2 { margin-left: 20px; }

.marge3 { margin-left: 30px; }

Puis :

<div class="conteneur marge1"> le message 1 </div>

<div class="conteneur marge2"> le message 2 </div>

Ici pas de "id" pour le "div" car tu vas répéter ce conteneur (un "div id" doit concerner un conteneur unique).

En supposant que cela sera servi par un langage serveur avec boucle itérative, php par exemple :

for (.......  $i++ ) {

$messages .= '<div class="conteneur marge' .$i. '">' .$message[$i]. '</div>';
 
                       }
et plus loin, où il faut :
echo $messages

Comme tu n'auras pas une infinité de marges (à moins de prévoir un écran infiniment large) cette solution pourrait résoudre ton problème.

Pour ce qui me concerne je préfèrerais une alternance de fond grisé et fond bleuté (par exemple) avec des messages ayant la même marge et la même largeur.

Ce qui peut donner en css :

.gris { background-color: #f4f4f4; }
.bleu {background-color:daf2f2; }

Et pour la page :

for (.......  $i++ ) {
if ( bcmod($i, 2) == 0 ) {
$fond = 'bleu';
}
else
{
$fond = 'gris';
}
$messages .= '<div class="conteneur ' .$fond. '">' .$message[$i]. '</div>';
 
                       }
et plus loin, où il faut :
echo $messages 

Modifié par jcm (19 Aug 2005 - 20:57)