18073 sujets

Questions générales et questions de débutants

[Résolu]Menu avec probleme sous FF, ok sous IE et Op

Bonjour a tous,

Comme beaucoup je débute avec le css, je l'ai déjà utiliser tout fait avec bidouille a droite a gauche mais là j'essaie de repartir de plus ou moins zéro et pour bien commencer je me suis acheter le fameux bouquin dont on parle tant sur ce site ... étrange Smiley biggrin .

J'ai en fait essayer de réaliser un menu avec image en arrière plan (qui se déplace lorsqu'on passe dessus avec la souris) le tout dans un cadre extensible (pour des ajouts futur), j'utilse deux autre cadre suivant le m^me principe, mais bon cela sera plus clair si je vousn mets le code alors place ...

body {
font: 0.9em black Georgia, Tahoma,"Times New Roman", sans-serif;
}

div#cadremenu{
width:175px;
padding-top: 18px;
background: url(img-look/nav-exp.png) top left no-repeat;
}

div#cadreinfo{
width:175px;
padding-top: 18px;
background: url(img-look/info-up.png) top left no-repeat;
}

div#cadrepoureux{
width:175px;
padding-top: 18px;
background: url(img-look/poureux-up.png) top left no-repeat;
}

div.bloccadre{
background: url(img-look/bas-menu.png) bottom left no-repeat;
padding-bottom: 9px;
}

div.bloccadre p{
margin: 0 5px 0 5px;
text-align: center;
font: small Georgia,Serif;
line-height: 1.5em;
}

div.bloccadre ul, div.bloccadre li{
margin: 0;
padding-top: 3px;
list-style-type: none;
}

div.bloccadre img.petite{
border: 0;
float: left;
margin: 0 5px 0 5px;
}

div.bloccadre li a{
color : #003464;
text-decoration: none;
font: 0.75em Arial, Geneva, Helvetica, sans-serif;
line-height: 28px;
display: block;
height: 28px;
width: 175px;
background: url(img-look/menugbkico.png) 0% -27px no-repeat;
}

div.bloccadre li a:hover{
background-position: 0% -52px;
}

div.bloccadre li a#actuelle {
background-position: 0% 0%;
}

div.bloccadre h3{
display: none;
}


et le html :



<div id="cadremenu">
  <div class="bloccadre">
    <h3>Navigation Express</h3>
	<ul>
	  <li><a href="#" id="actuelle" accesskey="1"><img src="img-look/news.gif" class="petite" width="28" height="28">Les News</a></li>
	  <li><a href="#" accesskey="2"><img src="img-look/trucs.gif" class="petite" width="28" height="28">Trucs et Astuces</a></li>
      <li><a href="#" accesskey="3"><img src="img-look/Moi.gif" class="petite" width="28" height="28">Les Responsables</a></li>
      <li><a href="#" accesskey="4"><img src="img-look/connecter.gif" class="petite" width="28" height="28">Se Connecter</a></li>
      <li><a href="#" accesskey="5"><img src="img-look/download.gif" class="petite" width="28" height="28">Telechargement</a></li>
      <li><a href="#" accesskey="6"><img src="img-look/Forum.gif" class="petite" width="28" height="28">Le Forum</a></li>
      <li><a href="#" accesskey="7"><img src="img-look/contact.gif" class="petite" width="28" height="28">Me Contacter</a></li>
	</ul>
  </div>
</div>
<br />
<div id="cadreinfo">
  <div class="bloccadre">
    <h3>Information Visite</h3>
	  <p>
	    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="130" height="130">
          <param name="movie" value="objets/clockcalendar.swf" />
          <param name="quality" value="high" />
          <param name="wmode" value="transparent" />
          <embed src="objets/clockcalendar.swf" width="130" height="130" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent"></embed>
        </object>
	  </p>
	  <p>Maintenant : <strong>2</strong></p>
	  <p>Aujourd'hui : <strong>15</strong></p>
	  <p>Total : <strong>20</strong></p>
  </div>
</div>
<br />
<div id="cadrepoureux">
  <div class="bloccadre">
    <h3>Pour Eux asbl</h3>
	<p><img src="img-look/poureux.gif" alt="" width="100" height="63" /></p>
	<ul>
	  <li><a href="#" accesskey="5"><img src="img-look/souper.gif" class="petite" width="28" height="28">Les Nouvautés</a></li>
	  <li><a href="#" accesskey="6"><img src="img-look/bouchons.gif" class="petite" width="28" height="28">Opérations Bouchons</a></li>
	</ul>
  </div>
</div>


et comme un exemple ... c'est mieux c'est icihttp://users.skynet.be/fa451520/essai/

Merci de votre aide.

tych
Modifié par tych (04 Mar 2006 - 21:33)
Bon désolé mais j'ai une autre question lié a opéra (donc je profite de mon post), il est le seul a ne pas reconnaitre ceci :


#header object{
float: left;
margin: 10px 0 0 40px;
}


mon logo est en flash (voir mon site), FF et IE c'est ok il le place correctement mais pas opéra ??? Merci

tych
Salut tych !

Concernant ton pb de logo, j'ai lancé une visualisation sous opéra et ff et je ne vois pas de différence...
Chez moi, tout s'affiche correctement !
Trouver. C'était un problème de margin et de padding, je précisait qu'un des côté ... et en précisant les quatre plus de problèmes.

Voila. Merci malgré les non réponses.
Sujet clos
Aller à