Suivez les fils RSS
 
Rechercher dans le sujet :
Forum
» CSS et mise en forme, CSS3
» Redimensionnement d'images de manière fluide selon la résolution
Auteur
AkaiKen
# 17 Mar 2010 - 08:48:27
Citer
124 Posts
 Bonjour à vous !
Je fais un site au design un peu particulier : en horizontal et redimentionnable (donc positionnement absolu et pourcentages, etc), et ce positionnement me pose un petit problème.
Je dois mettre dans le bandeau central un carrousel. Au départ c'était en flash mais on galère alors on teste sans, et ici c'est un carrousel avec jQuery (la chouette bibliothèque javascript). Mais j'aimerais que le carrousel (blanc) prenne toute la hauteur du bandeau (jaune pâle), et que les images qui le composent suivent : et surtout que ceci soit valable quelle que soit la résolution... et surtout surtout que les images suivent (je me répète, je sais, mais c'est là mon problème principal).

Quelqu'un aurait-il une idée ?

Merci d'avance.

Voilà le lien vers la page en cours : http://akaiken.free.fr/clepsydre/testnoflash/N1.php
Modifié par AkaiKen (17 Mar 2010 - 11:20)
http://sphinx.lamecarlate.net 
^
jb_gfx
# 17 Mar 2010 - 10:22:37
Citer
2551 Posts
 Tu parle de redimensionnement fluide des images mais c'est le contraire que tu demandes. Ton bandeau a une hauteur fixe donc si tu veux que les images prennent toujours toutes la hauteur du bandeau elles doivent avoir une taille fixe aussi.

Ce que je ferais c'est fixer la taille des images et plutôt jouer sur l'espacement entre elles (pour qu'il soit fluide). Et je fixerai la taille minimale du design à 1024 pixels (un peu moins, en fait : 980).
Je ne sais pas si je suis cultivé ou si je viens d'inventer deux nouveaux mots.
http://www.pixemedia.com/ 
^
AkaiKen
# 17 Mar 2010 - 11:00:53
Citer
124 Posts
 Mon bandeau n'a pas une hauteur fixe biggrin sa hauteur est de 30% de l'écran (donc sa hauteur en pixels varie suivant les résolutions). Si je mets la taille des images à 100% (de leur espace réservé), elles dépassent...
http://sphinx.lamecarlate.net 
^
jb_gfx
# 17 Mar 2010 - 11:23:08
Citer
2551 Posts
 OK, donc plutôt partir sur une hauteur en pourcentage pour les images et des marges fluides pour la largeur. Toujours en fixant une largeur mini.
Modifié par jb_gfx (17 Mar 2010 - 11:24)
Je ne sais pas si je suis cultivé ou si je viens d'inventer deux nouveaux mots.
http://www.pixemedia.com/ 
^
AkaiKen
# 17 Mar 2010 - 12:45:07
Citer
124 Posts
 En fait, ce qui m'ennuie c'est que si je mets un height: x% dans mon img, cela redimensionne l'image à x% de sa hauteur : et donc ce sera fixe, cela dépendra uniquement de sa taille initiale... Si elle fait 200px sur 200px en tant que fichier, lui dire height: 80% reviendra à en faire une image apparente de 160px de hauteur.

Je pense que le souci vient du fait que mon design est en position: absolute avec des hauteurs en pourcentage : si je prend ma fenêtre et que je diminue sa hauteur, les bandes se redimensionnent mais pas les images (qui vont commencer à changer de taille uniquement si je change la largeur de la fenêtre).

Je n'ai pas très bien saisi ton message sur les "marges fluides pour la largeur" : je ne gère pas les marges entre les images, c'est le carrousel qui s'en occupe - je peux chercher à surcharger, ceci dit.
http://sphinx.lamecarlate.net 
^
juliesunset
# 17 Mar 2010 - 20:07:55
Citer
411 Posts
 Mais pourquoi positionner en absolute?
un simple margin-top en pourcentage fonctionnerais très bien à mon avis.
Julie
^
AkaiKen
# 18 Mar 2010 - 09:07:07
Citer
124 Posts
 Oh, excellente idée, mais dans ce cas, mon bandeau central ne pourrait pas avoir de hauteur s'il est vide (ce qui pourrait arriver). Et surtout, il y aura des objets dans la partie supérieure.

Mais merci d'avoir proposé smile

http://sphinx.lamecarlate.net 
^
juliesunset
# 18 Mar 2010 - 14:44:30
Citer
411 Posts
 Pas sûr d'avoir compris ce que tu dit, mais normalement y'a qu'à lui indiqué un min-height et le tour est joué!
Julie
^
flattazor
# 18 Mar 2010 - 21:07:04
Citer
132 Posts
 salut,

et avec ça ?



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">



<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">



<style type="text/css">



html, body { width: 100%;

	     height: 100%;

	     margin: 0;

	     padding: 0;

	     overflow: auto;

	   }



div.header { width: 100%;

	     height: 30%;

	     margin: 0;

	     padding: 0;

	     position: absolute;

	     top: 0;

	     left: 0;

	     background-color: magenta;

	   }



div.carrousel { width: 100%;

		height: 40%;

		position: absolute;

		top: 30%;

		left: 0%;

		background-color: yellow;

	      }



div.footer { width: 100%;

	     height: 30%;

	     margin: 0;

	     padding: 0;

	     position: absolute;

	     top: 70%;

	     left: 0;

	     background-color: blue;

	    }



div.bd_h { width: 100%;

	   height: 5%;

	   margin: 0;

	   padding: 0;

	   background-color: brown;

	 }



div.slide { width: 100%;

	    height: 90%;

	    margin: 0;

	    padding: 0;

	  }



div.bd_b { width: 100%;

	   height: 5%;

	   margin: 0;

	   padding: 0;

	   background-color: brown;

	 }



ul.jcarousel-skin-tango { height: 99%;

			  margin: 0;

			  padding: 0;

			  list-style-type: none;

			}



ul.jcarousel-skin-tango li { height: 99%;

			     margin: 0;

			     padding: 0;

			     display: inline;

			   }



img { height: 100%;

      margin: 0 0 0 10px;

      padding: 0;

    }





</style>



<body>



<div class="header"></div>



<div class="carrousel">



   <div class="bd_h"></div>



   <div class="slide">



      <ul id="mycarousel" class="jcarousel-skin-tango">



	 <li>

	    <img src="http://digimon.neoseeker.com/w/i/digimon/7/71/Gabumon.jpg" alt="" />

	    <span class="seconde-ligne">item 1</span>

	 </li>



	 <li>

  	   <img src="http://digimon.neoseeker.com/w/i/digimon/b/b0/Biyomon.jpg" alt="" />

	    <span class="seconde-ligne">item 2</span>

	 </li>



	 <li>

	    <img src="http://digimon.neoseeker.com/w/i/digimon/6/61/Palmon.jpg" alt="" />

	    <span class="seconde-ligne">item 3</span>

	 </li>



      </ul>



   </div>



   <div class="bd_b"></div>



</div>



<div class="footer"></div>



</body>

</html>


^
Le sujet est clos.
Aller à