> 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
219,99 €Asus Chromebook 11,6 pouces (Celeron N3350, 4 Go de RAM, SSD 32 Go , Chrome OS) à 219,99 €
Valable jusqu'au 07 Mai

Cdiscount fait une promotion sur l'ordinateur portable Asus Chromebook 11,6 pouces C223NA-GJ0010 qu'il propose à 219,99 € seulement alors qu'on le trouve ailleurs à partir de 309 €. Il possède un processeur Intel Celeron N3350, 4 Go de RAM, un écran HD (1366x768), 32 Go de stockage SSD eMMC (extensible par USB) et ne pèse qu'1 kg. Cet ordinateur portable fonctionne sous Chrome OS conçu spécifiquement pour l'usage du Web et de ses applications. Notez que vous pouvez facilement remplacer ChromeOS par Linux


> Voir l'offre
139,99 €Ecran 24,5 pouces Iiyama Black Hawk G2530HSU-B1 à 139,99 €
Valable jusqu'au 07 Mai

Boulanger fait une promotion sur l'écran 24,5 pouces Iiyama Black Hawk G2530HSU-B1 qui passe à 139,99 € alors qu'on le trouve ailleurs à partir de 169 €. Cet écran à bord fin est FullHD (1920x1080px), offre un temps de réponse de 1 ms, une vitesse de rafraichissement de 75 Hz. Il est compatible FreeSync.


> Voir l'offre
199,94 €Ecran portable 15,6 pouces Asus MB16ACE (FullHD, IPS, USB-C) à 199,94 €
Valable jusqu'au 08 Mai

Amazon fait une promotion sur l'écran portable 15,6 pouces Asus MB16ACE qui passe à 199,94 € au lieu de 249 €. Cet écran à emporter partout avec vous possède une dalle IPS antireflet FullHD avec un design ultrafin. L'alimentation et l'affichage se font par USB-C. Branchez simplement votre ordinateur portable ou votre smartphone pour profiter d'un second écran ou même votre console, un ordinateur fixe ou un raspberry Pi 4 pour profiter d'écran principal. Fourni avec un étui refermable pouvant être ajusté de manière à former un support et utiliser le moniteur en mode Portrait ou Paysage.


> 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