28220 sujets

CSS et mise en forme, CSS3

Tableau dans un div...

Bonjour,

j'ai un petit soucis avec la mise en page que j'ai fait, apparement elle marche sous ie6, Netscape, Firefox-Mozilla et Opera mais je ne suis pas convainque.....
Je vous explique, afin d'eviter le probleme des colonnes de taille egale dont une est de couleur avec les div (et ne pouvant pas utiliser la solution proposée sur alsacreations car la hauteur des deux colonnes varie..... )j'ai utilisé un tableau Smiley eek je l'ai donc inséré dans mon bloc div conteneur sans positionnement afin qu'il etire mon conteneur vers le bas.
Pour avoir une hauteur minimum j'utilise l'attribut height sur la <table> et sur <td> (si height n'est pas sur table la hauteur n'est pas respectée)
et ca marche bien car height sur les tableaux ne fonctionne pas comme sur les div et permet l'etirement.
Mais cette solution ne me satisfait pas du tout, car je suis actuellement en mode HTML 4.01 Transitionnal et je souhaiterais passer en mode strict (HTML voir XHTML) afin d'avoir un code "propre".

Si vous avez une solution ca m'aiderais beaucoup!!!!
Voici mon code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {	
background-color: #CCCCCC;
font-family: Arial, Helvetica, sans-serif; 
font-size:9pt;
padding-top:50px;}
.interface{
position:absolute;
left: 50%; 
width: 778px;
margin:0;
margin-left: -389px;
padding:0;
}
.gaucheBleu{
position:absolute;
width:173px;
height:186px;
left:0;
top:0;
margin:0;
padding:0;
background-color:#0066CC;}
.gaucheJaune{
position:absolute;
width:173px;
height:183px;
margin:0;
padding:0;
left:0;
top:186px;
background-color:#FFCC00;}
.tableCentre{
width:605px;
margin:0;
margin-left:173px;
border:0;
padding:0;
vertical-align:top;
background-color: #FFFFFF;
height:369px;/*permet une min-height et fonctionne sur tous les navigateurs (testés...)*/
}
.tdGauche{
width:430px;
height:369px;
border:0; 
padding:0;
margin:0;
vertical-align:top;
background-color:#FF0066;
}
.tdDroite{
width:173px;
height:369px;
border:0; 
padding:0;
margin:0;
vertical-align:top;
background-color:#CC33FF;
}
</style>
</head>
<body>
<div class="interface">
	<div class="gaucheBleu">absolute</div>
	<div class="gaucheJaune">absolute</div>
	<table class="tableCentre" cellpadding="0" cellspacing="0">
	<tr>
	  <td class="tdGauche">Tableau-td</td>
	  <td class="tdDroite">Tableau-td</td>
	</tr>
	</table>
</div>
</body>
</html>


PS: Désolée pour l'explication un peu longue..
Modifié par nata (04 Mar 2005 - 19:24)
Bonjour Nata,

Je ne comprends pas vraiment ta question....En changeant ton DOCTYPE et en fermant correctement ta balise <meta /> ta page est bel et bien valide XHTML 1.1

Est-ce le fait d'avoir utilisé des tableaux qui te préoccupe ? Smiley eek
oui un peu....... Smiley decu (j'aurais preferé m'en passer) et je pensais que les attributs height de <table> et <td> n'etaient plus valident en html strict ou xhtml

ca te semble correct alors?
et une autre petite question, pourquoi margin-top ne marche pas sous ie affecté a la balise <table>?

Merci d'avance!
En fait, margin-top fonctionne bien, mais sous IE tes deux "div" de gauche positionnés influent sur l'effet du margin-top.
La preuve, si tu les déplaces dans ton code juste après la déclaration du tableau (aucun souci puisque de tout façon tu les sors du flux en absolu), tu obtiens le même résultat mais ton margin-top sera cette fois pris en compte sous IE aussi. Ce qui m'ennuie c'est le pourquoi...

Quelqu'un a une idée ?
j'avais trouvé une solution qui était de mettre en quelque sorte un div "espace" avec un seul attribut : height (valeur = celle du margin-top que je voulais mettre) et pas positionné afin qu'il reste dans le flux.
mais bon c'est sur qu'il vaut mieu choisir ta solution!!!!
Modifié par nata (04 Mar 2005 - 23:50)
Sujet clos
Aller à