page non centrée dans IE (css ?) Résolu

Question

Bonjour,
voici une url de test : http://refok.free.fr/test/appart/index.html
sous FF, pas de problème (quoique un peu de fond de page qui apparait en bas de page), mais sous IE, alors là !!! encore une fois ça coince ... toute la page est collée à gauche et le background n'apparait qu'à droite ... super naZe !
il doit y avoir un blême dans la css mais lequel ?
alors : sos .... !
@mitiés
b g

Dalida · Answer

salut, essaie d'appliquer ça au plutôt qu'aux

: margin: 0 auto; width: 950px;

gryzzly · Answer

Hors sujet, mais remarque :

Le "google style" du menu n'est pas nécessairement bienvenu... Pour ma part, je serais "client", je me dirais : "quel prétentieux celui là, ca sent l'arnaque" et je passe mon chemin. Et cela uniquement sur la police utilisée dans la bannière.

Il n'en tient qu'à moi, bien évidemment.

Fin du hors sujet

EDIT

j'adore la nouvelle citation de Dalida. J'ai une impression de déjà lu :-D

bg62 · Answer

j'ai fait, la modif est en ligne 
mais sous FF cela ne semble rien changer
sous IE la page est maintenant en largeur plein écran, c'est l'espace entre la colonne de gauche et le texte de droite qui est augmenté ... et les images sont pixélisées à mort ...
donc , toujours pas ça ...
pour la (les) css:
actuelle :  http://refok.free.fr/test/appart/standing.css
avant modifs :    http://refok.free.fr/test/appart/standing_ancien.css

@+
b g

bg62 · Answer

salut ... il n'y a plus personne ?
@+
b g

Dalida · Answer

salut,

dites donc m'sieur Bg, z'avez pas peur de vous faire enguirlander par hasard ?
-:oD

et elle est où la balise <html> ???

allez hop, on me valide tout ça et on en reparle après !!!

gryzzly · Answer

Bonjour,

j'ai completement zappé hier soir... me suis lancé dans autre chose :s

pourquoi tu as mis les propriétés entre /*commentaire*/ ?

Pour centrer ton div#container, il devrait suffire de lui mettre les propriétés :

width:1000px;
margin-left:auto;
margin-right:auto;

et le tour est joué.

ton indentation ressort mal sur le source, tu as bien fermé tous les div ?

bg62 · Answer

voilà j'ai mis ceci:
.container {
background-color: #EDDDC7; 
width: 950px;
margin-left:auto;
margin-right:auto; 
}
ça bouge un peu quand même ... mais pas encore le top sous IE ... 
les marges de droite et gauche (avec le fond rayé) ne sont pas identiques ....!!!
@+
b g

gryzzly · Answer

Refait entierement ton indentation des div avec des TABULATIONS. Je suis sur qu'il y a un probleme : ligne 68-69 : < /div>, ils ne sont pas ouverts je suis persuadé qu'ils sont inutiles ! revoit toute la page comme ca.

Dalida · Answer

re, je confirme, il y a un soucis d'imbrication. tu as aussi des balises inutiles et ton DTD est incomplet (pas d'url), c'est ce qui fait tiquer IE. regarde cette version, j'ai nettoyé le code. il reste le contenu qui n'est pas nettoyé, il y a des

en trop pour les images et il faut virer les attributs 'center'. je n'ai pas le temps de refaire toute la mise en page mais si tu veux il te suffit de reprendre tes règles et de les adapter au nouveau contexte. avec cette version cela ne bougera plus nulle part, ai testé sous les deux IE, sous FF, sous Opéra et sous Safari ! seule petite imperfection le hack pour centrer le menu dans IE, tu dois pouvoir reprendre ta technique, moi je ne réussissais pas à l'appliquer, comme je n'ai pas le temps, j'ai pris ce hack. au fait, pour avoir un DTD complet j'ai pris dans mes pages, donc c'est du XHTML Strict.

gryzzly · Answer

arf pffff merdouille...

