HTML validator? [RESOLU]

[GAUNCE]

modifier la hauteur de ligne fait déborder le contenu et devient trop grand....par contre pour l'ID, je suis preneur!..

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9) Gecko/2008052906 Firefox/3.0

[GAUNCE]

Merci Fabrice, quand on sait c'est facile.
J'ai plus d'erreurs.
Normalement donc validé W3C et CSS.
Je vais déjeuner...
Merci encore Fabrice.
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9) Gecko/2008052906 Firefox/3.0

[Fabrice.Tres.Net]

V'là comment je vois rapidos les choses:
il suffit de remonter le menu gauche!

[GAUNCE]

En modifiant strictement ce que tu as surligné:
Voila le résultat.

Je pense que la hauteur de ligne doit être égale à la moitié de l'image, soit 30px...autrement on a une image et demie en gros..

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9) Gecko/2008052906 Firefox/3.0

[GAUNCE]

Avec IE7, l'image descend et non avec Firefox?. J'ai oublié quoi?
Merci.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9) Gecko/2008052906 Firefox/3.0

[Fabrice.Tres.Net]

J'avais cru avoir posté ce code css (date d'hier) pouvant remplacer le tien.

Code : Tout sélectionner

* {padding, margin:0; border:none;}
/*efface certaines differences IE, FF*/

body {
background-position: left top;
background-repeat: repeat-y;
background-attachment: fixed;
background-image: url(gif-elementsPage/fonJuk.jpg);
}
#page {
background-position: center center;
background-repeat: repeat-y;
width: 1000px;
margin-right: auto;
margin-left: auto;
height: 1000px;
background-image: url(gif-elementsPage/1000gri.png);
}
#entete {
width: 900px;
margin-right: auto;
margin-left: auto;
text-align: left;
top: 20px;
background-color: transparent;
height: 133px;
margin-top: 25px;
}
#menu {
position: relative;
width: 900px;
margin-right: auto;
margin-left: auto;
padding-top: 1px;
height: 59px;
}
ul#menu_haut {
margin: 0 0 0 560pt;
padding: 0;
list-style-type: none;
}
ul#menu_haut li {
margin: 0;
padding: 0;
text-align: right;
}
ul#menu_haut li a {
background: transparent url(gif-elementsPage/esco.gif) no-repeat scroll 0 0 ;
text-indent: 1px;
text-decoration: none;
display: inline;
position: relative;
float: left;
width: 140px;
line-height: 30px;
color: #006600;
font-family: Arial Black;
font-size: 10pt;
}
ul#menu_haut li a:hover {
border: 1px solid #ff9977;
background: transparent url(gif-elementsPage/esco.gif) no-repeat scroll 0 -30px;
font-family: Arial Black;
color: #cc0000;
}
#menu1 {
height: 300px;
width: 250px;
margin-top: 35px;
margin-left: 50px;
float: left;
}
ul#menu1_gauche {
margin: 10px 0 0;
padding: 0;
list-style-type: none;
}
ul#menu1_gauche li {
margin: 0 0 5px;
padding: 0;
text-align: left;
}
ul#menu1_gauche li a {
background: transparent url(gif-elementsPage/newic.gif) no-repeat scroll 0 0 ;
display: block;
width: 160px;
line-height: 50px;
text-indent: 50px;
text-decoration: none;
font-family: Arial Black;
color: #3366ff;
text-align: left;
font-size: 1.2em;
}
ul#menu1_gauche li a:hover {
background: transparent url(gif-elementsPage/newic.gif) no-repeat scroll 0 -30px;
font-family: Arial Black;
color: #29a500;
}
#photo {
width: 580px;
height: 320px;
margin-right: 80px;
margin-left: 350px;
}
#piepage {
position: relative;
width: 900px;
height: 80px;
margin-right: auto;
margin-left: auto;
top: 20px;
margin-top: -20px;
}
#bienvenue {
color: #cc0000;
font-family: Arial Black;
font-size: 14pt;
text-align: center;
}
#infos1 {
font-family: Arial;
font-size: 13pt;
margin-top: 30px;
color: white;
}
#infos1 a {
font-family: Arial Black;
text-decoration: none;
color: white;
background-color: #959595;
font-size: 11pt;
}
#infos1 a:hover {
font-family: Arial Black;
color: #33cc00;
background-color: #3b3b3b;
font-size: 15pt;
}

[GAUNCE]

