Dernière soumission

[Lurch]

Je regarde ton css et j'y vois pas mal de positions absolues encore.

Pour les blocs qui viennent directement dans le bloc "page", essaie de les mettre en relatif.

Et le script js en début de ta page ? c'est pour quoi ? ce n'est pas le truc qu'il es poposé dans l'article que l'on nous a communiqué ? Si oui, ça ne convient peut-être pas avec ma solution. [Edit : j'ai vu c'est pour le menu]

Un conseil :pour t'y retrouver dans tes blocs quand tu testes ta page, pense à les colorier d'un fond (ou mettre des bordures colorées) provisoirement. Je fais comme ça et on voit mieux la place de chaque bloc et ses limites.

Edit : Je regarde de + près ton css. Effectivement, c'est un peu carabistouillé ! Bon, je t'ai arrangé le .page, ton logo ne va pas du tout, enfin je te donne le truc un peu corrigé tout à l'heure.]

[Denis]

Je veux pas faire mon malin, mais je considère que tu devrais minimalement corriger les erreurs de HTML dans les pages avant de le lancer. En réduisant le nombre d'erreurs, tu aurais ainsi moins de chance de vivre des différences d'interprétations d'un navigateur à un autre.

http://validator.w3.org/check?verbose=1&ur...itable.free.fr/

Comme je constate que tu as fait l'effort de soigner ta CSS, je me dis que tu pourrais en faire autant pour ton HTML.

Tu pourrais aussi améliorer l'accessiblité de tes fichiers également. Déjà, en ajoutant des alt, en respectant la grammaire du niveau de HTML choisi, en n'utilisant pas d'éléments HTML dépréciés et en identifiant la langue naturelle du document, tu aurais fais un grand pas dans la bonne direction. Rajoutes à cela un respect de la sémantique HTML (utiliser le meilleur élément HTML pour remplir le rôle que tu lui donnes) et tu aurais en main de très bonnes bases pour optimiser ton rendement en indexation.

[Gribouille26]

Oui, oui,

je sais/fais tout ça, mais en même temps et avec ce pb, c'est pas facile...

Je m'égare, parfois....

Lurch: j'essaye d'enlever les position:absolute, mais j'ai du mal, tout se déplace!!!

[Lurch]

Normal elle est un peu carabistouillée ta structure de page...

Je ne peux pas t'envoyer les fichiers sans ton e-mail (je ne crois pas que l'on puisse uloader avec les MP)

[Gribouille26]

Je simplifie: ici pour tests

[Lurch]

Et tu trouveras ta page et ton css corrigés ICI

Bon, il te restera à faire des choses mais le footer est bien en bas et je t'ai restructuré tout ça [Et 1 gros camion-citerne de lait-fraise pour moi ! ]

[Gribouille26]

Je commande le camion et je m'y met....

Merci

[edit] le camion est en route, mais je n'arrive pas à l'adapter à ma page...

[Lurch]

Nom d'une cigogne déplumée !

Si c'est cette page que tu n'arrives pas à faire tourner, c'est normal !

Je t'ai donné la page corrigée et tu ne l'utilises pas (tu n'avais plus qu'à enregistrer la page "index.html" et la renommer en "pomotion02.htm" , y replacer ton menu et faire pareil pour le css).

Ta page a une mauvaise structure car tu ouvres un bloc principal, <div class="page"> et à l'intérieur tu as mis :

1 - ton menu <div class="menu">....</DIV>

2 - un paragraphe de texte <p class="argantxt1">

puis un autre paragraphe de texte <p class="argantxt3">

et ainsi de suite jusqu'à... <p class="argantxt5">

5 paragraphes entrés dans le bloc principal, avec la balise < class="xxx"> c'est à dire que tu forces chaque paragraphe à se comporter comme un bloc avec le <p>. Mais pourquoi n'utilises-tu pas le <div> ????

C'est fait pour ça !

Voilà ce que donne la 1ère partie de ton texte selon ta construction :

<p class="argantxt1">

Le projet <b>Solid'Argan</b> a vu le (...) dérivés de l'arganier. </p>

<p class="argantxt2">

L'arganeraie, forêt poussant (..) vie des producteurs.</p>

PLus loin, l'image qui doit se trouver à gauche du texte :

<img class="foto01" src="/foto/Arganeraie.gif" alt="Arganeraie">

Et le CSS correspondant :

.argantxt1 {

position:absolute;

margin-left:50px;

margin-top:180px;

width:700px;

}

.argantxt2 {

position:absolute;

margin-left:300px;

margin-top:260px;

width:420px;

}

.foto01 {

position:absolute;

margin-left:50px;

margin-top:250px;

width:200px;

}

