Design fluide

Bonjour à tous,

Je suis en train de réaliser un design fluide en css . Ce design comporte un bandeau horizontal composé de photos. Je souhaite que lors d'un redimensionnement du navigateur les photos occupent toute la largeur de l'écran.

Mais d'après ce que j'ai fait cela ne fonctionne pas. Quand je diminue la largeur du navigateur les photos se décalent à la ligne inférieure.

Voici mon code html :

<div id="nouveaux_inscrits">
     <img src="images/fr/fond_nv_inscrits_index.jpg">
		<div id="bandeau">
				<p>
					<img src="url_photo1">
				<br/>
				<span class="pseudo">pseudo 1</span>
                                 </p> 
                                  <p>
					<img src="url_photo2">
				<br/>
				<span class="pseudo">pseudo 2</span>
                                 </p> 
                                   <p>
					<img src="url_photo3">
				<br/>
				<span class="pseudo">pseudo 3</span>
                                 </p> 
                  </div>
</div>
	

				

Le code CSS :

div#nouveaux_inscrits{
margin-top: 0px;
height:70px;
background-color:#018499;
}

div#nouveaux_inscrits img{
width:70%;
height:70px
}

#bandeau {width: 70%; height:2px; position:absolute; margin-top:-60px; text-align:left; } 

.pseudo{font-weight:bold;}

div#bandeau p{position:float;display:inline-table;text-align:center;padding:1.6%; padding-top:0px;  font-style:normal; color:#FFFFFF; font-size:0.7em; font-family:Verdana, Arial, Helvetica, sans-serif;}

div#bandeau img{margin: 0px;  width: 60px; height: 72px; position:float; text-align:center; border:1px solid #018499;} 

Merci pour votre aide

Voici une piste de recherche: Tutoriel sur le débordement de contenu

Cela dit, je ne sais pas si ça pourra réellement t'aider puisque les éléments en float sont fait pour passer à la ligne lorsqu'il n'y a plus de place.

Si tu désire faire un type de slide par exemple. Alors là, Jquery s'imposera.

J'étais curieux sur le problème que tu présentais et j'ai fait quelques tests dans mon temps libre.

Avec ce code, mes blocs en float retournent à la ligne. Mais comme le height du conteneur est définit (tout comme "overflow: hidden"; important sinon ton conteneur n'englobe pas les éléments passés en float), ceux-ci n'apparaissent plus.

<div id="conteneur">
    <div id="d1"></div>
    <div id="d2"></div>
    <div id="d3"></div>
</div>

    #conteneur{
      border: 1px solid black;
      height: 200px; /* Change la valeur pour "220px" par exemple et tu peux constater le retour à la ligne*/
      overflow: hidden;
      }
    #d1{
      background-color: yellow;
    }
    #d2{
      background-color: blue;
    }
    #d3{
      background-color: green;
    }
    #d1,
    #d2,
    #d3{
      float: left;
      width: 200px;
      height: 200px;
    }

J'ai pas essayé ta solution, mais si les images n'apparaissent plus elles sont peut-être quand même décalées...Pour éviter le problème j'ai créé plusieurs feuilles de styles en fonction de la taille écran.

mais je testerai ta solution
Merci !

Cool ça fonctionne bien !

Merci à toi pour cette solution bien pratique !!!