Centrage d'une div et div fixe à ses cotés

Bonjour,

je me casse la tête sur un truc et voila, je craque après avoir fouillé le web...

Voici ma question :

J'aimerai créer une div. Disons 900px de large sur X de haut...
Cette div, centrée à l’écran est ecartee de 300px du haut de l'ecran et doit avoir à sa droite, une autre div, qui elle est fixe au scroll vertical (et toujours à 350px du top).
En gros, quand on scroll sur la page, la petite div coulisse à coté de la grande tout en étant fixe à l’écran...

Voici l'explication en image :



Si vous pouviez m'aider sur ce coup là ce serait génial car je sèche grave

Merci d'avance !

Fred
Modifié par Gate404 (16 May 2011 - 18:03)

Bonjour, montre nous un bout de code que tu as déjà essayé ou qui ne fonctionne pas.

Sinon, si tu pars à la base, il y a les articles de base dans la section apprendre ou tu peux faire quelques recherches par rapport au positionnement.

Salut,

bon je suis de chez moi là, je n'ai pas tout mon code devant les yeux.

De tete j'avais testé un truc du genre :


<div style="background-color: blue;margin: auto; width: 980px; height: 300px;">Body</div>
<div style="background-color: pink; float: left;width: 150px; height:150px;">Vignette</div>

Assez simpliste certes, mais cela m'aurait semblé quelque peu logique... on met le body au centre et la vignette vient s'y coller... or cela ne fonctionne pas...
Modifié par Gate404 (16 May 2011 - 20:17)

J'avais réussi à faire ça sur mon blog l'année dernière http://arialia.dev-fr.org/ ... faudrait que je finisse et surtout que je récupère mon mot de passe du blog ...

En fait c'est quasi cela, mais toi tu as mis ta cellule alignée au bord d’écran. Ça j'arrive à le faire, mais c'est la coller à celle qui est centrée que je n'arrive pas à faire. Mais merci pour ta réponse !

Quelqu'un a une idée ?

Fred

est ce une chose du genre ?

<div id="global">

<div id="centre"></div>
<div id="cote"></div>

</div>

#global

{width:950px;
height:1000px;
margin:0 auto;
background-color:green}


#centre

{
position:relative;
top:300px;
width:800px;
height:500px;
background-color:grey;
float:left;

}

#cote

{
position:fixed;
width:150px;
height:200px;
background-color:red; 
margin-left:800px;
top:350px;
}

Je suis d'accord sur le principe, mais là tu centres le "global" et non le "centre".

C'est la petite nuance qui fait tout

Je me demande même si c'est possible à faire ce truc là....

Ca y est, en fait en reprenant ton code j'ai decalé le tout... je m'y suis vraiment mal pris.. j'ai besoin de congés !!!

Voici le code modifié :

#global 
 
{width:1100px; 
height:1000px; 
margin:0 auto; 
background-color:green} 
 


 
#centre 
 
{ 
position:relative; 
top:300px; 
width:800px; 
height:500px; 
background-color:blue; 
float:left; 
margin-left: 150px; 
} 
 
#cote 
 
{ 
position:fixed; 
width:150px; 
height:200px; 
background-color:red;  
margin-left:950px; 
top:350px; 
}

Merci à toi de m'avoir ouvert les yeux

cool si cela a pu t'aider ^^

a+