Résolution html/css

Résolution html/css - HTML/CSS - Programmation

Marsh Posté le 27-07-2012 à 17:58:36    

Bonjour,
 
Alors voilà, j'ai un soucis.. je n'arrive pas à rentre compatible la résolution de mon site en fonction de l'écran de l'utilisateur.  
Les images ne se positionne pas comme je le vois moi.  
J'ai cherchais sur internet.. j'ai bien mis toutes mes images en %, pas de px ni de em dans mon code.. que ce soit en html ou encore css
 
Pouvez-vous me donnez des balises afin de m'aider?
 
 
Merci de répondre a ma question.


Message édité par HeadOwner le 05-08-2012 à 16:29:44
Reply

Marsh Posté le 27-07-2012 à 17:58:36   

Reply

Marsh Posté le 27-07-2012 à 18:38:56    

Tu as cherché sur quels sites ?
Car là, tu as fais le contraire des bonnes pratiques, tu as employé des position absolute.
Bref tu peux tout refaire, avec des layout différents pour chaque taille d'écran.
Tu commences par la version mobil, et ensuite tu emploies des "media queries" pour les autres tailles avec le layout qui devient plus complexe.
Et tu donnes aux image la propriété css max-width: 100%  
C'est résumé bien sur, mais je te propose un bon tuto http://www.netmagazine.com/tutoria [...] ely-part-1
 
Par contre, il faut avouer que c'est bien plus long de faire les templates, bonne chance

Reply

Marsh Posté le 27-07-2012 à 18:43:53    

Merci, je vais voir ce que ça donne.. c'est juste dommage qu'il n'y ai pas une "formule universelle" qu'il fasse juste mettre dans le code.

Reply

Marsh Posté le 27-07-2012 à 18:45:20    

Erf, c'est pas ce que je cherche..
 
Je veux juste que le site puisse s'adapter à chaque résolution, hors du mobile, c'est pas grave.

Reply

Marsh Posté le 27-07-2012 à 18:48:25    

Des astuces s'il vous plaît?  
 
Comment je dois placer mes images? Qu'est-ce qu'il ne vas pas?  
 

Reply

Marsh Posté le 27-07-2012 à 18:53:29    

Si tu es persuadé que personne ne va aller sur ton site avec un téléphone, pas de problème.
Voilà donc un tuto de design fluide en trois colonnes.
http://www.alsacreations.com/tuto/ [...] float.html

Reply

Marsh Posté le 27-07-2012 à 19:33:42    

Apart m'envoyer sur des tuto, a droite, a gauche.. vous avez pas une solution concrète?
 
J'ai adapter ton tuto sur les colonnes.. c'est bien? mais ça donne rien du tout, je peux pas deplacer les images, les changer de tailles..
 
Au risque de parraître méchant, je peux avoir des explications sur le pourquoi du comment appliquer une résolution? Merci.  
 

Reply

Marsh Posté le 27-07-2012 à 19:39:34    

Quel position je dois adapter pour chaque image si ce n'est absolute?
 
.


Message édité par HeadOwner le 05-08-2012 à 16:29:17
Reply

Marsh Posté le 27-07-2012 à 19:41:51    

Pour info, personne ne comprends ce que tu veux, ce n'est pas en donnant du css sans html que l'on peut t'aider
Donne une image de ton layout et ton code html si tu veux bien.

Reply

Marsh Posté le 27-07-2012 à 19:47:13    

Ce que je veux? Que mon site soit visible comme moi je le vois dans ses dimensions. Et je vois bien que ce n'est pas le cas par le bié de http://www.supportduweb.com/testeu [...] -size.html
 
Tu veux une image de mon code ?

Reply

Marsh Posté le 27-07-2012 à 19:47:13   

Reply

Marsh Posté le 27-07-2012 à 19:55:18    

Heu, j'avoue que je comprends pas à quoi ton site doit ressembler.
Ce qui est certain c'est que tu dois tout recommencer de zéro.
Donne un image pour montrer ce que tu cherches à faire,et on va pouvoir avancer

Reply

Marsh Posté le 27-07-2012 à 20:26:50    

Reply

Marsh Posté le 27-07-2012 à 20:44:44    

up

Reply

Marsh Posté le 27-07-2012 à 21:09:29    

