float, innerHTML et Mozilla

float, innerHTML et Mozilla - HTML/CSS - Programmation

Marsh Posté le 12-06-2003 à 21:46:37    

je vous soumets mon probleme:
http://thesmilingface.free.fr/
sous mozilla 1.2
j'ecris un commentaire que je modifie au survol de quelques liens,
ou que je remplace par une image.
lors du deuxieme emploi de innerHTML, toute la page se decale vers le bas :(
si j'ote la declaration ->float: right;<- ça bug plus, mais le texte est pas au bon endroit ( logique :'( )  
 
onmouseover ou onmouseout:
document.getElementById('menuMain').innerHTML='mon texte';
les styles:
    div#menus {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    div#menuLeft {
        float: left;
        width: 49%;
    }
 
    div#menuMain {
        float: right;
        width: 49%;
    }
 
    div#dedicaces {
        padding: 10px;
        BORDER-TOP: #a0a0a0 1px solid;
        BORDER-LEFT: #a0a0a0 1px solid;
        BORDER-RIGHT: #000000 5px solid;
        BORDER-BOTTOM: #000000 5px solid;
    }
    div#menuMainLiens {
        padding: 10px;
        BORDER-TOP: #a0a0a0 1px solid;
        BORDER-LEFT: #a0a0a0 1px solid;
        BORDER-RIGHT: #000000 5px solid;
        BORDER-BOTTOM: #000000 5px solid;
    }

Reply

Marsh Posté le 12-06-2003 à 21:46:37   

Reply

Marsh Posté le 12-06-2003 à 21:56:34    

Reply

Marsh Posté le 12-06-2003 à 22:16:39    


 
Mr a des ameliorations a apporter ?
je suis toute ouie (vu ton cri, y a du boulot je presume)

Reply

Marsh Posté le 12-06-2003 à 22:45:27    

Heu... j'avoue ne pas trop savoir par où commencer :
 
- vérifie ton code au validateur
- crée des fonctions JavaScript pour ne pas avoir tout le code dans les onmouseover (ça c'est franchement illisible)
- crée des classes pour remplacer les styles en-ligne


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 12-06-2003 à 23:40:14    

- vérifie ton code au validateur
          j'ose pas, j'ai jamais osé [:thesmilingface]  
 
- crée des fonctions JavaScript pour ne pas avoir tout le code dans les onmouseover (ça c'est franchement illisible)
          c'etait deja fait ( http://81.56.83.34/ )
 
- crée des classes pour remplacer les styles en-ligne
        je comprends pas tres bien...ça va apporter koi les classes ?

Reply

Marsh Posté le 12-06-2003 à 23:51:51    

thesmilingface a écrit :

         j'ose pas, j'ai jamais osé [:thesmilingface]


Mais si, faut pas avoir peur. C'est peut être un peu dur la première fois mais après on s'habitue :whistle:

thesmilingface a écrit :

         c'etait deja fait ( http://81.56.83.34/ )


Bon c'est déjà mieux, mais tu as fait autant de fonctions que de texte à changer. C'est lourd. Tu devrais mettre le texte dans un tableau JS et puis ensuite, à l'aide d'une seule fonction, placer dans innerHTML l'extrait du tableau qui va bien.

thesmilingface a écrit :


        je comprends pas tres bien...ça va apporter koi les classes ?


Plus de lisibilité et plus de modularité. Au lieu d'avoir 50 fois :
 

style="padding-left:50px;"


 
Tu redéfinis les propriété pour l'élément <p> (si tous tes paragraphes partagent cette propriété)
 

p {
  padding-left: 50px;
}


 
Ou sinon tu crées des classes. Au lieu de :
 

<p style="padding-top:5px;padding-left:40px;padding-right:40px;padding-bottom:0px;">...


 
on a :
 

<p class="images">...
 
p.images {
  padding: 5px 40px 0px 40px;
}


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 13-06-2003 à 00:05:47    

j'ai 11740740974 erreurs, rien de grave, W3C compliant [:thesmilingface]  
le soucis c que le code Php n'est pas de moi, et l'html qui en resulte est loin d'etre W3C compliant
 
pour mes nombreuses fonctions, j'y ai pensé, mais je veux pas faire remonter mon texte dans les p ou img, reste plus qu'a passer un nombre ou un court texte en parametre d'une fonction...
 
les class , c pour les <p> !!! je comprends mieux, je voyais pas de koi tu parlais...bin, on peut les classifier meme si j'ai pas l'impression qu'on gagnera en lisibilité (tant que je ne l'utilise que sur une page...)
 
Note: ceci ne me fournit toujours aucune solution face  a mon probleme d'origine (ouep, j'etais un peu venu pour lui au depart  [:zatane] )

Reply

Marsh Posté le 13-06-2003 à 00:44:59    

thesmilingface a écrit :

j'ai 11740740974 erreurs, rien de grave, W3C compliant [:thesmilingface]  
le soucis c que le code Php n'est pas de moi, et l'html qui en resulte est loin d'etre W3C compliant


Tu peux déjà commencer à corriger ta partie à toi :o

thesmilingface a écrit :

pour mes nombreuses fonctions, j'y ai pensé, mais je veux pas faire remonter mon texte dans les p ou img, reste plus qu'a passer un nombre ou un court texte en parametre d'une fonction...


Oui, c'est ce que je disais :heink:

thesmilingface a écrit :

les class , c pour les <p> !!! je comprends mieux, je voyais pas de koi tu parlais...bin, on peut les classifier meme si j'ai pas l'impression qu'on gagnera en lisibilité (tant que je ne l'utilise que sur une page...)


L'attribut style c'est bien pour dépanner, mais le jour où tu voudras faire des modification ça sera lourd :o Et pour un lecteur comme (chiant donc) c'est beaucoup plus agréable à lire avec CSS et HTML séparé.

thesmilingface a écrit :

Note: ceci ne me fournit toujours aucune solution face  a mon probleme d'origine (ouep, j'etais un peu venu pour lui au depart  [:zatane] )


Bah, en fait tu n'as pas besoin de mettre #menuMain en flottant. Il suffit de le définir avec une bonne marge à gauche :
 

div#menuMain {
    margin-left: 50%;
}


 
Ça devrait mieux marcher ;)


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 13-06-2003 à 13:22:40    

ça marche nickel, probleme reglé
merci boss :wahoo:

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed