[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>
