[Résolu]Site pas beau sous Firefox et CSS !

[lordbdp]

Bonjour à tous,

Je tente de développer moi-même mon site. Au début j'étais parti sur du HTML avec des frames(http://www.e-central.fr), puis on m'a fortement conseillé de développer plutôt via des CSS afin d'améliorer le futur référencement du site, donc je me lance ! Sous ie, l'affichage se fait bien, mais sous firefox (que je viens d'installer et vraiment superbement mieu que ieueueueuh) ben c'est la cacatte complète. Il n'y a que sous opéra que presque tout tourne correctement (snif).

Mon soucis :
Quand je lance la page que je réalise en CSS (http://www.e-central.fr/test1.php) je me retrouve avec 2 barres de scroll horizontales, et la moitié de ma page visible (et je vous raconte pas quand je lance une validation CSS, la cata !).

Besoin d'un gros coup de main étant néophyte en CSS (en programmation même) !

Merci d'avance.

[calimo]

Salut,

Le problème viens de là :

Code : Tout sélectionner

#conteneur {
position: absolute;
width: 100%;
overflow: auto;
background-color:#FFFFFF;
}

Pourquoi l'avoir placé en position: absolute ? Ça s'enchaine dans l'ordre logique... enlève cette déclaration qui ne sert à rien.
Le problème vient aussi du width:100%. Comme tu es en mode de rendu "strict" grâce à ton doctype, Firefox mets une marge sur l'élément html. 8px je crois. Du coup à cause de ce width, ça doit se reporter sur l'autre côté pour avoir vraiment la même largeur que le bloc parent. Enlève-le aussi.
Au passage, profites-en pour ôter le overflow:auto. Laisse les navigateurs le prendre en charge tout seul
Et finalement, pourquoi avoir mis un background-color ? Non seulement il ne sert à rien, mais si tu tiens à le mettre il faut rajouter un "color:...". En effet il faut toujours les définir les deux pour éviter un conflit éventuel avec une CSS utilisateur.

Au final, enlève complètement cette déclaration, ça devrait très bien aller sans

Autre chose : fais gaffe à ton menu-déroulant ! Sans javascript, les sous-menus se superposent et deviennent totalement inaccessibles

Dernier conseil : essaye de simplifier le code au maximum. Quand je vois :

Code : Tout sélectionner

      <div id="haut">
          <div id="menuhaut">
            <ol id="menuhautlist">
...
</ol>
</div> 
</div> 

je me dis que tu as 2 div's en trop
Tu obtiendras l'effet exactement équivalent en regroupant les déclaration pour les 3 blocs dans celle du ol et en supprimant les 2 divs :

Code : Tout sélectionner

ol#menuhautlist {
height: 51px;
background: #D5DEEC url(namebar.jpg);
background-color:#CCCCFF;
width: 100%;
text-align: center;
padding: 0;
text-indent: 0;
list-style-type: none;	
font-family: Arial,Sans-Serif;
margin: 0 auto;
width: 100%; /* précision pour Opera */
border-bottom: 1px solid #ddd;
}

Tu y gagnes en simplicité à la fois dans le code HTML et dans le css. Ce n'est qu'un exemple, il me semble qu'il y a plusieurs autres endroits où tu peux faire pareil

[lordbdp]

1) J'ai fait les modifs pour la 1ère partie (un grand merci ) mais je n'ai pas compris concernant les Div
Il faut que je supprime le div en trop du HTML et que je le précise dans la CSS ?
Pourquoi tu appelles namebar.jpg alors qu'il se trouve déjà appelé dans #haut ?
(en clair j'ai pas compris cette partie )

2) J'ai mis la page devis pour voir ce que cela donne, avant les modifs de la CSS, elle s'affichait bien au milieu, maintenant elle ne s'affiche plus !
Alors qu'elle s'active sous ieeuuuuuuuuurk et sous Opéra...

Quand je disai que je débutai en CSS, c'est pas du bluf ! Lol

[calimo]

je n'ai pas compris concernant les Div
Il faut que je supprime le div en trop du HTML et que je le précise dans la CSS ?
Pourquoi tu appelles namebar.jpg alors qu'il se trouve déjà appelé dans #haut ?
(en clair j'ai pas compris cette partie )

En gros les div #haut et #menuhaut sont totalement inutiles.
Le but :

• Les supprimer du code HTML
• Fusionner leurs déclaration dans la CSS avec celles du ol#menuhautlist

Tu n'as plus qu'un seul élément HTML et une seule déclaration CSS au lieu de 3. Tout simplement dans le but de simplifier le code.

2) J'ai mis la page devis pour voir ce que cela donne, avant les modifs de la CSS, elle s'affichait bien au milieu, maintenant elle ne s'affiche plus !
Alors qu'elle s'active sous ieeuuuuuuuuurk et sous Opéra...

