28173 sujets

CSS et mise en forme, CSS3

Problème de centrage de div

Hello.
J'ai un problème pour centrer du contenu dans des div.


<body>
	<div class="menu_top">
		<img src="./imgs/title.png" alt="titre" />
		
		<div class="menu">
			<ul>
				<li><a href="./index.php" class="menu_link">Accueil</a></li>
				<li><a href="./index.php" class="menu_link">Accueil</a></li>
				<li><a href="./index.php" class="menu_link">Accueil</a></li>
				<li><a href="./index.php" class="menu_link">Accueil</a></li>
			</ul>
</div>
			<br style="clear: left;" />
	</div>



.menu_top
{
	vertical-align: middle;
	text-align: center;
}
 
.menu
{
	vertical-align: middle;
	text-align: center;
}
 
.menu ul li
{
	float: left;
	width: 160px;
	height: 50px;
	background: transparent url(./imgs/buttons.png) no-repeat;
	cursor: pointer;
	list-style-type: none;
  	margin: 0px 0px 0px 0px;
  	padding: 0px 0px 0px 0px;
}
 
.menu ul li:hover
{
	background: transparent url(./imgs/buttons_f2.png) no-repeat;
}
 
.menu ul li a
{
	font-size: 13px;
	font-weight: bold;
	color: #000000;
	display: block;
	text-decoration: none;
	width: 160px;
	height: 40px;
	padding: 6px 0px 0px 0px;
}
 
.menu ul li a:hover
{
	color: #666666;
}


Là, mon image "titre" est parfaitement centrer.
Mon menu, est plaqué à gauche, je ne sais pas comment faire
Si qqun peut m'aider
Merci
Juste pour info.
Je suis en DOCTYPE "Strict"
Et le comportement est identique entre Opera9, IE7, FF2.
Merci
Tu ne précises nulle part que ton bloc doit être centré: text-align:center est effectivement efficace pour ton image car il n'agit que sur du contenu de type "inline" (tel que <img>). Pour centrer un bloc (div, ul, ...) jette un coup d'œil dans la faq, ça sert à ça! Smiley cligne
Justement, ça ne marche pas correctement.
En plus mon width est dynamique, parfois il y a 3 bouton, défois 4 ou 5...
Tu as jetté un coup d'œil à cette FAQ ou non? Tu devrais y trouver tout ce dont tu as besoin pour avancer. Qu'as-tu essayé? Quel est le code auquel tu es arrivé et qui ne "marche pas correctement"? Allez, au boulot! Smiley cligne
Oui oui, merci c'est bon, avec le php je vais spécifiez le width du div manuellement (j'aurai préféré automatiquement mais ce n'est pas possible apparemment).

Par contre au niveau du 
<br style="clear: left;" />

N'y a t il pas moyen d'utiliser autre chose ?
Déjà ce "clear" n'est là que pour FF (pas besoin sur Opera ni IE).
Le problème c'est que ça me descend d'un cran mon cadre d'après, se que je ne voulais pas. On peut utiliser quoi qui me modifierai pas le code ?
Merci
Fais un effort plom, tes questions sont incompréhensibles, on ne voit pas bien où tu veux en venir ni ce que tu essayes de dire (un petit effort de langage serait franchement bienvenu)...
Dur dur à expliquer...
Bon...
Comme j'ai fait un menu avec des listes. J'ai utiliser "float: left" pour les aligner.
Seulement voilà, FireFox continuer à aligner mon div qui le suit.
Donc pour éviter celà, j'ai lu qu'il fallait utiliser "clear: left"
mais celà descend d'un cran la suite du suite et j'aimerai éviter celà.
Effectivement, clear:left met fin au flottement... et passe par conséquent à la ligne, c'est normal non? As-tu une page en ligne où tu pourrais montrer ton problème ou ne fut-ce qu'une capture d'écran? Parce que là...
Modifié par Benjamin D.C. (05 Jul 2007 - 18:22)
Oui il y a un retour à la ligne
mais vu que j'utilise une balise <br /> ça me fait un saut de ligne également, chose que j'aimerai éviter.
Naturellement puisque la balise br sert justement à créer un saut de ligne...
Tu peux appliquer le clear sur autre chose qu'un br heureusement!
Par exemple, si tu souhaites mettre côte à côte deux paragraphes et faire passer le troisième à la ligne, tu pourras procéder de cette manière:


[b][#black]HTML[/#][/b]

<p>... paragraphe ...</p>
<p>... paragraphe ...</p>
<p id="paragraphe3">... paragraphe ...</p>


[b][#black]CSS[/#][/b]

p {float:left; width:25%;}
p#paragraphe3 {clear:left;}
sinon au lieu de mettre tes <li> en float mets les en display:inline plutot, ton texte sera centré par le text-align sans besoin de preciser une largeur et tu supprimes les clear
Sujet clos
Aller à