• Jeudi 20 Novembre 2008
  • 1 utilisateur online

Actualités

Dimanche 3 août 2008 par Fred Jaillet - 20 vues
Créer des blocs d’alertes en css

Dans ce tutoriel, je vais vous apprendre comment créer des blocs d’alertes pour votre site en css. Ces blocs sont utilisées dans mon Thème UltimatumTheme.

IMAGE

Voici les images pour les besoins de ce tutoriel.

XHTML

Le bloc exclamation.

  • Votre texte ici.

Le bloc information.

  • Votre texte ici.

Le bloc error.

  • Votre texte ici.

CSS

Le bloc exclamation.

.exclamation { width:100%; background: #FDD1C5 url(../media/exclamation.png) center no-repeat; background-position: 15px 50%; border-top: 1px solid #FBAB95; border-bottom: 1px solid #FBAB95; color:#000000; margin-bottom:20px}
exclamation ul { padding:0; margin:0; list-style:none; padding:15px 15px 15px 46px; text-align: justify}
.exclamation ul li { list-style:none}
.exclamation ul li span { margin-left:10px; margin-right:10px}
Le bloc information.

.information { width:100%; background: #E7F9F8 url(../media/information.png) center no-repeat; background-position: 15px 50%; border-top: 1px solid #B5D4FE; border-bottom: 1px solid #B5D4FE; color:#000000; margin-bottom:20px}
.information ul { padding:0; margin:0; list-style:none; padding:15px 15px 15px 46px; text-align: justify}
.information ul li { list-style:none}
.information ul li span { margin-left:10px; margin-right:10px}
Le bloc error.

.error { width:100%; background: #fff6bf url(../media/error.png) center no-repeat; background-position: 15px 50%; border-top: 1px solid #ffd324; border-bottom: 1px solid #ffd324; color:#000000; margin-bottom:20px}
#contentLocation .error ul { padding:0; margin:0; list-style:none; padding:15px 15px 15px 46px; text-align: justify}
#contentLocation .error ul li { list-style:none}
#contentLocation .error ul li span { margin-left:10px; margin-right:10px}

Tags : , , , , ,

Catégories : CSS

Aucun commentaire

Aucun commentaire.

Laisser un commentaire

Logo ou autres
  • Copyright © 2008 O2 Multimédia. Tous droits réservés.
Lestie ligula.