Quand je disai que je débutai en CSS, c'est pas du bluf ! Lol

Pardon ?
Tu parle de la page http://e-central.eucomsat.com/test1.php ? Elle fonctionne bien chez moi... Essaye de recharger complètement la page (si nécessaire en faisant Ctrl+F5)... ou alors je n'ai pas compris ?

[lordbdp]

Je me suis mal exprimé. Quand tu es sur la page, place-toi sur Boutiques, puis clique sur Devis...

[calimo]

Ok, tu devrais vraiment revoir ce menu parce que c'est totalement et complètement inaccessible...

Précision sur les commentaires en CSS : dans un fichier CSS, tu ne peux pas utiliser les commentaires HTML :

Code : Tout sélectionner

<!-- calques //-->

Tu dois utiliser les commentaires CSS :

Code : Tout sélectionner

/* calques */

Je ne sais pas pourquoi ça ne fait pas complètement tout planter ta feuille de style... ça devrait

Ensuite il va falloir commencer par revoir le code HTML de la page http://e-central.eucomsat.com/test1.php?page=2
Il y a trop d'erreurs, tu répètes le doctype, le body, le head et tout... on ne peut rien en faire. Commence par valider la page (n'hésite pas à demander si tu peines), à la structurer un peu logiquement (menu, contenu etc.), et ensuite on pourra voir ce qu'on peut faire, en CSS, pour faire ce que tu veux. Mais en tous cas c'est impossible de faire ça sur un code bancal comme ça

Utilise la même structure que sur l'autre page si possible. Une feuille de style est beaucoup plus efficace sur des pages cohérentes

[lordbdp]

Ben concernant <!-- calques //-->, c'est uniquement pour m'y retrouver dans ma feuille de style (vive les débutants, mdr). En le mettant /*calques*/, ça ne change rien ?

Concernant l'affichagede la page=2, il ne manque pas un morceau de code pour que les colonnes de droites et gauches ne puissent recevoir la page demandée ? Je croyai que c'est ce que j'avai fait, moi !

Pour le ol#menuhautlist, ben j'ai pas compris.. Je doit virer .menuhaut et .menuhautlist et je le remplace par ol#menuhautlist ?

Qu'est-ce qui ne va pas avec mon menu du haut (et mon sous-menu) ? Moi je trouve ça délire ! Nan ?

Pour les pages qui seront appelées je m'en chargerai après... Faut déjà que l'affichage au départ fonctionne....

[calimo]

Ben concernant <!-- calques //-->, c'est uniquement pour m'y retrouver dans ma feuille de style (vive les débutants, mdr). En le mettant /*calques*/, ça ne change rien ?

Si, ça change que c'est la syntaxe "correcte" pour CSS.
Comme je disais je me demande bien pourquoi le commentaire que tu as mis en style HTML n'a pas tout fait foirer. Normalement cette syntaxe est prohibée

Concernant l'affichagede la page=2, il ne manque pas un morceau de code pour que les colonnes de droites et gauches ne puissent recevoir la page demandée ? Je croyai que c'est ce que j'avai fait, moi !

Il ne manque pas un morceau, il y a tout un morceau en trop. En fait j'ai l'impression qu'il y a une page web à l'intérieur de la page web.

Au beau milieu de la page tu as une page qui recommance. Doctype, racine, head, body...

Pour les pages qui seront appelées je m'en chargerai après... Faut déjà que l'affichage au départ fonctionne....

Et pour ça il faut déjà que le HTML fonctionne. Dans la page test.php ça va bien, mais pas dans la page=2. Donc là tu as du boulot, je ne sais pas comment tu fais (include() php ?), mais il faut déjà obtenir un code HTML cohérent. Et ce avant de faire la mise en page (sinon tu es bon pour la recommancer à chaque nouvelle page...)

[lordbdp]

