[Résolu]Retour à la ligne d'un bouton de menu

Bonjour,

Comme d'hab j'ai un problème avec les css et je m'en remet à vous !
Je suis en train de réaliser un portfolio et je rencontre un problème.
Le dernier bouton de mon menu (horizontal) passe à la ligne.

Voici une capture d'écran



voici le css :

#header {
background-image: url('./images/header.jpg');
height: 49px;
}
#conteneur {
position: relative;
width: 770px;
margin: 0 auto; 
background-color:#FFFFFF;
}
#menu {
margin: 0;
padding: 0;
}
#centre {
background-image: url('./images/contenu.jpg');
margin-left: 345px;
}
#gauche {
background-image: url('./images/samourai.jpg');
position: absolute;
left:0;
width: 345px;
}

Par ailleurs je ne comprend pas pourquoi les background image ne s'affichent pas dans ma page.
Je suis obligé de mettre l'image dans la page html.

Merci beaucoup
Modifié par boudouba (17 Oct 2007 - 11:02)

Salut,

Un peu succinct comme code mais à vue de nez, si ton menu passe à ligne c'est qu'il n'a pas assez de place pour y rester si c'est sous IE6 voir le double margin bug ...

Pour tes images en background pour qu'elles s'affichent, il faudrait dimensionner tes blocks en absolute (width et height) ou mettre du contenu dans les blocs pour les autres positionnement ...

le truc c'est qu'il y a un espace entre chaque bouton du menu c'est pour ça qu'il n'y a pas assez de place mais je voit pas comment supprimer ces espaces.

voici une capture d'écran avec un fond rouge pour que vous voyez mieux le probleme



sinon pour ce qui est du code voici un bout du menu

<div id="menu">
<a href="#" onmouseover="changeImages('accueil', 'images/accueil-over.jpg'); return true;"
onmouseout="changeImages('accueil', 'images/accueil.jpg'); return true;"
onmousedown="changeImages('accueil', 'images/accueil-over.jpg'); return true;"
onmouseup="changeImages('accueil', 'images/accueil-over.jpg'); return true;">
<img name="accueil" id="accueil" src="images/accueil.jpg" width="155" height="35" border="0" alt="accueil" /></a>

...

La taille du menu fait 770 px comme je l'ai indiqué dans la feuille de style donc il ne devrait pas y avoir de problème à ce niveau.

Merci
Modifié par boudouba (16 Oct 2007 - 17:50)

personne ne voit une solution ?

Slt,

Avec ce que tu nous donnes comme code non!

Je pensais que ça irais de vous montrer qu'un extrait de code.
Voici donc l'intégralité de la partie qui déconne

<div id="conteneur">
  <div id="header">
    <div id="boudj">
      <img src="images/boudj.jpg" width="770" height="49" alt="boudj' portfolio">
    </div>
  </div> <!-- fin de header -->

  <div id="menu">
  
    	<a href="index.php?p=accueil"
				onmouseover="changeImages('accueil', 'images/accueil-over.jpg'); return true;"
				onmouseout="changeImages('accueil', 'images/accueil.jpg'); return true;"
				onmousedown="changeImages('accueil', 'images/accueil-over.jpg'); return true;"
				onmouseup="changeImages('accueil', 'images/accueil-over.jpg'); return true;">
				<img name="accueil" id="accueil" src="images/accueil.jpg" width="155" height="35" border="0" alt="accueil" /></a>
		
			<a href="index.php?p=cv"
				onmouseover="changeImages('cv', 'images/cv-over.jpg'); return true;"
				onmouseout="changeImages('cv', 'images/cv.jpg'); return true;"
				onmousedown="changeImages('cv', 'images/cv-over.jpg'); return true;"
				onmouseup="changeImages('cv', 'images/cv-over.jpg'); return true;">
				<img name="cv" id="cv" src="images/cv.jpg" width="153" height="35" border="0" alt="cv" /></a>
		
			<a href="index.php?p=portfolio"
				onmouseover="changeImages('portfolio', 'images/portfolio-over.jpg'); return true;"
				onmouseout="changeImages('portfolio', 'images/portfolio.jpg'); return true;"
				onmousedown="changeImages('portfolio', 'images/portfolio-over.jpg'); return true;"
				onmouseup="changeImages('portfolio', 'images/portfolio-over.jpg'); return true;">
				<img name="portfolio" id="portfolio" src="images/portfolio.jpg" width="156" height="35" border="0" alt="portfolio" /></a>
		
			<a href="http://reveillezmoi.blogspot.com" target='_blank'
				onmouseover="changeImages('blog', 'images/blog-over.jpg'); return true;"
				onmouseout="changeImages('blog', 'images/blog.jpg'); return true;"
				onmousedown="changeImages('blog', 'images/blog-over.jpg'); return true;"
				onmouseup="changeImages('blog', 'images/blog-over.jpg'); return true;">
				<img name="blog" id="blog" src="images/blog.jpg" width="151" height="35" border="0" alt="blog" /></a>
		
			<a href="index.php?p=contact"
				onmouseover="changeImages('contact', 'images/contact-over.jpg'); return true;"
				onmouseout="changeImages('contact', 'images/contact.jpg'); return true;"
				onmousedown="changeImages('contact', 'images/contact-over.jpg'); return true;"
				onmouseup="changeImages('contact', 'images/contact-over.jpg'); return true;">
				<img name="contact" id="contact" src="images/contact.jpg" width="155" height="35" border="0" alt="contact" /></a>
	</tr>
	
  </div> <!-- fin de menu -->

