Pb Menu rollover horizontal à placer

Bonjour,
Tout d'abord voila le lien de la page sur laquelle je suis en train de travailler.
Je débute dans le graphisme complet d'un site en CSS, je suis encore de l'ancienne école avec mes tableaux tout partout!!

http://idriss.kaced.free.fr/index2.htm

Ouvrez cette page sur IE et sous FIREFOX vous allez vite comprendre mon pb.
En fait j'aimerai que 2 choses se passent sur mon #menu:
Tout d'abord j'aimerai que le fond que j'ai défini sur ma div #menu fasse la largeur complète de ma page, hors elle s'arrete à la fin de mes boutons sur FIREFOX, mais fonctionne sous IE.

Autre chose, j'aurai voulu centrer sur ma page ma partie boutons, de facon à ce que visuellement ca donne ceci:

http://idriss.kaced.free.fr/

J'ai modifié mon css dans tout les sens mais pas moyen. Apparemment vu que j'ai transformé mes balises <a> en block, les parametres que j'applique sur ma div #menu ne fonctionne pas, mais je ne sais pas comment parer à ce pb!

Si vous pouvez m'aider ca sera d'une grande aide, ca fait 2 jours que je me tracasse la tete.
D'avance merci

piuce a écrit :
Autre chose, j'aurai voulu centrer sur ma page ma partie boutons

Hello

Le centrage de ton groupe de boutons (balise <ul> je suppose) se fait à l'aide des marges latérales automatiques.

La FAQ et les Tutoriels donnent les solutions que tu cherches.
N'as-tu pas pensé à faire une recherche rapide avant de poster ?

EDIT : je viens de voir ton code et finalement tu n'utilises pas de liste pour tes liens :

<div id="menu">
  <!-- BOUTONS DE MENU -->

    <p><a href="#" title="Présentation" class="bt_presentation"></a><a href="#" title="Curriculum Vitae" class="bt_cv"></a><a href="#" title="Mes travaux" class="bt_travaux"></a><a href="#" title="Liens" class="bt_liens"></a></p>
	</div>

A quoi te sert le div "menu" ? Le bloc <p> n'est-il pas suffisant ?

Je te suggère de supprimer le div et de donner l'id à ton <p>, puis de lui donner une largeur en CSS et des marges auto.
Modifié par Raphael (30 Oct 2006 - 22:45)

Ah sacré moi, j'ai pas encore saisi toute les notions de block... ou <p> est de type block, donc je dégage mon div.
Bon j'ai mis en ligne ma modif... en mettant une largeur fixe à mon <p> et les marges auto, mais ca ne fonctionne toujours pas...
Modifié par piuce (30 Oct 2006 - 22:52)

a écrit :
Tout d'abord j'aimerai que le fond que j'ai défini sur ma div #menu fasse la largeur complète de ma page, hors elle s'arrete à la fin de mes boutons sur FIREFOX, mais fonctionne sous IE.

(Attention à "hors" / "or")

En fait, le problème est que ton bloc #menu... n'apparait pas !
Il n'a pas de hauteur et tout les éléments qu'il contient sont des flottants.

Du coup, logiquement, ils "dépassent" de leur conteneur : http://forum.alsacreations.com/faq/#item6

piuce a écrit :
Bon j'ai mis en ligne ma modif... en mettant une largeur fixe à mon <p> et les marges auto, mais ca ne fonctionne toujours pas...

Si tu lui donnes toute la largeur du conteneur (idth: 760px;), comment veux-tu qu'il puisse se centrer dans ce conteneur ?

Le problème est que même si tu réduis la largeur de <p>, l'ensemble des largeurs de tes blocs liens <a> fait la totalité du conteneur (le dernier lien a un width: 360px;)... du coup : impossible de centrer le menu tant qu'il occupera toute la largeur du conteneur.

En clair :
- donne à chaque bouton sa vraie largeur
- donne à <p> la largeur des 4 boutons
- donne à <p> des marges latérales automatiques
... et l'ensemble sera centré

- donne à <p> une hauteur (celle des boutons)
... et le problème de flottants et d'arrière-plan sera résolu

Bonne chance et n'hésite pas à revoir les bases des CSS : il y'a beaucoup beaucoup de répétitions inutiles dans tes règles CSS.

Par exemple :

a.bt_liens{
	display: block;
	background: url(../images/liens.gif) no-repeat;
	height: 41px;
	width: 123px;
	float: left;
}
a.bt_liens:hover{
	display: block;
	background: url(../images/liens-over.gif) no-repeat;
	height: 41px;
	width: 123px;
	float: left;
}

Peut se résumer à :

a.bt_liens{
	display: block;
	background: url(../images/liens.gif) no-repeat;
	height: 41px;
	width: 123px;
	float: left;
}
a.bt_liens:hover{
	background: url(../images/liens-over.gif) no-repeat;
}

Tout simplement ! Inutile de répéter les règles identiques.
Modifié par Raphael (30 Oct 2006 - 23:02)

Raphael a écrit :

Le problème est que même si tu réduis la largeur de <p>, l'ensemble des largeurs de tes blocs liens <a> fait la totalité du conteneur (le dernier lien a un width: 360px;)... du coup : impossible de centrer le menu tant qu'il occupera toute la largeur du conteneur.

Ah oui zut, ca faisait partie de mes bidouillages. Pour la partie "centrage" c'est réglé. Merci.

Me reste la partie arrière plan de tout ca, je regarde tes liens demain, je dois partir là.
Merci beaucoup en tout cas!! Bonne soirée!

Je viens d'éditer mon message précédent

Merci de me signaler mes répétitions dans mon code, tant qu'on peut l'alléger allégons!!
Bonne soirée!!

J'ai donné à <p> la hauteur des boutons mais ca ne fonctionne pas... étrange....
Bon allez cette fois je file, je me replonge dans tout cela demain!
Merci encore!

Bonsoir, me revoila tjs dans mon souci, j'ai essayer de regarder le lien que tu m'as donné pour régler mon problème d'arrière plan de mes boutons mais ca n'a pas fonctionnée en mettant un <hr>...
Si tu as une autre idée?

Je me bats tjs sur mon souci pour mettre mon image de fond derriere mes boutons sur toute la largeur de ma page... je veux bien encore un petit coup de pouce plizz

Bonjour,

Pour avoir le background de ton menu sur toute la largeur de la page, il suffit d'englober ton menu dans un div width: 100% avec ce background.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>
		<title>Test</title>

		

		<style>
#menu{
	background:  url(menu.gif) repeat;
	width: 100%;

}

#menu p{
	margin-right: auto;
	margin-left: auto;
	width: 514px;
	height: 41px;
}

a.bt_cv{
	display: block;
    background:url("cv2.gif");
    background-position:0px -41px;	
	height: 41px;
	width: 148px;
	float: left;
}
a.bt_cv:hover{
    background:url("cv2.gif");
    background-position:0px 0px;	
}
</style>			
	</head>
	
	<body>
<div id="menu">
    	<p><a href="#" title="Présentation" class="bt_presentation"></a><a href="#" title="Curriculum Vitae" class="bt_cv"></a><a href="#" title="Mes travaux" class="bt_travaux"></a><a href="#" title="Liens" class="bt_liens"></a></p>
</div>

	</body>
</html>

En prime, pour éviter les retards d'affichage de ton background sous IE, tu as l'utilisation d'une seule image de background par bouton positionnée differemment grâce à background-position en fonction du hover.

Merci beaucoup de ton aide le résultat est tip top celui que j'attendais!
Je dois par contre aller réviser un peu les background position car je me suis un peu larguée sur le coup!
En tout cas un grand merci!!