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

  FORUM HardWare.fr
  Graphisme
  Web design

  Problème CSS résolution d'écran avec un menu en images

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Problème CSS résolution d'écran avec un menu en images

n°1041615
benorito
Posté le 18-11-2008 à 02:30:07  profilanswer
 

Bonjour,
 
Je viens vous consultez car j'ai un problème récurant que je n'arrive pas a régler, je suis actuellement en trin de créer mon site web. Le souci viens de mon div contenant mon menu celui ci se compose de 7 images allant de 18ko sans rollover à 15 avec rollover voici mon code :
 
Mon  html :

Code :
  1. <div id="menu" width="100%" height="100%">
  2.  <!-- ImageReady Slices (Menugratte.psd) -->
  3.     <a href="index.php"
  4.      onmouseover="changeImages('Menugratte_01', 'Menugratte/Menugratte_01-over.gif'); return true;"
  5.      onmouseout="changeImages('Menugratte_01', 'Menugratte/Menugratte_01.gif'); return true;"
  6.      onmousedown="changeImages('Menugratte_01', 'Menugratte/Menugratte_01-over.gif'); return true;"
  7.      onmouseup="changeImages('Menugratte_01', 'Menugratte/Menugratte_01-over.gif'); return true;">
  8.      <img name="Menugratte_01" src="Menugratte/Menugratte_01.gif"   width="100%" height="auto%" border="0" alt="Accueil"></a>
  9. <br>
  10.     <a href="images/images.php"
  11.      onmouseover="changeImages('Menugratte_02', 'Menugratte/Menugratte_02-over.gif'); return true;"
  12.      onmouseout="changeImages('Menugratte_02', 'Menugratte/Menugratte_02.gif'); return true;"
  13.      onmousedown="changeImages('Menugratte_02', 'Menugratte/Menugratte_02-over.gif'); return true;"
  14.      onmouseup="changeImages('Menugratte_02', 'Menugratte/Menugratte_02-over.gif'); return true;">
  15.      <img name="Menugratte_02" src="Menugratte/Menugratte_02.gif"   width="auto%" height="auto%" border="0" alt="Images"></a>
  16. <br>
  17.     <a href="videos/videos.php"
  18.      onmouseover="changeImages('Menugratte_03', 'Menugratte/Menugratte_03-over.gif'); return true;"
  19.      onmouseout="changeImages('Menugratte_03', 'Menugratte/Menugratte_03.gif'); return true;"
  20.      onmousedown="changeImages('Menugratte_03', 'Menugratte/Menugratte_03-over.gif'); return true;"
  21.      onmouseup="changeImages('Menugratte_03', 'Menugratte/Menugratte_03-over.gif'); return true;">
  22.      <img name="Menugratte_03" src="Menugratte/Menugratte_03.gif"  width="auto%" height="auto%" border="0" alt="Vid&#233;os"></a>
  23. <br>
  24.     <a href="Musiques/musiques.php"
  25.      onmouseover="changeImages('Menugratte_04', 'Menugratte/Menugratte_04-over.gif'); return true;"
  26.      onmouseout="changeImages('Menugratte_04', 'Menugratte/Menugratte_04.gif'); return true;"
  27.      onmousedown="changeImages('Menugratte_04', 'Menugratte/Menugratte_04-over.gif'); return true;"
  28.      onmouseup="changeImages('Menugratte_04', 'Menugratte/Menugratte_04-over.gif'); return true;">
  29.      <img name="Menugratte_04" src="Menugratte/Menugratte_04.gif"  width="auto%" height="auto%" border="0" alt="Musiques"></a>
  30. <br>
  31.     <a href="Clips/clips.php"
  32.      onmouseover="changeImages('Menugratte_05', 'Menugratte/Menugratte_05-over.gif'); return true;"
  33.      onmouseout="changeImages('Menugratte_05', 'Menugratte/Menugratte_05.gif'); return true;"
  34.      onmousedown="changeImages('Menugratte_05', 'Menugratte/Menugratte_05-over.gif'); return true;"
  35.      onmouseup="changeImages('Menugratte_05', 'Menugratte/Menugratte_05-over.gif'); return true;">
  36.      <img name="Menugratte_05" src="Menugratte/Menugratte_05.gif" width="auto%" height="auto%"  border="0" alt="Clips"></a>
  37. <br>
  38.     <a href="Divers/divers.php"
  39.      onmouseover="changeImages('Menugratte_06', 'Menugratte/Menugratte_06-over.gif'); return true;"
  40.      onmouseout="changeImages('Menugratte_06', 'Menugratte/Menugratte_06.gif'); return true;"
  41.      onmousedown="changeImages('Menugratte_06', 'Menugratte/Menugratte_06-over.gif'); return true;"
  42.      onmouseup="changeImages('Menugratte_06', 'Menugratte/Menugratte_06-over.gif'); return true;">
  43.      <img name="Menugratte_06" src="Menugratte/Menugratte_06.gif"  width="auto%" height="auto%" border="0" alt="Divers"></a>
  44. <br>
  45.     <a href="Prive/connection.php"
  46.      onmouseover="changeImages('Menugratte_07', 'Menugratte/Menugratte_07-over.gif'); return true;"
  47.      onmouseout="changeImages('Menugratte_07', 'Menugratte/Menugratte_07.gif'); return true;"
  48.      onmousedown="changeImages('Menugratte_07', 'Menugratte/Menugratte_07-over.gif'); return true;"
  49.      onmouseup="changeImages('Menugratte_07', 'Menugratte/Menugratte_07-over.gif'); return true;">
  50.      <img name="Menugratte_07" src="Menugratte/Menugratte_07.gif" width="auto%" height="auto%" border="0" alt="Priv&#233;"></a>
  51.  </div>