Modifié par boudouba (21 Oct 2007 - 20:04)

Bonjour,

Pour les espaces en trop... ben ce sont tout bêtement des espaces dans ton code HTML (retours à la ligne, tabulations, espaces...).
On en parle ici:
http://blog.alsacreations.com/2006/10/20/294-impact-sur-le-rendu-de-la-mise-en-forme-du-code-html

Pour les images de fond qui ne s'affichent pas, c'est peut-être tout bêtement une erreur de chemin? (Les chemins dans le feuille de style partent du fichier CSS, pas de la page HTML.)

boudouba a écrit :
Je pensais que ça irais de vous montrer qu'un extrait de code.
Voici donc l'intégralité de la partie qui déconne

Tu as pensé à tort. Je ne sais pas si tu arrives à tirer des conclusions en ayant 10% des informations nécessaires, mais en général on a de fortes chances de tomber à côté. D'ailleurs, tu n'as donné qu'une partie de ton code. Avec ce code HTML, je ne peux pas savoir:
- si ta feuille de style CSS est située dans un dossier différent de la page HTML (ce qui confirmerait l'hypothèse des chemins d'images erronés);
- si la page est bien affichée en mode Standard et pas en mode Quirks.

En général, le moyen le plus sûr pour communiquer tous les éléments utiles, c'est de fournir une URL.

Bonjour,

Pour tes images essai de mettre ../ devant au lieu de ./

J'ai oublié de précisé que c'était réglé pour les images de fond.
Par contre ça ne fonctionne toujours pas pour les espaces entre les boutons de menu.
Un jour j'ai eu le même problème pour un autre site, dépité j'ai du laissé le menu dans le tableau générer par image ready.
J'ai pensé a mettre des <p> devant chaque <a> je sais pas trop???

Edit: je viens de trouver le solution j'ai adapté mon menu avec un menu css :

  <div id="menu">
	<ul id="elmenu">

		<li id="elmenu"><a href="index.php?p=accueil"
				onmouseover="changeImages('accueil', 'images/accueil-over.jpg'); return true;"
				onmouseout="changeImages('accueil', 'images/accueil.jpg'); return true;"
				onmousedown="changeImages('accueil', 'images/accueil-over.jpg'); return true;"
				onmouseup="changeImages('accueil', 'images/accueil-over.jpg'); return true;">
				<img name="accueil" id="accueil" src="images/accueil.jpg" width="155" height="35" border="0" alt="accueil" /></a></li>
		<li id="elmenu"><a href="index.php?p=cv"
				onmouseover="changeImages('cv', 'images/cv-over.jpg'); return true;"
				onmouseout="changeImages('cv', 'images/cv.jpg'); return true;"
				onmousedown="changeImages('cv', 'images/cv-over.jpg'); return true;"
				onmouseup="changeImages('cv', 'images/cv-over.jpg'); return true;">
				<img name="cv" id="cv" src="images/cv.jpg" width="153" height="35" border="0" alt="cv" /></a><li>

et

#menu {
margin: 0;
padding: 0;
height: 35px;
width: 770px;
display:block;
}
ul#elmenu li {
	display:block;
	float:left;
	height:35px;
}
ul#elmenu a {
	display : block;
	height : 35px;
}
ul#elmenu span {
	display : none;
	height : 45px;
}

Merci quand même
Modifié par boudouba (17 Oct 2007 - 10:56)

As-tu un lien pour nous montrer ton menu?
car même avec les codes mais sans tes images les essais ne valent rien.

@+