Forum d'entraide PHPFrance

Je n'arrive pas centré mes liens dans le sens de la hauteur et a faire un effet d'enfocement lors d'un clics
merci

coté html

Code : Tout sélectionner

<div id="navcontainerh">
  <ul id="navlisth">
     <li><a href="./"> ACCUEIL </a></li>
     <li><a target="_blank" href="condition-vente.php"> condition de vente </a></li>
     <li><a href="comment-acheter.php"> Comment acheter? </a></li>
     <li><a href="panier.php"> Panier </a></li>
     <li><a href="promo-1.php"> <b id="couleurpromo">Promos</b> </a></li>
     <li><a href="contact.php"><img src="images/contact.png" alt="contact" border="0"> Contact </a></li>
  </ul>

coté css

Code : Tout sélectionner

#navcontainerh { 
width : 100%; 
height: 50px;
background: url("images/fres.jpg"); 
}
#navcontainerh ul { 
margin : 0; 
padding : 0px 0 0 160px; 
letter-spacing : 2px; 
font-weight : bold;
font-size: 14px; 
height: 50px;
}
#navcontainerh ul li { 
display : inline;
} 

#navcontainerh ul li a { 
padding : 0.2em 20px; 
background: url("fres/menu.jpg");
text-decoration : none; 
float : center; 
height: 50px;
}

Corrige ta CSS comme suit :

Code : Tout sélectionner

#navcontainerh li {
  float: left;
  height: 50px;
}
#navcontainerh a {
  display: block;
  line-height: 50px;
}

De plus, float: center n'existe pas.

en fait au départ il y avait left mais en essayant de centré j'ai essayé de mettre center.

en fait au départ il y avait left mais en essayant de centré j'ai essayé de mettre center.

Les seules valeurs possibles de float sont : left, right, none et inherit, la valeur par défaut étant none. Il faut lire les specs.

sa fonctionne mais pour l'enfoncement comme un bouton je ne sait plus ou chercher il y a tellement de reponse aussi bien google que le forums que je suis perdu.
juste une petite piste encore.
merci je mais le css que j'ai au cas ou cela en interresserais certains.

Code : Tout sélectionner

#navcontainerh { 
width : 100%; 
height: 50px; 
background: url("images/fres1.png"); 
} 
#navcontainerh ul { 
margin : 0; 
padding : 0px 0 0 15%; 
letter-spacing : 2px; 
font-weight : bold; 
font-size: 14px; 
height: 50px; 
} 
#navcontainerh ul li { 
display : inline; 
float: left; 
height: 50px;
} 

#navcontainerh ul li a { 
padding : 0.2em 20px; 
background: url("images/fres1.png"); 
text-decoration : none; 
float : left; 
height: 50px; 
display: block; 
line-height: 50px;
}

navcontainerh ul li a:hover { 
background: url("images/fres.png"); 
height: 50px;
} 

#navlisth li a:hover, #navlisth li a:active { 
text-decoration : none; 
background: url("images/fres.png");
text-align : left; 
font-weight : bold;
height: 50px;
font-size: 14px;
}

edit j'ai essayer de bricoler avec la balise button mais rien n'y fait.

Tu peux avoir l'effet d'enfoncement en jouant avec les styles de bordure proposés par border-type (essaie avec groove, ridge, inset et outset) et avec les pseudo-classes, un peu comme suit.

Code : Tout sélectionner

a {
  line-height: 50px;
  display: block;
  height: 50px;
  border: 2px outset red;
}
a:hover, a:active, a:focus {
  line-height: 50px;
  display: block;
  height: 50px;
  border: 2px inset red;
}

Merci totor cela fonctionne j'ai bien l'effet souhaité mais je voudrais que sa reviennent annuler l'effet si le clique n'est pas terminer.
et vue que mes connaissance dans la langue de sheakspear sont quasi nul je n'ai pas réussit a tout comprendre sur le tuto que tu m'a dit et ce meme avec le traducteur google qui traduit tout et meme quand c'est le nom des elements.
voila ou j'en suis.
il n'y aurais pas quelque chose dans la langues de moliere j'ai beau chercher je ne trouve rien.
soi je tombe sur des page en anglais ou quand c'est en francais cela n'a rien a voir avec ce que je cherche.
merci.

Code : Tout sélectionner

#navcontainerh { 
width : 100%; 
height: 50px; 
background: url("images/fres1.png"); 
} 

#navcontainerh ul { 
margin : 0; 
padding : 0px 0 0 15%; 
letter-spacing : 2px; 
font-weight : bold; 
font-size: 14px; 
height: 50px; 
} 

#navcontainerh ul li { 
display : inline; 
float: left; 
height: 50px; 
} 

