28220 sujets

CSS et mise en forme, CSS3

Problème d'affiche d'un cadre 3D

Salut à tous !!!

J'ai réussi à faire un cadre totalement étirable avec bords 3D, mais un soucis persiste avec le haut et le bas du cadre.

Il s'affiche parfaitement sous IE 5.5 et IE 6 (incroyable, non ? ), mais pas sous Firefox Smiley cavapa .

>> Voici le lien <<

A noter que j'ai fait une barre de menu et que le problème est identique.

J'ai encore dût loupé quelquechose Smiley fache

le code XHTML 
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor,  www.pspad.com">
 
<title></title>
<link rel="stylesheet" type="text/css" media="screen" href="style.css">
</head>
<body>

 <div id="haut">
 <div id="bordGhaut"></div><div id="bordhaut"></div><div id="bordDhaut"></div>
 </div>
 <div id="bordG">  
   <div id="bordD">  
     <div id="contenu">
     essai de cadre
     <br />avec bordure
     <br />3D ombrée
     <br />étirable
     <br />verticalement et horizontalement  <br /><br /><br /><br /><br /><br />
     </div>
   </div>
 </div>
 <div id="bas">
 <div id="bordGbas"></div><div id="bordbas"></div><div id="bordDbas"></div>
 </div>

 <br /><br /><br /><br /><br /><br />
   <div id="header">
   <span id="hautG"></span>
   <span id="hautM"></span>
   <div id="liensHeader">
     <a href="#">lien1</a> -
     <a href="#">lien2</a> -
     <a href="#">lien3</a>
   </div>
 </div>
</body>
</html>


le code CSS 
body {background-color:#E4EBF3; margin:10px;}

img
	{
		border: 0px;
	}
/*#bordG
	{
		float:left;
   background-image:  url(MarTiuSWeb/fichiers/00.jpg);
		background-repeat: repeat-y;
	}
#bordD
	{
	  float:right;
		background-image:  url(MarTiuSWeb/fichiers/00.jpg);
		background-repeat: repeat-y;
	}*/

#bordG
{
/*width: 99.9%;*/
width: 100%; /* par exemple */
margin: 0px auto;
padding: 0;
background-image: url(images/gauche.jpg);
background-repeat: repeat-y;
background-position: left;
}
#bordD
{
width: 100%;
margin: 0;
padding: 0;
background-image: url(images/droite.jpg);
background-repeat: repeat-y;
background-position: right;
}
	
#contenu
	{
   width: auto;
		margin-left: 50px;
		margin-right: 50px;
		padding-left:200px;
		background-image: url(images/centre.jpg);
		background-repeat: repeat;
	}
#bordGhaut, #bordGbas {width: 5%; height:50px; margin: 0; padding: 0; display: inline; background-position: left;}
#bordDhaut, #bordDbas {width: 5%; height:50px; margin: 0; padding: 0; display: inline; background-position: right;}
#bordhaut, #bordbas {width: 90%; height:50px; margin: 0; padding: 0; display: inline; background-repeat: repeat-x; background-position: left;}
#bordGbas {	background-image: url(images/angleGB.jpg); }
#bordDbas {	background-image: url(images/angleDB.jpg); }
#bordbas {background-image: url(images/bas.jpg);}
#bordGhaut {	background-image: url(images/angleGH.jpg); }
#bordDhaut {	background-image: url(images/angleDH.jpg); }
#bordhaut {background-image: url(images/haut.jpg);}	
#haut, #bas {margin:0; padding:0; width:100%; height:50px; display: inline; }	
	
	
	
#header
{
width:auto;
height:25px;
margin-left:10px;
margin-right:10px;
background-image: url(images/hautD.jpg);
background-repeat: repeat-x;
border-left: 1px solid rgb(177,177,177);
border-right: 1px solid rgb(177,177,177);
border-bottom: 1px solid rgb(177,177,177);
}
#liensHeader {
position:relative;
top:4px;
left:60px;
display: inline;
text-align:center;
width:auto;
margin-top:10px;
margin-left:10px;
margin-right:10px;
}
#liensHeader a {text-decoration:none;}
#liensHeader a:hover {text-decoration:underline;}
#hautG
{
width:70%;
background-image:  url(images/hautG.jpg);
background-repeat: repeat-x;
}
#hautM
{
width:38px;
background-image:  url(images/hautM.jpg);
}
#hautD
{
width:auto;
margin-left:0px;
margin-right:0px;
background-image:  url(images/hautD.jpg);
background-repeat: repeat-x;
}

Pouvez-vous m'aider, çà fait 2 jours que je suis dessus, je bloque sûrement sur un détail, mais je devient fou Smiley mur .

Merci d'avance.

@+ fafane84.
Modifié par fafane84 (04 Jul 2005 - 00:21)
En fait, ça ne fonctionne que partiellement sur IE Smiley ohwell

Essais diffèrentes tailles de fenêtres pour voir le carnage Smiley decu

Va falloir revoir le tout...
Modifié par Stephan (04 Jul 2005 - 00:16)
Salut,

oui je sais j'avais remarqué qu'en basse résolution çà déconnait, mais bon vu le problème d'affichage avec Firefox qui me préoccupe beaucoup, je ne me suis pas trop focalisé là dessus.

En ce qui concerne l'affichage de Firefox, tu as une idée ?
Sujet clos
Aller à