Mise en page de cartouche

[eric43]

Bonjour

A partir d'un style css je souhaite effectuer une mise en page dans un article mais quand j'inclus le code dans l'éditeur (basculer l'éditeur pour passer en html) çà ne fonctionne pas

@charset "utf-8";
/* CSS Document */
/* Style de la boite */
.box-rounded {
padding:10px;
width: 274px;
height:180px;
-webkit-border-radius: 5px;    
    border-radius: 5px;
background: #93cb8c; /* Old browsers */
background: -moz-linear-gradient(left,  #93cb8c 0%, #467740 7%, #467740 50%, #467740 94%, #93cb8c 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#93cb8c), color-stop(7%,#467740), color-stop(50%,#467740), color-stop(94%,#467740), color-stop(100%,#93cb8c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  #93cb8c 0%,#467740 7%,#467740 50%,#467740 94%,#93cb8c 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  #93cb8c 0%,#467740 7%,#467740 50%,#467740 94%,#93cb8c 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  #93cb8c 0%,#467740 7%,#467740 50%,#467740 94%,#93cb8c 100%); /* IE10+ */
background: linear-gradient(to right,  #93cb8c 0%,#467740 7%,#467740 50%,#467740 94%,#93cb8c 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#93cb8c', endColorstr='#93cb8c',GradientType=1 ); /* IE6-9 */
}
.box-square {
width:94%;
height:91%;
padding:3%;
background-color:#f6eebf;
}
/* Fin du style de la boite */

Voici l'image du résultat que je souhaite :
Suite dans le prochain message.

Eric

[eric43]

Re : Mise en page de cartouche

... suite



Donc voici le résultat que je souhaite soit pour inclure du texte dans les cartouches soit pour inclure des photos.
J'ai cherché comment inclure le css mais firebug pointe sur /media/system/css/system.css alors que logiquement ça devrait pointer sur le css du thème bref du coup j'essaye de l'intégrer dans le html de l’article mais la mes compétences s'arrêtent

D'avance merci de vos conseils.

Eric


j'utilise un thème Ja purity 2 et la dernière mouture de la version 2.5. fr je n'ai aucune extension particulière en dehors de JCE qui d'ailleurs ne fonctionne pas mais ce sera l'occasion d'un autre post si je ne résoud pas le problème.

[onirisweb]

Re : Mise en page de cartouche

Salut Eric43,

Voici la soluce. D'un côté la partie HTML :

<!-- ligne 1-->

<div class="line-box">

<!-- code de la boite 1 -->

<div class="box-rounded">

<div class="box-square">

Mettre le texte 1 ici...

</div>

</div>

<!-- fin du code de la boite 1-->

<!-- code de la boite 2 -->

<div class="box-rounded">

<div class="box-square">

Mettre le texte 2 ici...

</div>

</div>

<!-- fin du code de la boite 2-->

<!-- code de la boite 3 -->

<div class="box-rounded">

<div class="box-square">

Mettre le texte 3 ici...

</div>

</div>

<!-- fin du code de la boite 3-->
</div>

<!-- Fin de la ligne 1-->


<!-- ligne 2-->

<div class="line-box">

<!-- code de la boite 4 -->

<div class="box-rounded">

<div class="box-square">

Mettre le texte 4 ici...

</div>

</div>

<!-- fin du code de la boite 4-->

<!-- code de la boite 5 -->

<div class="box-rounded">

<div class="box-square">

Mettre le texte 5 ici...

</div>

</div>

<!-- fin du code de la boite 5-->

<!-- code de la boite 6 -->

<div class="box-rounded">

<div class="box-square">

Mettre le texte 6 ici...

</div>

</div>

<!-- fin du code de la boite 6-->
</div>

<!-- Fin de la ligne 2-->

De de l'autre ta css :

/* Style de la boite */

.line-box {
display:inline-block;
margin:0 0 40px 0;
}

.box-rounded {
display:inline;
float:left;
margin:0 20px 0 0;
padding:10px;
width: 274px;
height:180px;
-webkit-border-radius: 5px;
border-radius: 5px;
background: #93cb8c; /* Old browsers */
background: -moz-linear-gradient(left, #93cb8c 0%, #467740 7%, #467740 50%, #467740 94%, #93cb8c 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#93cb8c), color-stop(7%,#467740), color-stop(50%,#467740), color-stop(94%,#467740), color-stop(100%,#93cb8c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #93cb8c 0%,#467740 7%,#467740 50%,#467740 94%,#93cb8c 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #93cb8c 0%,#467740 7%,#467740 50%,#467740 94%,#93cb8c 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #93cb8c 0%,#467740 7%,#467740 50%,#467740 94%,#93cb8c 100%); /* IE10+ */
background: linear-gradient(to right, #93cb8c 0%,#467740 7%,#467740 50%,#467740 94%,#93cb8c 100%); /* W3C */
filter: progidXImageTransform.Microsoft.gradient( startColorstr='#93cb8c', endColorstr='#93cb8c',GradientType=1 ); /* IE6-9 */

}

.box-square {
width:94%;
height:91%;
padding:3%;
background-color:#f6eebf;
}


/* Fin du style de la boite */

Bien sûr il faut que tu ajustes la taille des boîtes, les marges, etc. à ta convenance.

Au plaisir...

[eric43]

Re : Mise en page de cartouche

Merci L'ami
Excellente solution.
Je t'en remercie.
Eric