28172 sujets

CSS et mise en forme, CSS3

[Résolu] Background, centrage vertical et overflow:visible

Bonjour,

J'essaie de faire quelque chose qui me semble théoriquement impossible mais en CSS il existe toujours des moyen insoupçonnés de parvenir à ses fins.
Voici mon code pour commencer, il fonctionne à merveille...

Le CSS


html {
height: 100%;
}

body {
width:100%;
height:100%;
}

.conteneur1 {
margin-left: auto;
margin-right: auto;
width:850px;
height:100%;
border : 0;
[b]background-image:url(ligne.jpg);[/b]
background-repeat: repeat-y;
background-position: 126px 0%;
}

.conteneur2 {
position:absolute;
margin-top:-260px;
top:50%;
margin-left: auto;
margin-right: auto;
width:850px;
height:100%;
}

.left {
float:left;
width:250px; 
height:100%;
}

.right {
float:left;
width:550px; 
height:520px;
[b]overflow:visible;[/b]
}


et en HTML (en gros): 


<body>
<div class="conteneur1">
<div class="conteneur2">
<div class="right"></div>
<div class="left"></div>
</div>
</div>


Le problème est le suivant : lorsque j'affiche du contenu de moins de 520 px dans "right" ça fonctionne parfaitement, lorsque j'insère du contenu de plus de 520px de hauteur dans "right", l'overflow:visible permet, comme je le veux, à la page dont le design reste centré de se déployer vers le bas mais très logiquement, la ligne qui se situe en background de conteneur1, ne suit pas le texte en overflow et s'arrête net à la moitié de ma page, soit aux 520px convenus, elle fait son boulot!

Moi, ce que j'aimerais c'est au contraire, que la ligne en arrière plan de "conteneur" puisse continuer si on dépasse les 520px; mais c'est un comportement illogique. Alors je me demandais si l'un d'entre vous n'aurait pas une idée géniale pour que ma page se comporte comme je le voudrais et que ma jolie ligne épouse mon texte jusq'à l'extrême bas de ma page ?

Merci beaucoup d 'avance !
Modifié par Justin (15 May 2008 - 23:28)
Merci pour la réponse, à vrai dire, je n'aurais pas posté ce message sans avoir d'abord consulté la FAQ, mais je n'avais pas consulté le lien que vous m'avez laissé et en effet, ça m'apporte en partie la solution!

Si j'ai bien compris vous me conseillez de placer mon arrière plan dans "body" afin qu'il s'étende jusqu'en bas en cas d'overflow. En effet, ça fonctionne pile comme je voudrais à ce dernier détail près : mon site est également centré horizontalement et ma ligne en background doit être positionnée très précisément dans mon design (126 px à droite du bord gauche de mon conteneur lui-même centré avec margin left et right en "auto").

Pensez-vous qu'un moyen existerait dans ce cas pour la positionner dans body avec autant précision?

Merci beaucoup pour votre aide,

Justin
Modifié par Justin (15 May 2008 - 18:09)
Si quelqu'un avait un jour le même ennui.

J'ai trouvé comme ultime solution à mon problème de calculer la position de la ligne avec javascript (beurk le vilain) de cette façon :


var a = screen.width;
var b = (a-850)/2
var c = b+126+"px"

function ligne() {
document.body.style.backgroundImage='url(../common/backgrounds/ligne.jpg)';
document.body.style.backgroundRepeat='repeat-y'; 
document.body.style.backgroundPosition= c + ' 0 ';
}


Un body onload et le tour est joué.

Hallelujah, merci à vous.
Modifié par Justin (15 May 2008 - 23:28)
Sujet clos
Aller à