28172 sujets

CSS et mise en forme, CSS3

[RESOLU]Coins arrondis

Bonjour je dois faire des coins arrondis sur plusieurs éléments.

J'ai pas mal cherché, j'ai trouvé des astuces qui fonctionnent bien.

J'ai aussi découvert une solution, mais je ne l'ai pas trouvé dans mes recherches, donc a mon avis il y a un problème avec, mais je ne l'ai pas trouvé. Voici donc ma solution :

01/ création d'une simple boite avec un style attribué

<div class="arrondi">
   Lorem ipsum 
</div>


définition de ce style, on donne une image alignée en haut avec les arrondi supérieur et une couleur de fond idem

.arrondi{
   background-color:red;
   background-image:url(image-haut.jpg) ;
}



Je REdéfinition ce style, en lui donnant une image alignée en bas avec les arrondi inférieurs

.arrondi{
   background-image:url(image-bas.jpg) ;
}


L'astuce consiste à définir 2x le meme objet dans les css.

Est-ce ce que cela pose problème ?
Modifié par pelloq1 (22 Feb 2008 - 12:19)
Et ca ? :


<div class="arrondi">
   <div class="arrondi-haut">
      Lorem ipsum 
   </div>
</div>


.arrondi-haut{

   background-color:red;
   background-image:url(image-haut.jpg) ;

}
.arrondi-bas{

   background-image:url(image-bas.jpg) ;

}
pelloq1 a écrit :
L'astuce consiste à définir 2x le meme objet dans les css.

Est-ce ce que cela pose problème ?
En CSS si tu définis deux fois la même chose c'est la dernière définition qui est prise en compte.
pelloq1 a écrit :
Et ca ? :


<div class="arrondi">
   <div class="arrondi-haut">
      Lorem ipsum 
   </div>
</div>


.arrondi-haut{

   background-color:red;
   background-image:url(image-haut.jpg) ;

}
.arrondi-bas{

   background-image:url(image-bas.jpg) ;

}



Tant qu'à faire, autant faire ça de manière un peu plus sémantique, sans div ni classes inutiles :


<div class="arrondi">
   <p>Lorem ipsum</p>
</div>


.arrondi {
   background-color:red;
   background-image:url(image-haut.jpg) ;
}

.arrondi p {
   background-image:url(image-bas.jpg) ;
}
Sujet clos
Aller à