![[MGZ] Shralldam](/data/avatars/m/1/1382.jpg?1575833918){kind=avatar}
Bonjour à toutes et à tous, 
Après de nombreuses années sans plus trop m'intéresser au sujet, je me suis remis récemment au design web. Heureusement, j'ai retrouvé assez rapidement mes marques, mais je n'étais pas encore trop familier des DIVs et leur positionnement (j'utilisais des tableaux Peut-être moins moderne mais efficace). Bref, je mets les mains dans le cambouis et je crois que je m'en sors assez bien, cela dit il y a un problème qui m'irrite dans un modèle que je suis en train de réaliser : le texte n'est pas aligné dans deux DIVs se trouvant côte à côte. J'ai beau réfléchir sur mon code CSS, je n'arrive pas à résoudre le problème. Jugez-en plutôt l'image ci-dessous :
Pour information, j'ai 5 DIVs :
La DIV 3 (la barre de navigation gauche) est réglée en float: left, et comme vous pouvez le constater, les premières lignes des DIVs 3 et 4 ne sont pas alignées ! J'ai bidouillé avec les margins et les paddings mais rien n'y fait, sauf en trichant, et je suis convaincu que ça doit marcher sans tricheries !
Voici le code CSS (c'est du temporaire, excusez si ce n'est pas très complet) :
Et pour suivre, le code HTML :
Voilà Ma plus grosse peur : que l'erreur soit stupide et que je sois passé à côté comme un cornichon ! Mais bon, là j'ai un doute. :hein:
L'un(e) d'entre-vous aurait une idée ?
Merci d'avance ! :zen:
Après de nombreuses années sans plus trop m'intéresser au sujet, je me suis remis récemment au design web. Heureusement, j'ai retrouvé assez rapidement mes marques, mais je n'étais pas encore trop familier des DIVs et leur positionnement (j'utilisais des tableaux Peut-être moins moderne mais efficace). Bref, je mets les mains dans le cambouis et je crois que je m'en sors assez bien, cela dit il y a un problème qui m'irrite dans un modèle que je suis en train de réaliser : le texte n'est pas aligné dans deux DIVs se trouvant côte à côte. J'ai beau réfléchir sur mon code CSS, je n'arrive pas à résoudre le problème. Jugez-en plutôt l'image ci-dessous :
Pour information, j'ai 5 DIVs :
- DIV 1 (id="top") qui définit la barre supérieure
- DIV 2 (id="container") contenant deux autres DIVs : DIV 3 (id="left") pour la barre de navigation gauche et DIV 4 (id="content") pour le contenu sur la droite
- DIV 5 (id="bottom") qui définit le pied du contenu de la page
La DIV 3 (la barre de navigation gauche) est réglée en float: left, et comme vous pouvez le constater, les premières lignes des DIVs 3 et 4 ne sont pas alignées ! J'ai bidouillé avec les margins et les paddings mais rien n'y fait, sauf en trichant, et je suis convaincu que ça doit marcher sans tricheries !
Voici le code CSS (c'est du temporaire, excusez si ce n'est pas très complet) :
Bloc de code:
body {
font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', Helvetica, Arial, sans-serif;
margin: 0 0 0 0;
}
#top {
clear: both;
padding: 10pt 0pt 0pt 10pt;
color: white;
background: olive;
height: 100px;
}
#left {
padding-left: 10pt;
float: left;
width: 180px;
height: 100%;
}
#right {
margin-left: 200px;
padding-left: 10pt;
border-left-style: solid;
border-left-width: 1px;
}
h4 {
padding-left: 15pt;
}
#bottom p {
height: 50px;
color: white;
background: black;
text-align: center;
}Et pour suivre, le code HTML :
Bloc de code:
<body>
<!-- D'abord, nous créons la DIV de navigation haute -->
<div id="top"><h1>LOGO</h1></div>
<!-- Ensuite, nous créons la DIV de contenu qui comprendra la barre de navigation gauche, et le contenu (sur la droite) -->
<div id="content">
<!-- Voici la DIV de la barre de navigation gauche -->
<div id="left">
<h3>Rubriques</h3>
<ul>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
</ul>
<h3>Partenaires</h3>
</div>
<!-- Voici la DIV du contenu (sur la droite) -->
<div id="right">
<h1>Bienvenue sur ma page réalisée entièrement par code !</h1>
<h3>1. Introduction</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h3>2. En profondeur</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h4>Voici un peu de code CSS :</h4>
<p><tt>#right { margin-left: 200px; padding-left: 10pt; border-left-style: solid; border-left-width: 1px; }</tt></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h3>3. Conclusion</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<!-- Nous fermons ici la balise DIV qui a pour ID "content" -->
</div>
<!-- Et pour finir, la DIV qui définit le pied du contenu de la page -->
<div id="bottom">
<p>© 2009 Moi-même.</p>
</div>
</body>Voilà Ma plus grosse peur : que l'erreur soit stupide et que je sois passé à côté comme un cornichon ! Mais bon, là j'ai un doute. :hein:
L'un(e) d'entre-vous aurait une idée ?
Merci d'avance ! :zen:
