28173 sujets

CSS et mise en forme, CSS3

[Résolu]Td de tableau qui ne s'agrandit pas avec Mozilla

Bonjour,

j'ai un tableau avec 3 colonnes dont la 1ère et la dernière contiennent des images de coin arrondi (je précise que j'ai déjà lu le tutoriel sur les coins arrondis avec div et CSS mais cela ne me convenait pas graphiquement). Mon problème est que sous IE tout se positionne correctement mais sous Mozilla, la colonne du milieu (entre les coins) ne s'adapte pas à la largeur du tableau. C'est pas joli !! Voilà mon code :

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
#milieu{
	float:left;
	width:500px;
}
#droite{
 	margin-left:520px;
}
.central_blanc{
	text-align:center;
	background-image:url(Images/pourpre2_.jpg);
	display:inline;
	font-size:14px;
	font-weight:bold;
	color:#FFFFFF;
	width:auto;
}
.central_noir {
	text-align:center;
	width:auto;
	font-size:14px;
	font-weight:bold;
	color:#000000;
}
body {
	font:Arial, "Times New Roman", sans-serif;
}
</style>
</head>

<body>
	<div id="milieu">
		<table cellpadding="0" cellspacing="0" border="0" width="100%">
		  <tr>
		  	<td width="20px"><img src="Images/hautpourpregauche.jpg" alt="coin gauche" /></td>
			<td class="central_blanc">A La Une</td>
			<td width="20px"><img src="Images/hautpourpredroit.jpg" alt="coin gauche" /></td>
		  </tr>
		</table>
	</div>
	<div id="droite">
		<p class="central_noir" align="center">(Publicité)</p>
	</div>
</body>
</html>


Je ne sais plus quoi faire..et personne ne me répond sur les forums, alors je tente ma chance ici. J'espère vraiment que quelqu'un pourra m'aider Smiley decu
Merci d'avance upload/7691-Mozilla.JPG upload/7691-IE.JPG
merci bien, j'ai déjà lu tout ça et comme je l'ai déjà dit, ce n'est pas ça que je veux faire, je ne veux pas que tout le cadre soit avec des coins arrondis voyez plutôt : upload/7691-exemple.JPG
ninikkhuet a écrit :
merci bien, j'ai déjà lu tout ça et comme je l'ai déjà dit, ce n'est pas ça que je veux faire, je ne veux pas que tout le cadre soit avec des coins arrondis voyez plutôt : upload/7691-exemple.JPG


Il serait plus simple pour tous les membres du forum de dire ce que tu souhaites, plutôt que de décrire ce que tu ne veux pas.
je ne vois pas comment je peux être plus explicite qu'en mettant un dessin de ce que je veux et le code que j'ai déjà..
C'est pas clair dans ta formulation:
a écrit :
ce n'est pas ça que je veux faire, je ne veux pas que tout le cadre soit avec des coins arrondis voyez plutôt :


Et ensuite tu montres une image avec des coins arrondis. C'est cette image qui ressemble à ce que tu veux ?
ah oui excusez moi je vois l'ambiguïté dans ce que j'ai écrit Smiley ravi
c'est effectivement ce qu'il y a sur l'image précédente que je voudrais. J'ai fait une impression d'écran sous IE, ça fonctionne donc sous IE mais par contre sous Mozilla, la 2ème colonne du tableau ("A La Une") ne s'adapte pas à la largeur du tableau..J'espère que là c'est clair Smiley confused
Vu que l'on est sur une largeur fixe, c'est très simple à faire avec une seule image pour tout le haut, et ensuite une image de fond pour dessiner les bordures latérales (images PNG d'1px de haut, en repeat-y, par exemple).

Un petit exemple :
http://web.covertprestige.info/test/05-boite-avec-bordures-en-html-et-css.html

Ici, il s'agit de faire la même chose (avec des images différentes, bien sûr) mais sans la bordure du bas, ce qui permet de remplacer l'image milieu+bas par une image pour le milieu uniquement.
Le trait du bas pourra enfin être dessiné par une bordure CSS (border-bottom).

Utiliser un tableau pour quelque chose qui est finalement assez simple, c'est un peu dommage. Smiley cligne


PS : maintenant que j'y pense, le design voulu peut être fait ainsi :
<div id="milieu">
	<h2>À La Une</h2>
	<div class="contenu">
	... tout le contenu restant ...
	</div><!-- fin de div.contenu -->
</div><!-- fin de div#milieu -->

Et le CSS :
div#milieu {
	width: 500px;
	float: left;
}
div#milieu h2 {
	margin: 0;
	padding: 4px 20px;
	background: purple url(fond-arrondi.png) center top no-repeat;
	color: white;
}
div#milieu div.contenu {
	border: solid 1px purple;
}

Voilà, ça va ou bien l'image ne montrait pas toutes les subtilités du design à obtenir ? Smiley smile
Sujet clos
Aller à