Voir tous les tags-
Salut tout le monde. Je vais ici vous faire un petit baratin dont le but n'est pas d'être lu mais simplement de faire un petit remplissage afin d'illustrer le tuto. Je commence donc par vous parler de la pluie et du beau temps, du cours du lait et de l'artisanat mongol du début du XXII ème siècle. J'enchaîne sur la baisse du pouvoir d'achat, la déforestation en amazonie et sur ma tête (non, je plaisante) pour enfin en arriver au terme de cet article sans intérêt mais qui a rempli son office, c'est à dire un texte trop long pour pouvoir être affiché dans la <div>
Comme vous le constatez, tout le texte n'apparaît pas dans le cadre ci-dessus. Vous aurez par contre remarqué l'ascenseur sur la droite du cadre ainsi que la poignée de redimensionnement dans le coin inférieur droit.
Vous pouvez donc soit faire défiler le texte à l'aide de l'ascenseur ou agrandir le cadre à l'aide de la poignée.
Code CSS correspondant à l'exemple ci-dessus
#retailler
{
border:2px solid blue;
padding:20px 20px;
width:200px;
height: 150px;
resize:vertical;/*options : none, vertical, horizontal ou both */
overflow:auto;/*options : visible, hidden, scroll, auto, inherit */
}Il ne vous reste plus qu'à placer votre texte dans votre article comme ci-dessous
<div id="retailler">Votre texte ici....</div>
30 commentaires
-
Salut tout le monde. Je vais ici vous faire un petit baratin dont le but n'est pas d'être lu mais simplement de faire un petit remplissage afin d'illustrer le tuto. Je commence donc par vous parler de la pluie et du beau temps, du cours du lait et de l'artisanat mongol du début du XXII ème siècle. J'enchaîne sur la baisse du pouvoir d'achat, la déforestation en amazonie et sur ma tête (non, je plaisante) pour enfin en arriver au terme de cet article sans intérêt mais qui a rempli son office, c'est à dire apparaître sur 3 colonnes.
Pour en arriver à ce résultat il vous suffit de mettre le code CSS suivant (Dans Apparence -> Modifier le thème ->Ajouter du CSS)
.newspaper
{
/* Vous pouvez spécifier le nombre de colonnes voulues (ici 3)*/
/* Ce code peut ne pas fonctionner avec internet explorer*/
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari et Chrome */
column-count:3;
}Et mettre tout simplement votre texte dans votre article comme ci-dessous (Edition d'un article/ Icone HTML)
<div class="newspaper">Votre texte ici....</div>
7 commentaires
-
Rien de tel qu'un exemple pour illustrer le sujet.
Vous pouvez voir ci-dessous un div de couleur cyan et à bords arrondis qui a été tourné de 20°
Voici un exemple de div avec une rotation de 20 °Pour réaliser ceci, il faut placer ce code dans la partie Ajouter du CSS (Menu Apparence -> Modifier le thème)
#monelem
{
border-radius: 5px 5px 5px 5px;/* on fait un arrondi sur les angles */
position:relative; /* on positionne le div à 150 px du bord gauche */
left: 250px;
font-size:18px; /* Taille des caractères */
width:150px; /* Largeur du div */
height:80px; /* Hauteur du div */
background-color:cyan; /* Couleur du div */
/* Rotation du div */
transform:rotate(20deg);
-ms-transform:rotate(20deg); /* Internet Explorer */
-moz-transform:rotate(20deg); /* Firefox */
-webkit-transform:rotate(20deg); /* Safari et Chrome */
-o-transform:rotate(20deg); /* Opera */
}Il ne reste plus qu'à placer votre balise div (que j'ai appelée monelem dans cet exemple) dans la partie HTML de votre article
<div id="monelem">Voici un exemple de div avec une rotation de 20 °</div>
Vous pouvez bien entendu placer
une image dans votre <div>Voici un exemple de div avec une rotation selon deux plansDans l'exemple ci-dessus, la méthode Rotate a été remplacée par la méthode Skew.
Voyez sur le site de W3School pour plus d'informations. 1 commentaire
-
Il peut être interessant de placer au sein d'un article une liste déroulante dont chaque ligne aura une action spécifique comme l'exemple ci-dessous :
Vous pouvez aussi placer ce type de liste dans un module pour faire un accès rapide vers différentes pages de votre blog.
Remarque: Il faut que le javascript soit activé sur votre blog pour que cela fonctionne
Pour arriver à ce résultat, rien de plus simple:
1 - Copier le code ci-dessous
2- Editer votre article ou votre module simple
3- Cliquez sur Editer le code source HTML (en mode normal ou expert)
4- Collez le code
5- Modifiez le contenu de la liste et les liens
CODE
<p><select name="menu_destination" onchange="window.open(this.value)">
<optgroup label="Le Karaté Club Nieppois" >
<option value="http://kcn.eklablog.com/baby-karate-p144525">Baby Karaté</option>
<option value="http://kcn.eklablog.com/body-karate-p144557">Body Karaté</option>
<option value="http://kcn.eklablog.com/les-horaires-p144443">Horaires</option>
<option value="http://kcn.eklablog.com/les-tarifs-p144445">Tarifs</option>
</optgroup>
<optgroup label="Galleries">
<option value="http://papasti.info/gallery3/">Les Photos</option>
<option value="http://kcn.eklablog.com/videos-p165503">Vidéos du Club</option>
<option value="http://kcn.eklablog.com/telechargements-p157868">Téléchargements</option>
</optgroup> <
</select></p>Fonctionnement
La balise HTML Select définit votre liste déroulante.
La balise optgroup vous permet de regrouper les éléments et la balise option définit vos différentes lignes.Lorsque l'on choisit un élément de la liste, la fonction javascript window.open est appelée et reçoit comme argument la valeur contenue dans value (ici des liens).
Adaptations
Vous pouvez bien entendu modifier les attributs de style de la balise <select> comme ci dessous
<p><select style="color: black; background-color: wheat; width: 100%; border-color: lightgray; border-style: ridge; border-width: 8px;" name="menu_destination" size="5" onchange="test(this.value)">
Il est également possible d'utiliser cette balise pour d'autres choses comme ci-dessous.
(vous pouvez retrouver les noms et codes couleurs sur:http://www.w3schools.com/html/html_colornames.asp
60 commentaires
Créer mon blog