Donc tu as un design en trois colonnes.
Ensuite, tu mets les images, et tu leur attribuent la propriété css max-width: 100%.
Et bien sur le container des images doit avoir une dimension.
Voilà un début de code, tu remarques que les images augmentent de taille selon la taille de la fenêtre de ton navigateur.

Code :
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.     <meta charset="utf-8" />
  5. <link rel="stylesheet" href="http://tonsite.com/index.css" />
  6. <!--[if lt IE 9]>
  7.             <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  8.         <![endif]-->
  9. <link rel="shortcut icon" href="http://tonsite/images/favicon.ico" />
  10.         <title></title>
  11.         <style type="text/css">
  12.             #sidebar {
  13.                 float: left;
  14.                 width: 20%;
  15.                 margin-right: 2%;
  16.             }
  17.             #aside {
  18.                 float: right;
  19.                 width: 20%;
  20.                 margin-left: 2%;
  21.             }
  22.             #main {
  23.                 width:56%;
  24.                 float: left;
  25.             }
  26.             img {
  27.                 max-width:100%;
  28.             }
  29.             #social {
  30.                 margin:0;
  31.                 padding: 0;
  32.             }
  33.             #social li {
  34.                 width:32%;
  35.                 list-style: none;
  36.                 display:inline-block;
  37.             }
  38.      
  39. }</style>
  40.     </head>
  41.     <body>
  42.         <div id="sidebar">sidebar</div>
  43.         <div id="main"><img src="http://tonsite.com/images/Dofus.png" alt="photo"  /></div>
  44.         <div id="aside">
  45.             <ul id="social">
  46.                 <li> <img src="http://tonsite.com/images/facebook.png" alt="photo" ></li>
  47.                 <li><img src="http://tonsite.com/images/twitter.png" alt="photo" ></li>
  48.                 <li><img src="http://tonsite.com/images/youtube.png" alt="photo" ></li>
  49.             </ul>
  50.         </div>
  51.        
  52. </body>
  53. </html>


Message édité par David Boring le 07-08-2012 à 09:56:18
Reply

Marsh Posté le 28-07-2012 à 06:20:53    

Merci de m'aider,
 
Mais comment je dois faire pour modifier la taille des images? et pouvoir les deplacer?

Reply

Marsh Posté le 28-07-2012 à 18:23:54    

up

Reply

Marsh Posté le 28-07-2012 à 18:56:08    

De l'aide merci?

Reply

Marsh Posté le 28-07-2012 à 22:07:17    

UP !

Reply

Marsh Posté le 29-07-2012 à 03:37:02    

uuuuuuuuuuuuuuuuuup

Reply

Marsh Posté le 29-07-2012 à 05:45:53    

up


Message édité par HeadOwner le 05-08-2012 à 16:30:23
Reply

Marsh Posté le 29-07-2012 à 14:19:38    

up

Reply

Marsh Posté le 30-07-2012 à 11:39:00    

HeadOwner a écrit :

Merci de m'aider,
 
Mais comment je dois faire pour modifier la taille des images? et pouvoir les deplacer?


Je ne comprends pas ce que tu veux dire.
 

Reply

Marsh Posté le 31-07-2012 à 10:21:16    

Tu peux parler plus poliment Head...

Reply

Marsh Posté le 05-08-2012 à 16:28:21    

Oui désolé, j'étais énervé! MDRR
 
C'est bon j'ai résolue le truc en prenant une template toute faite afin de m'entraîner dessus et de la modifier a ma guise, c'est beaucoup mieux! Merci! ;)

Reply

Marsh Posté le 06-08-2012 à 12:38:40    

C'est sans doute un bonne solution, car tu voulais un layout qui était un peu difficile pour un débutant.
En outre, une fois tes images placées, tu dois faire le code derrière, et là se trouve le gros du boulot.
Maintenant, tu peux consacrer au fonctionnalités, comme ton template fait le layout.

Reply

Marsh Posté le 07-08-2012 à 09:34:50    

Yes, par contre David, est-ce que tu pourrais éditer ton mess où tu met du code s'il te plaît, car quand on tape le nom de mon site on tombe aussi sur cette page! merci à toi! ;)

Reply

Marsh Posté le 07-08-2012 à 09:57:08    

fixed

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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