28172 sujets

CSS et mise en forme, CSS3

Quelques problèmes de positionnements en float.

Bonjour

J'ai un petit problème de positionnement, et après avoir presque fini mon travail de création de boite à bascule générique, il ne me reste plus que ca à résoudre.

Quand j'insère le code ci dessous, j'obtiens mes blocs les un à coté des autres, mais le bloc conteneur () est visuellement placé au dessus sous forme de ligne.

Je voudrais qu'il serve de cadre à tout mon système pour bien le délimité du reste de la page.

De plus, j'essaye de placer mes titres (sélection, diffusion, émargement) chacun au dessus de son div, mais sans sucés.

Comment feriez vous pour mettre ça en place ?

Merci
Pierre


<div id="sites" class="bascule">
  <select class="hidden" name="sites[]" multiple="multiple" id="sites">
  </select>
  <div id="sitesLi" class="droppables">
    <div class="titreDiv">
      Sélection
    </div>
    <ul class="drop">
      <li style="top: 1735px; left: 45px;" class="dragLi" idbase="1">Site de Rennes</li>
      <li style="top: 1757px; left: 45px;" class="dragLi" idbase="2">test</li>
    </ul>
  </div>
  <div class="listeBouttons">
    <input class="button" onclick="moveAllItemsBascule('diff_sitesLi','sitesLi');return false;" value="&gt;&gt;&gt;" type="button"><br>
    <input class="button" onclick="moveItemsBascule('diff_sitesLi','sitesLi');return false;" value="&gt;" type="button"><br>
    <input class="button" onclick="moveItemsBascule('sitesLi','diff_sitesLi');return false;" value="&lt;" type="button"><br>
    <input class="button" onclick="moveAllItemsBascule('sitesLi','diff_sitesLi');return false;" value="&lt;&lt;&lt;" type="button">
  </div>
  <select class="hidden" name="diff_sites[]" multiple="multiple" id="diff_sites">
  </select>
  <div id="diff_sitesLi" class="droppables">
    <div class="titreDiv">
      Diffusion
    </div>
    <ul class="drop">
    </ul>
  </div>
  <div class="listeBouttons">
    <input class="button" onclick="moveAllItemsBascule('emarg_sitesLi','diff_sitesLi');return false;" value="&gt;&gt;&gt;" type="button"><br>
    <input class="button" onclick="moveItemsBascule('emarg_sitesLi','diff_sitesLi');return false;" value="&gt;" type="button"><br>
    <input class="button" onclick="moveItemsBascule('diff_sitesLi','emarg_sitesLi');return false;" value="&lt;" type="button"><br>
    <input class="button" onclick="moveAllItemsBascule('diff_sitesLi','emarg_sitesLi');return false;" value="&lt;&lt;&lt;" type="button">
  </div>

  <select class="hidden" name="emarg_sites[]" multiple="multiple" id="emarg_sites">
  </select>
  <div id="emarg_sitesLi" class="droppables">
    <div class="titreDiv">
      Emargement
    </div>
    <ul class="drop">
    </ul>
  </div>

</div>
<div style="clear: both;"></div>


.droppables{
  margin: 10px;
  width:250px;
  height:100px;
  overflow-y:auto;
  overflow-x:auto;
  border:#00CCFF 4px groove;
  float: left;
}
.dragLi{
  padding:0px;
  margin:0px;
  height: 14px;
  cursor:move;
  list-style-type:none;
}
.dragLi:hover{
  border:1px solid red;
  background: #00CCFF;
  color:blue;
}
.selected{
  background:blue;
}
.hidden{
  display:none;
}
.drop{
  padding-left:0px;
  margin:0px;
}
.bascule{
  border:1px solid black;
}
.titreDiv{
  margin:auto;
  text:bold;
}
.listeBouttons{
  float:left;
  text-align:center;
  padding:10px 0 10px 0;
}
bon bah c'est corrigé avec un "spacer!!!"

Par contre, concernant la problématique d'associé un titre (centré de préférence) au dessus d'un div, y a t'il une propriété toute faite, ou une possibilité plus propre que de mettre encore et toujours des div en plus ?
j'ai essayé de placer mon div de titre dans mon div à titrer, puis de lui donner une marge négative de façon a le placer un peu au dessus.

Il est bien centré sur mon div, se place bien, mais devient invisible. Il ne sors pas du div parent. Vous connaissez un moyen de surpassé ce problème ?

Merci

Pierre


#fiche_de_vie div.titreDiv, div.titreDiv{
  background:red none repeat scroll 0% 0%;
  margin-left:auto;
  margin-right:auto;
  margin-top:-20px;
  position:relative;
  text-align:center;
  width:250px;
  z-index:1000;
}
j'ai trouvé en fait c'était assez bête...

fallait le mettre en position relative et ajouter un peu de place au dessus...
Sujet clos
Aller à