Transformer une largeur fixe en relative dans un slider

Bonjour !

Je suis en train de refaire mon site, et tant qu'a faire j'aurais voulu utiliser des divs en pourcentages en plus des media queries pour que les transitions ne soient pas trop "violentes".

Ma page est constituée de 5 divs avec un petit slider horizontal pour les faire defiler, avec un peu de JQuery. Mon problème est que j'ai réussi à tout faire fonctionner avec des largeurs fixes, mais que je n'arrive pas à adapter ça en pourcentages (si c'est possible).

Voici la structure HTML simplifiée (je pense que la structure du menu n'est pas utile ici) :

<div id="wrap">
			
    <div id="content">
            
     	<div class="contentbox-wrapper">
                    
            <div id="page_1" class="contentbox">
                <p>Bloc 1</p>
            </div>
                    
            <div id="page_2" class="contentbox">
                <p>Bloc 2</p>
            </div>

            <div id="page_3" class="contentbox">
                <p>Bloc 3</p>
            </div>

            <div id="page_4" class="contentbox">
                <p>Bloc 4</p>
            </div>

            <div id="page_5" class="contentbox">
                <p>Bloc 5</p>
            </div>
            
        </div>			
                
    </div>		
			
</div>

Ainsi que le code CSS :

#wrap{			
	width:950px;
	margin:0 auto;
}
				
#content{		
	overflow:hidden;		
}
		
.contentbox-wrapper{			
	position:relative; 
	left:0; 
	width:7000px; 
}
		
.contentbox{
	width:950px; 
	height:550px; 
	float:left; 
	padding:10px;
	margin-right:300px;
}

J'aimerais donc remplacer les "950px" par "80%" mais je n'ai pas reussi (soit les blocs se mettent à la verticale et donc les slider ne marche pas, soit le slider fonctionne mais on voit à l'ecran tous les blocs...).

Voila, j'espère que j'ai été assez claire et que vous pourrez m'aider !

Merci d'avance !

Bonsoir,

Le problème qui se pose avec cette idée de slider fluide, c'est que la largeur en pourcentages des différentes <div> de contenu qui défilent est calculée en fonction de l'élément parent, c'est-à-dire la fameuse <div> positionnée et à la largeur volontairement extravagante. Or, on voudrait que la largeur soit calculée par rapport au wrapper qui possède la fameuse déclaration overflow: hidden;...

Une solution consiste à exprimer la largeur de notre graaaande <div> en pourcentages. Les éléments enfants pourront alors facilement retomber sur la largeur du wrapper.

HTML :

<div id="wrap">
	<div id="content">
		<div id="page_1"><p>Bloc 1</p></div>
		<div id="page_2"><p>Bloc 2</p></div>
		<div id="page_3"><p>Bloc 3</p></div>
	</div>
</div>

CSS :

#wrap {
	position: relative;
	max-width: 950px;
	height: 550px;
	overflow: hidden;
	margin: 0 auto;
}

#content {
	position: absolute;
	[b]width: 1000%; /* 1000 * 950px / 100 = 9500px */[/b]
}

#content > div {
	float: left;
	[b]width: 10%; /* 10 * 9500px / 100 = 950px */[/b]
	height: 550px;
}

#page_1 {background-color: #f00;}
#page_2 {background-color: #0f0;}
#page_3 {background-color: #00f;}

Le résultat en action via l'utilisation du slider de la librairie jQuery Tools : fiddle et full screen.

Merci pour ta réponse ! Le problème que j'ai avec est que quand je réduit la fenêtre, les différents blocs se superposent.