Page 1 sur 1
Tableau en CSS sous IE
Posté : 14 nov. 2006, 09:05
par Ajoloca
Bonjour à tous,
Je cherche à faire un tableau sans utiliser la balise (X)HTML <table> en passant par CSS. J'arrive à le faire sous FF, Opera, Netscape mais pas sous IE6.
J'utilise display: table-row et display: table-cell qui fonctionnent bien avec les autres navigateurs mais pas avec IE, surtout quand j'utilise vertical-align: bottom dans une celulle.
Dans mon cas 3 celulles dans la même ligne et celle de l'alignement vertical est celle du centre.
Je suis allé voir le site alsacreations et la seule chose que j'ai compris (je m'en doutais à l'avance) que IE ne respectait pas les recommendations du W3C concernant ce sujet, mais rien d'autre qui puisse m'aider.
Une idée ?
D'avance merci.
Posté : 14 nov. 2006, 09:15
par Cyrano
Un exemple du code HTML et du style employé avec une petite capture d'écran de ce que tu veux obtenir seraient bienvenus
Posté : 14 nov. 2006, 09:34
par Ajoloca
Bonjour Cyrano,
Voici le code (expérimental) que j'utilise
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CV le nom</title>
<meta name="generator" content="Bluefish 1.0.7">
<meta name="author" content="José LOPEZ">
<meta name="date" content="2006-11-14T08:23:14+0100">
<meta name="copyright" content="">
<meta name="keywords" content="">
<meta name="description" content="">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="expires" content="0">
<style type="text/css">
body {
margin: auto;
border: none;
background-color:black;
padding: 0cm;
text-align: center; /* Pour correction bugg IE */
}
#corps {
/*background-color: #5BA9A7;*/
background-color: white;
color: black;
display: table;
margin: auto;
border: solid 1px;
width: 70%;
text-align: left; /* Pour correction bugg IE */
}
#entete {
display: table-row;
}
#coords {
display: table-cell;
padding-left: 10px;
border: solid 1px;
vertical-align: top;
}
.nom{
font-size: 1.5em;
color: black;
font-weight: bold;
}
#titre{
display: table-cell;
vertical-align: bottom;
border: solid 1px;
text-align: center;
}
/* Ajouté pour essais */
#img_titre{
display: block;
}
/* pas encore en place
#photo{
display: table-cell;
border: solid 1px;
text-align: center;
}
</style>
</head>
<body>
<div id="corps">
<div id="entete">
<div id="coords">
<p>
<spam class="nom">Le nom</spam><br />
Le num et la rue<br />
Le CP et la ville
</p>
<p>
Tél. : 00 00 00 00 00<br />
GSM : 00 00 00 00 00<br />
e-mail : <a href="mailto:[email protected]">[email protected]</a>
</p>
</div>
<div id="titre"><img id="img_titre" src="titre1.gif" alt="Le contenu de l'image" width="470" height="102"/></div>
<div id="photo"></div>
</div>
</div>
</body>
</html>
Les border: solid 1px; sont là juste pour voir les tailles.
Ce que je voudrais obtenir visible avec FF, Opera, ... sauf IE
ici
Posté : 14 nov. 2006, 10:48
par Cyrano
Un détail : dans ta source, tu as utilisé une balise inexistante :
au lieu de
Pour ta mise en page, je te propose quelques modifications :
D'abord du coté du HTML :
Code : Tout sélectionner
<div id="corps">
<div id="entete">
<div id="coords">
<p>
<span class="nom">Le nom</span><br>
Le num et la rue<br>
Le CP et la ville
</p>
<p>
Tél. : 00 00 00 00 00<br>
GSM : 00 00 00 00 00<br>
e-mail : <a href="mailto:[email protected]">[email protected]</a>
</p>
</div>
<img id="img_titre" src="http://87.88.19.190/cv/titre1.gif" alt="Le contenu de l'image" title="message de roll-over sur l'image">
<div id="photo"></div>
</div>
</div>
Tu noteras que le <div> autour de l'image a sauté, on appliquera le style directement sur l'image. Ensuite, au lieu de simuler un tableau, on va utiliser les positions flotantes ce qui va donner le style suivant :
Code : Tout sélectionner
<style type="text/css">
body {
margin: auto;
border: none;
background-color:black;
padding: 0cm;
text-align: center; /* Pour correction bugg IE */
}
#corps {
/*background-color: #5BA9A7;*/
background-color: white;
color: black;
border: 1px solid #0f0;
text-align: left; /* Pour correction bugg IE */
width: 770px;
margin: auto;
}
#entete {
vertical-align: middle;
height: 150px;
}
#coords {
float: left;
width: 210px;
padding-left: 10px;
border: 1px solid #0f0;
vertical-align: bottom;
}
.nom{
font-size: 1.5em;
color: black;
font-weight: bold;
}
#img_titre {
border: 1px solid #0f0;
width: 470px;
height: 102px;
margin: auto;
}
#photo {
clear: both;
}
</style>
Et j'ai ajouté un détail pour le dernier div "photo" : à cause de la position flottante, je mets un
clear: both pour forcer le div à se positionner en dessous et non à droite du premier.
Posté : 14 nov. 2006, 14:48
par Ajoloca
Merci Cyrano.
Je teste ça de suite.
Pour la balise, c'est un lapsus.
Posté : 14 nov. 2006, 16:48
par Ajoloca
Re,
J'ai testé ta proposition, mais deux soucis
Avec les valeurs en pixels si on augmente la taille des caractères dans le navigateur (Control + sous FF) après chargement de la page, on sort des zones.
L'image s'aligne en haut (top) et pas en bas.
Je continue à chercher.
Posté : 14 nov. 2006, 20:37
par Cyrano
Bon, je suis reparti sans feuille de style et j'ai testé quelques trucs, voici une proposition :
Code : Tout sélectionner
<style type="text/css">
body {
color: #fff;
background-color: #000;
}
#corps {
color: #000;
background-color: #fff;
position: relative;
width: 70%;
margin: auto;
}
#entete {
border: 1px solid #0f0;
vertical-align: 0;
text-align: center;
}
#coords {
float: left;
text-align: left;
}
#img_titre {
position: absolute;
right: 3em;
bottom: 0;
border: 1px solid #0f0;
width: 470px;
height: 102px;
}
.nom{
font-size: 1.5em;
color: black;
font-weight: bold;
}
#photo {
clear: both;
}
</style>
À tester
Posté : 15 nov. 2006, 05:09
par Ajoloca
Re,
Je vais tester ça dans la journée et je tiendrais au courant.
Merci.
Posté : 15 nov. 2006, 17:15
par Sam Lam
Simple curiosité personnelle : pourquoi vouloir créer un tableau sans utiliser la balise <table>...</table> alors que celle-ci est précisément conçue pour ça ? N'est-il pas plus correct d'utiliser un élément sémantiquement adapté ?
Posté : 15 nov. 2006, 17:34
par Ajoloca
Simple curiosité personnelle : pourquoi vouloir créer un tableau sans utiliser la balise <table>...</table> alors que celle-ci est précisément conçue pour ça ? N'est-il pas plus correct d'utiliser un élément sémantiquement adapté ?
Je pense que c'est l'une des choses les + dificiles à réaliser en CSS et IE et comme tout bon sportif, il tente de faire des choses compliquées qu'il n'oserait jamais de faire en compétition, ça l'aide à métriser certaines choses.
Mais finalement j'ai fini par ytiliser '<table>...</table>'
Posté : 15 nov. 2006, 18:12
par Sam Lam
L'aspect défi de la chose ne m'avait pas échapé. Je voulais cependant m'assurer qu'il n'y ait pas une raison plus "obscure", comme une dépréciation de la balise <table>, ou une utilité quelconque pour faire autre chose par la suite.
Dommage que tu n'aies pas réussi. Cela dit, s'attaquer à un morceau pareil, c'était un peu s'attaquer à l'Everest en escarpins.
Merci de m'avoir répondu et bon courage pour la suite.
Posté : 15 nov. 2006, 18:22
par Ajoloca
Re,
Il y avait effectivement une autre idée, utiliser des z-index au pixel près sans dépendre de la taille des caractères dans le navigaeur. Les déficients visuels en régle générale chargent une page et adaptent ensuite la taille des caractères (Sous FF Control + et sous IE Control + Roulette)
Posté : 15 nov. 2006, 18:27
par Ryle
Simple curiosité personnelle : pourquoi vouloir créer un tableau sans utiliser la balise <table>...</table> alors que celle-ci est précisément conçue pour ça ? N'est-il pas plus correct d'utiliser un élément sémantiquement adapté ?
Mon héros !
Bon ceci dit, l'avantage que tu pourrais avoir à faire un tableau en css, c'est qu'ensuite, tu n'as à priori plus à toucher au "données" pour modifier ta mise en page et réorganiser ton tableau, ce qui est tout à fait dans l'optique du css... Ca peut nottament être très pratique si tu as tes données en colonne et non pas en ligne, ca évite de devoir les parcourir 3 fois pour constituer ton tableau html.
En pratique, et apparment Ajoloca confirme, c'est tellement plus galère de le gérer en css, que le <table> a encore de longues et belles années devant lui
Posté : 15 nov. 2006, 18:30
par Ajoloca
Re,
Ça se passe sans souci avec FF, Opera, Netscape mais IE...
Et comme le % d'utilisation de ce dernier est ce qu'il est...