28173 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

J'aimerais que mon affichage du delimiteur, qui est un tiret, soit encadré d'une bordure à droite et à gauche sur la hauteur du div parent c'est à dire div id ="ligne".
Est ce possible?


mon css:
#affichage
{
    text-align:center;
    width:750px;
}
#block
{
    margin:5px;
    background-color:white;
    border:1px solid lightgrey;
    width:30%;
    float:left;
}
#ligne
{
    border-bottom:1px solid lightgrey;
    width:100%;
    clear:both;
    height:25px;
}
#sDate
{
    background-color:lightgrey;
    width:100%;
    clear:both;
}
#eDate
{
    background-color:lightgrey;
    width:100%;
    clear:both;
}
.affNom
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9px;
    font-weight: normal;
    width:47%;
    float:left;
}
.affDelimiteur
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9px;
    font-weight: normal;
    width:5%;
    float:left;
}
.affDelimiteur2
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9px;
    font-weight: normal;
    border-left:1px solid lightgrey;border-right:1px solid lightgrey;height:100%;
    width:5%;
    float:left;
}
.affDate
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10pt;
    font-weight: bold;
    width:50%!important;
    width:49%;
    float:left;
    background-color:lightgrey
}

ma page:
<div id="affichage">
    <div id='block'>
         <div id="sDate">
              <div class='affDate'>Journée n° 1</div>
              <div class='affDate'>23-02-2006</div>
         </div>
         <div id='ligne' style='border-top:1px solid lightgrey;'>
              <div class='affNom'>equipe 1</div>
              <div class='affDelimiteur'>-</div>
              <div class='affNom'>equipe 2</div>
         </div>
         <div id='ligne'>
              <div class='affNom'>equipe 3</div>
              <div class='affDelimiteur'>-</div>
              <div class='affNom'>equipe 4</div>
         </div>
         <div id="eDate">
              <div class='affDate'>&nbsp;</div>
              <div class='affDate'>Journée n° 4</div>
         </div>
    </div>
    <div id='block'>
         <div id="sDate">
              <div class='affDate'>Journée n° 2</div>
              <div class='affDate'>24-02-2006</div>
         </div>
         <div id='ligne' style='border-top:1px solid lightgrey'>
              <div class='affNom'>equipe 1</div>
              <div class='affDelimiteur'>-</div>
              <div class='affNom'>equipe 3</div>
         </div>
         <div id='ligne'>
              <div class='affNom'>equipe 2</div>
              <div class='affDelimiteur'>-</div>
              <div class='affNom'>equipe 4</div>
         </div>
         <div id="eDate">
              <div class='affDate'>&nbsp;</div>
              <div class='affDate'>Journée n° 5</div>
         </div>
    </div>
</div>



Merci d'avance de votre aide, seb.