28220 sujets

CSS et mise en forme, CSS3

[Résolu] Encadrement d'un texte par des images, probleme d'affichage

Bonjour,

Voilà, j'ai pour projet de faire un site web, j'avais déjà fait une page il y a longtemps (avec des frames Smiley confused ), et depuis, je me suis essayé à la mise en page à l'aide de tableaux, ce que j'ai trouvé bien pratique...

Mais voilà, depuis peu, j'ai découvert le Xhtml et le CSS, donc je dois apprendre de nouvelles bases.
Pour la mise en page en elle-même, je pense pouvoir me débrouiller (en plus, c'est vrai que c'est plus clair et plus pratique d'utiliser le CSS, je trouve), mais j'ai un probleme afin de faire des menus encadrés par des images.
Du coup, j'ai trouvé la page de LJ-Web (ainsi que alsacreations, mais je voudrais utiliser des images pour le haut, le bas...etc..) via google :
http://ljouanneau.com/standards/css/cadre/

Je m'y suis donc essayé, mais voilà, j'ai un probleme :
Mon petit 'menu' s'affiche correctement avec Firefox, mais pas avec IE...alors que l'exemple sur LJ-Web est ok sur les 2 navigateurs...
Voici ce que çà me donne :
Avec IE :
http://img335.imageshack.us/img335/3487/ie9wp.jpg

Avec Firefox :
http://img335.imageshack.us/img335/3341/fire1kb.jpg

(le résultat se trouve ici : http://membres.lycos.fr/dakysto/essaicadre/essai.html et le fichier CSS : http://membres.lycos.fr/dakysto/essaicadre/cadre.css )

Si quelqu'un a une idée du pourquoi du comment...d'avance merci

dakysto

edit: voici mon code :
XHTML :
<body> 
<div class="fenetre">
	<div class="gauche">
		<div class="droite">
			<div class="haut">
				<div class="haut-gauche"></div>
				<div class="haut-droit"></div>
			</div>
			<div class="contenu">
			<p>Lien 1<br />Lien 2<br />Lien 3</p>
			</div>
			<div class="bas">
				<div class="bas-gauche"></div>
				<div class="bas-droit"></div>
			</div>
		</div>
	</div>
</div>
</body>



CSS :
body
{
background-color: rgb(0, 0, 51);
color: rgb(102, 153, 204);
}
.fenetre
{
width:20%;
}
.gauche, .droite
{ 
background-repeat:repeat-y;
} 
.haut, .bas, .haut-gauche, .haut-droit, .bas-gauche, .bas-droit
{ 
height:15px;
}
.haut-gauche, .haut-droit, .bas-gauche, .bas-droit
{
width:15px;
}
.haut-gauche, .bas-gauche
{
float:left;
}
.haut-droit, .bas-droit
{
float:right;
}
.gauche
{
background-image: url("gauche2.jpg");
width:100%;
background-color:rgb(0, 0, 102);
} 
.droite
{
background-position:right;
background-image:url("droit2.jpg");
}
.haut
{
background-image: url("haut2.jpg");
}
.haut-gauche
{
background-image: url("haut-gauche2.jpg");
}
.haut-droit
{
background-image: url("haut-droit2.jpg");
}
.contenu
{
padding-right: 15px;
padding-left:15px;
text-align:center;
} 
.contenu P
{
MARGIN: 0px;
}
.bas
{
background-image: url("bas2.jpg");
}
.bas-gauche
{
background-image: url("bas-gauche2.jpg");
}
.bas-droit
{
background-image: url("bas-droit2.jpg");
}


edit...encore et toujours !
Après avoir lu les règles du forum, j'ai édité mon afin de fournir mon code (plutot que les liens), à l'aide des balises appropriées...
Et là, j'ai enfin fini de lire la FAQ (oui, désolé, je m'acharnais sur mes quelques lignes CSS afin de trouver une autre façon d'afficher mon menu ou de trouver la solution de mon probleme) : résultat, j'ai trouvé la réponse à ma question dans la FAQ (utilisation des bordures pour cerner le probleme, puis 2 font-size à 1px...)

Donc voilà, désolé d'avoir posté pour rien, et merci pour votre aide (et votre FAQ va beaucoup me servir !!), je reste pas loin en cas de probleme, et j'espere pouvoir aider plus tard à mon tour.
Modifié par dakysto (19 Oct 2005 - 19:02)
Sujet clos
Aller à