tu viens de faire la meme chose que moi. du coup j'ai passé 20 minutes a corriger le source pour rien :'(
pour la peine je pose pas le doublon.

gryzzly · Answer

arf non, pas tout de suite, jvais me motiver pour avancer sur le nouveau site.  Faut que je fasse le codage et que je continues la rédaction... ce qui mine de rien prend vachement beaucoup du temps....
Mais si j'ai le courage plus tard, je verrais ce que je peux faire si bg n'a pas avancé

( je profite qu'on soit en commité restreint pour aider google a passer chez moi : http://www.pandoo.org/ . c'est mal. va lire la charte. oui ok, je vais lire la charte)

bg62 · Answer

re ... grand merci à tous deux
je vais essayer de mettre la page de dalida à la place de l'index et voir ce que cela donne avec la css du site, car là le code est vraiment bien nettoyé, et surtout centrée dans IE
bon il y a des morceaux de css qui ne sont pas pris (surtout pour les images) je vais essayé de voir cela calmement, sinon je me remets à boire !!! an'bonn bière ...
venez rejeter un coup d'oeil en presque fin d'après-midi
autre chose : si l'un ou l'autre vous êtes intéressé par des liens (pur google ...) il y a un tas de possibilités >>> "MP" et on verra
@+
b g

bg62 · Answer

re ...
j'ai repris le code de dalida, et juste rétabli les liens en interne pour les images .... et je deviens chèvre !!!
voilà ce que cela donne : http://refok.free.fr/test/appart/index2.html
comprends plus ... là vous allez trop vite pour moi !!!
sos ...........
@+
b g

gryzzly · Answer

Récupère aussi la css : http://www.grainedekeupon.fr/ccm/sites/bg62/appart/standing.css

bg62 · Answer

ok j'ai récupéré ... mais là encore :
- les images ne s'affichent plus avec leur 'encadrement'
- le menu de droite prend en plus de la 'flèche' un 'point' de liste à puce ...
etc ...
hé ... ho !!! suis en bas-débit moi !!!
@+
b g

bg62 · Answer

.. et je me retrouve aussi avec 72 erreurs dans le validateur 
bon ça ok c'est à cause du doctype ... il vaudrait mieux que je remette celui d'origine ??? non ?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
mais s'il n'est pas "complet" que mettre en plus ?
@+
b g

gryzzly · Answer

Les images, dalida t'as dit qu'il avait désactivé... parce que c'était "dégoulisse" ce que tu avais fait. il faut reprendre en css externe (tu avait tout mis dans des balises)

les points : il faut remettre les propriétés : list-style a tes éléments, et la valeur:  none, pour désactiver l'interprétation naturelle du navigateur (point). seulement après tu remets la fleche (http://refok.free.fr/test/appart/images/small.gif)

etc, etc... du travail, toujours du travail :-)

Quant a la question du bas débit, tu sais que tu peux installer en local un serveur de type easyphp ? mamp ? wamp ? ... ou du moins apache, puisque tu travailles en html.

gryzzly · Answer

xhtml est très bien. pour corriger les erreurs : au lieu de > border="0" invalide → a mettre en css au lieu de > align="left" invalide → css class="left" et propriété css qui va bien target="_blank" invalide → on supprime tous les target, c'est a l'utilisateur de choisir ce qu'il veut faire de ses liens, par a toi de lui forcer la main et tu verras que ca ira beaucoup mieux ;-)

bg62 · Answer

re ... 
je crois que je commence à comprendre ... YES !!!
j'ai mis qq petites modifs et ajouts dans la css et un peu dans la page et retrouvé ce que je voulais faire au départ
plus que dur de vous suivre ... mais je pense que là cela doit aller !
si vous avez le temps de jeter un coup d'oeil !
mais vraiment pénibles ces problèmes entre navigateurs !!!!!   la rage .......
j'ai aussi changé l'image du header pour faire plaisir à Mr. gryzzly ....
reste une chose que je ne comprends pas : l'affichage des image, y compris celle dans le header est correct sous ff et plus que 'pixellisé" sous IE ce qui fait affreux !!! alors est-ce ma config qui me fait cet effet ? ou doit-on mettre une résolution supérieure pour IE (pour l'instant les images sont en jpg à 72 dpi) mais là je me pose des questions, je n'ai jamais eu ce problème pour d'autre sites .... vous les voyez comment, vous ces images sous FF et IE ???
@+
b g

bg62 · Answer

re ... voilà j'ai mis ceci dans le header:

pour faire prendre ces deux balises, par contre ce que je ne comprends pas c'est :

Les standing apparts du Mas des 2 cèdres

qui est 'caché' ... pas bien ça, non ? pour le reste je pense que cela tourne correct maintenant: http://refok.free.fr/test/appart/index2.html @+ b g

gryzzly · Answer

Bonjour, tu n'as pas le droit de mettre ALT dans un div. Line 41, Column 25: there is no attribute "ALT".

bg62 · Answer

oui j'ai vu sur le validateur ... et c'est ce que je disais à Dalida, j'ai vu une fois une réponse, mais ne la retrouve plus ...
mais alors, avec un appel d'image normal, pas de problème ...
ici l'image du header est dans la css , alors comment faire pour intégrer ces deux attributs ?
@+
b g