Mon CSS:

Code :
  1. #menu
  2. {
  3. float:left;
  4. width:10%;
  5. height:70%;
  6. position: absolute;
  7. top: 22%;
  8. }


 
 
Donc de cela le problème est le suivant : quand ma résolution est en 1280*800 je n'ai aucun problème, je peut aligner mais div externe dessus en bidouillant un peut. J'aurais souhaité avoir une seul feuille css pour toute les résolution possible et de cela pour aligner mon div situé a droite de mon div menu sans bidouiller. Car pour le moment mon menu ne change pas du tout de la même manière que mon div contenu accolé a sa droite, les dimensions changent et ils ne se retrouvent plus du tout alignés, ou si c'est le cas les images sont décalés les une par rapport aux autre laissant des espaces entre les liens.  
Je ne sais plus trop quoi faire j'ai beaucoup cherché et rien trouvé de valable pour le moment.
Je vous demande donc si vous auriez une solution CSS ou a fin de redimensionner les images de mon menu selon la résolution ou quelque chose qui pourrait régler mon problème.
 
Merci d'avance j'attends vos réponse avec impatiente car se problème dur déjà depuis plusieurs semaine et je ne m'en sort pas.
 
Cordialement.
 
Benorito

mood
Publicité
Posté le 18-11-2008 à 02:30:07  profilanswer
 

n°1041629
abais
Posté le 18-11-2008 à 09:47:42  profilanswer
 

Tu n'as pas de lien pour voir ?


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°1041688
benorito
Posté le 18-11-2008 à 14:26:09  profilanswer
 

Bonjour,
 
Donc suite au message j'ai mis la page concerné sur le net : www.funynet.fr
 
Changer la résolution et voyez comment se comporte mon menu et comment il se comporte par rapport a mon contenu.
 
La charte graphique n'est pas respecté du tout j'en suis conscient je suis mauvais de ce coté aussi je débute, de plus le site est loin d'être terminé et fignolé si vous avez des conseils a me donner pour améliorer tout sa je suis preneur.
 
Merci d'avance
 
Cordialement
 
Benorito


Message édité par benorito le 18-11-2008 à 14:28:25
n°1041704
J_D_
Posté le 18-11-2008 à 15:42:00  profilanswer
 

Salut,  
 
Mon conseil n°1 serait de tout recommencer de A à Z.
C'est pas sérieux comme site.  
 
En page d'accueil, je lis :"J'ai crée ce site afin de me prouver à moi même que mes années d'informatique m'ont servit à quelque chose."
 
Si tu veux que ce message aie de la valeur, il faut que le site suive, ce n'est pas le cas.
Oublie donc, les fonds et les textes de toutes les couleurs, les gifs animés, les bordures de 5px, etc...  :pfff:  
 
Mon second conseil serait que tu nous ré-expliques ton problème parce que j'ai lu 3-4 fois et j'ai toujours rien compris.
 
Et pour terminer, essaie d'avoir une meilleure orthographe sur tes pages et dans tes messages.
 
 
Bonne chance   :jap:  

n°1041712
abais
Posté le 18-11-2008 à 16:30:34  profilanswer
 

En faite, les images respectent le ratio...
Il faudrait que tu définisses une taille chiffré en % pour tes images plutôt que des "auto"...
Sinon, ça m'étonnerai qu'Internet Explorer digère ta page, et perso, je ne suis pas fan du tout de ce style de mise en page (étirage des images, beurk !)


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°1041729
benorito
Posté le 18-11-2008 à 18:32:12  profilanswer
 

Salut,
 
Donc les conseil de se style je trouve sa vraiment nul recommence tout de A Z pour un mec qui a autant de message posté et autant d'expérience je trouve sa un peut bas de niveau excuse moi. Si j'avais voulu me faire descendre j'aurai prévenu se forum est public, de plus comme indiqué sur mon post :
 
