[Résolu] 'div' empilés - du texte qui s'adapte au 'div' inférieur

Bonjour à tous! J'aimerai creer un design avec des blocs de fond, et une banniere et un corps de texte par dessus... donc ma solution etait de faire
des blocs relatif aux autre
des flottant pour mes deux blocs de fond (je metrise pas les flottant, mais peu importe)
et des z-index pour favoriser la visibilité du corps et de la baniere

Bon c'est un peu caffouillage et test rapide... a ma grande malheureuse habitude.

Cependant, mon problème est que le texte ne reste pas dans son bloc (enfin si) ou plutot il élargit la taille du corps de façon à ne pas etre superposé au bloc de fond,
OU (soit encore) le bloc du fond repousse plus bas le texte du bloc du dessus

Si vous avez une solution, ou une meilleur approche du problème, je serai ravi d'avoir votre avis!
Modifié par Alexandr240 (24 Oct 2013 - 21:37)

Bonsoir,

Montre-nous ce que tu as déjà fait, code, image explicative, ou mieux une page de test en ligne.
En l'état, j'ai décroché dès la première ligne
Bref, aide-nous à te venir en aide

Dac dac!
alors en html, tres ergonomique:

<div id="fondGauche"> Image qui prend de la place</div>
<div id="fondDroite">image qui prend de la place</div>

<div id="corps"> Il était une fois ...... .......... ....... fin </div>

et en css:

#fondGauche                                           #fondDroite
{ width: 50%;                                           { width: 50;
  float: left;                                                 float: right;
  position: relative;                                      position: relative;
  z-index: 1;     //bloc de fond                      z-index: 1;    //bloc de fond
}                                                              }

#corps
{ width: 50%;
  margin-left: auto;      // centré
  margin-right: auto;    //
  position: relative;
  z-index: 2;         //bloc superieur
}

et en gros, le bloc superieur vient se mettre par dessus les deux autre (donc recouvre 25% de chaque image) mais le texte ne se superpose pas, lui... il redimensionne la hauteur du corps pour pouvoir se caser plus bas...
Modifié par Alexandr240 (23 Oct 2013 - 22:17)

ton text passe en dessous des flottants, c'est le comportement normal.

Si tu positionne tes deux images en absolute ou fixed, elle seront hors du flux et ton texte ne sera pas repoussé.(ou inversement, texte en dehors du flux)

++

ouai en fixed ça m'arrange parceque ça bouge pas en scrollant la page, mais moins parceque sa perd le coté float... ou je l'utilise mal?

sinon, j'utilise un

margin-left: 50%;

mais c'est pas tres correct
ou encore avec js

var cadre1= document.getElementById('cadre1');
var taille = cadre1.offsetWidth;
var cadre2= document.getElementById('cadre2')
cadre2.style.marginLeft = taille + 'px'

Ce serait ce plus correct a votre avis?

mon code js n'est pas dynamique en fonction de si l'utilisateur mange une pomme, euh pardon. si il réduit ou agrandit la taille horizontal de sa fenetre...

En fait pour mon problème, c'est une histoire de references du bloc:
pour le bloc de droite : il se reference au point de départ du parent (de body pour ma part), ceci quand il est en 'absolute' ou 'fixed', et se place à gauche malgré mon 'float:right;'

mon problème était:
Un bloc 'relative' étant placer par dessus un autre bloc 'relative'
va adapter son contenu par rapport au bloc du dessous

et merci gc-nomade pour l'indication:
Il en faut un 'fixed' ou 'absolute', pour pallier à ce problème d'adaptation du texte

pour conserver l'effet float: right
en fait j'ai trouver:

left: auto;
right: 0;

/!\pas de 'margin-..' devant 'left et 'right'
et plus besoin de float....

en fait je crois que

position: absolute fixed;

et

float: (left) right

sont imcompatibles..

Voila, corriger moi si je me trompe!
comment ça marche (AAAAHHH!!!!) : pb de positionnement à droite du coup dsl j'aurai dut chercher u peu mieu plus vite
Modifié par Alexandr240 (24 Oct 2013 - 21:34)