Bonsoir,
Je souhaite faire une présentation à 3 colonnes et je veux insérer dans la colonne de gauche et de droite un encart mais j'ai les problèmes suivant :
1.- Je n'arrive pas à centrer les titres dans les encarts;
2.- Les liens dans les encarts ne prennent pas les styles définis;
3.- Je n'arrive pas à placer l'encart de la colonne de droite (#encart2) au centre de la colonne de droite;
4.- Il y a une ligne blanche sur l'encart de la colonne de droite en l'image du haut et celle du bas;
5.- Le début du paragraphe du centre (#cadre4 p) est trop décalé sur la droite par rapport à l'encart de gauche.
Une fois l'encart dépassé le texte est aligné normalement sur la gauche.
Par avance merci de votre aide
Je souhaite faire une présentation à 3 colonnes et je veux insérer dans la colonne de gauche et de droite un encart mais j'ai les problèmes suivant :
1.- Je n'arrive pas à centrer les titres dans les encarts;
2.- Les liens dans les encarts ne prennent pas les styles définis;
3.- Je n'arrive pas à placer l'encart de la colonne de droite (#encart2) au centre de la colonne de droite;
4.- Il y a une ligne blanche sur l'encart de la colonne de droite en l'image du haut et celle du bas;
5.- Le début du paragraphe du centre (#cadre4 p) est trop décalé sur la droite par rapport à l'encart de gauche.
Une fois l'encart dépassé le texte est aligné normalement sur la gauche.
Code:
body { font-family: Verdana, Arial, "Times New Roman", Serif;
background-color:white;
color: white;
font-size:xx-small;
text-align:center;
margin: 0;
padding: 0;}
#cadre {margin:10px auto;
padding:0;
width:760px;
background:black;
text-align:left;
}
#cadre1 { background-color: black;
}
#cadre1 h2 {text-align:center;
padding-top:30px;}
#menuhaut {background-color: blue;
margin:0;
padding:5px 20px 10px 0;
}
#menuhaut li {display: inline;
list-style-type: none;
}
#menuhaut li a {float:right;
padding-left:20px;
color:red;
}
#menuhaut li a:hover {color:black;
display:block;
background-color:white;
border: 1px solid black;
}
#encart{
float: left;
width: 250px;
margin: 20px 5px 5px 5px;
padding-top: 30px;
background: url(images/posthaut.gif) left top no-repeat;}
#encart2{
width: 250px;
padding-top: 30px;
background: url(images/posthaut.gif) left top no-repeat;}
#encart h3 {
font-size: small;
text-align: center;}
#bloccadre {
background: url(images/postbas.gif) left bottom no-repeat;
padding: 0 0 25px 10px;}
#bloccadre ul {margin:0;
padding:0;}
#bloccadre li {margin:0;
padding:0px;
text-align:left;
font-size:x-small;
}
#bloccadre li a {color:red;
text-decoration:none;}
#bloccadre li a:hover {font-weight:bold;
border : 1px solid black;
color:blue;
}
#cadre2 { float:left;
width:160px;
margin-left: auto;
margin-right: auto;
padding-top:20px;
}
#cadre3 { float:right;
margin:0;
padding-top:20px;
width:160px;
text-align: center;
}
#cadre3 h3{padding:0;
margin:0;
text-align:center;
background-color:#FFFFFF;}
#cadre4 { margin:0 160px 0 160px;
}
#cadre4 p {padding-top: 30px;
line-height: 30px;} }
#piedpage { margin:0;
background-color: blue;
height:30px;
line-height:30px;
color:white;
text-align:center;}
Code:
<body>
<DIV id="cadre">
<DIV id="cadre1">
<h2>essai</h2>
</div>
<div id="menuhaut">
<ul id="menuhaut">
<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>
</div>
<div id="cadre2">
<div id="encart">
<h3>Titre</h3>
<div id="bloccadre">
<ul>
<li>essai</li>
<li>essai</li>
<li>essai</li>
<li>essai</li>
<li>essai</li>
<li>essai</li>
</ul>
</div>
</div>
</div>
<div id="cadre3">
<div id="encart2">
<h3>Titre</h3>
<div id="bloccadre">
<ul>
<li>essai</li>
<li>essai</li>
<li>essai</li>
<li>essai</li>
<li>essai</li>
<li>essai</li>
</ul>
</div>
</div>
</div>
<div id="cadre4">
<p>Et duis, qui illum elit. Diam qui ipsum nulla molestie diam iusto nostrud sed ullamcorper esse erat. Hendrerit delenit nulla nibh eu, delenit eum consequat tincidunt tincidunt blandit suscipit, vulputate. Duis illum, enim, minim nisl consequat molestie at vel in eum dolore magna ullamcorper luptatum. Nulla ea, nulla et exerci, ea vel dolore accumsan. Eros quis ad volutpat feugiat, ut dolore nisl feugait erat odio qui feugait in, ex minim vero ullamcorper. Euismod at vero duis nulla ex ipsum wisi in, luptatum wisi adipiscing consequat exerci. Hendrerit ut suscipit accumsan vel.
Facilisis lobortis feugait, enim volutpat ut velit eros iriure dignissim, dolor facilisis. Eum exerci vulputate blandit eum dolore ipsum adipiscing ad. Sed nisl in. Dolore luptatum iusto et molestie at. Ut wisi illum vulputate, nisl consequat nulla ex iusto, nulla. Nulla minim vero duis et luptatum tincidunt illum elit at in esse suscipit vulputate feugait, ullamcorper luptatum ex. Dolor blandit dolore minim in iusto consequat, tincidunt feugait in eum lorem. Consectetuer vel, odio qui minim, wisi in eu feugiat erat molestie, dolor tation nulla, dolore nisl minim duis, nulla ut. Tation ut facilisis qui, diam esse sit eu vel nonummy nostrud dolor ea quis suscipit dolore qui iusto. Facilisis, accumsan, vel et ex molestie ea vel consequat duis qui consequat et exerci wisi nulla odio.
</p>
</div>
<div id="piedpage">
<p>essai</p>
</div>
</div>
</body>Par avance merci de votre aide
:
