Inline-block dans div

Fermé
Roger - 1 févr. 2013 à 15:00
 Profil bloqué - 2 févr. 2013 à 11:04
Bonjour,

Lorsque que je mets la propriété inline-block pour ma balise nav (menu de gauche) et la balise section (texte à droite du menu de gauche et aligné avec celui ci), mes 2 blocks sont côte à côte, tout va bien.
Problème, lorsque je mets un <div> qui englobe tout la page, donc le div principal classique, ma section se retrouve en dessous du nav, est ce normal?

merci.
A voir également:

9 réponses

Angelneonizz Messages postés 784 Date d'inscription mardi 9 décembre 2003 Statut Membre Dernière intervention 19 février 2018 137
1 févr. 2013 à 15:01
Bonjour,

le iv qui englobe est il assez grand ?
0
oui, j'ai mis une largeur de 900px, mon nav a une largeur de 100px et ma section de 200px, et pourtant ils sont l'un en dessous de l'autre alors que dans le css j'ai bien précisé display: inline-block; pour les 2 balises...
0
Angelneonizz Messages postés 784 Date d'inscription mardi 9 décembre 2003 Statut Membre Dernière intervention 19 février 2018 137
1 févr. 2013 à 15:20
je ne suis pas du tout spécialiste en CSS, tu as essayé avec FLOAT ?
0
Un spécialiste du css aurait il une idée svp?
0
Profil bloqué
1 févr. 2013 à 18:45
je suis d'accord avec Angelneonizz je mettrai des float:left;
0
les inline-block sont spécialement crées pour éviter des float, c'est bcp plus propre donc...
0
Profil bloqué
1 févr. 2013 à 18:54
est ce que c'est en ligne ? tu peux donner URL stp ?
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
non ce n'est pas en ligne c'est juste un code ultra court, en gros j'ai un div qui englobe toute la page, dedans j'ai un nav et un section. Dans le css nav et section sont en inline-block, et quand je ne mets pas le div ils sont bien cote à cote, tandis que quand je mets le div section se trouve en dessous...
0
Profil bloqué
1 févr. 2013 à 19:09
si c'est pas un site entier tu peux coller ton code HTML et CSS stp je vais regarder
0
ok, regarde ce code html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="titi.css" />
		<title> toto </title>
	</head>
	<body>
	<div id="main">
			<div id="corps">
			<nav>
				<ul>
					<li> <a href="#">Accueil</a></li>
					<li> <a href="#">Membres</a></li>
				</ul>
			</nav>
			
			<section>
				<p> blaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
				blaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
				blaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
				</p>
			</section>
			</div>
	</div>
	</body>
</html>


code css associé:

#main
{
	width: 1200px;
	margin: auto;
}

#corps
{
	margin-bottom: 10px;
}

nav
{
	display: inline-block;
	vertical-align: top;
	width: 150 px;
	border: 1px black solid;
}

section
{
	display: inline-block;
	vertical-align: top;
	width: 300 px;
	border: 1px black solid;
}


Rien ne marche, ils ne sont pas alignés et aucune largeur (150 et 300) n'est prise en compte. Et je ne souhaite surtout pas de float...
0
Bonsoir,

A cause de ton texte bidon contenu entre les balises <p> et qui ne comporte aucune césure ça pousse ton bloc <section>.
J'ai testé avec un paragraphe très utilisé par les webmasters (Lorem ipsum dolor si amet...) et la propriété inline-block fonctionne très bien.
0
Non mais attends il y a un problème, mes section et nav ne font pas 300px et 150px comme je le veux, et de toute manière je suis censé quand meme mettre ce que je veux dedans...
Donc j'ai tjs le même problème...
0
Profil bloqué
2 févr. 2013 à 11:04
j'ai regardé ton code,
il y a des espaces entre les valeurs et les PX

Exemple : width: 150px; et non width: 150 px; (sinon pas pris en compte..)
0