28172 sujets

CSS et mise en forme, CSS3

Centrage dans une div

Bonjour à tous !
Je vous rassure j'ai déjà chercher mais en essayant les réponses données, je n'y arrive pas.
Alors voilà j'ai planché sur un problème toute la matinée, je suis débutant en css. J'essaye de centrer un menu situé dans une div :
Le menu en blanc sur fond noir : Accueil - Forum - Galerie - Téléchargements...

http://www.mirari.fr/V6Hz.jpg 

div#sub_header_bottom {
	background:url(images/boutton.png) repeat-x;
	height:41px;
	padding-top:8px;
	width:auto;
	margin-bottom:-8px;
	}

a.button {
	background:transparent url(images/boutton.png);
	border-right:1px solid #55565a;
	border-left:1px solid #55565a;
	color:#ffffff;
	height:20px;
	padding:10px 15px 13px;
	text-align:center;
	text-decoration:none;
	left:30% ;
	position:relative
	}



et ce qui y corresspond : 

<div id="sub_header_bottom"> 
<a href="../news/news.php" title="Accueil du site" class="button">Accueil</a><a href="../forum/index.php" title="Forum" class="button">Forum</a><a href="../articles/articles.php" title="Articles" class="button">Articles</a><a href="../gallery/gallery.php" title="Galerie" class="button">Galerie</a><a href="../download/download.php" title="Téléchargements" class="button">Téléchargements</a><a href="#" title="" class="buttonn"></a>
</div>


Certe c'est au centre mais parce que j'ai rajouté

left:30% ;
	position:relative


Je désirerai autre chose que du bricolage.
Mon site est en extensible.

Merci de votre aide qui me sera précieuse !
Modifié par Surcouf (11 Jul 2009 - 20:22)
SALUT,
essayé d'ajouter ca a a.button

a.button { 
 margin-right:auto;
margin-left:auto;
    }

Modifié par sosdes (11 Jul 2009 - 20:28)
Bonsoir Surcouf,

le fait que ton site web ne soit pas valide XHTML signifie qu'il ne respecte pas la sémantique ainsi que les règles définies et mise en place par le W3C.

Voilà ce que ça change.
Salut,
a écrit :
pas valide XHTML signifie qu'il ne respecte pas la sémantique
Petite correction : la validité au sens où l'entend validateur du W3C concerne la syntaxe, pas la sémantique (qu'une machine aurait beaucoup de mal à analyser). Smiley smile

Surcouf :
- supprime ce {position:relative; left:30%}
- visiblement, tes liens ne sont pas en display:block, donc tu dois pouvoir placer simplement text-align:center sur ta div#sub_header_bottom (mais là, ton height sur les <a> ne sert à rien, par exemple)
- sinon, et si tu peux te le permettre, l'idéal est inline-block
- sinon, enfin, en fonction de tes besoins tu peux tu peux centrer une div en lui donnant une largeur et en mettant ses marges latérales à 'auto'. Ensuite place ton menu dedans. Tu auras encore quelques ajustages à faire, cependant.
a écrit :
Petite correction : la validité au sens où l'entend validateur du W3C concerne la syntaxe, pas la sémantique (qu'une machine aurait beaucoup de mal à analyser). Smiley biggrin


Merci, marcv, de m'avoir corrigé.

A mon tour Smiley lol :

a écrit :
sinon, enfin, en fonction de tes besoins tu peux tu peux centrer une div en lui donnant une largeur et en mettant ses marges latérales à 'auto'.


Petit doublon repéré Smiley langue .
Sujet clos
Aller à