La charte graphique n'est pas respecté du tout j'en suis conscient je suis mauvais de ce coté aussi je débute, de plus le site est loin d'être terminé et fignolé si vous avez des conseils a me donner pour améliorer tout sa je suis preneur.
   
Donc pour une personne qui prétend avoir lu 3 4 fois :/ soit tu a des problème de compréhension soit sa t'amuse je vois pas trop mais bon. Le site n'est pas référencé et est loin de l'être, le header n'est que provisoire ...
 
Donc si quelqu'un aurait une vrai réponse sa serait sympa, du genre aider plutôt que de juger sa m'arrangerais  ;)  !
 
Merci abais, le code html fourni n'est pas le bon, les images sont en width="100%" height="100%". Comme tu le dis les images sont étirées (surtout le menu) se que je ne souhaite pas, j'aimerai que ma page ne change presque pas sauf les marge sur les cotés quand je change de résolution. Je me répète mais je débute et je commence a être un peut perdu. Le lien du site : www.funynet.fr .
 
Merci d'avance.
 
Benorito

n°1041731
J_D_
Posté le 18-11-2008 à 19:03:49  profilanswer
 

Si j'avais voulu descendre ton site, je l'aurais fait point par point et j'y aurais ajouté plein de smileys moqueurs. Ce qui n'est pas le cas.
 
Tu prends mon message comme tu le veux, mais mon but n'était pas de critiquer pour le plaisir.
 
Tu demandes des conseils pour fignoler ton site, pour moi ça prendrait plus de temps que d'en faire un nouveau avec de la gueule. C'est tout ce que j'ai voulu dire.
Je t'ai également donné des conseils concernant les gifs, les fonds et les polices.  
 
Conseils et critiques sont liés, il faut juste savoir accepter les deux.

n°1041734
benorito
Posté le 18-11-2008 à 19:16:03  profilanswer
 

Et donc je ne fignole pas je suis encore a la création, aurait tu quelque chose a me proposer a part virer les gifs de changer la police (qui sont dans mon header cela dis et que je ais virer ...). Je ne sais pas trop gérer photoshop encore, aux niveau de la bannière qui est moche je le sait, ou des fonds ... Des fonds uni sur tout le site, des arrondis ... Je ne sais pas j'attends des idées aussi si possible je n'ai pas l'expérience et le recul nécessaire pour voir se qui correspondrai le mieu.
 
Merci encore.
 
Benorito  

n°1041736
J_D_
Posté le 18-11-2008 à 19:35:32  profilanswer
 

Ben comme j'ai dit sur un autre topic, si tu n'es pas créatif, tu peux toujours trouver des templates qui peuvent t'inspirer. Si tu ne connais pas photoshop c'est pas facile de créer son propre design mais il ne faut pas non plus être un graphiste confirmé pour faire quelque chose de joli.
 
 
Pour les fonds, tu n'es pas obligé de prendre des fonds unis. Si tu trouves ou que tu crées un fond avec un motif, il faut que le motif puisse se répéter sans former une mosaïque avec ces images coupées.
Comme par exemple sur www.plugrtl.be.
 
Les polices doivent être les mêmes. La couleur est importante, elle doit convenir avec le reste du design tout en restant facilement lisible (par ex :noir sur blanc).
 
Et puis aussi, il faut savoir si tu veux donner une orientation à ton site, tu
 

n°1041897
benorito
Posté le 20-11-2008 à 03:00:53  profilanswer
 

Bonjour,
 
Excuse de répondre si tard déjà merci pour ta réponse, bien que je n'ai pas la fin :/.  
Donc j'ai re planché dessus et maintenant l'exemple de mon problème me semble plus parlant : www.funynet.fr.
 
Mon code html :
 

Code :
  1. <div id="menu" width="100%" height="100%">
  2.  <!-- ImageReady Slices (Menugratte.psd) -->
  3. <table id="Tableau_01" width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
  4. <tr>
  5.  <td>
  6.     <a href="index.php"
  7.      onmouseover="changeImages('Menugratte_01', 'Menugratte/Menugratte_01-over.gif'); return true;"
  8.      onmouseout="changeImages('Menugratte_01', 'Menugratte/Menugratte_01.gif'); return true;"
  9.      onmousedown="changeImages('Menugratte_01', 'Menugratte/Menugratte_01-over.gif'); return true;"
  10.      onmouseup="changeImages('Menugratte_01', 'Menugratte/Menugratte_01-over.gif'); return true;">
  11.      <img name="Menugratte_01" src="Menugratte/Menugratte_01.gif"   width="100%" height="100%" border="0" alt="Accueil"></a>
  12.    </td>
  13. </tr>
  14. ...........
  15. <tr>
  16.  <td>
  17.     <a href="Prive/connection.php"
  18.      onmouseover="changeImages('Menugratte_07', 'Menugratte/Menugratte_07-over.gif'); return true;"
  19.      onmouseout="changeImages('Menugratte_07', 'Menugratte/Menugratte_07.gif'); return true;"
  20.      onmousedown="changeImages('Menugratte_07', 'Menugratte/Menugratte_07-over.gif'); return true;"
  21.      onmouseup="changeImages('Menugratte_07', 'Menugratte/Menugratte_07-over.gif'); return true;">
  22.      <img name="Menugratte_07" src="Menugratte/Menugratte_07.gif"  width="100%" height="100%" border="0" alt="Priv&#233;"></a>
  23.    </td>
  24. </tr>
  25. </table>
  26.  </div>

 
Mon code CSS :
 

Code :
  1. #menu
  2. {
  3. float:left;
  4. width:19%;
  5. height:77%;
  6. position: absolute;
  7. top: 22%;
  8. background-color: white;
  9. }


 
Le problème viens du menu lors du changement de résolution, je souhaiterai que le menu s'affiche toujours de la même façon comme avec la résolution 1280*800. Surtout que les images remplissent mais cases, en changeant la résolution on peu voir le blanc se qui ne devrait pas être le cas ...
 
Second petit problème que je n'arrive pas à régler, avec le lien contact en haut a gauche, le cadre reste affiché, le border:none; ne fonctionne pas même avec une class, que faire ?
 
Code html :
 

Code :
  1. <div id="contact">
  2.  <A HREF='javascript:PopupCentrer("contact.php",330,150,"menubar=no,scrollbars=no,statusbar=no" )'  onMouseOver="i595815.src='funEe2.gif '"  onMouseOut="i595815.src='funEe.gif'"><IMG SRC="funEe.gif" Width="100%" height="100%"BORDER=0 NAME="i595815" ALT="Contact" HSPACE=0 VSPACE=0 ></A>
  3.  </div>


 
Code CSS:
 

Code :
  1. #contact
  2. {
  3. top: 3%;
  4. float:left;
  5. width:19%;
  6. height:19%;
  7. position: absolute;
  8. }
  9. .no_cadre{
  10. border:none;
  11. }


 
 Le problème avec le menu commence a dater et je ne m'en sort pas je compte sur vous. J'attends de vos nouvelles.
 
Merci d'avance cordialement.
 
Benorito


Message édité par benorito le 20-11-2008 à 03:03:15
mood
Publicité
Posté le 20-11-2008 à 03:00:53  profilanswer
 

n°1041910
Lactique
Caraïbe et huile de coco
Posté le 20-11-2008 à 08:11:56  profilanswer
 

position absolute + float left ?
pourquoi ?


---------------
Studio CréeAll
n°1041951
benorito
Posté le 20-11-2008 à 14:14:41  profilanswer
 

Lactique a écrit :

position absolute + float left ?
pourquoi ?


 
Pour coller a droite et que l'ensemble est une position figé via l'absolute. Sinon pour le problème du menu , si vous plait :/.
Proposer moi des tests ou ...
 
Merci d'avance

n°1042150
Lactique
Caraïbe et huile de coco
Posté le 22-11-2008 à 01:52:31  profilanswer
 

non mais le position absolute sert a qqchose hein, le float ne sert donc plus a rien puisque qu'en absolute tu contrôles le positionnement au pixel pres par rapport a ton ecran ou au premier bloc "contenant" qui a une propriété position: relative. . Ca serait bien que tu te renseignes quand même un peu plus sur le css.
Mais vu comment tu t'y prends pour coder le html, c'est pas une surprise. En fait tu te retrouves avec plein de problèmes juste parce que tu codes mal. En codant proprement tu n'aurais pas le 5eme des problèmes qe tu dois résoudre aujourd'hui. Ca vaut peut-être la peine d'en apprendre plus.


Message édité par Lactique le 22-11-2008 à 01:55:22

---------------
Studio CréeAll

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Graphisme
  Web design

  Problème CSS résolution d'écran avec un menu en images

 

Sujets relatifs
[Resolu] Problème de margin auto sur IEProbleme lancement CATIA V5 R18
Problème avec l'outil Bridge de MayaProbleme sous virtools c'est tres important
Probleme compatibilité Mac/PC (fichier ai, tif, pdf)Création d'un rapport - problème.
Acrobat Professional 8.0 - Problème de mise à jourPersonnalisation bureau et images web
[PHOTOSHOP] GUI photoshop et haute résolution[ Résolu ] Captures d'écran noires avec Irfanview et FSviewer
Plus de sujets relatifs à : Problème CSS résolution d'écran avec un menu en images


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