Tout en absolu, "forçant" les positions, sans que rien ne soit ordonné dans un même bloc. C'est plus rationnel de faire : un paragraphe + l'image qui va avec = un même bloc. [ <div class"paragraphe1"> texte + image</div> ]

Et, avec "float" tu cales ton image à droite ou à gauche tu texte.

Sinon, même un verre de lait n'y retrouvera pas sa fraise !!

Je t'avais refais le même passage ainsi :

<div class="paragr01">

<img class="foto01" src="/foto/Arganeraie.gif">

Le projet <b>Solid'Argan</b> a vu le (...) dérivés de l'arganier.

<p>

L'arganeraie, forêt poussant (...) vie des producteurs.

</p>

</div

Comme tu vois, ici tu as dans un même bloc le texte et l'image.

Le CSS qui correspond :

.paragr01{

padding-top:5%;

}

.foto01{

padding-right:5%;

float:left;

width:200px;

height:174px;

}

.paragr01 donne les paramètres du bloc, ici uniquement un espace en haut de 5% (pas besoin de plus !)

.foto01 donne le reste :

"float:left" et "width:200px" indiquent que l'image doit se coller sur le bord gauche du bloc (paragr01) et occuper la surface à droite sur une longueur de 200 pixels (longueur de l'image)

"padding-right:5%" indique qu'il y a un espace de 5% qui doit rester vide à droite de l'image.

"height:174px" indique que la hauteur de l'image est de 174 pixels.

