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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [HTML;CSS ] Menu

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[HTML;CSS ] Menu

n°1572948
Jeya
Posté le 10-06-2007 à 20:51:23  profilanswer
 

Bonjour à tous et à toutes !  
J'ai fait un menu sur photoshop, j'ai découpé, enregistré, codé sur notepad++ en html et CSS . Voila le résultat : http://www.hiboox.com/image.php?img=p6dbegwx.jpg  
Alors que normalement ca donne ca : http://www.hiboox.com/image.php?img=im8qihjz.jpg  
Le menu marche bien sur les autres pages mais sur cette page elle déconne .
J'ai remarquer recemment que le menu bougeait verticalement si je diminuait la taille de la fenetre .
Je vous passe le code :  

Citation :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Bienvenue sur mon site !</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <link rel="stylesheet" media="screen" type="text/css" title="designsite" href="radio.css" />
   </head>
   <body>
   <div id="en_tete">
 
</div>
 
<div id="menu">
<div id="menu_01"><img src="menu_01.gif">
</div>
<div id="menu_02"><img src="menu_02.gif"></div>
<div id="menu_03">
<a href="designsite.html"> <img src="menu_03.gif"></a>
</div>
<div id="menu_04"><img src="menu_04.gif">
</div>
<div id="menu_05"><img src="menu_05.gif">
</div>
<div id="menu_06">
<a href="author.html"> <img src="menu_06.gif"></a>
</div>
<div id="menu_07"><img src="menu_07.gif">
</div>
<div id="menu_08">
<a href="photos.html"> <img src="menu_08.gif"></a>
</div>
<div id="menu_09"><img src="menu_09.gif">
</div>
<div id="menu_10">
<a href="meteo.html"> <img src="menu_10.gif"></a>
</div>
<div id="menu_11"><img src="menu_11.gif">
</div>
<div id="menu_12">
<a href="liens.html"> <img src="menu_12.gif"></a>
</div>
<div id="menu_13"><img src="menu_13.gif">
</div>
</div>
<div id="menu2">
<div class="element_menu2">
 
<h3>Multimedia</h3>
       <a href="radio.html"><img src="http://img486.imageshack.us/img486/7897/radiozv2.jpg"></a><br/>
           <a href="videos.html"><img src="http://img518.imageshack.us/img518/4946/videostx6.jpg"></a><br/>    
       </div>
 
</div>
<div id="corps">
<h2>Météo</h2>
<p>blabla</p>
   </div>
 
<div id="pied_de_page">
   <p>Copyright "--------" 2007, tous droits réservés</p>
</div>
       
   </body>
</html>


 
 
Et voila le CSS :
 

Citation :

body
{
   font-size: 15px;
   font-family: "Comic Sans MS", "Arial Black", "Times New Roman", "Trebuchet MS", Verdana, serif;
   width: 760px;
   margin: auto;
   margin-top: 20px;
   margin-bottom: 20px;
   }
#en_tete
{
   width: 758px;
   height: 110px;
   background-image: url("---------" );
   background-repeat: no-repeat;
   margin-bottom: 10px;
}
#menu
{
   
   float: left;
   width: 125px;
   }
#menu_01
{
position:absolute;
top:140px;
left:121px;
float: left;
}
#menu_02
{
position:absolute;
top:183px;
left:121px;
float: left;
}
#menu_03
{
position:absolute;
top:183px;
left:151px;
float: left;
}
#menu_04
{
position:absolute;
top:183px;
left:235px;
float: left;
}
#menu_05
{
position:absolute;
top:197px;
left:151px;
float: left;
}
#menu_06
{
position:absolute;
top:213px;
left:151px;
float: left;
}
#menu_07
{
position:absolute;
top:227px;
left:151px;
float: left;
}
#menu_08
{
position:absolute;
top:243px;
left:151px;
float: left;
}
#menu_09
{
position:absolute;
top:256px;
left:151px;
float: left;
}
#menu_10
{
position:absolute;
top:272px;
left:151px;
float: left;
}
#menu_11
{
position:absolute;
top:287px;
left:151px;
float: left;
}
#menu_12
{
position:absolute;
top:303px;
left:151px;
float: left;
}
#menu_13
{
position:absolute;
top:329px;
left:151px;
float: left;
}
#corps
{
   margin-left: 145px;  
   margin-bottom: 20px;
   padding: 5px;
   
   color: #000000;
   background-color: #C9CBE9;
   background-repeat: repeat-x;
   border: 2px solid black;
}
#corps  
{
   color: #000000;
   text-align: center;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
   }
   #pied_de_page
{
   padding: 5px;
 
   text-align: center;
 
   color: #000000;
   background-color: #C9CBE9;
   background-repeat: repeat-x;
   
   border: 2px solid black;
}
img
{
   border-style: none;
   }
