Vous êtes dans la categorie Tutoriel CSS

Aligner un texte avec une image via CSS et la propriété vertical-align

Rédigé par fab1 aucun commentaire

Alors que les tableaux étaient auparavant largement utilisés dans le HTML pour réaliser des mises en pages, ils sont maintenant totalement obsolètes et il vaut mieux utiliser une belle feuille de style qui sera beaucoup plus puissante. En effet, chaque fois qu'elle sera appelée il sera possible de réutiliser ses propriétés pour appliquer les modifications sur les éléments HTML portant le même nom ce qui est très pratique pour construire nos pages ! Dans ce tutoriel je vais vous parler de la propriété vertical-align de CSS qui permet de centrer un élément très facilement sans se prendre la tête. Avec l'exemple qui va suivre, nous allons voir comment centrer le texte sur trois images ce qui peut être pratique pour réaliser un menu par exemple. Le résultat que l'on souhaite est donc le suivant :

Le code pour réaliser cette petite mise en page est en réalité très simple et il est très pratique pour l'affichage de liste avec image par exemple. Mais ce n'est pas la seule utilisation possible et je laisse votre imagination faire le reste. Maintenant, place au code source HTML / CSS pour réaliser cela :

<style>
div.table {
display:table;
border:0px solid;
padding:1em;
}

div.table p, div.table img
{
vertical-align:middle;
display:table-cell;
padding:1em;
}

</style>


<div class="table">
<img src="./image1.png" width="220px">
<p><a href="#"> Texte 1</a></p>
</div>



<div class="table">
<img src="./image2.png" width="220px">
<p><a href="#"> Texte 2</a></p>
</div>



<div class="table">
<img src="./image3.png" width="220px">
<p><a href="#"> Texte 3</a></p>
</div>

Classé dans : Tutoriel CSS

Tutoriel : mettre en forme et changer les couleurs d'un formulaire HTML avec CSS

Rédigé par fab1 aucun commentaire

Ce n'est pas forcément simple de commencer dans le domaine du web et de la programmation tant il y a de choses à savoir ... Bien évidemment, vous ne pouvez pas tout apprendre d'un coup et il faut y aller par étapes. Après avoir vu comment aligner de façon très simple les éléments d'un formulaire, nous allons maintenant voir comment l'habiller un peu, avec des couleurs par exemple. Vous allez voir comment modifier les couleurs des éléments d'un formulaire, changer de couleur au survol de la souris et enfin lorsque l'utilisateur clique sur un élément ou un bouton simplement avec du CSS. On commence de façon très simple avec le formulaire HTML suivant :

<meta charset="UTF-8">

<div id="conteneur">
    <fieldset>
        <legend>Ajouter une catégorie</legend>
            <p>
                <label for="catnom">Nom de la catégorie</label>
                <input class="text" type="text" name="catnom" id="catnom" value=""/>
            </p>
            <p>
                <label for="catdesct">Courte description (seo)</label>                   
                <input class="text" type="text" name="catdesct" id="catdesct" value=""/>
            </p>
            <p>
                <input type="submit" />
                <input type="reset" />
            </p>
    </fieldset>
</div>

Ensuite, il faut alors appliquer le style CSS suivant sur votre formulaire, cette feuille de style sera une bonne base pour créer vos formulaires. Il suffit ensuite de modifier les éléments qui ne vous conviennent pas tel que les différentes couleurs, la taille des éléments, c'est vraiment très simple avec le CSS ! On passe maintenant à cette fameuse feuille de style pour améliorer notre formulaire :

<style>
    
div#conteneur {
 width: 470px;
 float: left;
}
    
label {
 margin-left: 3em;
 width: 250px;
 display: block;
 float: left; 
}

    
fieldset {
 color: #e82c66;
 border:1px solid #348ae0;    
}

legend {
 color:#2570e8;
 font-weight:bold
 }

input {
 background-color:#ddf6fd;
 border-radius: 5px;    
}
    
input:focus {
 background-color:white;
}
    
    
input[type=submit]:hover {
 background-color:#beedb5;
 }
    
input[type=submit]:active {
 background-color:#33d61e;
 box-shadow:1px 1px 1px #bebebe inset;
}
    
input[type=reset]:hover {
 background-color:#fd7777;
 }
    
input[type=reset]:active {
 background-color:#f51313;
 box-shadow:1px 1px 1px #D83F3D inset;
}
    
</style>

Classé dans : Tutoriel CSS

Aligner les champs d'un formulaire html avec du CSS

Rédigé par fab1 aucun commentaire

