Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1738 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [CSS] Onglets + Cadre: probleme avec FF

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[CSS] Onglets + Cadre: probleme avec FF

n°1438009
zytrahus5
wait what?
Posté le 07-09-2006 à 00:48:20  profilanswer
 

Salut,
 
J'essaie de mettre en place un ensemble "Onglets + Cadre" en CSS.
J'ai globalement reussi a deux reprises pour IE, mais rien pour FF (et Opera)...

 

  • La premiere fois, j'ai fait ca sans m'appuyer de quoi que ce soit, juste avec les quelques regles de base du CSS. Resultat OK avec IE, du moins ca fait ce que je veux, mais avec FF (et Opera): pas moyen. Les coins ne se placent pas au bon endroit!


  • La seconde, j'ai utilise a la lettre la technique detaillee ici: http://pompage.net/pompe/portescoulissantes/ Je me sers de ce code comme "bordure haute" de mon cadre, a laquelle je viens ajouter le reste de mon code pour le cadre: cote gauche et droit en repeat-y, coin haut-gauche et droit, bordure du bas. Globalement, ca revient au meme que ce que j'avais fait dans ma premiere methode. Ca marche egalement tres bien sous IE, mais sous FF (et Opera) les coins se placent trop haut!!! Je ne vois pas quoi faire pour corriger ca.


Voici un screen qui visuellement explique le probleme:
 
http://stephen.mounioloux.free.fr/Forums/pb.PNG
 
 
Est ce qu'il est utile que je copie colle le code HTML et CSS de la partie onglet? Car c'est rigoureusement (au niveau du positionnement) le meme que celui du "tuto" que j'ai cite plus haut.
Si ca peut aider, dites le moi, je la copierais.
 
Voici le code que j'ai ajoute a la suite de ce div:
 
HTML:

Code :
  1. <div id=\"tabs_header\">
  2.    <ul>
  3.      <li><a href=\"#\">Onglet 1</a></li>
  4.      .......
  5.    </ul>
  6. </div>
  7. <div id=\"tabs_bottom_center\">
  8. <div class=\"tabs_content_left\">
  9. <div class=\"tabs_content_right\">
  10.   <div class=\"tabs_top_left\"><div class=\"tabs_top_right\"></div></div>
  11. <div id=\"tabs_content\">
  12. BLABLABLA / CONTENU DU CADRE
  13.    </div>   
  14. <div class=\"center_bottom_left\"><div class=\"center_bottom_right\"></div></div>
  15.   </div>
  16. </div>
  17. </div>


 
au niveau du CSS, <div id=\"tabs_header\"> prend 100% de largeur, flottant (comme dans l'exemple du tuto), il contient tous les onglets de la bordure superieure du cadre.
pour les CSS du dessous du cadre, voici ce que j'ai:
CSS

Code :
  1. #tabs_bottom_center {
  2.        background: url('../images/centre_bas.gif') center bottom repeat-x;
  3. }
  4. div.tabs_content_left {
  5.        background-image: url('../images/fond_gauche_centre.gif');
  6.        background-position: bottom left;
  7.        background-repeat: repeat-y;
  8.        padding-left: 6px;
  9. }
  10. div.tabs_content_right {
  11.        background-image: url('../images/fond_droite_centre.gif');
  12.        background-position: bottom right;
  13.        background-repeat: repeat-y;
  14.        padding-right: 6px;
  15. }
  16. div.tabs_top_left {
  17.        background-image: url('../images/tabs_top_left.gif');
  18.        background-position: top left;
  19.        background-repeat: no-repeat;
  20.        height: 8px;
  21.        margin-left: -6px;
  22. margin-top:-5px;
  23. }
  24. div.tabs_top_right {
  25.        background-image: url('../images/tabs_top_right.gif');
  26.        background-position: top right;
  27.        background-repeat: no-repeat;
  28.        height: 8px;
  29.        margin-right: -6px;
  30.        position: relative;
  31.        z-index: 10;
  32. }
  33. div#tabs_content {
  34. padding:2px;
  35.        width: 100%;
  36. }


 
 
 
Pour info: un cadre simple sans la bordure a onglet fonctionne tres bien avec le code du dessous. sous IE tout marche impeccable. le seul probleme que j'ai est ce probleme avec les deux coins mal positionnes dans Firefox  (et Opera, mais ca marche avec IE6 [:zytrafumay])
A vue de nez je dirais que le probleme est a cause du fait que la bordure du haut+onglets est un FLOAT :o
 
 
Une idee pour me depanner?
[:romf][:zytra]


Message édité par zytrahus5 le 07-09-2006 à 06:34:44
mood
Publicité
Posté le 07-09-2006 à 00:48:20  profilanswer
 

n°1438015
zytrahus5
wait what?
Posté le 07-09-2006 à 06:33:46  profilanswer
 

Petit edit: J'ai teste avec Opera, et j'ai exactement la meme reaction qu'avec Firefox...


---------------
http://www.zytratech.com

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [CSS] Onglets + Cadre: probleme avec FF

 

Sujets relatifs
[Résolu)]Problème affectation chaine de caractère[XML] Problème pour lire l'attribut xml:lang d'un élement
Problème création champ | WampserveurPetits probleme d'un debut de projet SDL
[Business Objec (webi)], probleme de requete LIKE '%blabla%'.Problème avec des ocx
Problème avec ma comboboxpositionnement cadre css
problème RewriteBase et répertoire [url rewriting][c#] [1.1] Problème de directoryInfo
Plus de sujets relatifs à : [CSS] Onglets + Cadre: probleme avec FF


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR