Forum Clubic

Colle css

Logiciel Programmation
#1

bonjour,

je voudrais avoir une liste de 3 colonnes de type

    accolées ET CENTREES SUR MA PAGE, contenant chacune 3 lignes de type 
  • 
<style type="text/css">
div {
width: auto; // c'est la que je ne sais pas quoi mettre pour qu'il adapte sa largeur au 3 <ul> mises cote a cote ???
}
ul {
float: left;
}
</style>
<script>

// je pose une <div> pour centrer dans la page
<div align="center">
<ul>
<li>col1 ligne1</li>
<li>col1 ligne2</li>
<li>col1 ligne3</li>
</ul>
<ul>
<li>col2 ligne1</li>
<li>col2 ligne2</li>
<li>col2 ligne3</li>
</ul>
<ul>
<li>col3 ligne1</li>
<li>col3 ligne2</li>
<li>col3 ligne3</li>
</ul>
</div>

    pour moi, je crois que c’est impossible pour la

    ( ou autre et…) d’analyser la largeur des 3
      …
      précision : il me faut imperativement des
        et
      • dans mon script … ( sinon en tableau avec
    c’est simple je sais … )
    avez vous une idée ?

    merci

#2

bonjour,

display: table , text-align:center ,+ activation du layout dans IE on obtient quelquechose ressemblant a ce que tu recherche (IE6 et 7 inclus)

code a copier dans un fichier avec l’extension .html pour tester sur votre pc.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>test centrage ul en float</title>
<style type='text/css'>
body {text-align:center;}
#center {
display:table;
margin: auto;
border_collapse:collapse;
}
#center ul {float:left;padding:0;margin:0;list-style-position:inside;
border:1px solid;}
</style>
<!--[if lte IE 7]>
<style type ="text/css">
#center {
display:inline;
zoom:1;
}
</style>
<![endif]--> 
</head>
<body>
<div id="center">
<ul>
<li>col1 ligne1</li>
<li>col1 ligne2</li>
<li>col1 ligne3</li>
</ul>
<ul>
<li>col2 ligne1</li>
<li>col2 ligne2</li>
<li>col2 ligne3</li>
</ul>
<ul>
<li>col3 ligne1</li>
<li>col3 ligne2</li>
<li>col3 ligne3</li>
</ul>
</div>
</body>
</html>

La solution ideale serait : display:inline-block; sur #center , mais n’est pas encore implémenté dans firefox et ni sur IE qui requiert encore le couple display:inline; et zoom:1; pour le simuler en mode standard.

Ce type de ‘colle’ CSS’ et les bidouilles qui s’en suivent , devrait commencer à disparaitre si IE 8 et FF 3.0 collent enfin de prés aux standards . , il s suffira d’attendre quelques années pour que nos navigateurs dans leur versions actuels ne soit plus utilisés

GC
Edité le 21/05/2008 à 20:45

#3

compatible tout navigateur (IE6, IE7, FF1.5 2.0 3.0, Safari, Opera) et valide XHTML 1.0


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <meta http-equiv="content-language" content="fr" />
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
</head>
<body>
<div id="main" align="center">
  <table cellspacing="0" cellpadding="0" border="0" align="center">
  <tr>
    <td align="left" valign="top">
    <ul>
     <li>col1 ligne1</li>
     <li>col1 ligne2</li>
     <li>col1 ligne3</li>
    </ul>
    </td>
    <td align="left" valign="top">
    <ul>
     <li>col2 ligne1</li>
     <li>col2 ligne2</li>
     <li>col2 ligne3</li>
    </ul>
    </td>
    <td align="left" valign="top">
    <ul>
     <li>col3 ligne1</li>
     <li>col3 ligne2</li>
     <li>col3 ligne3</li>
    </ul>
    </td>
  </tr>
  </table>
</div>
</body>
</html>
#4

Chut , il y’en a qui sont allergique aux tableaux :wink: , ça risque de réveiller les trolls

… le titre du topic parlait de style , pas de structure :slight_smile: , … on peut même omettre le doctype si on passe en tableau , pas troll, pas troll, svp !

#5

Tout à fait. Les tableaux sont l’archaïsme même qui fait qu’on en reste à des vieux navigateurs et des vieilles pratiques d’outretombe.