> Tous les forums > Forum des Webmasters
 colonnes
Ajouter un message à la discussion
Page : [1] 
Page 1 sur 1
padymen
  Posté le 03/01/2016 @ 11:24 
Aller en bas de la page 
Astucien

Bonjour à tous et meilleurs vœux,

Voila, je voudrai avec le code html et css ci dessous savoir comment faire pour que sous la col 10 je puisse avoir deux colonnes

le code html :

<div id="conteneur">

<section class="tableau">

<div class="legende">Tableau CSS</div>

<header class="tete">

<div class="cellule">Col 1</div>

<div class="cellule">Col 2</div>

<div class="cellule">Col 3</div>

<div class="cellule">Col 4</div>

<div class="cellule">Col 5</div>

<div class="cellule">Col 6</div>

<div class="cellule">Col 7</div>

<div class="cellule">Col 8</div>

<div class="cellule">Col 9</div>

<div class="cellule">Col 10</div>

<div class="cellule">Col 11</div>

<div class="cellule">Col 12</div>

<div class="cellule">Col 13</div>

</header>

<footer class="pied">

<div class="pied">&nbsp; </div>

</footer>

<div class="corp">

<div class="ligne" id="une">

<div class="cellule">1</div>

<div class="cellule">2</div>

<div class="cellule">3</div>

<div class="cellule">4</div>

<div class="cellule">5</div>

<div class="cellule">6</div>

<div class="cellule">7</div>

<div class="cellule">8</div>

<div class="cellule">9</div>

<div class="cellule">10</div>

<div class="cellule">11</div>

<div class="cellule">12</div>

<div class="cellule">13</div>

</div>

<div class="ligne" id="deux">

<div class="cellule">1</div>

<div class="cellule">2</div>

<div class="cellule">3</div>

<div class="cellule">4</div>

<div class="cellule">5</div>

<div class="cellule">6</div>

<div class="cellule">7</div>

<div class="cellule">8</div>

<div class="cellule">9</div>

<div class="cellule">10</div>

<div class="cellule">11</div>

<div class="cellule">12</div>

<div class="cellule">13</div>

</div>

<div class="ligne" id="trois">

<div class="cellule">1</div>

<div class="cellule">2</div>

<div class="cellule">3</div>

<div class="cellule">4</div>

<div class="cellule">5</div>

<div class="cellule">6</div>

<div class="cellule">7</div>

<div class="cellule">8</div>

<div class="cellule">9</div>

<div class="cellule">10</div>

<div class="cellule">11</div>

<div class="cellule">12</div>

<div class="cellule">13</div>

</div>

</div>

</section>

</div>

et le code css :

html {

height: 100%;

}

body {height: 100%;

background: #000000;

color: #555;

font-family: Arial, Helvetica, sans-serif;

font-size: 14px;

line-height: 1.5em;

}

#conteneur{

margin:auto;

border:1px solid #555;

width:90%;

text-align:center;

}

.tableau { display: table;border:2px solid #555;margin:auto; }

.ligne { display: table-row; }

.tete { display: table-header-group; }

.corp { display: table-row-group; }

.pied { display: table-footer-group;line-height:50px; }

.col { display: table-column; }

.colgroupe { display: table-column-group; }

.cellule { display: table-cell; padding:5px 15px 5px 15px;border:1px solid #555; }

.legende { display: table-caption;padding:15px 15px 15px 15px; }

merci

Publicité
elle
 Posté le 03/01/2016 à 18:37 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

Euh, pourquoi tu ne fais pas un vrai tableau (avec table, th, tr, td, etc.) ?

padymen
 Posté le 04/01/2016 à 06:53 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Astucien

Bonjour elle,

le but étant justement de faire un tableau mais rien que avec des div, je lis par ci et là que les tableaux (table tr trd) sont proscrit des nouveaux codes css donc je regarde pour essayer de faire la même chose sans, mais force est de reconnaître que ce n'est pas évident !

elle
 Posté le 04/01/2016 à 07:01 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

Les tableaux ne doivent pas être utilisés pour la mise en page du site. Mais si ton contenu requiert un tableau, ben tu utilises un tableau, comme tu utiliserais <p> pour un paragraphe, <ul> pour une liste...

Page : [1] 
Page 1 sur 1

Vous devez être connecté pour participer à la discussion.
Cliquez ici pour vous identifier.

Vous n'avez pas de compte ? Créez-en un gratuitement !
Recevoir PC Astuces par e-mail


La Lettre quotidienne +226 000 inscrits
Avec l'actu, des logiciels, des applis, des astuces, des bons plans, ...

Les bonnes affaires
Une fois par semaine, un récap des meilleurs offres.

Les fonds d'écran
De jolies photos pour personnaliser votre bureau. Une fois par semaine.

Les nouveaux Bons Plans
Des notifications pour ne pas rater les bons plans publiés sur le site.

Les bons plans du moment PC Astuces

Tous les Bons Plans
729,99 €Ultrabook Acer Swift 3 14 pouces (Ryzen 5 4500U, 16Go de RAM, SSD 512 Go, Vega 6) à 729,99 €
Valable jusqu'au 08 Mai

Cdiscount fait une promotion sur l'ordinateur portable ultrabook Acer Swift 3 SF314-42 qui passe à 729,99 € alors qu'on le trouve ailleurs à partir de 899 €. Cet ordinateur portable est équipé d'un écran 14 pouces FullHD (1920x1080) IPS mat sans reflet, d'un processeur AMD Ryzen 5 4500U (6 coeurs), de 16 Go de RAM, d'un SSD de 512 Go et d'une carte graphique Vega 6. Une webcam, le WiFi 6 et le Bluetooth 5 sont de la partie. Des ports USB 2.0, USB 3.1 et HDMI sont présents. Le tout tourne sous Windows 10. Il pèse 1,2 kg et offre un autonomie jusqu'à 11 h. 


> Voir l'offre
9,99 €Bloc multiprise parasurtenseur BRENNENSTUHL 8 prises à 9,99 €
Valable jusqu'au 07 Mai

Cdiscount fait une promotion sur le bloc multiprise parasurtenseur BRENNENSTUHL avec 8 prises à orientation inversée qui passe à 9,99 € au lieu de 20 €. Le câble fait 1,4 m.


> Voir l'offre
169,99 €Casque Audio Sans-fil Bose QuietComfort 35 V2 à 169,99 €
Valable jusqu'au 08 Mai

Cdiscount fait une promotion sur l'excellent casque Audio Sans-fil Bose QuietComfort 35 V2 proposé à 169,99 € au lieu de 200 €. Le QuietComfort 35 de Bose est un casque arceau circum aural sans fil au design léger et confortable offrant un son riche, clair et puissant avec la technologie Bluetooth/NFC. Grâce à sa technologie de réduction de bruit active, profitez pleinement de votre musique avec un silence inégalé pour entendre les moindres vibrations et pour des appels clairs et nets. Ce casque est livré avec un étui de transport, un adaptateur pour avion, un câble audio de secours et d'un câble de charge USB. Cette V2 intègre un assistant Alexa avec un bouton dédié.


> Voir l'offre

Sujets relatifs
Trier plusieurs colonnes mysql
Aide sur du CSS: séparer un texte en 2 colonnes?
Formatage de l'affichage de texte en colonnes.
code pour créer des colonnes ? [Résolu]
affichage des enreg d'une table sur 2 colonnes
colonnes dans frontpage 2003
Largeur des colonnes sous FP ?
Site avec des colonnes d'options mais pas frames
 > Tous les forums > Forum Forum des Webmasters