Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1002 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Résolution html/css

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Résolution html/css

n°2151324
HeadOwner
Posté le 27-07-2012 à 17:58:36  profilanswer
 

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
mood
Publicité
Posté le 27-07-2012 à 17:58:36  profilanswer
 

n°2151326
David Bori​ng
Posté le 27-07-2012 à 18:38:56  profilanswer
 

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

n°2151327
HeadOwner
Posté le 27-07-2012 à 18:43:53  profilanswer
 

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.

n°2151328
HeadOwner
Posté le 27-07-2012 à 18:45:20  profilanswer
 

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.

n°2151329
HeadOwner
Posté le 27-07-2012 à 18:48:25  profilanswer
 

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

n°2151330
David Bori​ng
Posté le 27-07-2012 à 18:53:29  profilanswer
 

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

n°2151332
HeadOwner
Posté le 27-07-2012 à 19:33:42  profilanswer
 

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.  
 

n°2151333
HeadOwner
Posté le 27-07-2012 à 19:39:34  profilanswer
 

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


Message édité par HeadOwner le 05-08-2012 à 16:29:17
n°2151334
David Bori​ng
Posté le 27-07-2012 à 19:41:51  profilanswer
 

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.

n°2151335
HeadOwner
Posté le 27-07-2012 à 19:47:13  profilanswer
 

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 ?

mood
Publicité
Posté le 27-07-2012 à 19:47:13  profilanswer
 

n°2151336
David Bori​ng
Posté le 27-07-2012 à 19:55:18  profilanswer
 

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

n°2151338
HeadOwner
Posté le 27-07-2012 à 20:26:50  profilanswer
 
n°2151341
HeadOwner
Posté le 27-07-2012 à 20:44:44  profilanswer
 

up

n°2151342
David Bori​ng
Posté le 27-07-2012 à 21:09:29  profilanswer
 

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
n°2151367
HeadOwner
Posté le 28-07-2012 à 06:20:53  profilanswer
 

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

n°2151405
HeadOwner
Posté le 28-07-2012 à 18:23:54  profilanswer
 

up

n°2151407
HeadOwner
Posté le 28-07-2012 à 18:56:08  profilanswer
 

De l'aide merci?

n°2151422
HeadOwner
Posté le 28-07-2012 à 22:07:17  profilanswer
 

UP !

n°2151427
HeadOwner
Posté le 29-07-2012 à 03:37:02  profilanswer
 

uuuuuuuuuuuuuuuuuup

n°2151428
HeadOwner
Posté le 29-07-2012 à 05:45:53  profilanswer
 

up


Message édité par HeadOwner le 05-08-2012 à 16:30:23
n°2151438
HeadOwner
Posté le 29-07-2012 à 14:19:38  profilanswer
 

up

n°2151532
David Bori​ng
Posté le 30-07-2012 à 11:39:00  profilanswer
 

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.
 

n°2151687
noxno
Posté le 31-07-2012 à 10:21:16  profilanswer
 

Tu peux parler plus poliment Head...

n°2152599
HeadOwner
Posté le 05-08-2012 à 16:28:21  profilanswer
 

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! ;)

n°2152648
David Bori​ng
Posté le 06-08-2012 à 12:38:40  profilanswer
 

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.

n°2152721
HeadOwner
Posté le 07-08-2012 à 09:34:50  profilanswer
 

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! ;)

n°2152726
David Bori​ng
Posté le 07-08-2012 à 09:57:08  profilanswer
 

fixed

mood
Publicité
Posté le   profilanswer
 


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Résolution html/css

 

Sujets relatifs
Aide en htmlHTML/PHP - Positionner correctement un pied de page
besoin d'un coup de main pour affichage foireux dans IE6[html] problème d'affichage selon la résolution[resolu]
Probléme de résolution [HTML/CSS][HTML/CSS/JS] redimensionner une image en fonction de la resolution ?
[HTML/CSS] quelle méthode pour qu'une image s'adapte à la résolution ?[HTML, JS ?] popup avec/sans scrollbar selon résolution
[HTML] resolution et centrage[html - js] probleme de detection de resolution
Plus de sujets relatifs à : Résolution html/css


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR