28256 sujets

CSS et mise en forme, CSS3

[resolu]Probleme de positionnement

Pages :
Bonjour, sous IE mon menu gauche comprend bien la couleur de fond alors que sous Firefox impossible alors qu'avant cela fonctionnait ?

Voici une partie de mon cource du menu :

.menugauche {
list-style-type: none;
margin:15px 0 0 0;
padding:0 0 0 10px;
}

.menugauche ul {
 border-bottom: solid 1px #fa0;
 list-style-type: none;
}

.menugauche li {
 padding-bottom:0;
 border-color: #fa0;
 border-style:solid;
 border-width: 1px 1px 0px 1px;
 
}

.menugauche a {
 color: #000000;
 background-color: #ffefd5;
 text-decoration: none;
 display: block;
 font-family: "Trebuchet MS" Verdana, sans-serif;
 font-weight: bold;
 padding: 0 5px 0 5px;
}


En attente de vos réponses.
Modifié le 12 Nov 2004 - 19:10
Je crois avoir un probleme car lorque je mets un fond dans mon div content, la couleur de mon menu gauche apparait sous firefox alors que sous IE elle n'y est plus ?

Quelqu'un sait il pourquoi car c'est un peu genant cela !!!

http://dubcl.free.fr Smiley langue
Modifié le 10 Nov 2004 - 17:06
doomer a écrit :
Bonjour, sous IE mon menu gauche comprend bien la couleur de fond alors que sous Firefox impossible alors qu'avant cela fonctionnait ?


Avant quoi?
Ben, je suis passé à Firefox 1.0 mais je pense que cela ne vient pas de cela.
Je ne vois pas où est mon erreur car je spécifie bien ma couleur de fond pourtant.

Si kku voit où se situe l'erreur faites moi signe
Pas vraiment le temps de tester mais j'ai retravaillé ton code.

Tu peux essayer de tricoter avec ça : 

.menugauche { 
   padding: 0 0 0 10px; 
   margin: 15px 0 0 0; 
}

.menugauche ul { 
   font-family: "Trebuchet MS" Verdana, sans-serif; 
   font-weight: bold; 
   list-style-type: none; 
   border-bottom: solid 1px #fa0; 
}

.menugauche li {
   border-color: #ffaa00; 
   border-style: solid; 
   border-width: 1px 1px 0px 1px; 
   padding-bottom: 0; 
}

.menugauche li a { 
   color: #000000; 
   background-color: #ffefd5; 
   padding: 0 5px 0 5px; 
   text-decoration: none; 
}

.menugauche li a:hover { 
   color: #FFFFFF; 
   background-color: #4682b4; 
   padding: 0 5px 0 5px; 
   text-decoration: none; 
}
Moi j'utilise :

ul.class


au lieu de


.class ul


ça vient peut être de la ;) ! Sinon, et bien je vois pas trop la !
Je viens de regarder ta page dans IE 6.0 , Netscape 7.1, Firefox 1.0 (en), et Opera 7.51.

Identique dans tous les cas sauf pour Opera qui affiche style orange en dessous de style bleu.
DarkNeo a écrit :
Moi j'utilise :

ul.class


au lieu de


.class ul


ça vient peut être de la ;) ! Sinon, et bien je vois pas trop la !


Ah! Voilà quelque chose qui m'a échappé. <ul class="menugauche"> est à l'intérieur d'un <div id="gauche"> alors les déclarations devraient ressembler à : 



/* menu de gauche */
#gauche {
list-style-type: none; /* <<<<---------- inutile  */
margin:15px 0 0 0;
padding:0 0 0 10px;
}

#gauche ul {
 border-bottom: solid 1px #fa0;
 list-style-type: none; /* <<<<---------- déjà déclaré ici */
}

#gauche li {
 padding-bottom:0;
 border-color: #fa0;
 border-style:solid;
 border-width: 1px 1px 0px 1px;
 
}

#gauche li a {
 color: #000000;
 background-color: #ffefd5;
 text-decoration: none;
 display: block;
 font-family: "Trebuchet MS" Verdana, sans-serif;
 font-weight: bold;
 padding: 0 5px 0 5px;
}

#gauche li a:hover {
 text-decoration: none;
 background-color: #4682b4;
 color: #FFFFFF;
 display: block;
}
DarkNeo a écrit :
Moi j'utilise :

ul.class


au lieu de


.class ul


ça vient peut être de la ;) ! Sinon, et bien je vois pas trop la !


Attention, c'est pas du tout pareil
ul.class c'est les elements ul ayant pour class ".class"
Alors que .class ul c'est tous les ul contenus dans un element qui a pour class ".class"
ElMoustiko a écrit :

Attention, c'est pas du tout pareil
ul.class c'est les elements ul ayant pour class ".class"
Alors que .class ul c'est tous les ul contenus dans un element qui a pour class ".class"


Très bien expliqué !
Stephan, merci pour ton aide mais je ncomprends plus d'apres les posts avant ce que je dois faire dsormais pour résoudre mon probleme !!!
Je vois que tu utilises #gauche et ce que cela correspond à mon .menugauche. Je remplace donc ma classe menugauche par un id gauche ?

Là je suis paumé et tout ça pour un probleme de couleur !!
a écrit :
Ah! Voilà quelque chose qui m'a échappé. <ul class="menugauche"> est à l'intérieur d'un <div id="gauche"> alors les déclarations devraient ressembler à :


Je ne peux conserver la structure de mon menu actuel alors ou dois je declarer tout dans mon div id="gauche" comme le montre Stephan ?
ElMoustiko a écrit :


Attention, c'est pas du tout pareil
ul.class c'est les elements ul ayant pour class ".class"
Alors que .class ul c'est tous les ul contenus dans un element qui a pour class ".class"


C'est bien ce que je voulais dire, enfin, pour moi c'était clair dans ma tête que c'était ça, mais n'yanat pas vu le code, j'ai supposé que il appliquait #menugauche a sa liste !

Bref je suis d'accord ;)
Excuse moi je repondait a ElMoustiko

Donc, je supposais quelquechose sur ton code HTML (d'ailleus, si il pouvait apparaitre ici cela permetrait de confirmer mes supposition ou de les refuter)
Donc, tu as une une classe .menugauche, cette classe, je suppose que tu l'as appliqué a une balise <ul>, or tel qu'est ecrit ton code CSS, .menugauche ul, cela suppose que tu as une balise a laquelle tu as appliqué .menugauche qui contient <ul>.

Pour dire que c'est a <ul> que tu applique .menugauche, il faut écrire
ul.menugauche

C'est ce que je voulais dire, mais si le fait de remplacer ces
.menugauche ul par ul.menugauche ne resout pas le problème, je ne vois pas (pour l'instant le bug)
Modifié le 11 Nov 2004 - 16:27
Si <ul class="menugauche">, déclarer .menugauche ul {} est un non-sens.

Parce que <ul class="menugauche">, déclarer .menugauche ul {} équivaut à dire ul.menugauche ul {}.

Puisque <ul class="menugauche"> est à l'intérieure d'un <div id="gauche">, je suggère de changer .menugauche ul {} par #gauche ul {}.
Modifié le 11 Nov 2004 - 17:14
D'une part DARKNEO ta solution ne fonctionne pas, je l'ai testée.

Je viens de remarquer un probleme justement pour cela : a la premiere visite sur cette page http://dubcl.free.fr sous IE6 apparait correctement puis une fois qu'on acyualise la page la couleur de mon menu gauche disparait.

Le source CSS :

#gauche {
position: absolute;
left:0;
width: 150px;
}

/* menu de gauche */
.menugauche {
list-style-type: none;
margin:15px 0 0 0;
padding:0 0 0 10px;
}

ul .menugauche{
 border-bottom: solid 1px #fa0;
 list-style-type: none;
}

.menugauche li {
 padding-bottom:0;
 border-color: #fa0;
 border-style:solid;
 border-width: 1px 1px 0px 1px;
 
}

.menugauche a {
 color: #000000;
 background-color: #ffefd5;
 text-decoration: none;
 display: block;
 font-family: "Trebuchet MS" Verdana, sans-serif;
 font-weight: bold;
 padding: 0 5px 0 5px;
 
}
.menugauche a:hover {
 text-decoration: none;
 background-color: #4682b4;
 color: #FFFFFF;
 display: block;
}

.menugauche a.linkOn { 
 font-weight: bold;
 }

.menugauche a.linkOn:hover{ 
 color: white; }
/* fin menu gauche */


Puis le code HTML :


<div id="gauche">	   
  <a name="menu" id="menu"></a>    
    <ul class="menugauche">
      <li><a href="#">Pr&eacute;sentation </a></li>
      <li><a href="#">Le portail </a></li>
      <li><a href="#">Le forum </a></li>
      <li><a href="#">Les partenaires </a></li>
      <li><a href="#">Les outils </a></li>
      <li><a href="#">Acc&egrave;s Extranet </a></li>
      <li><a href="#">Contactez-nous </a></li>
    </ul>


Voila pour que le code complet et le probleme existe toujours.
Modifié le 11 Nov 2004 - 17:32
Prends le temps de relire tous les posts tranquillement depuis le début. Peut-être que quelque chose t'a échappé !
Bon j'ai fais des modifs que j'ai adpatée comme stephan m'avais expliqué le code est en dessous. Mais maintenant :
- je n'arrive pas à avoir la meme longueur que mes autres div de recherche sous IE et Firefox.
- un trait apparait sous Firefox sur toute la longueur du menu gauche
- un trait apparait sous IE6 au dessus du menu rechercher.

Explication sur la page http://dubcl.free.fr
Si kkun peut m'aider ?


/* menu de gauche */
#gauche {
list-style-type: none;
position: absolute;
left:0;
width: 150px;
}

