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.
la communauté d'entraide francophone dédiée au PHP
Tableau en CSS sous IE
Bonjour Cyrano,
Voici le code (expérimental) que j'utilise
Ce que je voudrais obtenir visible avec FF, Opera, ... sauf IE ici
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>Ce que je voudrais obtenir visible avec FF, Opera, ... sauf IE ici
Deux choses sont infinies, l'Univers et la sottise humaine!!
Mais je ne suis pas sur de ce que j'affirme au sujet de l'Univers.
A. Einstein
Mais je ne suis pas sur de ce que j'affirme au sujet de l'Univers.
A. Einstein
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 :
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 :
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.
Code : Tout sélectionner
<spam class="nom">Le nom</spam>Code : Tout sélectionner
<span class="nom">Le nom</span>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>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>Codez en pensant que celui qui maintiendra votre code est un psychopathe qui connait votre adresse 
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.
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.
Deux choses sont infinies, l'Univers et la sottise humaine!!
Mais je ne suis pas sur de ce que j'affirme au sujet de l'Univers.
A. Einstein
Mais je ne suis pas sur de ce que j'affirme au sujet de l'Univers.
A. Einstein
Bon, je suis reparti sans feuille de style et j'ai testé quelques trucs, voici une proposition :
À tester 
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>Codez en pensant que celui qui maintiendra votre code est un psychopathe qui connait votre adresse
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.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é ?
Mais finalement j'ai fini par ytiliser '<table>...</table>'
Deux choses sont infinies, l'Univers et la sottise humaine!!
Mais je ne suis pas sur de ce que j'affirme au sujet de l'Univers.
A. Einstein
Mais je ne suis pas sur de ce que j'affirme au sujet de l'Univers.
A. Einstein
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.
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.
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)
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)
Deux choses sont infinies, l'Univers et la sottise humaine!!
Mais je ne suis pas sur de ce que j'affirme au sujet de l'Univers.
A. Einstein
Mais je ne suis pas sur de ce que j'affirme au sujet de l'Univers.
A. Einstein
Mon héros !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é ?
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
Ce n'est pas en améliorant la bougie que l'on a inventé l'ampoule...