Forcer une classe de prendre toute la largeur dans le div parent.

Yo,

Je suis face à un léger soucis dans la conception d'un de mes styles css. Il existe probablement moulte artifice qui permettrait de corriger le problème, j'en ai testés certains mais peu me conviennent.

Je m'explique :

Voici un screenshot du problème :

http://www.quanture.net/upload/pong.png

J'aimerais que le bouton contact puisse s'étirer jusqu'au bord du div, en faisant également en sorte que le texte se centre pour que ça puisse rendre bien.

Voici l'extrait du code en CSS qui pose certainement problème :

#content {
background-color : #e5e5e5;
margin : auto;
width : 980px;
height : auto;
overflow : auto;
}
	.menu {
	margin : auto;
	background-color : #262626;
	border-top : #e5e5e5 solid 2px;
	}
		.menu a {
		color : #333;
		text-decoration : none;
		font-size : 16px;
		display : inline-block;
		background-image : url(../images/menu-secondary-bg.png);
		background-repeat : repeat-x;
		padding : 13px 15px;
		margin-right : 4px;
		}

Mon css n'est probablement pas des plus respectueux des standards, et ça sera volontiers si vous m'aidiez à améliorer ça.

Mon code html :

<div id="content">
	<div class="menu">
		<a href="index.php" title="Accueil">ACCUEIL</a> 
		<a href="#" title="#">LE GROUPE</a>
		<a href="#" title="#">NOS DOMAINES D'INTERVENTION</a>
		<a href="#" title="#">Zoubi</a>
		<a href="#" title="#">CONTACTS</a>
	</div>

Le margin-right me permet de faire une séparation entre chaque boutons, mais je suppose que je peux faire autrement, cela allégerait certainement le problème.

Merci d'avance, n'hésitez pas à me demander des précisions.
Modifié par Reclad (17 May 2011 - 23:10)

salut,

comme ça vite fait, tu devrais plutôt construire ton menu avec un élément <ul>.
(bon il faut détourner la propriété float de sa fonction première mais c'est très fréquent pour ce cas)
je pense que cette façon de faire serait bcp plus flexible.

A+

o06 a écrit :
bon il faut détourner la propriété float de sa fonction première mais c'est très fréquent pour ce cas

Je vois pas en quoi ça serait détourner float de sa fonction première.

re,

bon je suis loin d'être un expert, mais j'ai pu lire que la propriété float sert avant tout à "... 'pousser' à gauche ou à droite dans un élément des images ou des portions de texte ..." pas à positionner des éléments les uns par rapport aux autres.

après vu la quantité de menus construit selon le modèle <ul><li style="float:left; ..."></ul> ça ne doit pas être bien grave. (menu en horizontal)

j'aurais pas du mettre cette phrase " ... détourner la propriété float de sa fonction première ... " c'était pour faire genre

A+

float permet "d'ordonner" à un élément bloc de ne pas tenir compte de "l'espace" blanc généré par un élément du meme type qui le précède (par la droite ou par la gauche).

Donc je te confirme que ca n'est pas " ... détourner la propriété float de sa fonction première ... "

o06 a écrit :

bon je suis loin d'être un expert, mais j'ai pu lire que la propriété float sert avant tout à &quot;... 'pousser' à gauche ou à droite dans un élément des images ou des portions de texte ...&quot; pas à positionner des éléments les uns par rapport aux autres.

C'était peut être le cas lors de la publication de CSS 1 (1996 ?). Mais sur le site du W3C dans les exemples de la propriété float il n'y a pas que des images mais aussi des blocs.
Modifié par jb_gfx (20 May 2011 - 12:24)