La date/heure actuelle est Jeu 2 Mai 2024 - 17:38
2 résultats trouvés pour 0d5938
Losange en CSS
Re- bonjour,Comme dit sur ton autre sujet, je n'ai absolument pas le même rendu que toi, avec le même template et le même css.
Pour aligner verticalement en css, c'est plus complexe, nous allons jouer sur la position 'absolute' du 'child' des autres div, en donnant à la div-'parent' la position relative, sans plus:
- Spoiler:
/* losange-index */
.indexloright {
height: 110px;
width: 110px;
display: block;
position: relative;
background: transparent;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
margin-right: 40px;
margin-left: 25px;
}
/* losange-img physique container-child n parent */
.indeximglo {
height: 110px;
width: 110px;
display: block;
position: absolute;
background: #0d5938;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* container-child img */
.indexloimg {
height: 110px;
width: 110px;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* just img */
.indexloimg img{
width: 90px;
height: 90px;
display: block;
position: absolute;
text-align: center;
transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
/* fin losange-index */
EDIT : Il y a une meilleure méthode qui nous vient du CSS3 'flexbox' et qui n'a pas l’inconvénient de la méthode précédente qui fait sortir l'élément du flux, là le losange reste dans le flux, pas de bisouillages, c'est net et propre:
- Spoiler:
- /* losange-index */
.indexloright {
height: 110px;
width: 110px;
display: flex; /* contexte sur le parent */
flex-direction: column; /* direction affichage verticale */
justify-content: center; /* alignement vertical */
background: transparent;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
margin-right: 40px;
margin-left: 25px;
}
/* losange-img physique container-child n parent */
.indeximglo {
height: 110px;
width: 110px;
display: block;
position: absolute;
background: #0d5938;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* container-child img */
.indexloimg {
height: 110px;
width: 110px;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* just img */
.indexloimg img{
width: 90px;
height: 90px;
display: block;
position: absolute;
text-align: center;
transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
/* fin losange-index */
RE-EDIT : C'est compatible avec tout le net et IE10
- le Sam 8 Aoû 2020 - 11:04
- Rechercher dans: Archives des problèmes avec un code
- Sujet: Losange en CSS
- Réponses: 28
- Vues: 2020
Restructuration forum
Re BiKinou,Il y a un CSS très fourni et je te donne un petit devoir avant de continuer.
Dans le bout de CSS de début que je te redonne là, j'ai corrigé, amélioré, ajouté (notamment pour safari et opera), surtout réécrit les lignes margin-padding de sorte à ce qu'elles n'en deviennent qu'une seule, ce qui fait déjà un peu plus clair.
- Spoiler:
- /***OSSATURE ***/
/**CATÉGORIES**/
/*Cadrage*/
.cadrecaté {
border: 2px solid #402203;
background: url(https://2img.net/r/hpimg11/pics/362902Pattern1.png) repeat #b8a27f ;
margin-bottom: 15px;
padding: 2px 4px 0; /* ecrit ainsi top-2px right-4px bottom-0px left-4px idem que right */
}
.caté {
margin: 1em; /* margin pareil que padding sans detail meme pour les 4 */
border-radius: 15px;
background: url(https://2img.net/r/hpimg11/pics/362902Pattern1.png) repeat #a88c77;
/* padding: 5px; ecrit ainsi meme pour les 4 a supprimer */
padding; 5px 15px; /* meme top-bottom-5px meme right-left-15px */
text-align: center;
}
/*Titre de catégorie*/
.titrecaté h2 {
display: inline-block;
background: url(https://2img.net/r/hpimg11/pics/362902Pattern1.png) repeat #0d5938;
border-radius: 5px;
box-shadow: 2px 2px 1px #ffffff;
/* margin: 0px; ecrit ainsi meme pour les 4 a supprimer */
margin-right: 5%;
padding: 10px 115px; /* top-bottom-10px right-left-115px */
color: #402203;
font-family: Papyrus, bold;
font-size: 28px;
text-shadow: 0 2px 2px #fefdb1;
text-align: center;
text-transform: uppercase;
transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
-safari-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
transition; 1s;
-ms-transition: 1s;
-safari-transition: 1s;
-o-transition: 1s;
-webkit-transition: 1s;
}
.titrecaté h2:first-letter {
color: #c40606;
text-shadow: 2 2px 2px #c0a583;
font: bold 48px Times new roman;
}
/*Titre au survol*/
.titrecaté h2:hover {
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-safari--transform: rotate(0deg);
-o--transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
/**FIN DES CATÉGORIES**/
/**FORUM**/
/*Cadrage1*/
.forum {
margin: 50px 0 30px; /* top-50px right-0px bottom-30px left-0px */
}
.forumgauche {
position: relative;
background:url(https://i.servimg.com/u/f14/15/30/06/17/essai_13.png) repeat #0d5938 ;
border-radius: 15px;
box-shadow: 0px 0px 5px 2px #a87f4c;
padding: 10px;
}
/* Messages et sujets*/
}
Pour tes icônes de messages, en effet. là il y a un boulot de cadrage, quant aux motifs, ce devrait être faisable.
- le Jeu 23 Juil 2020 - 19:08
- Rechercher dans: Corbeille & Titres non explicites
- Sujet: Restructuration forum
- Réponses: 32
- Vues: 2394