gryzzly · Answer

en mettant directement l'image, et non pas un background au div en css

++ je file voir mon employeur

bg62 · Answer

que changer dans la css alors ?
@+
b g

Dalida · Answer

salut, adieu les CSS, tu inclus une image dans le

.

bg62 · Answer

ok voilà ce que j'ai fait : /*h1 { margin:0; padding:0; height:147px; text-indent:-1000em; overflow:hidden; background-image:url(images/header4.jpg); background-position:0 0; background-repeat:no-repeat; }*/ pour la css et pour le haut de page au validateur c'est bon ! tu ne m'as pas répondu sur ton système de " h1 " avec du texte caché ... @+ b g

bg62 · Answer

par contre ici :
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Frefok.free.fr%2Ftest%2Fappart%2Findex2.html&profile=css21&usermedium=all&warning=1&lang=fr
j'ai des erreurs et des avertissements !!!
tu y comprends qq chose ???
@+
b g

Dalida · Answer

font-family:verdana,sans-serif,arial,helvetica;
il y a une virgule en trop au bout.
les autres doivent se corriger toutes seules.

pour les avertissements, pas la peine d'en tenir compte.
sauf si tu veux un rapport complètement clean, dans ce cas suis les indications.

bg62 · Answer

il me reste ceci:
  	 Propriété érronée : background-repeat  Trop de valeurs, ou valeurs non reconnues :  repeat-x repeat-y je le supprime complètement ?

bg62 · Answer

et j'aimerais essayer e mettre les logos de validation ... mais beaucoup plus petits .... où en trouver ?
@+
b g

Dalida · Answer

j'ai créer une version en texte pur, regarde en bas.

le "check" n'est pas affiché par IE, évidement&hellip;

pour le reste j'en suis assez content, l'affichage est proportionnel tu peux donc facilement définir la taille.
Gryzzly les a déjà repris.

bg62 · Answer

re ...
voici ce que je viens de remettre:
-css:

/* LOGOS W3C */
  div#footer ul li.footer-right  {
margin : 0 0 0 0.72em;
}
div#footer ul li.footer-right a.w3c {
font-family : arial, sans-serif;
font-size : 0.72em;
color : #0c479d;
padding : 1px;
background-color : #fff;
}
div#footer ul li.footer-right a.w3c:link, div#footer ul li.footer-right a.w3c:visited, div#footer ul li.footer-right a.w3c:hover, div#footer ul li.footer-right a.w3c:active {
text-decoration : none;
}
div#footer ul li.footer-right a.w3c span {
padding : 0 0.3em;
}
div#footer ul li.footer-right a.w3c span.spec {
background-color : #fc6;
color : #000;
}
div#footer ul li.footer-right a.w3c span span {
padding : 0;
font-size : 1.2em;
color : #2e8b57;
}

- html:

<li class="footer-right"><a href="http://validator.w3.org/check?uri=referer" class="w3c"><span>W3C<span>&#x2713;</span></span><span class="spec"> Valid HTML 4.01 Transitional </span></a></li>
				<li class="footer-right"><a href="http://jigsaw.w3.org/css-validator/check/referer" class="w3c"><span>W3C<span>&#10003;</span></span><span class="spec"> CSS 2.1 </span></a></li>

pas terrible ... doit me manquer encore qq chose !!!
@+
b g

Dalida · Answer

as-tu ajouté et adapté les CSS ?
div#footer ul li.footer-right a.w3c
{
font-family: arial,sans-serif;
font-size:.72em;
color:#0c479d;
padding:1px;
background-color:#fff;
}
div#footer ul li.footer-right a.w3c:link,
div#footer ul li.footer-right a.w3c:visited,
div#footer ul li.footer-right a.w3c:hover,
div#footer ul li.footer-right a.w3c:active
{
text-decoration: none;
}
div#footer ul li.footer-right a.w3c span
{
padding: 0 .3em;
}
div#footer ul li.footer-right a.w3c span.spec
{
background-color: #fc6;
color:#000;
}
div#footer ul li.footer-right a.w3c span span
{
padding:0;
font-size:1.2em;
color:#2e8b57;
}

Dalida · Answer

lol, on s'est croisés&hellip;

Dalida · Answer

tu n'as pas de

mais un

, faut adapter ! remplace 'div#footer' par 'div#bg'.

Dalida · Answer

en ligne c'est bon.
un peu d'espace entre les <li> et peut être marquer juste "HTML 4.01" et pis voili, voulou !

Page non centrée dans IE (css ?)

36 réponses

Discussions similaires

Newsletters