[CSS] Positionnement
Visiteur
-
@lobotomix:~# rm -rf *\ Messages postés 1392 Date d'inscription Statut Membre Dernière intervention -
@lobotomix:~# rm -rf *\ Messages postés 1392 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Je précise d'abord que j'utilise HTML5 et CSS3. Voici mon problème.
J'ai trois boites qui doivent être les unes à côté des autres horizontalement. Ma première est une boite <nav> et les autres sont des <div>.
J'ai donc pensé à leur attribuer chacun un width en pourcentage pour un total de 100 %. Le problème est que ces trois boites sont dans une autre grosse boite qui couvre tout le <body>! Elle est indispensable, car je veux un border de 4 px. J'ai aussi mis un padding de 3 px. Résultat : la troisième boite s'affiche sur une autre ligne.
Je crois que c'est ma bordure de toute la page et l'espacement (padding) qui font débalancer les autres boites. Que faire?
Mon <nav> et mes <div> sont display: inline-block; mais pas mon body.
Merci.
Je précise d'abord que j'utilise HTML5 et CSS3. Voici mon problème.
J'ai trois boites qui doivent être les unes à côté des autres horizontalement. Ma première est une boite <nav> et les autres sont des <div>.
J'ai donc pensé à leur attribuer chacun un width en pourcentage pour un total de 100 %. Le problème est que ces trois boites sont dans une autre grosse boite qui couvre tout le <body>! Elle est indispensable, car je veux un border de 4 px. J'ai aussi mis un padding de 3 px. Résultat : la troisième boite s'affiche sur une autre ligne.
Je crois que c'est ma bordure de toute la page et l'espacement (padding) qui font débalancer les autres boites. Que faire?
Mon <nav> et mes <div> sont display: inline-block; mais pas mon body.
Merci.
1 réponse
-
Bonjour, Voila comment j'ai fait
<!DOCTYPE html> <html> <head> <title>tableau</title> <meta charset="UTF-8" /> <style type="text/css"> html, body { width: 100%; height: 100% } #conteneur { width: 100%; height: 100%; border: 4px black solid; padding: 3px; background-color: blue; } nav { border: 4px black solid; height: 100px; background-color: yellow; width: 32%; } #bloc1 { border: 4px black solid; height: 100px; background-color: green; width: 32%; position: relative; bottom: 37px; } #bloc2 { border: 4px black solid; height: 100px; background-color: pink; width: 32%; position: relative; bottom: 37px;; } div, nav { display: inline-block; } </style> </head> <body> <div id="conteneur"> <nav> <p> lien bidon <br /> lien bidon <br /> lien bidon </p> </nav> <div id="bloc1"> <p> un peu de contenu </p> </div> <div id="bloc2"> <p> un peu de tout et n'importe quoi </p> </div> </div> </body> </html> </body> </html>