#gauche ul {
 border-bottom: solid 1px #fa0;
 list-style-type: none;
}

#gauche li {
 padding-left:0;
 padding-bottom:0;
 border-color: #fa0;
 border-style:solid;
 border-width: 1px 1px 0px 1px;
 
}

#gauche a {
 color: #000000;
 background-color: #ffefd5;
 text-decoration: none;
 display: block;
 font-family: "Trebuchet MS" Verdana, sans-serif;
 font-weight: bold;
 padding: 0 5px 0 5px;
 
}
#gauche a:hover {
 text-decoration: none;
 background-color: #4682b4;
 color: #FFFFFF;
 display: block;
}

/* fin menu gauche */



Mon source HTML :

<div id="gauche">	   
     
    <ul>
      <li><a href="#">Pr&eacute;sentation </a></li>
      <li><a href="#">Le portail </a></li>
      <li><a href="#">Le forum </a></li>
      <li><a href="#">Les partenaires </a></li>
      <li><a href="#">Les outils </a></li>
      <li><a href="#">Acc&egrave;s Extranet </a></li>
      <li><a href="#">Contactez-nous </a></li>
    </ul>
		
  <a name="recherche" id="recherche"></a>
	  <div class="search">
      <form class="recherche" method="get" action="http://www.google.fr/search">
       <p><label for="q" accesskey="4">Rechercher<input name="q" type="text" id="q" value="Alt+4" size="10" maxlength="55"/></label></p>			          
        <p><input type="hidden" name="domains" value="dubcl.free.fr" /></p>
        <p><input type="hidden" name="sitesearch" value="dubcl.free.fr" /></p>
        <p><input type="submit" name="btng" value="google" class="bouton" /></p>
      </form>
    </div>
		
    <div class="search">
      <form class="membres" method="post" action="#">
         <p>Espace Membres</p>
				<p><label for="pseudo_membre">Utilisateur
				<input type="text" name="pseudo_membre" id="pseudo_membre" size="10"/></label></p>
		          <p><label for="passe_membre">Password
         <input type="password" name="passe_membre" id="passe_membre" size="10"/></label></p>
				     
        <p><input type="submit" name="entrez" value="Entrez" alt="Validez" class="bouton"/></p>
      </form>
    </div>
		
		<div class="search">
      <form class="membres" action="#" method="post">
			 <p>Newsletter</p>      
       <p><input type="hidden" name="lid" value="20021231100505"/></p>             
			 <p><input size="10" name="email" /></p>			                                                            
       <p><label for="Abonner">  
			 <input id="Abonner" name="action" type="radio" value="inscription"  />Abonner</label></p>      
			 <p><label for="Desabonner">
			  <input id="Desabonner" name="action" type="radio" value="desinscription" />Se desabonner</label></p>
       
			  <p>				
				<input type="submit" value="Validez" name="submit2" alt="Inscription newsletter" class="bouton"/></p> 
      </form>
    </div>
		
	
		
  </div>

Modifié le 12 Nov 2004 - 09:31
Personne n'aurait une idée pour mon probleme de positionnement de menu gauche apres les modification que j'ai effectuée, je n'arrive pas à donner la même largeur à mon menu gauche sous IE et Firefox.

A l'aide svp
Pages :
Sujet clos