Pour les colonnes de droite et gauche, c'est corrigé : j'ai purgé à fond le code CSS. Maintenant l'affichage de la page demandée (dans cette exemple : 2) s'affiche bien au centre (pour Opéra, ie, et Firefox). Seul nouveau soucis, sous ie (et oui, saletée de Bill va !) : mon pied se trouve super bas alors qu'il devrait se coler sous les menus droite et gauche...Et le code de la partie pied n'a pas changé (clear:both), donc je cherche...

[lordbdp]

Je pense avoir trouvé...

Code : Tout sélectionner

#menudroit a:hover {
text-decoration: none;
}
p {margin: 0 0 10px 0;
}

Cette partie du code c'est modifiée quand quand j'ai fait le test de CSS de Firefox, seul hic, je n'ai pas fait de copie du code d'origine...

Je ne me rappel pas avoir mis la ligne de code

Code : Tout sélectionner

p {margin: 0 0 10px 0; 

.
Mais s'il m'a modifié le code, comment retrouver le bon code puisque c'était l'original et seul exemplaire...

[lordbdp]

Seul nouveau soucis, sous ie (et oui, saletée de Bill va !) : mon pied se trouve super bas alors qu'il devrait se coler sous les menus droite et gauche...Et le code de la partie pied n'a pas changé (clear:both), donc je cherche...

Je viens de trouver ! C'était dans la partie PHP, j'envoyai un N° de page vers un lien inexistant, je l'ai modifié et maintenant ça marhe !

Youpiiiii

Me reste plus qu'à simplifier le code selon calimo (mais j'attend qu'il m'explique plus facilement pour la 2eme partie)...

[calimo]

Hum... je t'ai dit de valider les pages d'abord.

Là tu répètes le doctype et toute la structure d'une page HTML à l'intérieur d'un autre page. Tu n'as pas le droit de faire ça, ce n'est pas conforme et tu t'exposes à des problèmes. Commence par enlever tout ce code en trop

[lordbdp]

Ben je termine dabord de modifier la 2eme partie comme tu me l'as dit

Code : Tout sélectionner

ol#menuhautlist { 
height: 51px; 
background: #D5DEEC url(namebar.jpg); 
background-color:#CCCCFF; 
width: 100%; 
text-align: center; 
padding: 0; 
text-indent: 0; 
list-style-type: none;    
font-family: Arial,Sans-Serif; 
margin: 0 auto; 
width: 100%; /* précision pour Opera */ 
border-bottom: 1px solid #ddd; 
}

puis je vais refaire la page appelée en retirant tout ce qu'il y a en trop... mais c'est normal qu'il y ait plein d'erreur dessus puisque c'est la page qui était appelée sur le site en HTML (avant que je bascule sous CSS+PHP).
Je ferait une vérification qu'après..Y'aura moins d'erreurs (enfin j'espère La preuve, y'a que 6 erreurs si tu faits la vérification de la page d'origine contre... 57 sur la page en développement ).

[calimo]

puis je vais refaire la page appelée en retirant tout ce qu'il y a en trop... mais c'est normal qu'il y ait plein d'erreur dessus puisque c'est la page qui était appelée sur le site en HTML (avant que je bascule sous CSS+PHP).

Alors dans ce cas il ne faut laisser que le contenu lui-même (même pas besoin d'un div pour l'entourer, il sera dans la page appelante).

Je te laisse faire

[lordbdp]

Dernier conseil : essaye de simplifier le code au maximum. Quand je vois :

Code : Tout sélectionner

      <div id="haut">
          <div id="menuhaut">
            <ol id="menuhautlist">
...
</ol>
</div> 
</div> 

je me dis que tu as 2 div's en trop
Tu obtiendras l'effet exactement équivalent en regroupant les déclaration pour les 3 blocs dans celle du ol et en supprimant les 2 divs :

Code : Tout sélectionner

ol#menuhautlist {
height: 51px;
background: #D5DEEC url(namebar.jpg);
background-color:#CCCCFF;
width: 100%;
text-align: center;
padding: 0;
text-indent: 0;
list-style-type: none;	
font-family: Arial,Sans-Serif;
margin: 0 auto;
width: 100%; /* précision pour Opera */
border-bottom: 1px solid #ddd;
}

Tu y gagnes en simplicité à la fois dans le code HTML et dans le css. Ce n'est qu'un exemple, il me semble qu'il y a plusieurs autres endroits où tu peux faire pareil

En fin de compte je peu utiliser ta simplification à chaque fois que je vois 2 Div juste l'un après l'autre ? C'est bien ça ? (Je suis en train de m'éclater grave avec CSS PHP, c'est vraiment mieu que le HTML....)