28172 sujets

CSS et mise en forme, CSS3

Probleme CSS et div

Bonjour

Je voudrais créer un tableau en div, avec des div imbriqués.
en utilisant du text tout va bien sauf que je 'arrive pas à positionner mes boutons en bas et au centre du dernier div
Et lorsque je veux utiliser une image dans le premier , div , tout ce qui est dans l'autre ce déplace vers le bas.

Je suis novice et je ne comprends pas

Merci par avance Smiley decu

voici le source :
<style>
.L_1
{
background-color: white;
border-radius: 8px;
width: 300px;
height: 300px;
padding: 5px;
padding-top: 0px;
display: table-cell;
border-width:1px;
border-style:solid;
border-color:blue;
}

.L_2
{
background-color: white;
border-radius: 8px;
width: 400px;
height: 300px;
padding: 5px;
padding-top: 0px;
border-width:1px;
border-style:solid;
border-color:blue;
vertical-align: text-top;
display: table-cell;
}
#cont
{
border-width:1px;
border-style:solid;
border-color:yellow;
width: 800px;
vertical-align: text-top;
}

.LC_1
{
border-width:1px;
border-style:solid;
border-color:blue;
width: 400px;
height: 50px;
vertical-align: text-top;

}

.LC_2
{
border-width:1px;
border-style:solid;
border-color:blue;
width: 400px;
height: 30px;
vertical-align: text-top;
}
.LC_3
{
border-width:1px;
border-style:solid;
border-color:blue;
width: 400px;
height: 50px;
vertical-align:-50px ;
text-align: center;
}
.C_1
{
border-width:1px;
border-style:solid;
border-color:green;
width: 350px;
height: 20px;
vertical-align: text-top;
display: table-cell;
}
.C_2
{
width: 50px;
height: 20px;
vertical-align: text-top;
display: table-cell;
}
</style>

</head>

<body>

<div id="cont">
<div class="L_1"><IMG SRC="images/produits/essai.jpg"></div>
<div class="L_2">
<div class="LC_1">
<div> Ligne 1 </div>
</div>

<div class="LC_2">
<div class = "C_1">ligne 2</div>
<div class = "C_2">col 2</div>
</div>

<div class="LC_2">
<div class = "C_1">ligne 3</div>
<div class = "C_2">col 2</div>
</div>
<div class="LC_2">
<div class = "C_1">ligne 4</div>
<div class = "C_2">col 2</div>
</div>

<div class="LC_3">
<div>
<input TYPE="Submit" VALUE="Valider" id="Submit1" name="valid">
<input TYPE="Submit" VALUE="Réinitialier" id="Submit2" name="reini">
</div>
</div>
</div>

</body>
</html>
Bonjour,

Pourquoi n'utilises-tu pas les balises dédiées (table, tr, td, etc) à la création de tableau ?

Peux-tu nous mettre un exemple en ligne de ton problème ? Sur codepen ou autre.
Bonjour,

Je rejoins Raphi pour le tableau en natif.

Mais sinon, je vois que ton code comporte plusieurs erreurs :
- je trouve ta strcuture complexe, il y a des table-cell dans des table-cell et des table-cell dans des divs par exemple.
- la div parente n'est pas en display: table
- les "=" des attributs ne doivent pas être espacés des noms et valeurs :
. class = "toto" < ko
. class="toto" < ok


Voici article sur les div en mode table : http://www.alsacreations.com/tuto/lire/1523-le-modele-tabulaire-en-css.html

Bonne journée
Sujet clos
Aller à