Bonjour.
Souhait: j'essaye de rendre le design du Template Protostar un peu plus actuel![Makeup](https://forum.joomla.fr/core/images/smilies/afuj/makeup.gif)
Pour ça, j'inclu mes intro d'article dans deux divs imbriquées que je style avec le css externe du template
Problème : dans une présentation de type blog, les articles se superposent.
Exemple visible à : edit: j'ai supprimé les divs dans mon site, car ça faisait quand même désordre![Sourire](https://forum.joomla.fr/core/images/smilies/afuj/smile.gif)
Maquette ici:
![Cliquez sur l'image pour l'afficher en taille normale
Nom : souhait-Template.jpg
Affichages : 2
Taille : 48,0 Ko
ID : 1821090](filedata/fetch?id=1821090&d=1710628988)
Remarque:
Mention spéciale: Merci beaucoup
![Wink](https://forum.joomla.fr/core/images/smilies/afuj/wink.gif)
Voici le code css:
Configuration: Joomla! 3.3.6
Souhait: j'essaye de rendre le design du Template Protostar un peu plus actuel
![Makeup](https://forum.joomla.fr/core/images/smilies/afuj/makeup.gif)
Pour ça, j'inclu mes intro d'article dans deux divs imbriquées que je style avec le css externe du template
Problème : dans une présentation de type blog, les articles se superposent.
Exemple visible à : edit: j'ai supprimé les divs dans mon site, car ça faisait quand même désordre
![Sourire](https://forum.joomla.fr/core/images/smilies/afuj/smile.gif)
Maquette ici:
Remarque:
- la div fille est peut-être inutile, mais elle est là en prévision d'aménagements futurs.
- J'aimerais pouvoir parfois placer une image en pleine largeur au lieu d'une simple couleur tout en conservant la qualité responsive du template
Mention spéciale: Merci beaucoup
![Handshake](https://forum.joomla.fr/core/images/smilies/afuj/handshake.gif)
![Wink](https://forum.joomla.fr/core/images/smilies/afuj/wink.gif)
Voici le code css:
Code:
.fondintro{ display: block; position: absolute; background-color: rgba(0, 205, 255, 0.32); width: 100%; left: 0; z-index: 2; } .divintro{ background-color: rgba(255, 255, 255, 0.8); display: block; position: relative; width: 80%; z-index: 4; margin: 0 auto; height: 500px; padding-right: 10px; padding-left: 10px; } .fondintroclear{ }
Commentaire