#menu2
{
 
position:absolute;
top:70%;
left:122px;
 
   float: left;  
   width: 125px;
   }
 
.element_menu2
{
   background-color: #C9CBE9;
   background-repeat: repeat-x;
   border: 2px solid black;
   margin-bottom: 20px;
   padding: 12px;
   text-align: center;
   }
.element_menu2 h3  
{    
   
   font-family: "Comic Sans MS", "Arial Black", "Times New Roman", "Trebuchet MS", Verdana, serif;
   text-align: center;
}
 
.element_menu2 ul  
{
   padding: 0px;
   padding-left: 20px;  
   margin: 0px;  
   margin-bottom: 5px;
}
 
.element_menu2 a /
{
   color: #000000;
}
 
.element_menu2 a:hover  
{
   background-color: #B3B3B3;
   color: black;
}


 
J'ai tout mis sur un serveur pour pouvoir le tester mais cela a empirer : http://jeya91.ifrance.com/
 
Voila j'espere qu'il y a tout pour résoudre mon problème , merci d'avance !

mood
Publicité
Posté le 10-06-2007 à 20:51:23  profilanswer
 

n°1572963
dwogsi
Défaillance cérébrale...
Posté le 10-06-2007 à 22:06:20  profilanswer
 

position:absolute;
T'as pas besoin de ce genre de choses...
Vas voir des site comme openweb, alsacreation, etc. Et regarde comment ils proposent de mettre en place le genre de présentation assez classique que tu cherche à créer.

 

Et puis... T'as jamais entendu parler des listes? Ton menu est une liste, pas besoin de mettre un div pour chaque éléments!


Message édité par dwogsi le 10-06-2007 à 22:06:43

---------------
-- Debian -- Le système d'exploitation universel | Le gras c'est la vie! | /(bb|[^b]{2})/
n°1572967
Jeya
Posté le 10-06-2007 à 22:17:46  profilanswer
 

Peux-tu me donner un exemple pour faire la liste , car je ne vois pas comment faire apres avec le CSS .
Merci !

n°1572987
dartyduck
n00b AttitudE
Posté le 10-06-2007 à 23:40:31  profilanswer
 

coucou

Code :
  1. <div id="menu">
  2. <ul>
  3. <li><a href="menu1"><img src="menu1.gif" /></a></li>  ==>> pense à fermer tes balises img !!
  4. <li><a href="menu2">Menu 2</a></li>
  5. </ul>
  6. </div>


 

Code :
  1. #menu {}
  2. #menu ul {}
  3. #menu ul li {}
  4. #menu a {}


 
ca te suffira ou je détaille plus ?
et un conseil : utilise notepad++, c'est plus pratique de blocnote


Message édité par dartyduck le 10-06-2007 à 23:42:13

---------------
Nikon D7000 + 18-105VR + 35mm 1.8

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

  [HTML;CSS ] Menu

 

Sujets relatifs
Problème avec un menu css sous IE7Menu dynamique qui ne s'affiche pas sous Firefox
[JAVASCRIPT] chargement fichier lors de lappel d'une fonctionConexion LDAP vbscript dans une page html
[HTML/CSS] Menu en arbre ouvert [résolu merci Gatsu35]Effet thumbnail dans un menu défilant en HTML/CSS
[HTML/CSS] pb pour creer un menu[HTML/CSS] Menu dynamique
Page avec menu en (x)html/css[HTML, CSS JS] Probleme menu
Plus de sujets relatifs à : [HTML;CSS ] Menu

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.040 secondes

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