Pourquoi dans ce cas il n'est pas besoin d'indiquer les hauteur et largeur du bloc dans .paragr01 ? Parce que c'est la taille de l'image qui importe (c'est le seul objet qui n'est pas flexible dans ce bloc). En fait, le bloc va prendre la hauteur de l'image (174px) sauf si le texte est trop long. Dans ce cas, le bloc prenda la hauteur qu'il faut et, si tu veux que des lignes de texte ne viennent pas se coller à gauche, sous l'image, tu peux jouer avec "padding-bottom" dans les attributs de style de l'image. Ainsi tout le texte sera aligné sur une même marge (à 5% du bord droit de l'image). Ce n'est pas le cas ici, mais c'est le cas pour le paragraphe suivant dans ta page.

Mais, le plus important, tu vois bien qu'avec cette construction EN RELATIF et avec des % tu te moques en fait des mensurations du bloc. Le texte s'installe automatiquement dans la place qui rese libre. Et ce, même en redimensionnant la fenêtre du butineur.

Toute ta page dois être construite ainsi. De la même façon, J'avais mis le logo dans un bloc (.titre je crois) mais sans "float" puisque le logo doit être centré.

Mais AUCUN des blocs que je t'ai proposés n'est en position absolue. Et ainsi ton footer trouve sa place ans aucun problème.

Si avec tout ça, tu n'y arrives pas, je n'ai plus qu'à prendre le train pour t'aider mais très grosse facture de lait-fraise en vue !!! [ on y ajoutera une bouillabaisse]

[Gribouille26]

Après d'énormes efforts, je suis parvenue à ce résultat.

Parfait sous Mozilla!

Mais sous IE, le menu est completement décallé...

[Lurch]

Très sincèrement content de voir enfin ton footer à sa place !

Pour le menu la réponse est dans ton css :

div.menu {

position:absolute;

height:20px;

margin-left: 2%;

margin-right: 2%;

width: 96%;

top:110px;

z-index:99;

}

Cherche un petit peu, tu ne vois pas l'erreur ???

[Gribouille26]

Je suppose que tu veux parler de la position:absolute du menu....

Mais, j'ai essayé!!! et si je l'enleve, tout le contenu en-dessous du menu redescend à chaque ouverture de sous menu!

[Monique]

Bonjour,

Aucune image ne s'affiche

et le bloc principal se place en haut de la page... résultat, le menu en position absolue se superpose au contenu.

Ce problème disparaît en ajoutant height:120px; dans la classe .titr

[Gribouille26]

Merci Monique!!

Maintenant, le contenu ne descend plus à chaque ouverture de sous-menu.

Mais, mon menu reste toujours très décalé sur IE...

Et si j'enleve le position:absolute de la div.menu, le menu est bien centré sur IE et Mozilla, mais le contenu recommence à descendre avec les sous-menus!!!

Please, aidez-moi!! Je ne sais plus que faire avec ce site....

[Gribouille26]

C'est pas possible de faire un site compatible avec ce qu'on veut???

[Lurch]

Bon sur mon écran sous IE, ton menu est à la bonne hauteur mais le seul problème est qu'il n'est pas centré.

Heu... ça sert à quoi déja ça dans le div.menu ?

z-index:99;

[Gribouille26]

Le seul et dernier probleme, mais pas des moindre!

Ca sert à faire passer le menu au-dessus de tout....

[Monique]

Bonjour Gribouille,

Fais un essai en plaçant le bloc "menu" hors du bloc "page"... sans garantie

[Gribouille26]

Déjà essayé!!

Ca mettait le menu tout en haut de la page et de changeait rien au contenu qui descend...

[Lurch]

une idée, je n'ai plus sous les yeux tes ficheirs donc, de mémoire :

Ton menu est dans un bloc "menu" OK.

Un truc qui me tititlle le neurone 21 584, celui qui est juste à droite du lobe gauche :

Mets ton bloc menu en relatif (en fait ne précise rien. vire le top:...; et colle-lui un height un peu délirant pour voir s'il repouse tout le texte (qui est en relatif ?) en bas : Si oui, c'est que pour le moment ton height est trop faible (par rapport au menu qui se déroule ) + le problèème de l'absolute.

(Monique attends avant de me gronder on ne sait jamais ).

[Gribouille26]

Oulàlàaaaa...!!!!!!

Je crois que j'ai tout interêt à m'acheter des vaches....

Regarde: là

CA MARCHE!!!!!!

Je ne sais vraiment pas comment te dire merci (bah, tiens, je viens de le faire.... ), Lurch.

Félicite ton neurone! Il marche super bien...

Et à toi aussi Monique...

Super génial!!! Me reste plus qu'a trouver la bonne hauteur.

[Lurch]

Oulàlàaaaa...!!!!!!

Je crois que j'ai tout interêt à m'acheter des vaches....

Meeeuuuhhh non ! (Quoique pour le lait-fraise, ça aide)

Regarde: là 

CA MARCHE!!!!!! 

Je vois : pour mon écran, il reste un petit problème de longueur (ach !) qui fait que le @ du menu (à droite) se pose à gauche sous le menu... Ta barre de menu, il faut un peu la raccourcir et ce cera cool !

Je ne sais vraiment pas comment te dire merci

[no comment]

pour la persévérance !!!

Note :

Tu vas te ruiner en lait fraise...

[Gribouille26]

Je vois : pour mon écran, il reste un petit problème de longueur (ach !) qui fait que le @ du menu (à droite) se pose à gauche sous le menu... Ta barre de menu, il faut un peu la raccourcir et ce cera cool !

C'est pas possible!

Non, je refuse. Plus de pb!

Tu as quoi comme définition, navigateur?

Je ne vois pas le pb que tu me dis, ni sous IE, ni sous Mozilla...

Et je ne vois pas d'où ça peut venir, car tout mon menu est en % (sauf la hauteur)!

Bravo à TOI pour la persévérance!

Tu vas te ruiner en lait fraise...

C'était pour ça les vaches....

[Lurch]

MsIe 6 sur PC en 1024x768.

Mais... Ton menu n'est pas un chouilla en DHTML ou un truc comme ça ? Si oui, non seulement tu as ton bloc menu (et ses n'enfants) qui gère les dimensions mais probablement dans le "script" DHTML ou autre, il y a une ligne qui gère la longueur de chaque item du menu : tu me raccourcis ça et ça devrait coller (ou alors c'est le delco.... )

[Lurch]

div.menu li.disneuf {

float:left;

width:19%;

}

div.menu li.quatorze {

float:left;

width:14%;

}

div.menu li.douze {

float:left;

width:12%;

}

div.menu li.quatre {

float:left;

width:4%;

}

Sur cet extrait du css, on voit que tu alloues une taille différente à chaque item du menu (je suppose du fait de la différence de longueur des textes). C'est là que le truc cloche à mon avis. Essaie de les réduire. Sur mon écran, en tout cas, tu as largement la place pour entrer les textes du menu dans des cases plus petites.

Ces blocs sont en "float" ce qui est bien mais, de ce fait, chacun s'étale vers la droite et le dernier passe à la ligne suivante, sur mon écran. Tu devrais peut-être fixer la même taille pour tous en te basant sur la longueur minimum que tu peux donner à l'item le + long (information, je pense). Je ne sais pas si c'est bien clair...

[Gribouille26]

C'est le menu D'alsacréation...

DHTML, je sais pas trop!? Je crois pas.

Tout ce qui le compose est sur la page.

La même config avec IE 5.5, et je vois rien..

C'est un peu fatiguant tout ces pb! Déjà que quand je vois le pb, je n'arrive pas à le résoudre! Alors, si je ne le vois même pas!!!