Je viens de remplacer exactement par le CSS que tu me donnes...voila, c'est exactement ce que je disais hier et que la capture te montrait...
si la haiteur de ligne, tu as mis 50 est supérieure à la hauteur de la moitié de l'image, donc 30, on voit une image et demie.
J'ai rechargé sur le serveur, regarde!...

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9) Gecko/2008052906 Firefox/3.0

[GAUNCE]

Bon, Fabrice m'a proposé une solution qui ne fonctionne pas et depuis, il a disparu?. Bon de toutes façons, ma demande était pourquoi l'image descend avec IE7 et non avec Firefox.
Puisqu'il n'y a pas desolutions, je vais clôturer le sujet qui a largement dérivé depuis la question initiale, même si in fine il était encore question de validation.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9) Gecko/2008052906 Firefox/3.0

[Fabrice.Tres.Net]

Les décalages proviennent très certainement d'une mise en page faite partiellement à coup de saut de lignes "<br>"!

[GAUNCE]

Avec ou sans <br> rien ne bouge!

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9) Gecko/2008052906 Firefox/3.0

[chinon37]

Je crains qu'avec tous ces styles internes, même une vachette landaise n'y retrouve pas son petit.
Le code de cette page est bien trop complexe pour l'objectif affiché...
Il faut structurer les styles dans une belle feuille css et supprimer tous les styles de la page html.
Et moi, la mise en page par tableau, j'y ai jamais rien compris.

Mais c'est un avis personnel qui n'engage que moi, ... et encore!

[GAUNCE]

On parle bien de cette page:
http://amichant.free.fr/essai.html
Il n'y a pas de tableaux , ou alors j'ai vraiment rien compris?!!

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9) Gecko/2008052906 Firefox/3.0

[chinon37]

OUpss!! Je regardais à partir du www de ta signature et donc la page d'accueil. 1 000 et une excuses.
Le code est nettement plus beau
Bon, le décalage de l'image sur IE est dû au décalage de l'élément du menu "partenaires".
Le décalage de l'élément du menu "partenaires" doit être dû au style interne sur l'élément de liste <li> :

Code : Tout sélectionner

<li style="text-align: right;">

Essaie de modifier en supprimant le style interne (alignement du texte à droite) afin d'avoir:

Code : Tout sélectionner

<li> <a
 style="margin-left: 25px;" href="/Partenaires.htm">Partenaires</a></li>

Résultat?

[Fabrice.Tres.Net]

On parle bien de cette page:
http://amichant.free.fr/essai.html
Il n'y a pas de tableaux , ou alors j'ai vraiment rien compris?!!

Oui dans cette page sous Kompozer, tu fais "Selectionner tou" par Ctrl A, puis Format > suprrimer tous les styles!

Cela aura pour effet de virer tous les styles non css

De plus il est possible de faire + simple: pour le menu de gauche tu as une div identifié menu1, tu n'es pas obligé d'identifier la list ul avec menu1_gauche... tu peux l'adresser directement par

Code : Tout sélectionner

#menu1 {
height: 300px;
width: 250px;
margin-top: 35px;
margin-left: 50px;
float: left;
}
#menu1 ul {
margin: 10px 0 0 20px;
padding: 0;
list-style-type: none;
}
#menu1 li {
margin: 0 0 5px;
padding: 0;
}
#menu1 li a {
background: transparent url(gif-elementsPage/newic.gif) no-repeat scroll 0 0 ;
display: block;
width: 120px;
line-height: 30px;
text-indent: 15px;
text-decoration: none;
font-family: Arial Black;
color: #3366ff;
font-size: 9pt;
text-align: left;
}
#menu1 li a:hover {
background: transparent url(gif-elementsPage/newic.gif) no-repeat scroll 0 -30px;
font-family: Arial Black;
color: #29a500;
text-align: left;
}

Pour le décalage sous IE, c'est probablement dû à la différence de calcul de la taille des boîtes! Il faut remettre le pdding et magin à 0 pour tous les éléments, Et laisser de l'espace à gauche et a droite des éléments en cas de dépassement.
Qu'en c'est possible, on évite de fixer la taille des éléments contenus et contenants, sinon à un moment cela risque de ne pas rentrer... donc passage en dessous ... c'est ton cas l'image ne tient pas à compter du menu (Largeur menu + largeur image > largeur conetenant) SOUS IE !

Edit: L'ami Chinon confirme ma supputation

[GAUNCE]

Popur Chinon:
Oui, j'ai supprimé cela, ça n'avait rien à y faire, pourtant j'ai regardé souvent et ça m'a échappé.
Mais ça n'a rien changé au problème!
Je passe à la soluce de Fabrice!...

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9) Gecko/2008052906 Firefox/3.0