> 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
109,99 €Ecrans 24 pouces Philips 242V8A (Full HD, IPS, 75 Hz) à 109,99 €
Valable jusqu'au 24 Avril

RueDuCommerce fait une promotion sur l'écran 24 pouces Philips 242V8A qui passe à 109,99 € alors qu'on le trouve les écrans habituellement autour de 129 €. Cet écran possède une dalle IPS Full HD (1920x1080), offre un temps de réponse de 4 ms, une vitesse de rafraîchissement de 75 Hz (compatible FreeSync) et dispose d'une entrée HDMI et de haut-parleurs intégrés.


> Voir l'offre
29,99 €Casque sans-fil bluetooth Philips TAH4205BK à 29,99 €
Valable jusqu'au 25 Avril

Cdiscount fait une promotion sur le casque sans-fil bluetooth Philips TAH4205BK qui passe à 29,99 € au lieu d'une quarantaine d'euros habituellement. Ce casque offre des basses puissantes et percutantes et une bonne isolation phonique. Des commandes sur la coque vous permettent de contrôler vos appels, la musique et le volume. Le casque offre une autonomie de 29 h et peut être plié pour prendre moins de place dans le sac. Recharge via USB-C.


> Voir l'offre
128,99 €SSD externe NVMe Crucial X8 1 To à 128,99 €
Valable jusqu'au 24 Avril

Amazon fait une promotion sur le SSD externe NVMe Crucial X8 1 To qui passe à 128,99 € alors qu'on le trouve ailleurs à partir de 150 €. Il offre des vitesses de lecture jusqu'à 1050 Mo/s et résiste aux chutes jusqu'à 2 mètres, aux chocs et aux températures extrêmes. Il est fourni avec des connecteurs USB C-3.2 et USB-A (USB classique).


> 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