[RÉGLÉ] Fonds pleine largeur pour intros texte sous Protostar

[boumy]

Bonjour.

Souhait: j'essaye de rendre le design du Template Protostar un peu plus actuel
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

Maquette ici:


Remarque:

1. la div fille est peut-être inutile, mais elle est là en prévision d'aménagements futurs.
2. 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

Voici le code css:

.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{
}

Configuration: Joomla! 3.3.6

[lefabdu51]

Re : Fonds pleine largeur pour intros texte sous Protostar

le positionement n'est pas bon:
supprimes le position:absolute et le display:block du selecteur ci dessous:

.fondintro {
    background-color: rgba(0, 205, 255, 0.32);
    width: 100%;
    left: 0px;
}

supprimes le position:relative et le display:block du sélécteur ci dessous :

.divintro {
    background-color: rgba(255, 255, 255, 0.8);
    width: 80%;
    z-index: 4;
    margin: 0px auto;
    padding-right: 10px;
    padding-left: 10px;
    height: 500px;
}

second conseil: met height:auto à tes div.
Cela éviteras d avoir des espace vide en dessous de tes textes.
dernier conseil: fait deux div une au dessous de l'autre sans les imbriquer, cela sera plus simple pour le positionnement.

[boumy]

Re : Fonds pleine largeur pour intros texte sous Protostar

Merci lefabdu51 de te pencher sur mon cas.

J'imagine que je me suis mal exprimé.
Mon souhait est de voir la première div .fondintro (celle qui est colorée en bleu) occuper toute la largeur de la fenêtre de navigation. Sans une position absolute il me semble que ça ne fonctionne pas, car la div est alors limitée à la largeur du Template.

J'ai aussi désimbriqué les divs (au moins sur le premier article du blog). Mais alors la première div .fondintro ne peux pas calculer sa hauteur sur le texte. Et elle n'occupe naturellement pas non plus toute la largeur de la fenêtre de navigation.

Une idée?

Merci.

[boumy]

Re : Fonds pleine largeur pour intros texte sous Protostar

Voici une idée visuelle du résultat espéré. Sachant que l'inclusion du bouton readmore sera probablement impossible, mais ce n'est pas grave.

[boumy]

Re : Fonds pleine largeur pour intros texte sous Protostar

J'ai dû renoncer à faire des essais sur le site en ligne, car cela faisait désordre. Ma requête est néanmoins toujours d'actualité. Merci.

[boumy]

Re : Fonds pleine largeur pour intros texte sous Protostar

solution en code dit "moderne" trouvée à http://stackoverflow.com/questions/5...-div-using-css
Consiste à utiliser des unités vw et un calcul en css (??):

.mother{
background-color: red;
position: relative;
width: 100vw;
left: calc(-50vw + 50%);
}
.child{
width: 940px;
position: relative;
margin: 0 auto;
}

Ensuite il semble nécessaire de proportionner le child à chaque diminution de la fenêtre:

@media (max-width: 980px){.child{width: 720px;}}
@media (max-width: 760px){.child{width: 640px;}}
@media (max-width: 660px){.child{width: 540px;}}
@media (max-width: 600px){.child{width: 500px;}}
@media (max-width: 520px){.child{width: 360px;}}

Et pour éviter l'apparition d'ascenseur horizontal :

.site {overflow-x: hidden;} // N.B. .site est la plus grande div avant body dans le cas du template protostar