fafane84 | 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 .
>> 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
le code XHTML
Code :
- <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
Code :
- 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 deviens fou .
Merci d'avance.
@+ fafane84. Message édité par fafane84 le 04-07-2005 à 09:58:50 ---------------
Mon Topic de Vente Hardware
|