1178 sujets

Accessibilité du Web

Mise en forme et tableaux

Pages :
euh sinon en div il y ça
à voir sur ie, j'ai une réaction bizzare sur firefox pour la dernière ligne mais j'ai pas le temps de voir ça plus donc tiens :

<!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</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">

.cadre div.ligne div.dernier{
	border-bottom:1px solid #000 !important;
}

.cadre{
	position:relative;
	width:41em;
	border-right:1px solid #000;
}

.cadre div.ligne{
	border-right:1px solid #000;
	position:relative;
	
	
}
.cadre div.ligne div{
	border:1px solid #000;
	border-right:0;
	border-bottom:0;
	float:left;
	min-height:180px;
	position:relative;
}
	
* html body .cadre div.ligne div{height:180px;}
	
.cadre div.ligne{
	clear:both;
	border-right:1px solid #000;
}

.une{
	width:10em;		
	}

.deux{
	width:20.05em;	
}
	
.trois{
	width:30.2em;		
}

.quatre{
	width:40.3em;		
}
	
img{ height:180px;display:block;}

p{
	margin:0px;
	padding:0px;
}
</style>

</head>



<body>



	<h1>La version conteneur</h1>	
	<div id="bordure">
	  <div class="cadre">
			<div class="ligne">
				<div class="une">
					<p>une case avec du texte....une case avec du texte...</p><p>une case avec du texte...<br />une case avec du texte...</p>
				</div>
				<div class="une">
					<p>une case avec du texte....une case avec du texte...</p><p>une case avec du texte...<br />une case avec du texte...</p>
				</div>
				<div class="une">
					<img src="unecase.jpg" alt="img 1" height="180" width="50"/>
				</div>
				<div class="une">
					<p>une case avec du texte....une case avec du texte...</p><p>une case avec du texte...<br />une case avec du texte...</p>
				</div>
			</div>

			<div class="ligne">
				<div class="une">
					<p>une case avec du texte....une case avec du texte...</p><p>une case avec du texte...<br />une case avec du texte...</p>
				</div>
				<div class="deux">
					<img src="deuxcases.jpg" alt="img 2" height="180" width="50"/>
				</div>
				<div class="une">
					<p>une case avec du texte....une case avec du texte...</p><p>une case avec du texte...<br />une case avec du texte...</p>
				</div>	
			</div>
			<div class="ligne">
				<div class="une">
					<p>une case avec du texte....une case avec du texte...</p><p>une case avec du texte...<br />une case avec du texte...</p>
				</div>
				<div class="deux">
					<p>une case avec du texte....une case avec du texte...</p><p>une case avec du texte...<br />une case avec du texte...</p>
				</div>
				<div class="une">
					<p>une case avec du texte....une case avec du texte...</p><p>une case avec du texte...<br />une case avec du texte...</p>
				</div>
			</div>
			<div class="ligne">
				<div class="une">
					<p>une case avec du texte....une case avec du texte...</p><p>une case avec du texte...<br />une case avec du texte...</p>
				</div>
				<div class="trois">
					<img src="deuxcases.jpg" alt="img 3" height="180" width="50"/>
				</div>
			</div>
			<div class="ligne dernier">
				<div class="quatre">
					<img src="deuxcases.jpg" alt="img 4" height="180" width="50" />
				</div>
			</div>
  		</div>
  	</div>
  	
  	<br />
  	





</body>

</html>
Merci, mais, ca ne passe sous aucune navigateur...
même IE6 y'a deux pixel entre la fin des lignes horizontales, des "lignes" et la bordure droite du navigateur.

en tout cas, c'est gentil d'avoir essayé.

mais je pense que je vais continuer sur mon idée de tableau...
parce que d'une part ce sera plus propre en CSS --> uniquement besoins de spécifier la mise en forme de la table et du td.

d'autre part, ce sera aussi bcp plus propre du coté de la source html --> pas de div imbriqués les uns dans les autres etc etc Smiley smile
je crois que pour les deux pixels tu doit pouvoir facilement corriger ça, j'i laisser les petits détails, et il doit y avoir trop de prôblème pour faire marcher ça sur d'autre navigateur.

en bref c'est possible quand même.
mdr... justement, ce sont les ptits détails qui font que ca ne fonctionne pas...

d'autent plus... la largeur des cases en EM, ne peux pas convenir, sachant qu'elle doivent avoir une taille fixe en fonction des images qui sont placées dedant or si j'ai une ligne avec que du texte, et une taille de police par defaut dans le navigateur, ca va m'exploser mon design...

concrètement, je n'ai pas le temps d'optimiser ce code html...

et

surtout que ca n'as pas l'air faux d'utiliser une table... plutot qu'une "bidouille" html et css

je pense que je vais partir sur cette optique

qqun me confirme ?
Modérateur
Regarde, fais-le avec un tableau HTML et CSS, puis après, montre-nous concrètement à quoi cela ressemble, c'est-à-dire une fois en ligne avec de vraies données à l'intérieur.

Nous pourrons ainsi tenter de le reproduire sans tableau, si c'est possible, bien sûr.
hey hey...Tony Monast Smiley cligne

une fois que ce sera en ligne, il sera trop tard Smiley langue

mais globalement, ca tiendra la route avec une table...

mais je vous ferais signe pour avoir votre avis une fois que le site sera sorti... si l'on persiste dans la direction de la mise au norme (ce qui n'est pas encore clairement défini avec le client), je reviendrais pour prendre quelques avis...
Pages :
Sujet clos
Aller à