Mon background-image ne se positionne pas bien !

Sujet résolu

6 février 2006 à 16:56:08

Bonjour,

Je suis en train de faire un désign et j'ai fait une speed-barre. Dans cette speed-barre je veux mettre une image degradée en fond mais ça ne marche pas :

.speedBarre
{
width:758px;
height:30px;
border:1px solid black;
padding-top:150px;
font-family:Arial, Verdana, "Arial Black", Serif;
background-image:url("/Images/degrade_speedBarre.jpg");
background-repeat: repeat-x;
}

Mais l'image ne se positionne pas dans la speed-barre mais au-dessus !

Merci d'avance de votre aide

strucky

6 février 2006 à 17:12:04

Salut,

C'est normal puisque tu ne précises aucun positionnement pour ce bloc, il se retrouve donc en haut par défaut, tu as 2 solutions, soit tu sors .speedBarre de #entete pour qu'il se retrouve juste en dessous de celui-ci, ou soit tu lui mets un positionnement absolu, c'est déjà fait pour .menu, mais avec un bottom: 0 pour qu'il se retrouve dans le bas du bloc #entete.

Mais pourquoi ne pas mettre directement ton image dans .menu ?

Les espaces insécables, c'est pas trop le top pour les séparations.

Simon-le-zeus

6 février 2006 à 17:19:33

Merci j'ai mit directement l'image dans le .menu c'est beaucoup mieux sauf qu'il ne s'affiche pas en entier dans la speed-barre

PS : Pour les espaces je savais pas comment faire

strucky

6 février 2006 à 17:30:22

Il y a une petite erreur dans ton html :

N'oublies pas que lorsque tu ouvres des guillemets, à l'intérieur, tu ne peux réouvrir encore des guillemets, car c'est interprêté comme une fermeture du 1er guillemet ouvert, ici dans l'adresse de ton image, remplaces les guillemets par des apostrophes.

Ensuite, j'ai vu qu'il y avait un padding de 4px, et que tes liens sont dans un <span> donc de type inline, remplace span par div, ou transformes ton span en block.

Simon-le-zeus

6 février 2006 à 17:43:11

<div id="entete"> 
<div class="speedBarre"> 

<div class="menu" style="position:absolute;padding:4px; background-image:url('Images/degrade_speedBarre.jpg');"><a href="index.php">Accueil</a>     FAQ     Rechercher     Membres     Profil     Partenaires     Inscription     Connexion/DÈconnexion</div>

</div> 
</div>

Ca ne fonctionne pas non plus

strucky

6 février 2006 à 17:53:04

Ah oui, j'ai oublié, quand tu donnes un positionnement absolute à un bloc, il perd ses propriétés de dimensions, il faut que tu indiques la largeur et la hauteur de ton bloc.

Simon-le-zeus

6 février 2006 à 17:59:34

Merci beaucoup ! C'est parfait ! Une dernière question et c'est bon : De quelle façon puis-je remplacer les   de mon code XHTML ?

strucky

6 février 2006 à 18:09:19

Par des margin-left sur tes balises <a>, mais il faudra l'appliquer en mettant une classe sur chaque balises <a> sauf sur la 1ère (accueil).

Simon-le-zeus

6 février 2006 à 18:29:36

Merci pour tout Strucky !

PS : Euh c'est normal ou y'a que moi qui voit pas les messages en entiers ? o_O

Simon-le-zeus

6 février 2006 à 18:29:36

Merci pour tout Strucky !

PS : Euh c'est normal ou y'a que moi qui voit pas les messages en entiers ? o_O

ÉDIT : Désolé pour le double post :euh: