Responsiv design

Responsiv design - HTML/CSS - Programmation

Marsh Posté le 08-12-2012 à 16:00:35    

Bonjour à tous,  
 
Je suis débutant et je suis en train de réaliser un site internet (projet pour l'école) mais je rencontre une petite difficulté.  
 
J'ai préalablement réalisé le design du site sur photoshop et il me suffit donc maintenant d'intégrer ces images en HTML. Ça parait simplissime mais le professeur demande de faire un site qui s'adapte à la taille de l'écran de l'utilisateur. J'ai un peu fouillé sur Internet et apparemment il faudrait que j'utilise la balise "position: relative" avec des indications en pourcentage. Le problème c'est que certaines de mes images doivent se superposer et dans ce cas il n'y a que "position: abolute" qui aille.  
 
Du coup comment faire ? Il n'y aurait pas une balise intermédiaire entre absolute et relative ?  
 
Merci d'avance pour votre aide.

Reply

Marsh Posté le 08-12-2012 à 16:00:35   

Reply

Marsh Posté le 08-12-2012 à 22:32:07    

par défaut, les éléments absolute sont absolutes à la page.
Si tu mets des éléments absolute dans un div relative, alors ils seront relatifs en pixels à ce div.
 
Le responsive design n'a pas grand chose à voir avec relative / absolute, ce que tu veux c'est surtout du @media (min-width: ... ) { ... }


Message édité par CyberDenix le 08-12-2012 à 22:32:24

---------------
Directeur Technique (CTO)
Reply

Marsh Posté le 10-12-2012 à 13:43:51    

En français, on appelle ça le design "flottant" ou "fluide" il me semble (rien à voir avec float).
Faut utiliser les unités relatives (em ou %). Dans le graphisme, faut privilégier les éléments qui se dupliquent (horizontalement au moins).


Message édité par rufo le 10-12-2012 à 13:44:33

---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed