benorito | 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 :
- <div id="menu" width="100%" height="100%">
- <!-- ImageReady Slices (Menugratte.psd) -->
- <a href="index.php"
- onmouseover="changeImages('Menugratte_01', 'Menugratte/Menugratte_01-over.gif'); return true;"
- onmouseout="changeImages('Menugratte_01', 'Menugratte/Menugratte_01.gif'); return true;"
- onmousedown="changeImages('Menugratte_01', 'Menugratte/Menugratte_01-over.gif'); return true;"
- onmouseup="changeImages('Menugratte_01', 'Menugratte/Menugratte_01-over.gif'); return true;">
- <img name="Menugratte_01" src="Menugratte/Menugratte_01.gif" width="100%" height="auto%" border="0" alt="Accueil"></a>
- <br>
- <a href="images/images.php"
- onmouseover="changeImages('Menugratte_02', 'Menugratte/Menugratte_02-over.gif'); return true;"
- onmouseout="changeImages('Menugratte_02', 'Menugratte/Menugratte_02.gif'); return true;"
- onmousedown="changeImages('Menugratte_02', 'Menugratte/Menugratte_02-over.gif'); return true;"
- onmouseup="changeImages('Menugratte_02', 'Menugratte/Menugratte_02-over.gif'); return true;">
- <img name="Menugratte_02" src="Menugratte/Menugratte_02.gif" width="auto%" height="auto%" border="0" alt="Images"></a>
- <br>
- <a href="videos/videos.php"
- onmouseover="changeImages('Menugratte_03', 'Menugratte/Menugratte_03-over.gif'); return true;"
- onmouseout="changeImages('Menugratte_03', 'Menugratte/Menugratte_03.gif'); return true;"
- onmousedown="changeImages('Menugratte_03', 'Menugratte/Menugratte_03-over.gif'); return true;"
- onmouseup="changeImages('Menugratte_03', 'Menugratte/Menugratte_03-over.gif'); return true;">
- <img name="Menugratte_03" src="Menugratte/Menugratte_03.gif" width="auto%" height="auto%" border="0" alt="Vidéos"></a>
- <br>
- <a href="Musiques/musiques.php"
- onmouseover="changeImages('Menugratte_04', 'Menugratte/Menugratte_04-over.gif'); return true;"
- onmouseout="changeImages('Menugratte_04', 'Menugratte/Menugratte_04.gif'); return true;"
- onmousedown="changeImages('Menugratte_04', 'Menugratte/Menugratte_04-over.gif'); return true;"
- onmouseup="changeImages('Menugratte_04', 'Menugratte/Menugratte_04-over.gif'); return true;">
- <img name="Menugratte_04" src="Menugratte/Menugratte_04.gif" width="auto%" height="auto%" border="0" alt="Musiques"></a>
- <br>
- <a href="Clips/clips.php"
- onmouseover="changeImages('Menugratte_05', 'Menugratte/Menugratte_05-over.gif'); return true;"
- onmouseout="changeImages('Menugratte_05', 'Menugratte/Menugratte_05.gif'); return true;"
- onmousedown="changeImages('Menugratte_05', 'Menugratte/Menugratte_05-over.gif'); return true;"
- onmouseup="changeImages('Menugratte_05', 'Menugratte/Menugratte_05-over.gif'); return true;">
- <img name="Menugratte_05" src="Menugratte/Menugratte_05.gif" width="auto%" height="auto%" border="0" alt="Clips"></a>
- <br>
- <a href="Divers/divers.php"
- onmouseover="changeImages('Menugratte_06', 'Menugratte/Menugratte_06-over.gif'); return true;"
- onmouseout="changeImages('Menugratte_06', 'Menugratte/Menugratte_06.gif'); return true;"
- onmousedown="changeImages('Menugratte_06', 'Menugratte/Menugratte_06-over.gif'); return true;"
- onmouseup="changeImages('Menugratte_06', 'Menugratte/Menugratte_06-over.gif'); return true;">
- <img name="Menugratte_06" src="Menugratte/Menugratte_06.gif" width="auto%" height="auto%" border="0" alt="Divers"></a>
- <br>
- <a href="Prive/connection.php"
- onmouseover="changeImages('Menugratte_07', 'Menugratte/Menugratte_07-over.gif'); return true;"
- onmouseout="changeImages('Menugratte_07', 'Menugratte/Menugratte_07.gif'); return true;"
- onmousedown="changeImages('Menugratte_07', 'Menugratte/Menugratte_07-over.gif'); return true;"
- onmouseup="changeImages('Menugratte_07', 'Menugratte/Menugratte_07-over.gif'); return true;">
- <img name="Menugratte_07" src="Menugratte/Menugratte_07.gif" width="auto%" height="auto%" border="0" alt="Privé"></a>
- </div>
|
Mon CSS:
Code :
- #menu
- {
- float:left;
- width:10%;
- height:70%;
- position: absolute;
- top: 22%;
- }
|
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 |