Lorsque que vous réalisez des formulaire en HTML pour vos sites web, blog ou application en ligne, vous avez surement déjà été confronté au probablement de l'alignement vertical des champs. En effet, si vous ne faites rien de spécial et n'utilisez pas de tableau, les champs de votre formulaire vont se coller à votre libellé/label ce qui n'est pas très agréable visuellement ... Nous allons utiliser du CSS3 pour améliorer tout ça et rendre le formulaire plus agréable pour vos visiteurs. D'ailleurs pour bien illustrer ce tutoriel, si vous ne faites rien, votre formulaire va alors ressembler à quelque chose comme ça :

Ce petit formulaire est obtenu à l'aide du code HTML basique suivant :

<fieldset>
	<legend>Ajouter un membre</legend>
		<p>
			<label for="nommembre">Nom</label>
			<input class="text" type="text" name="nommembre" id="nommembre" value=""/>
		</p>
		<p>
			<label for="prenommembre">Prenom</label>                   
			<input class="text" type="text" name="prenommembre" id="prenommembre" value=""/>
		</p>
		<p>
			<label for="loginmembre">Login</label>
			<input class="text" type="text" name="loginmembre" id="loginmembre" value=""/>
		</p>
		<p>
			<label for="mdpmembre">Mot de passe</label>
			<input class="text" type="text" name="mdpmembre" id="mdpmembre" value=""/>
		</p>
		<p>
			<input type="submit" />
			<input type="reset" />
		</p>
</fieldset>

Ce n'est pas très joli et on va donc se servir d'un tout petit peu de CSS pour rendre ça beaucoup plus agréable à l’œil aux internautes qui passeront sur vos pages. De plus avec CSS, si vous pensez à appeler la feuille de style avec la mise en forme de formulaire, ils seront tous bien alignés correctement, pratique ! On souhaite donc obtenir la chose suivante avec un alignement vertical des champs du formulaire :

Pour obtenir ce bel alignement des champs de votre formulaire, vous avez simplement à utiliser ce petit morceau de CSS bien pratique qui va bien vous aider pour la mise en forme de formulaire. Bien évidement, vous pouvez ensuite personnaliser cette source CSS selon vos besoins :

<style>
label {
    margin-left: 3em;
    width: 250px;
    display: block;
    float: left; 
}
</style>

Classé dans : Tutoriel CSS

Comment faire une infobulle au survol de la souris en html et css

Rédigé par fab1 aucun commentaire

Lorsque votre site web est en train d'avancer, il est possible et même très fortement probable que vous ayez besoin d'intégrer de nombreuses fonctionnalités. Aujourd'hui nous allons voir le principe de l'infobulle qui apparaît lors du survol de la souris et cela via du HTML ainsi que du CSS évidemment !

Les infobulles sont vraiment très pratiques pour afficher du contenu supplémentaire, mais sans surcharger une interface de gestion.

Vous pouvez ainsi afficher des informations diverses, de l'aide, et tout ce que vous pouvez encore imaginer avec ce point de départ. Le code HTML et CSS est le suivant :

<html>
    <head>
        <title>Infobulle en CSS</title>    
        <style>
            /* Règle de base pour le lien */ 
            a{ 
                color:#4c0ed8; 
                 
            } 
            a:hover,a:focus{
                color:#000;
            }
            
            /* Position et couleur bulle */
            a span{ 
                position:absolute;
                margin-top:25px; 
                margin-left:-25px;
                color:#fff; 
                background:rgba(0, 0, 0, 0.5); 
                padding:25px; 
                border-radius:3px; 
                
                /* Faire disparaire infobulle par défaut */
                /* On determine l'origine de la rotation */ 
                transform:scale(0) rotate(-180deg);
                /* Faire durer l'effet */
                transition:all .25s;
                /* Effet sur la transparence */ 
                opacity:0;
            }
            
            /* Apparition de la bulle avec le scale à 1 */ 
            a:hover span, a:focus span{ 
                transform:scale(1) rotate(0);
                /* Effet sur la transparence */ 
                opacity:1;
            }
        
        </style>  
    </head>
    <body>
        <p> 
            <a href="#"> Passez la souris sur ce lien ! 
                <span>Vous avez maintenant une belle infobulle qui s'affiche ;)</span> 
            </a> 
        </p>
    </body>    
</html>


Vous obtenez alors ceci comme résultat, c'est sympathique non ?

Passez la souris sur ce lien ! Vous avez maintenant une belle infobulle qui s'affiche ;)






Classé dans : Tutoriel CSS