besoin d'aide pour finaliser mon site (position text et hover)

Marsh Posté le 22-02-2009 à 20:09:08

Bonjour,

J'aurais besoin d'aide pour finaliser mon site.
C'est la première fois que je fais un site et je dois avouer qu'il me manque encore beaucoup de notions pour trouver les solutions a mes 2 problèmes.
Voici mes 2 problème.

1) le text dans mes boutons ne se centre pas dans ceux-ci sur la verticale.

Il est centre sur l'horizontale, mais effleure le haut de mes boutons et je n,arrive pas à les descendre

2) mon 2ieme problème et que mon hover ne fonctionne pas sous IE6. J'ai vu le sujet assez souvent, mais je ne sais pas l'appliquer a mon code.

Si quelqu'un pouvait m'aider, je lui en serait reconnaissant.

Voila mon code Css et Html.

Citation :

#menuDeroulant
{
float: none;
width: 130px;
list-style-type: none;
position: absolute;
top: 40px;
left: 3px;
}
#menuDeroulant li
{
float: bottom;
font-size: 12px;
font-family: georgia ,serif;
text-align: center;
margin: 0px;
padding: 0px;
border: 0px;

}

#menuDeroulant .sousMenu
{
display: none;
list-style-type: none;
position: relative;
top: -6px;
left: 6px;
margin: 0px;
padding: 0px;
border: 0px;
}
#menuDeroulant .sousMenu li
{
float: none;
margin: 0px;
padding: 0px;
border: 0px;
width: 130px;
border-top: 1px solid transparent;
border-right: 1px solid transparent;
}
#menuDeroulant li a:link, #menuDeroulant li a:visited
{
background: url(images/bup.png);
width: 130px;
height: 26px;
color: #FFF;
display: block;
padding: 0px;
margin: 6px;
text-decoration: none;
width: 100%;
border-right: 0x solid transparent;

}

#menuDeroulant li a:hover
{
background: url("images/buphover.png" );
}
#menuDeroulant li a:active
{
background: url("images/bupvisit.png" );
}

#menuDeroulant .sousMenu li a:link,
#menuDeroulant .sousMenu li a:visited
{
display: block;
color: #000;
margin: 0;
border: 0;
text-decoration: none;
background: url("images/bdown.png" ) ;
}
#menuDeroulant .sousMenu li a:hover
{
background-image: none;
color: #FFF;
background-color: #2D73A8;
}
#menuDeroulant li:hover > .sousMenu { display: block; }

Citation :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Conforming XHTML 1.0 Transitional Template</title>
<link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body>

<div id="logo">
</div>

<div id="header">

</div>

<div id="page">

<ul id="menuDeroulant">
<li>
<a href="Index.html">Acceuil</a>
</li>
<li>
<a href="propos.html">À propos</a>
</li>
<li>
<a href="#">Services</a>
<ul class="sousMenu">
<li><a href="ingelec.html">Ingénirie Électrique</a></li>

Merci d'avance

Reply

Marsh Posté le 22-02-2009 à 20:09:08

Reply

Marsh Posté le 23-02-2009 à 02:54:35

poser la question c'est parfoit y répondre... Mon problème de positionnement de texte semble réglé.
En cherchant un peut, on fini par trouver.

Par contre je n'ai pas de solution pour IE6

#menuDeroulant li a:link, #menuDeroulant li a:visited
{
background: url(images/bup.png);
width: 130px;
height: 21px;
color: #FFF;
display: block;
padding: 6px 0px 0px 0px;
margin: 6px;
text-decoration: none;
width: 100%;
border-right: 0x solid transparent;
}

Reply

Marsh Posté le 24-02-2009 à 19:50:08

Bonjour,

IE6 ne reconnaît et applique :hover (survol) que pour les liens ... Pour le reste tu peux oublier.
EDIT: soit ce survol est pas essentiel à ton site et tant pis pour les utilisateurs d'IE6, soit tu peux l'émuler avec jQuery ou IE7.js

Et ">" dans un sélecteur (adjacence) n'est pas non plus compris par IE6 ...

Message édité par phosphoreloaded le 24-02-2009 à 19:53:20

Reply

besoin d'aide pour finaliser mon site (position text et hover)

Sujets relatifs:

Leave a Replay