18041 sujets

Questions générales et questions de débutants

[Résolu] Problème d'alignement avec inline-block

bonjour à tous,

Comme beaucoup de monde qui débute dans l'apprentissage du html5 et css3, je rencontre des problème avec les alignements de deux éléments. J'ai tous essayé (sauf la solution Smiley langue ).

J'ai simplifié mon code au maximum pour éviter toute source d'erreur et malgré cela, mon article se retrouve en dessous de mon nav .... Mais trêve de bavardage, voila le code:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<link rel="stylesheet" href="new.css"/>
		<title>Royal Brussels Poseidon - Section Water-polo</title>
	</head>
	<body>
			<section>
				<nav>
					<ul>
						<li><a href="#"> Dirigeants </a></li>
						<li><a href="#"> Section Jeune </a></li>
						<li><a href="#"> Section Sénior </a></li>
						<li><a href="#"> Résultats </a></li>
					</ul>
				</nav>
				<article>
					<p>L'ancêtre du water-polo fut créé par des nageurs de la « London Swimming Association » au XIXème siècle. Ils l'appelèrent le Water Derby, 
					un sport s'inspirant du polo. Les joueurs  chevauchaient des tonneaux richement décorés et se servaient de pagaies pour se déplacer  et jouer 
					le ballon. Le jeu évolua par la suite avec l'abandon des tonneaux. Aujourd'hui, le water-polo est un sport complet qui allie la natation et le 
					jeu de ballon,  l'endurance et le sport d'équipe. Il est, avec le football, est le plus vieux sport collectif olympique. </p> 
				</article>
			</section>
	<body>



@font-face
{
	font-family:'ArmWrestler';
	src:url('Polices/armwrestler_bold_macroman/ArmWrestler-webfont/eot') format('eot');
		url('Polices/armwrestler_bold_macroman/ArmWrestler-webfont/woff') format('woff');
		url('Polices/armwrestler_bold_macroman/ArmWrestler-webfont/ttf') format('truetype');
		url('Polices/armwrestler_bold_macroman/ArmWrestler-webfont/svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
body
{
	background: #FFFFFF;
	font-family: 'ArmWrestler',Arial, sans-serif;
}
article, nav
{
	display:inline-block;
	margin-right: 0px;
	border: 1px solid #C8C8C8;
}


J'ai essayé avec chrome et Firefox est sur aucun des deux cela ne marche :'(
Ai je fais une erreur quelque par ???

Merci d'avance pour vos réponse Smiley lol
Modifié par methos02 (22 Nov 2013 - 11:51)
Je pense qu'il est préférable de séparer tes éléments nav et article, de leur imposer un display inline-block respectivement, et de leur donner une largeur (pas 50%-50%, mais 50 et 49% pour que les deux éléments se placent sur la même la ligne).

Si tu tentes ceci :

article
{
	display:inline-block;
	margin-right: 0px;
	border: 1px solid #C8C8C8;
	width: 50%;
}

nav {
	display:inline-block;
	margin-right: 0px;
	border: 1px solid #C8C8C8;
	width: 49%;
}


Ca devrait fonctionner.

Bonne chance.
Et les bordures comptent aussi dans les dimensions (border: 1px solid #C8C8C8;) donc même en supprimant l'espace entre <nav> et <article> (chose que tu devrais faire à chaque fois que tu passes par un "display:inline-block") ça ne collera toujours pas.
Il faut encore ajouter "box-sizing:border-box" en préfixant pour FF et Chrome. Si tu ne maîtrises, tu devras te renseigner là dessus.
Sujet clos
Aller à