Inline-block dans div
Roger
-
Profil bloqué -
Profil bloqué -
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.
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.
9 réponses
-
Bonjour,
le iv qui englobe est il assez grand ?
-
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...
-
-
-
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...
-
-
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... -
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... -
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..)