#navcontainerh ul li a { 
padding : 0 20px; 
background: url("images/fres1.png"); 
text-decoration : none; 
float : left; 
height: 50px; 
display: block; 
line-height: 50px; 
} 

navcontainerh ul li a:hover { 
background: url("images/fres.png"); 
height: 50px; 
} 

#navlisth li a:hover, #navlisth li a:active { 
text-decoration : none; 
background: url("images/fres.png"); 
text-align : left; 
font-weight : bold; 
height: 50px; 
font-size: 14px; 
}

#navlisth li a:active, #navlisth li a:focus {
  line-height: 46px; 
  display: block;
  text-decoration : none; 
  text-align : left; 
  font-weight : bold; 
  height: 46px; 
  font-size: 14px;
  padding : 0 18px; 
  border-top: 3px solid #FFE8FF;
  border-left: 2px solid #FFE8FF;
  border-right: 2px solid #FFE8FF;
  border-bottom: 1px solid #FFE8FF;
}

Je crains qu'il ne faille compléter ce dispositif avec du JavaScript.

dans ce cas je ne sait pas si je continue ici ou je reposte dans javascript.
malgré que je n'ai pas trop envie de mettre du js mais si je n'ai pas le choix.

nouveau probleme sur ie tout va bien mais sur firefox la bande depasse la page je ne comprend pas.
le probleme est visible ici.
et cela ne me le fait uniquement sous firefox.
mais également supprimer toutes les marge sous le renard de feu de la page
merci
http://www.larosedelorient.com
css

Code : Tout sélectionner

#navcontainerh { 
width : 100%; 
height: 50px; 
background: url("images/fres1.png"); 
} 

#navcontainerh ul { 
margin : 0; 
padding : 0px 0 0 15%; 
letter-spacing : 2px; 
font-weight : bold; 
font-size: 14px; 
height: 50px; 
} 

#navcontainerh ul li { 
display : inline; 
float: left; 
height: 50px; 
} 

#navcontainerh ul li a { 
padding : 0 20px; 
background: url("images/fres1.png"); 
text-decoration : none; 
float : left; 
height: 50px; 
display: block; 
line-height: 50px; 
} 

navcontainerh ul li a:hover { 
background: url("images/fres.png"); 
height: 50px; 
} 

#navlisth li a:hover, #navlisth li a:active { 
text-decoration : none; 
background: url("images/fres.png"); 
text-align : left; 
font-weight : bold; 
height: 50px; 
font-size: 14px; 
}

#navlisth li a:active {
  line-height: 46px; 
  display: block;
  text-decoration : none; 
  text-align : left; 
  font-weight : bold; 
  height: 50px; 
  font-size: 14px;
  padding : 0 19px; 
  border-top: 3px solid #CC00FF;
  border-left: 1px solid #CC00FF;
  border-right: 1px solid #CC00FF;
  border-bottom: 1px solid #CC00FF;
}

html

Code : Tout sélectionner

<div id="navcontainerh">
  <ul id="navlisth">
     <li><a href="./"> ACCUEIL </a></li>
     <li><a target="_blank" href="condition-vente.php"> condition de vente </a></li>
     <li><a href="comment-acheter.php"> Comment acheter? </a></li>
     <li><a href="panier.php"> Panier </a></li>
     <li><a href="promo-1.php"> <b class="couleurpromo">Promos</b> </a></li>
     <li><a href="contact.php"> Contact </a></li>
  </ul>
</div>

Chez moi, sous Firefox, en inspectant avec Firebug, le problème vient de l'élément TD qui contient le DIV (il va falloir que tu apprennes à faire de la page conforme au balisage sémantique...

). En supprimant son attribut width="100%" et en plaçant un width: 96.8% à la règle CSS td.fresk, je n'ai plus de barre de défilement horizontal.

merci totorpour le debordement c'est regler mais pour la suppretion de la marge.
je remet les marge a 0 comme ceci.

Code : Tout sélectionner

html { 
margin : 0; 
padding : 0;
 }

sa fonctionne sous ie mais pas sous le renard de feu

merci totor

lol ... même si mon frère s'appelait Victor, je crois que je ne l'appellerais pas comme ça

Je vient de me rendre compte qu'il fallait differencier le renard de feu et ie mais comment?
car sous firefox plus de barre de defilement mais sous ie on voie des blancs sur les cotés.

Je vient de me rendre compte qu'il fallait differencier le renard de feu et ie mais comment?

Une piste très intéressante que je recommande : les commentaires conditionnels.

Forum d'entraide PHPFrance

je n'arrive pas a centré mes liens en hauteur

je n'arrive pas a centré mes liens en hauteur