28220 sujets

CSS et mise en forme, CSS3

Tableau à 2 colonnes vers DIV

Bonjour
Je me lance dans le css et je tente de remplacer un tableau en css.
Voila le code du tableau que je voudrais transformer:
<table>
<tr>
  <td>une checkbox</td>
  <td> du texte </td>
</tr>
<tr>
  <td>une checkbox</td>
  <td> du texte </td>
</tr>
</table>

Mon code css devrait ressembler à ça:
<div class="tab">
  <div class=check>une checkbox</div>
  <div class= le texte>le texte </div>
</div>


Je n'arrive pas a bien positionner les deux bloc du milieu ....
Quelqu'un aurais une idée?
Je vous remerci d'avance !

Titou
Modifié par titou (28 Sep 2005 - 10:14)
Ok, j'ai trouvé ma solution (enfin je pense)
en mettant:
.check {
 clear: left;
 float: left;
 ....
}
.text {
 /* sans aucune donnée de positionement */
}

Si vous voyez autre chose, je suis toujours preneur !
Administrateur
Hello,

Comme tu t'en doutes, dans ce salon, la grande majorité des sujets sont des "problèmes de mise en forme CSS".
Pourrais-tu modifier ton titre et de le rendre un peu plus explicite comme cela est demandé dans les règles ?

PS : si le problème est [Résolu], n'oublie pas de le marquer comme tel (Cf Règles)

Merci d'avance Smiley smile
Modifié par Raphael (27 Sep 2005 - 17:11)
Voila, c fait pour la modification du titre Smiley cligne
partdon Smiley cligne

Sinon, le problème est toujours existant...
Je pensais avoir trouver la solution, mais si je fait un retour chariot dans mon 2° div, la checkbox qui se trouve dans le premier div disparait... Smiley bawling
bonjour, elle disparait quelque soit le navigateur.
en gros, dans mon code j'ai:

<div class="checked"><input type="checkbox"... /></div
<div class="text">mon texte<br />la suite<br />la suite</div>


si il n'y a pas de br pas de souci, mais dès qu'ils sont là, que ce soit sous firefox ou ie, ca disparait.
Modérateur
il te faut simplement mette ton deuxieme div en decaller par rapport au premier,avec une marge correspondant a la largeur de la colonne flottante:
exemple de l'idée:
<div class="tab">
<div class=check>une checkbox</div>
<div class="text">le texte </div>
</div>

et le css par exemple:

.check {
float: left;
width:50%;
}
.text {
margin-left:50%;
}

a plus
Modifié par gcyrillus (28 Sep 2005 - 12:42)
Sujet clos
Aller à